em: polish menu (#2366)

examples/energy-monitor/ui/mid_main.slint

@@ -27,18 +27,34 @@ export component MidMain {
 
                 PageContainer {
                     Overview {}
+
+                    clicked => {
+                        show-page(0);
+                    }
                 }
 
                 PageContainer {
                     Usage {}
+
+                    clicked => {
+                        show-page(1);
+                    }
                 }
 
                 PageContainer {
                     Balance {}
+
+                    clicked => {
+                        show-page(2);
+                    }
                 }
 
                 PageContainer {
                     Weather {}
+
+                    clicked => {
+                        show-page(3);
+                    }
                 }
 
                 animate viewport-x { duration: Theme.durations.medium;  }
@@ -56,7 +72,7 @@ export component MidMain {
             i-menu-page := MenuPage {
                 page-changed(index) => {
                     i-menu.hide();
-                    i-page-scroll-view.viewport-x = min(0px, max(max-viewport-x, -(index * item-width))); 
+                    show-page(index);
                 }
 
                 close => {
@@ -69,4 +85,8 @@ export component MidMain {
             }
         }
     }
+
+    function show-page(index: int) {
+        i-page-scroll-view.viewport-x = min(0px, max(max-viewport-x, -(index * item-width)));
+    }
 }

examples/energy-monitor/ui/pages/menu_page/menu_overview.slint

@@ -17,42 +17,3 @@ export global MenuOverviewAdapter {
     in-out property <int> current-page;
     out property <int> count: model.length;
 }
-
-export component MenuOverview inherits Page {
-    callback page-changed <=> i-page-list.selection-changed;
-    callback show-settings <=> i-settings-button.clicked;
-    callback show-about <=> i-about-button.clicked;
-
-    in property <[StandardListViewItem]> model <=> MenuOverviewAdapter.model;
-    in-out property <int> current-page <=> MenuOverviewAdapter.current-page;
-
-    padding-left: 0;
-    padding-right: 0;
-
-    VerticalLayout {  
-        padding: Theme.spaces.medium;
-        spacing: Theme.spaces.small;
-
-        HorizontalLayout {  
-            vertical-stretch: 0;
-
-            i-settings-button := IconButton {  
-                icon: Images.settings;
-            }
-
-            // spacer
-            Rectangle {  
-                horizontal-stretch: 1;
-            }
-
-            i-about-button := IconButton { 
-                icon: Images.information;
-            }
-        }
-
-        i-page-list := ListView {  
-            model: root.model;
-            selected-index <=> root.current-page;
-        }
-    }
-}

examples/energy-monitor/ui/pages/menu_page/menu_page.slint

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
 
 import { About } from "about.slint";
-import { MenuOverview, MenuOverviewAdapter } from "menu_overview.slint";
+import { MenuOverviewAdapter } from "menu_overview.slint";
 import { Settings, SettingsAdapter } from "settings.slint";
 import { Theme } from "../../theme.slint";
 
@@ -31,45 +31,27 @@ export component MenuPage {
         width: 2 * parent.width;
         clip: true;
 
-        if(parent.x > -parent.width) : MenuOverview {
+        if(current-index == 0) : Settings {
             width: root.width;
 
-            page-changed(index) => {
-                root.page-changed(index);
-            }
-            show-settings => {
-                show-settings = true;
-                current-index = 1;
-
-            }
             show-about => {
-                show-settings = false;
                 current-index = 1;
             }
-       }
-
-       if(!show-settings && current-index == 1) : About {
-            x: root.width;
-            width: root.width;
-
-            back => {
-                back();
-            }
-        }
-
-       if(show-settings && current-index == 1) : Settings {
-            x: root.width;
-            width: root.width;
-
-            back => {
-                back();
-            }
 
             close => {
                 root.close();
             }
         }
 
+       if(current-index == 1) : About {
+            x: root.width;
+            width: root.width;
+
+            back => {
+                back();
+            }
+        }
+
         animate x { duration: Theme.durations.fast; }
     }
 

examples/energy-monitor/ui/pages/menu_page/settings.slint

@@ -9,6 +9,7 @@ import { IconButton, CheckBox, RadioButton, Switch, ScrollView, Item, ItemGroupB
 
 export global SettingsAdapter {
     callback check-radio-option(int /* index */);
+
     // fuctions
     in-out property <bool> fuction-one-checked: true;
     in-out property <bool> kiosk-mode-checked;
@@ -37,7 +38,7 @@ export global SettingsAdapter {
 
 export component Settings inherits Page {
     callback close();
-    callback back <=> i-back-button.clicked;
+    callback show-about <=> i-back-button.clicked;
     callback check-radio-option <=> SettingsAdapter.check-radio-option;
 
     // fuctions
@@ -66,11 +67,11 @@ export component Settings inherits Page {
 
         HorizontalLayout {
             vertical-stretch: 0;
-            alignment: start;
+            alignment: end;
 
             i-back-button := IconButton {
                 horizontal-stretch: 0;
-                icon: Images.arrow-left;
+                icon: Images.information;
             }
         }
 

examples/energy-monitor/ui/small_main.slint

@@ -29,7 +29,7 @@ export component SmallMain {
         }
 
         pagination-clicked => {
-            i-menu.show-button();
+            i-menu.open-menu();
             i-navigation.hide();
         }
 

examples/energy-monitor/ui/widgets/menu.slint

@@ -39,6 +39,7 @@ export component Menu {
             visible: container-visibility == 1.0;
             border-radius: 4px;
             background: Theme.palette.ebony-radial-gradient;
+            clip: true;
 
             // avoid click-through
             TouchArea {}
@@ -54,9 +55,12 @@ export component Menu {
                 alignment: start;
 
                 i-menu-button := MenuButton {
-
                     clicked => {
-                        toggle-open();
+                        if(open) {
+                            hide();
+                        } else {
+                            open-menu();
+                        }
                     }
                 }
             }
@@ -69,19 +73,8 @@ export component Menu {
         menu-button-visible = false;
     }
 
-    public function show-button() {
+    public function open-menu() {
-        menu-button-visible = true;
+        open = true;
-    }
-
-    function toggle-open() {
-        menu-button-visible = false;
-        open = !open;
-
-        if(open) {
-            opend();
-        } else {
-            closed();
-        }
     }
 
     public function hide() {

examples/energy-monitor/ui/widgets/page_scroll_view.slint

@@ -8,8 +8,9 @@ import { Theme } from "../theme.slint";
 component ScrollBar {
     private property <length> ref-width: self.width - 4px;
 
-    in property <float> range;
+    in-out property<length> page-size;
-    in property <float> value;
+    in-out property<length> value;
+    in-out property<length> maximum;
 
     min-height: 14px;
 
@@ -18,22 +19,45 @@ component ScrollBar {
         border-radius: 6px;
         border-color: Theme.palette.slint-blue-300;
 
-        Rectangle {
+        i-indicator := Rectangle {
-            x: 2px - ref-width * value;
+            x: 2px + (root.ref-width - i-indicator.width) * (-root.value / root.maximum);
-            y: 2px;
             height: parent.height - 4px;
             background: Theme.palette.slint-blue-300;
-            width: ref-width * range;
+            width: max(32px, ref-width * root.page-size / (root.maximum + root.page-size));
             border-radius: parent.border-radius - 2px;
         }
     }
+
+    TouchArea {
+        property <length> pressed-value;
+
+        width: parent.width;
+        height: parent.height;
+
+        pointer-event(event) => {
+            if (event.button == PointerEventButton.left && event.kind == PointerEventKind.down) {
+                self.pressed-value = -root.value;
+            }
+        }
+        moved => {
+            if (self.enabled && self.pressed) {
+                root.value = -max(0px, min(root.maximum, self.pressed-value + (
+                   (self.mouse-x - self.pressed-x) * (root.maximum / (root.width - i-indicator.width))
+                )));
+            }
+        }
+    }
 }
 
 export component PageContainer {
+    callback clicked <=> i-touch-area.clicked;
+
     min-width: 320px;
     min-height: 240px;
     max-height: 300px;
 
+    i-touch-area := TouchArea {}
+
     Rectangle {
         border-radius: 6px;
         background: Theme.palette.dark-deep-blue;
@@ -93,8 +117,9 @@ export component PageScrollView {
                 horizontal-stretch: 1;
 
                 ScrollBar {
-                    value: i-flickable.viewport-x / i-flickable.viewport-width;
+                    maximum: i-flickable.viewport-width - i-flickable.width;
-                    range:  i-flickable.width / i-flickable.viewport-width;
+                    page-size: i-flickable.width;
+                    value <=> i-flickable.viewport-x;
                 }
             }