Added TimePicker widget (#5251)

.reuse/dep5

@@ -104,6 +104,10 @@ Files: internal/compiler/widgets/cosmic-base/_*.svg
 Copyright: "Cosmic Icons" by System76 <https://github.com/pop-os/cosmic-icons>
 License: CC-BY-SA-4.0
 
+Files: internal/compiler/widgets/qt/_*.svg
+Copyright: "Cosmic Icons" by System76 <https://github.com/pop-os/cosmic-icons>
+License: CC-BY-SA-4.0
+
 Files: internal/backends/linuxkms/mouse-pointer.svg examples/virtual_keyboard/ui/assets/*.svg examples/ffmpeg/pause.svg examples/ffmpeg/play.svg examples/gstreamer-player/*.svg examples/uefi-demo/resource/cursor.png
 Copyright: Copyright © 2018 Dave Gandy & Fork Awesome
 License: MIT

CHANGELOG.md

@@ -12,6 +12,7 @@ All notable changes to this project are documented in this file.
  - Fixed set current-index of ComboBox to -1 does not reset current-value
  - Fixed issue where the text of `SpinBox` is not updated after value is changed from outside
  - Added `step-size` to `SpinBox`
+ - Added `TimePicker` widget.
 
 ## [1.6.0] - 2024-05-13
 

api/cpp/include/slint.h

@@ -1266,6 +1266,11 @@ inline SharedString translate(const SharedString &original, const SharedString &
     return result;
 }
 
+inline bool use_24_hour_format()
+{
+    return cbindgen_private::slint_use_24_hour_format();
+}
+
 } // namespace private_api
 
 #ifdef SLINT_FEATURE_GETTEXT

api/rs/slint/private_unstable_api.rs

@@ -165,6 +165,10 @@ pub fn init_translations(domain: &str, dirname: impl Into<std::path::PathBuf>) {
     i_slint_core::translations::gettext_bindtextdomain(domain, dirname.into()).unwrap()
 }
 
+pub fn use_24_hour_format() -> bool {
+    i_slint_core::date_time::use_24_hour_format()
+}
+
 /// internal re_exports used by the macro generated
 pub mod re_exports {
     pub use alloc::boxed::Box;

docs/reference/src/language/widgets/index.rst

@@ -33,3 +33,4 @@ Widgets
    tabwidget.md
    textedit.md
    verticalbox.md
+   timepicker.md

docs/reference/src/language/widgets/timepicker.md

@@ -0,0 +1,63 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+
+## struct `Time`
+
+Defines a time with hours, minutes, and seconds.
+
+### Fields
+
+-   **`hour`(int)**: The hour value (range from 0 to 23).
+-   **`minute`(int)**: The minute value (range from 1 to 59).
+-   **`second`(int)**: The second value (range form 1 to 59).
+
+## `TimePicker`
+
+Use the timer picker to select the time, in either 24-hour or 12-hour mode (AM/PM). 
+
+### Properties
+
+-   **`use-24-hour-format`**: (_in_ _bool_): If set to `true` 24 hours are displayed otherwise it is displayed in AM/PM mode. (default: system default, if cannot be determined then `true`) 
+-   **`title`** (_in_ _string_): The text that is displayed at the top of the picker.
+-   **`cancel-label`** (_in_ _string_): The text written in the cancel button.
+-   **`ok-label`** (_in_ _string_): The text written in the ok button.
+-   **`time`**: (_in_ _Time_): Set the initial displayed time.
+
+### Callbacks
+
+-   **`canceled()`**: The cancel button was clicked.
+-   **`accepted(Time)`** The ok button was clicked.
+
+### Example
+
+```slint
+import { TimePicker, Button } from "std-widgets.slint";
+export component Example inherits Window {
+    width: 600px;
+    height: 600px;
+
+    time-picker-button := Button {
+        text: @tr("Open TimePicker");
+
+        clicked => {
+            time-picker.show();
+        }
+    }
+
+    time-picker := PopupWindow {
+        width: 340px;
+        height: 500px;
+        close-on-click: false;
+
+        TimePicker { 
+            canceled => {
+                time-picker.close();
+            }
+
+            accepted(time) => {
+                debug(time);
+                time-picker.close();
+            }
+        }
+    }
+}
+```

examples/gallery/ui/pages/controls_page.slint

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 
 import { Button, GroupBox, SpinBox, ComboBox, CheckBox, LineEdit, TabWidget, VerticalBox, HorizontalBox,
-    Slider, ProgressIndicator, SpinBox, Switch, Spinner, GridBox } from "std-widgets.slint";
+    Slider, ProgressIndicator, SpinBox, Switch, Spinner, GridBox, TimePicker } from "std-widgets.slint";
 import { GallerySettings } from "../gallery_settings.slint";
 import { Page } from "page.slint";
 
@@ -87,7 +87,7 @@ export component ControlsPage inherits Page {
     }
 
     GroupBox {
-        title: @tr("LineEdit - SpinBox");
+        title: @tr("LineEdit - SpinBox - TimePicker");
         vertical-stretch: 0;
 
         HorizontalBox {
@@ -104,6 +104,14 @@ export component ControlsPage inherits Page {
                 value: 42;
                 enabled: GallerySettings.widgets-enabled;
             }
+
+            time-picker-button := Button {
+                text: @tr("Open TimePicker");
+
+                clicked => {
+                    time-picker.show();
+                }
+            }
         }
     }
 
@@ -139,6 +147,7 @@ export component ControlsPage inherits Page {
                 row: 0;
                 col: 1;
                 rowspan: 2;
+
                 Spinner {
                     progress: i-progress-indicator.progress;
                     indeterminate: i-progress-indicator.indeterminate;
@@ -211,4 +220,22 @@ export component ControlsPage inherits Page {
             }
         }
     }
+
+    time-picker := PopupWindow {
+        x: (root.width - 340px) / 2;
+        y: (root.height - 500px) / 2;
+        width: 340px;
+        height: 500px;
+        close-on-click: false;
+
+        TimePicker {
+            canceled => {
+                time-picker.close();
+            }
+
+            accepted(time) => {
+                time-picker.close();
+            }
+        }
+    }
 }

internal/compiler/expression_tree.rs

@@ -68,6 +68,7 @@ pub enum BuiltinFunction {
     RegisterCustomFontByMemory,
     RegisterBitmapFont,
     Translate,
+    Use24HourFormat,
 }
 
 #[derive(Debug, Clone)]
@@ -273,6 +274,9 @@ impl BuiltinFunction {
                     Type::Array(Type::String.into()),
                 ],
             },
+            BuiltinFunction::Use24HourFormat => {
+                Type::Function { return_type: Box::new(Type::Bool), args: vec![] }
+            }
         }
     }
 
@@ -330,6 +334,7 @@ impl BuiltinFunction {
             | BuiltinFunction::RegisterCustomFontByMemory
             | BuiltinFunction::RegisterBitmapFont => false,
             BuiltinFunction::Translate => false,
+            BuiltinFunction::Use24HourFormat => false,
         }
     }
 
@@ -380,6 +385,7 @@ impl BuiltinFunction {
             | BuiltinFunction::RegisterCustomFontByMemory
             | BuiltinFunction::RegisterBitmapFont => false,
             BuiltinFunction::Translate => true,
+            BuiltinFunction::Use24HourFormat => true,
         }
     }
 }

internal/compiler/generator/cpp.rs

@@ -3355,6 +3355,9 @@ fn compile_builtin_function_call(
         BuiltinFunction::Translate => {
             format!("slint::private_api::translate({})", a.join(","))
         }
+        BuiltinFunction::Use24HourFormat => {
+            format!("slint::private_api::use_24_hour_format()")
+        }
     }
 }
 

internal/compiler/generator/rust.rs

@@ -2698,6 +2698,9 @@ fn compile_builtin_function_call(
         BuiltinFunction::Translate => {
             quote!(slint::private_unstable_api::translate(#((#a) as _),*))
         }
+        BuiltinFunction::Use24HourFormat => {
+            quote!(slint::private_unstable_api::use_24_hour_format())
+        }
         BuiltinFunction::ItemAbsolutePosition => {
             if let [Expression::PropertyReference(pr)] = arguments {
                 let item_rc = access_item_rc(pr, ctx);

internal/compiler/llr/optim_passes/inline_expressions.rs

@@ -109,6 +109,7 @@ fn builtin_function_cost(function: &BuiltinFunction) -> isize {
         BuiltinFunction::SetTextInputFocused => PROPERTY_ACCESS_COST,
         BuiltinFunction::TextInputFocused => PROPERTY_ACCESS_COST,
         BuiltinFunction::Translate => 2 * ALLOC_COST + PROPERTY_ACCESS_COST,
+        BuiltinFunction::Use24HourFormat => 2 * ALLOC_COST + PROPERTY_ACCESS_COST,
     }
 }
 

internal/compiler/lookup.rs

@@ -814,16 +814,36 @@ impl LookupObject for SlintInternal {
         ctx: &LookupCtx,
         f: &mut impl FnMut(&str, LookupResult) -> Option<R>,
     ) -> Option<R> {
-        f(
-            "color-scheme",
-            Expression::FunctionCall {
-                function: Expression::BuiltinFunctionReference(BuiltinFunction::ColorScheme, None)
+        None.or_else(|| {
+            f(
+                "color-scheme",
+                Expression::FunctionCall {
+                    function: Expression::BuiltinFunctionReference(
+                        BuiltinFunction::ColorScheme,
+                        None,
+                    )
                     .into(),
-                arguments: vec![],
-                source_location: ctx.current_token.as_ref().map(|t| t.to_source_location()),
-            }
-            .into(),
-        )
+                    arguments: vec![],
+                    source_location: ctx.current_token.as_ref().map(|t| t.to_source_location()),
+                }
+                .into(),
+            )
+            .or_else(|| {
+                f(
+                    "use-24-hour-format",
+                    Expression::FunctionCall {
+                        function: Expression::BuiltinFunctionReference(
+                            BuiltinFunction::Use24HourFormat,
+                            None,
+                        )
+                        .into(),
+                        arguments: vec![],
+                        source_location: ctx.current_token.as_ref().map(|t| t.to_source_location()),
+                    }
+                    .into(),
+                )
+            })
+        })
     }
 }
 

internal/compiler/widgets/common/internal-components.slint

@@ -0,0 +1,8 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
+
+export struct TextStyle {
+    font-size: length,
+    font-weight: int,
+    foreground: brush,
+}