Minimizable record options

ui/record.slint

@@ -13,21 +13,30 @@ export component RecordWidget inherits VerticalBox {
     in-out property events <=> tl.events;
     in property<[string]> combo-spans: [];
     in-out property<bool> in-progress: false;
-    property<string> event-name <=> le.text;
+    property<string> event-name: "";
+    property<bool> minimized: false;
+    property<int> combo-index: 0;
 
     tl := Timeline {
+        preferred-height: 100%;
         updating: true;
+        clicked => {
+            minimized = !minimized;
+        }
     }
-    GridLayout {
+    if !minimized: GridLayout {
         spacing-vertical: 8px;
         spacing-horizontal: 16px;
         le := LineEdit {
             placeholder-text: "Event name";
-            text: "Event name";
+            text: event-name;
             font-size: 24px;
             horizontal-alignment: center;
             colspan: 2;
             row: 0;
+            edited(text) => {
+                event-name = text;
+            }
         }
         Button {
             text: in-progress ? "Stop" : "Start";
@@ -58,11 +67,12 @@ export component RecordWidget inherits VerticalBox {
         }
         ComboBox {
             model: combo-spans;
-            current-index: 0;
+            current-index: combo-index;
             row: 2;
             col: 1;
             selected(current-value) => {
                 root.update-visible-time(current-value);
+                combo-index = self.current-index;
             }
         }
     }

ui/timeline.slint

@@ -25,6 +25,7 @@ global TimeString {
 
 export component Timeline inherits Rectangle {
     callback new-day-started;
+    callback clicked <=> ta.clicked;
 
     in-out property<bool> updating: true;
     in-out property<[TimelineEvent]> events: [];
@@ -46,6 +47,11 @@ export component Timeline inherits Rectangle {
         }
     }
 
+    ta := TouchArea {
+        preferred-width: 100%;
+        preferred-height: 100%;
+    }
+
     background: gray;
     border-width: 1px;
     border-color: black;
@@ -74,24 +80,43 @@ export component Timeline inherits Rectangle {
 
     for event in events: timeline-event := Rectangle {
         property<length> real-x: ((visible-time - (visible-offset - event.start)) / visible-time) * parent.width;
+        property<length> real-width: event.duration / visible-time * parent.width + min(real-x, 0);
         x: max(real-x, 0);
         y: parent.height / 4;
         z: 1;
         width: event.finished ?
-            min(parent.width - self.x, event.duration / visible-time * parent.width + min(real-x, 0)):
+            min(parent.width - self.x, real-width) :
             parent.width - self.x;
         height: parent.height / 2;
         visible: 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;
         }
+        start-txt := Text {
+            x: 0;
+            y: root.height - self.height - timeline-event.height;
+            text: timeline-event.x == timeline-event.real-x ?
+                TimeString.from(event.start) :
+                TimeString.from(visible-offset - visible-time);
+            visible: timeline-event.visible &&
+                (self.width * 2 < timeline-event.width ||
+                    (!end-txt.visible && self.width < timeline-event.width));
+        }
+        end-txt := Text {
+            x: timeline-event.width - self.width;
+            y: root.height - self.height - timeline-event.height;
+            text: timeline-event.x + timeline-event.real-width <= root.width ?
+                TimeString.from(event.start + event.duration) :
+                TimeString.from(visible-offset);
+            visible: timeline-event.visible && timeline-event.width - self.width * 2 > 0;
+        }
     }
     @children
 }