feature: possible to swipe between tabs and fix: ui bug

gui/Cargo.toml

@@ -39,7 +39,7 @@ serde_json = "1.0.148"
 anyhow = "1.0.100"
 
 [dependencies.slint]
-version = "1.17.1"
+version = "1.18.0"
 default-features = false
 features = [
   "live-preview",
@@ -63,4 +63,4 @@ wasm-bindgen-futures = "0.4.56"
 web-sys = "0.3.83"
 
 [build-dependencies]
-slint-build = "1.17.1"
+slint-build = "1.18.0"

gui/ui/app.slint

@@ -9,12 +9,13 @@ import {
     GridBox,
     HorizontalBox,
     ComboBox,
-    Palette, Spinner, SpinBox,
+    Palette,
+    Spinner,
+    SpinBox,
 } from "std-widgets.slint";
 import { SettingsView } from "settings.slint";
 import { ConnectionStatus, State, SItem, SButtonItem } from "state.slint";
 export { ConnectionStatus, State, SItem }
-
 component GoodListItem inherits Rectangle {
     in-out property <SItem> item;
     background: Palette.alternate-background;
@@ -185,9 +186,9 @@ component GoodButtons inherits ScrollView {
 
     property <int> count-x: floor(root.width / (button-min-width + button-spacing));
     property <int> count-y: ceil(State.favorites.length / count-x);
-    property <length> button-width: ((self.width + button-spacing ) / count-x) - button-spacing;
+    property <length> button-width: ((self.width + button-spacing) / count-x) - button-spacing;
 
-    viewport-height: (count-y * (button-height + button-spacing));
+    content-height: (count-y * (button-height + button-spacing));
     mouse-drag-pan-enabled: true;
 
     for item[idx] in State.favorites: Button {
@@ -225,7 +226,7 @@ component ConnStatusIndicator inherits Rectangle {
 }
 
 component RefreshButton inherits HorizontalLayout {
-        spacing: 8px;
+    spacing: 8px;
     alignment: center;
     Button {
         text: "Refresh";
@@ -234,6 +235,7 @@ component RefreshButton inherits HorizontalLayout {
             State.refresh-list();
         }
     }
+
     ConnStatusIndicator { }
 }
 
@@ -243,7 +245,7 @@ component AddView inherits VerticalLayout {
     padding: 8px;
     spacing: 8px;
 
-    RefreshButton {}
+    RefreshButton { }
 
     goods := GoodsListAdd {
         items <=> list;
@@ -322,23 +324,26 @@ component CatItem inherits HorizontalBox {
 }
 
 
-component CatView inherits VerticalLayout {
+component CatView inherits ScrollView {
     in-out property <[SButtonItem]> cats;
 
-    for item in cats: CatItem {
-        item: item;
+    VerticalLayout {
+        for item in cats: CatItem {
+            item: item;
+        }
     }
 }
 
 export component App inherits Window {
-
+    in property <int> prefered-start-tab: 0;
     title: "Inköpslista";
     icon: @image-url("../images/icon.svg");
 
     preferred-height: 700px;
     preferred-width: 480px;
 
-    TabWidget {
+    tabs := TabWidget {
+        current-index: prefered-start-tab;
         Tab {
             title: "Add";
             AddView {
@@ -365,4 +370,16 @@ export component App inherits Window {
             SettingsView { }
         }
     }
+
+    sgr := SwipeGestureHandler {
+        handle-swipe-right: tabs.current-index > 0;
+        handle-swipe-left: tabs.current-index < 4;
+        swiped => {
+            if self.current-position.x > self.pressed-position.x + self.width / 4 {
+                tabs.current-index -= 1;
+            } else if self.current-position.x < self.pressed-position.x - self.width / 4 {
+                tabs.current-index += 1;
+            }
+        }
+    }
 }