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 { Time, TimePickerBase } from "../common/time-picker-base.slint";
5import { VerticalBox } from "../common/layout.slint";
6import { IconButton, TextButton } from "./button.slint";
7import { MaterialPalette, MaterialFontSettings, Icons } from "styling.slint";
8
9export { Time }
10
11
12export component TimePickerPopup inherits PopupWindow {
13 in property <bool> use-24-hour-format <=> base.use-24-hour-format;
14 in property <string> title: "Select time";
15 in property <Time> time <=> base.time;
16
17 callback canceled();
18 callback accepted(/* current-time */ Time);
19
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 := TimePickerBase {
33 title: root.title;
34 style: {
35 foreground: MaterialPalette.foreground,
36 vertical-spacing: 8px,
37 horizontal-spacing: 4px,
38 clock-style: {
39 background: MaterialPalette.surface-container-highest,
40 foreground: MaterialPalette.accent-background,
41 time-selector-style: {
42 foreground: MaterialPalette.foreground,
43 foreground-selected: MaterialPalette.accent-foreground,
44 font-size: MaterialFontSettings.body-large.font-size,
45 font-weight: MaterialFontSettings.body-large.font-weight
46 }
47 },
48 input-style: {
49 background: MaterialPalette.surface-container-highest,
50 background-selected: MaterialPalette.accent-container,
51 foreground: MaterialPalette.foreground,
52 foreground-selected: MaterialPalette.foreground,
53 border-radius: 8px,
54 font-size: 57 * 0.0625rem,
55 font-weight: 400
56 },
57 period-selector-style: {
58 border-radius: 8px,
59 border-width: 1px,
60 border-brush: MaterialPalette.border,
61 item-style: {
62 font-size: MaterialFontSettings.body-large.font-size,
63 font-weight: MaterialFontSettings.body-large.font-weight,
64 foreground: MaterialPalette.foreground,
65 background-selected: MaterialPalette.tertiary-container,
66 foreground-selected: MaterialPalette.on-tertiary-container
67 }
68 },
69 title-style: {
70 font-size: MaterialFontSettings.label-medium.font-size,
71 font-weight: MaterialFontSettings.label-medium.font-weight,
72 foreground: MaterialPalette.foreground,
73 },
74 };
75 }
76
77 IconButton {
78 icon: base.selection-mode ? Icons.keyboard : Icons.clock;
79 accessible-label: "Toggle input picker";
80 dialog-button-role: action;
81
82 clicked => {
83 base.selection-mode = !base.selection-mode;
84 }
85 }
86
87 TextButton {
88 text: @tr("Cancel");
89 dialog-button-role: reject;
90
91 clicked => {
92 root.close();
93 root.canceled();
94 }
95 }
96
97 TextButton {
98 text: @tr("OK");
99 enabled: base.ok-enabled();
100 dialog-button-role: accept;
101
102 clicked => {
103 root.close();
104 root.accepted(base.get-current-time());
105 }
106 }
107 }
108}
109