TimePicker: cleanup, tests and refactoring

CHANGELOG.md

@@ -11,6 +11,7 @@ All notable changes to this project are documented in this file.
  - Fixed updating model of ComboBox does not change current-value
  - 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 `TimePicker` widget.
 
 ## [1.6.0] - 2024-05-13
 

docs/reference/src/language/widgets/time-picker.md

@@ -15,11 +15,11 @@ A timer picker that is usd for selecting the time, in either 24-hour or AM/PM mo
 
 ### Properties
 
+-   **`twenty-four-hour`**: (_in_ _bool_): Sets to true to enable 24 hour selection otherwise it is displayed in AM/PM mode.  
 -   **`title`** (_in_ _string_): The text that is displayed at the top of the picker.
--   **`ok-label`** (_in_ _string_): The text written in the ok button.
 -   **`cancel-label`** (_in_ _string_): The text written in the cancel button.
--   **`is-twenty-four-hour`**: (_in_ _bool_): Sets to true to enable 24 hour selection otherwise it is displayed in AM/PM mode.  
--   **`curren-time`**: (_in-out_ _Time_): Gets and sets the current selected time.. 
+-   **`ok-label`** (_in_ _string_): The text written in the ok button.
+-   **`time`**: (_in_ _Time_): Set the initinal displayed time. 
 
 ### Callbacks
 
@@ -29,22 +29,34 @@ A timer picker that is usd for selecting the time, in either 24-hour or AM/PM mo
 ### Example
 
 ```slint
-import { TimePicker } from "std-widgets.slint";
+import { TimePicker, Button } from "std-widgets.slint";
 export component Example inherits Window {
-  width: 200px;
-  height: 130px;
-  
-  time-picker-popup := Popup {
-    TimePicker {
-      
+    width: 600px;
+    height: 600px;
+
+    time-picker-button := Button {
+        text: @tr("Open TimePicker");
+
+        clicked => {
+            time-picker.show();
+        }
     }
-  }
 
-  Button {
-    text: "Open time picker";
-    clicked => {
-      time-picker-popup.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

@@ -17,8 +17,6 @@ export component ControlsPage inherits Page {
         VerticalLayout {
             padding: 0px;
 
-            TimePicker {}
-
             HorizontalBox {
                 alignment: start;
 
@@ -89,7 +87,7 @@ export component ControlsPage inherits Page {
     }
 
     GroupBox {
-        title: @tr("LineEdit - SpinBox");
+        title: @tr("LineEdit - SpinBox - TimePicker");
         vertical-stretch: 0;
 
         HorizontalBox {
@@ -106,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();
+                }
+            }
         }
     }
 
@@ -141,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;
@@ -213,4 +220,24 @@ 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 {
+            twenty-four-hour: true;
+            canceled => {
+                time-picker.close();
+            }
+
+            accepted(time) => {
+                debug(time);
+                time-picker.close();
+            }
+        }
+    }
 }

internal/compiler/builtins.slint

@@ -546,6 +546,11 @@ export component NativeTab {
     //-is_internal
 }
 
+export struct NativeTime {
+    hour: int,
+    minute: int
+}
+
 export global NativeStyleMetrics {
     out property <length> layout-spacing;
     out property <length> layout-padding;