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/image-viewer.slint
+++ b/ui/image-viewer.slint
@@ -0,0 +1,88 @@
+import { Global } from "global.slint";
+
+export component ImageViewer inherits Rectangle {
+    in property <image> image;
+    
+    width: 100%;
+    height: 100%;
+
+    background: black;
+
+    enter-animation := Timer {
+        running: true;
+        interval: 1ms;
+        triggered => {
+            self.running = false;
+        }
+    }
+
+    exit-animation := Timer {
+        running: false;
+        interval: 0.2s;
+        triggered => {
+            self.running = false;
+            Global.previewed-image.asset-id = "";
+        }
+    }
+
+    states [
+        entering when enter-animation.running: {
+            root.opacity: 0.0;
+            out {
+                animate root.opacity {
+                    duration: 0.15s;
+                }
+            }
+        }
+        exiting when exit-animation.running: {
+            root.opacity: 0.0;
+            in {
+                animate root.opacity {
+                    duration: exit-animation.interval;
+                }
+            }
+        }
+        entered: {
+            root.opacity: 1.0;
+        }
+    ]
+
+    sgh := SwipeGestureHandler {
+        enabled: !enter-animation.running && !exit-animation.running;
+        handle-swipe-down: true;
+        handle-swipe-up: true;
+
+        swiped() => {
+            if self.current-position.y < self.pressed-position.y {
+                debug ("todo: handle swiped up")
+            } else {
+                exit-animation.running = true;
+            }
+        }
+
+
+        Image {
+            source: image;
+            image-fit: ImageFit.contain;
+
+            function calc-y() -> length {
+                parent.y + parent.height / 2 - self.height / 2
+            }
+            y: calc-y();
+
+            states [
+                swiping when sgh.swiping: {
+                    y: calc-y() + sgh.current-position.y - sgh.pressed-position.y;
+                }
+                exiting when exit-animation.running: {
+                    y: parent.height;
+                    in {
+                        animate y {
+                            duration: exit-animation.interval;
+                        }
+                    }
+                }
+            ]
+        }
+    }
+}