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 { Button } from "./button.slint";
7import { CupertinoPalette, CupertinoFontSettings, Icons } from "styling.slint";
8import { MenuBorder } from "./components.slint";
9import { StandardButton } from "../common/standardbutton.slint";
10
11export { Time }
12
13export component TimePickerPopup inherits PopupWindow {
14 in property <bool> use-24-hour-format <=> base.use-24-hour-format;
15 in property <string> title: "Select time";
16 in property <Time> time <=> base.time;
17
18 callback canceled();
19 callback accepted(/* current-time */ Time);
20
21 close-policy: PopupClosePolicy.no-auto-close;
22
23 background-layer := MenuBorder {
24 width: dialog.width;
25 height: dialog.height;
26 }
27
28 dialog := Dialog {
29 padding: 8px;
30
31 base := TimePickerBase {
32 title: root.title;
33 style: {
34 foreground: CupertinoPalette.foreground,
35 vertical-spacing: 8px,
36 horizontal-spacing: 4px,
37 clock-style: {
38 background: CupertinoPalette.alternate-control-background,
39 foreground: CupertinoPalette.accent-background,
40 time-selector-style: {
41 foreground: CupertinoPalette.foreground,
42 foreground-selected: CupertinoPalette.accent-foreground,
43 font-size: CupertinoFontSettings.body-strong.font-size,
44 font-weight: CupertinoFontSettings.body-strong.font-weight
45 }
46 },
47 input-style: {
48 background: CupertinoPalette.alternate-control-background,
49 background-selected: CupertinoPalette.accent-background,
50 foreground: CupertinoPalette.foreground,
51 foreground-selected: CupertinoPalette.foreground,
52 border-radius: 8px,
53 font-size: 57 * 0.0625rem,
54 font-weight: 400
55 },
56 period-selector-style: {
57 border-radius: 8px,
58 border-width: 1px,
59 border-brush: CupertinoPalette.border,
60 item-style: {
61 font-size: CupertinoFontSettings.body-strong.font-size,
62 font-weight: CupertinoFontSettings.body-strong.font-weight,
63 foreground: CupertinoPalette.foreground,
64 background-selected: CupertinoPalette.accent-background,
65 foreground-selected: CupertinoPalette.accent-foreground
66 }
67 },
68 title-style: {
69 font-size: CupertinoFontSettings.body.font-size,
70 font-weight: CupertinoFontSettings.body.font-weight,
71 foreground: CupertinoPalette.foreground,
72 },
73 };
74 }
75
76 Button {
77 icon: base.selection-mode ? Icons.keyboard : Icons.clock;
78 colorize-icon: true;
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 StandardButton {
88 kind: cancel;
89
90 clicked => {
91 root.close();
92 root.canceled();
93 }
94 }
95
96 StandardButton {
97 enabled: base.ok-enabled();
98 kind: ok;
99
100 clicked => {
101 root.close();
102 root.accepted(base.get-current-time());
103 }
104 }
105 }
106}
107