Add animation when an item is added to the list

2026-10-03 15:50:39 +02:00
1 changed files with 38 additions and 40 deletions
@@ -113,50 +113,48 @@ component PlusMinus inherits HorizontalLayout {

 component GoodListItemAdd inherits Rectangle {
    in-out property <SItem> item;
-    Rectangle {
-        // Animate when this item appears.
-        transform-scale: item.just-added ? 90% : 100%;
-        opacity: item.just-added ? 0 : 100%;
-        init => {
-            self.transform-scale = 100%;
-            self.opacity = 100%;
-            item.just-added = false;
-        }
-        animate transform-scale {
-            duration: 500ms;
-            easing: ease-out-bounce;
-        }
-        animate opacity {
-            duration: 300ms;
-            easing: ease-out;
+    // Animate when this item appears.
+    transform-scale: item.just-added ? 90% : 100%;
+    opacity: item.just-added ? 0 : 100%;
+    init => {
+        self.transform-scale = 100%;
+        self.opacity = 100%;
+        item.just-added = false;
+    }
+    animate transform-scale {
+        duration: 500ms;
+        easing: ease-out-bounce;
+    }
+    animate opacity {
+        duration: 300ms;
+        easing: ease-out;
+    }
+
+    background: Palette.alternate-background;
+    border-radius: 8pt;
+    border-width: 10pt;
+    HorizontalLayout {
+        spacing: 8px;
+        padding: 8px;
+        alignment: start;
+        PlusMinus {
+            item: item;
        }

-        background: Palette.alternate-background;
-        border-radius: 8pt;
-        border-width: 10pt;
-        HorizontalLayout {
-            spacing: 8px;
-            padding: 8px;
-            alignment: start;
-            PlusMinus {
-                item: item;
+        Rectangle {
+            height: 30px;
+            Text {
+                text: root.item.amount;
+                font-size: 12pt;
            }
+        }

-            Rectangle {
-                height: 30px;
-                Text {
-                    text: root.item.amount;
-                    font-size: 12pt;
-                }
-            }
-
-            Rectangle {
-                height: 30px;
-                Text {
-                    opacity: (root.item.checked ? 0.5 : 1.0);
-                    font-size: 12pt;
-                    text: root.item.name;
-                }
+        Rectangle {
+            height: 30px;
+            Text {
+                opacity: (root.item.checked ? 0.5 : 1.0);
+                font-size: 12pt;
+                text: root.item.name;
            }
        }
    }