1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
3
4import { VerticalBox } from "../common/layout.slint";
5import { TextButton } from "./button.slint";
6import { MaterialPalette, MaterialFontSettings, Icons } from "styling.slint";
7
8import { Date, DatePickerBase } from "../common/datepicker_base.slint";
9export { Date }
10
11export component DatePickerPopup inherits PopupWindow {
12 in property <string> title: "Select date";
13 in property <Date> date <=> base.date;
14
15 callback canceled();
16 callback accepted(date: Date);
17
18 width: 360px;
19 height: 524px;
20 close-policy: PopupClosePolicy.no-auto-close;
21
22 background-layer := Rectangle {
23 width: dialog.width;
24 height: dialog.height;
25 background: MaterialPalette.surface-container-high;
26 border-radius: 28px;
27 }
28
29 dialog := Dialog {
30 padding: 8px;
31
32 base := DatePickerBase {
33 title: root.title;
34 style: {
35 border-brush: MaterialPalette.border,
36 vertical-spacing: 8px,
37 horizontal-spacing: 4px,
38 calendar-style: {
39 spacing: 8px,
40 delegate-style: {
41 font-size: MaterialFontSettings.body-large.font-size,
42 font-weight: MaterialFontSettings.body-large.font-weight,
43 foreground: MaterialPalette.foreground,
44 state-brush: MaterialPalette.state-default,
45 background-selected: MaterialPalette.accent-background,
46 foreground-selected: MaterialPalette.accent-foreground,
47 state-brush-selected: MaterialPalette.state-secondary,
48 border-color-today: MaterialPalette.accent-background,
49 foreground-today: MaterialPalette.accent-background,
50 state-brush-today: MaterialPalette.state-tertiary,
51 }
52 },
53 icon-button-style: {
54 foreground: MaterialPalette.foreground,
55 state-brush: MaterialPalette.state-default,
56 icon-size: 12px,
57 },
58 current-day-style: {
59 font-size: MaterialFontSettings.headline-large.font-size,
60 font-weight: MaterialFontSettings.headline-large.font-weight,
61 foreground: MaterialPalette.foreground,
62 },
63 title-style: {
64 font-size: MaterialFontSettings.label-medium.font-size,
65 font-weight: MaterialFontSettings.label-medium.font-weight,
66 foreground: MaterialPalette.foreground,
67 },
68 previous-icon: Icons.arrow-back,
69 next-icon: Icons.arrow-forward,
70 drop-down-icon: Icons.arrow-drop-down,
71 input-icon: Icons.edit,
72 calendar-icon: Icons.calendar,
73 selection-button-style: {
74 foreground: MaterialPalette.foreground,
75 state-brush: MaterialPalette.state-default,
76 icon-size: 10px,
77 font-size: MaterialFontSettings.label-large.font-size,
78 font-weight: MaterialFontSettings.label-large.font-weight
79 }
80 };
81 }
82
83 TextButton {
84 text: @tr("Cancel");
85 dialog-button-role: reject;
86
87 clicked => {
88 root.close();
89 root.canceled();
90 }
91 }
92
93 TextButton {
94 text: @tr("OK");
95 enabled: base.ok-enabled();
96 dialog-button-role: accept;
97
98 clicked => {
99 root.close();
100 root.accepted(base.get-current-date());
101 }
102 }
103 }
104}
105