Work on UI

inköpslista-gui/ui/app.slint

@@ -1,56 +1,101 @@
-import { AboutSlint, Button, VerticalBox, ListView, CheckBox, HorizontalBox, TextEdit, GridBox } from "std-widgets.slint";
+import { TabWidget, AboutSlint, Button, VerticalBox, ListView, CheckBox, ScrollView, HorizontalBox, TextEdit, GridBox } from "std-widgets.slint";
+
+component GoodListItem inherits Rectangle {
+    in property <string> name: "Mjölk";
+    in-out property <bool> checked: false;
+    background: #ffffff10;
+    border-radius: 8pt;
+    border-width: 10pt;
+    HorizontalBox {
+        check := CheckBox {
+            checked <=> root.checked;
+        }
+        Text {
+            opacity: (checked ? 0.5 : 1.0);
+            font-size: 12pt;
+            text: name;
+        }
+    }
+    input := TouchArea {
+        clicked => {
+            checked = !checked;
+        }
+    }
+}
 
 component GoodsList {
     in property <[string]> items: ["Mjölk", "Ost", "Ägg"];
     ListView {
-        for item in items: Rectangle {
-            HorizontalBox {
-                CheckBox {}
-                Text {
-                    text: item;
-                }
-            } 
+        for item in items: VerticalLayout {
+            GoodListItem {
+                name: item;
+            }
+            Rectangle {
+                height: 4pt;
+            }
         }
     }
 }
 
-
-component GoodButtons {
+component GoodButtons inherits ScrollView {
     in property <[string]> favorites: ["Mjölk", "Ost", "Ägg", "Bullens", "Oboy", "Mjöl", "Havregryn", "KrosTom"];
     in property <int> button-width: 100;
     in property <int> button-height: 60;
     in property <int> button-spacing: 10;
-    height: 200px;
-    property <int> count_x: root.width / 1px / (button-width + button-spacing);
-    Rectangle {
-        for item[idx] in favorites: Button {
-            x: mod(idx, count_x) * (root.button-width + root.button-spacing) * 1px ; 
-            y: floor(idx / count_x)  * (root.button-height + root.button-spacing) * 1px;
-            width: root.button-width * 1px; 
-            height: root.button-height * 1px;
-            text: item;
-        }
+
+    property <int> count-x: floor(root.width / 1pt / (button-width + button-spacing));
+    property <int> count-y: ceil(favorites.length / count-x);
+
+    viewport-height: (count-y * (button-height + button-spacing)) * 1pt;
+
+    for item[idx] in favorites: Button {
+        x: floor(mod(idx, count-x)) * (root.button-width + root.button-spacing) * 1pt ; 
+        y: floor(idx / count-x)  * (root.button-height + root.button-spacing) * 1pt;
+        width: root.button-width * 1pt; 
+        height: root.button-height * 1pt;
+        text: item;
     }
 }
 
-export component App inherits Window {
-    VerticalBox {
-        goods:= GoodsList {
-
-            height: 200px;
-        }
+component AddView inherits VerticalBox {
+    goods:= GoodsList {
+    }
+    HorizontalLayout {
+        height: 50pt;
         input:= TextEdit {
-            height:50px;
+        }
+        Rectangle {
+            width: 4pt; // spacing
         }
         Button {
-            height: 42px;
-            text: "Add";
+            width: self.height;
+            text: "+";
             clicked => {
                 goods.items[goods.items.length] = input.text;
             }
         }
-        GoodButtons {
-            
-        }
+    }
+    GoodButtons {
+
+    }
+}
+
+component ShopView inherits VerticalBox {
+    goods := GoodsList {}
+    Button {
+        text: "I am done hehe";
+    }
+}
+
+export component App inherits Window {
+    TabWidget {
+        Tab {
+            title: "Add";
+            AddView {}
+        }   
+        Tab {
+            title: "Shop";
+            ShopView {}
+        }   
     }
 }