UI template

ui/app-window.slint

@@ -1,18 +1,16 @@
-import { Button, VerticalBox } from "std-widgets.slint";
+import { TabWidget } from "std-widgets.slint";
+import { RecordWidget } from "record.slint";
+import { ReviewWidget } from "review.slint";
 
 export component AppWindow inherits Window {
-    in-out property <int> counter: 42;
-    callback request-increase-value();
-    VerticalBox {
-        Text {
-            text: "Counter: \{root.counter}";
+    TabWidget {
+        Tab {
+            title: "Record";
+            RecordWidget {}
         }
-
-        Button {
-            text: "Increase value";
-            clicked => {
-                root.request-increase-value();
-            }
+        Tab {
+            title: "Review";
+            ReviewWidget {}
         }
     }
 }

ui/record.slint

@@ -0,0 +1,35 @@
+import { VerticalBox, LineEdit, Button, ComboBox } from "std-widgets.slint";
+import { Timeline } from "timeline.slint";
+
+export component RecordWidget inherits VerticalBox {
+    Timeline {}
+    GridLayout {
+        spacing-vertical: 8px;
+        spacing-horizontal: 16px;
+        LineEdit {
+            placeholder-text: "Event name";
+            text: "Event name";
+            font-size: 24px;
+            horizontal-alignment: center;
+            colspan: 2;
+            row: 0;
+        }
+        Button {
+            text: "Start";
+            colspan: 2;
+            row: 1;
+        }
+        Text {
+            text: "Span:";
+            font-size: 24px;
+            row: 2;
+            horizontal-alignment: right;
+        }
+        ComboBox {
+            model: ["1 Hour", "4 Hours", "8 Hours", "24 Hours"];
+            current-index: 0;
+            row: 2;
+            col: 1;
+        }
+    }
+}

ui/review.slint

@@ -0,0 +1,35 @@
+import { VerticalBox, LineEdit, Button, DatePickerPopup } from "std-widgets.slint";
+import { Timeline } from "timeline.slint";
+
+export component ReviewWidget inherits VerticalBox {
+    property<int> current-year;
+    property<int> current-month;
+    property<int> current-day;
+
+    Timeline {}
+    GridLayout {
+        spacing-vertical: 8px;
+        spacing-horizontal: 16px;
+        Text {
+            text: "Day: \{current-day}/\{current-month}/\{current-year}";
+            font-size: 32px;
+            horizontal-alignment: right;
+        }
+        Button {
+            text: "Select";
+            clicked => {
+                date-picker.show()
+            }
+        }
+    }
+    date-picker := DatePickerPopup {
+        x: (root.width - self.width) / 2;
+        y: (root.height - self.height) / 2;
+        title: "";
+        accepted(date) => {
+            current-year = date.year;
+            current-month = date.month;
+            current-day = date.day;
+        }
+    }
+}

ui/timeline.slint

@@ -0,0 +1 @@
+export component Timeline inherits Path {}