Add initial image viewer

2026-04-26 12:45:56 +02:00
parent 10fcd546ce
commit 17dfc144b2
6 changed files with 242 additions and 144 deletions
--- a/ui/timeline.slint
+++ b/ui/timeline.slint
@@ -0,0 +1,99 @@
+import { ScrollView } from "std-widgets.slint";
+import { Global } from "global.slint";
+import { ImageBucket, Visibility, ImagePreview } from "types.slint";
+
+component ImagePreview inherits Rectangle {
+    in property <ImagePreview> preview;
+    in property <length> size: 32px;
+    width: size;
+    height: size;
+
+    Image {
+        width: 100%;
+        height: 100%;
+        source: preview.image;
+    }
+
+    touch := TouchArea {
+        clicked => {
+            Global.previewed-image = root.preview;
+        }
+    }
+}
+
+component TimelineBlock inherits VerticalLayout {
+    in property <int> index: -1;
+    in-out property <ImageBucket> bucket;
+
+    property <length> min-image-size: Global.min-image-size;
+    property <length> min-size-with-margin: min-image-size + Global.image-margin;
+    property <int> count-x: Math.floor(self.width / min-size-with-margin); // TODO: or is it ceil?
+    property <int> count-y: Math.ceil(bucket.count / count-x);
+    
+    function calc-image-size() -> length {
+        let remaining-length = Math.mod(self.width,  min-size-with-margin);
+        min-image-size + remaining-length / count-x
+    }
+
+    property <length> image-size: calc-image-size();
+    property <length> image-size-with-margin: image-size + Global.image-margin;
+
+    property <length> title-box-height: 36px;
+    height: title-box.height + count-y * image-size-with-margin;
+
+    y: bucket.y;
+    min-width: min-image-size;
+    alignment: start;
+
+    title-box := HorizontalLayout {
+        alignment: space-between;
+        height: title-box-height;
+        padding: 8px;
+
+        Text {
+            text: bucket.title;
+        }
+        
+        // TODO: checkbox thingy
+        Text {
+            text: "O";
+        }
+    }
+
+    image-box := Rectangle {
+        width: 100%;
+        height: count-y * image-size-with-margin;
+
+        for preview[i] in bucket.previews : ImagePreview {
+            preview: preview;
+            size: image-size;
+            x: Global.image-margin / 2 + Math.mod(i, count-x) * (Global.image-margin + image-size);
+            y: Math.floor(i / count-x) * (image-size + Global.image-margin);
+        }
+    }
+}
+
+export component Timeline inherits ScrollView {
+            mouse-drag-pan-enabled: true;
+            viewport-height: rect.height;
+
+            changed viewport-y => {
+                Global.timeline-scrolled(-self.viewport-y);
+            }
+            
+            rect := Rectangle {
+                y: 0;
+                x: 0;
+                width: root.width;
+                height: Global.timeline-height;
+                preferred-width: self.width;
+                preferred-height: self.height;
+                for bucket[i] in Global.image-buckets : Rectangle {
+                    if bucket.visibility == Visibility.InView : TimelineBlock {
+                        width: root.width;
+                        index: i;
+                        bucket: bucket;
+                    }
+                }
+            }
+}