src/main.rs

@@ -8,6 +8,14 @@ slint::include_modules!();
 fn main() -> Result<(), Box<dyn Error>> {
     let ui = AppWindow::new()?;
 
+    ui.on_request_increase_value({
+        let ui_handle = ui.as_weak();
+        move || {
+            let ui = ui_handle.unwrap();
+            ui.set_counter(ui.get_counter() + 1);
+        }
+    });
+
     ui.run()?;
 
     Ok(())

ui/app-window.slint

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

ui/record.slint

@@ -1,37 +0,0 @@
-import { VerticalBox, LineEdit, Button, ComboBox } from "std-widgets.slint";
-import { Timeline } from "timeline.slint";
-
-export component RecordWidget inherits VerticalBox {
-    Timeline {
-        updating: true;
-    }
-    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

@@ -1,37 +0,0 @@
-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 {
-        updating: false;
-    }
-    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

@@ -1,62 +0,0 @@
-export struct TimelineEvent {
-    start: int,
-    duration: int,
-    finished: bool,
-    label: string
-}
-
-export component Timeline inherits Rectangle {
-    in-out property<bool> updating: true;
-    in-out property<[TimelineEvent]> events: [
-        { start: 5, duration: 3, finished: true, label: "Event 1" },
-        { start: 10, duration: 15, finished: true, label: "Event 2" },
-        { start: 30, duration: 0, finished: false, label: "Event 3" }
-    ];
-    in-out property<int> visible-time: 60; 
-    property<int> visible-offset: max(offset, visible-time);
-    in-out property<int> offset: 60;
-
-    timer := Timer {
-        interval: 1s;
-        running: updating;
-        triggered => {
-            offset += 1;
-        }
-    }
-
-    background: gray;
-    border-width: 1px;
-    border-color: black;
-    Rectangle {
-        x: 0;
-        y: parent.height / 4;
-        z: 0;
-        width: parent.width;
-        height: parent.height / 2;
-        border-color: black;
-        border-width: 1px;
-        background: purple;
-    }
-
-    for event in events: timeline-event := Rectangle {
-        property<length> real-x: ((visible-time - (visible-offset - event.start)) / visible-time) * parent.width;
-        x: max(real-x, 0);
-        y: parent.height / 4;
-        z: 1;
-        width: event.finished ?
-            (event.duration) / visible-time * parent.width + min(real-x, 0):
-            parent.width - self.x;
-        height: parent.height / 2;
-        visible: self.real-x + self.width > 0 && self.real-x < parent.width;
-        border-color: black;
-        border-width: 1px;
-        background: red;
-        
-        Text {
-            x: 0;
-            y: -self.height;
-            text: event.label;
-            visible: timeline-event.visible;
-        }
-    }
-}