Add animation when an item is added to the list

2026-10-03 15:42:24 +02:00
2 changed files with 512 additions and 520 deletions
@@ -113,48 +113,50 @@ component PlusMinus inherits HorizontalLayout {

 component GoodListItemAdd inherits Rectangle {
    in-out property <SItem> item;
-    // 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;
+    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;
        }

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

-        Rectangle {
-            height: 30px;
-            Text {
-                opacity: (root.item.checked ? 0.5 : 1.0);
-                font-size: 12pt;
-                text: root.item.name;
+            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;
+                }
            }
        }
    }