energy mng demo: settings menu (#2263)

* energy-mng: settings menu

* SettingsOverview
* About
* Settings page
* IconButton
* ScrollView
* ListView
* Item / ItemGroup
* CheckBox
* RadioButton
* Switch

* emng: code review

* Update examples/energy_mng/ui/pages/menu_page/settings.slint

Co-authored-by: Olivier Goffart <[email protected]>

---------

Co-authored-by: Olivier Goffart <[email protected]>

examples/energy_mng/ui/components/state_layer.slint

@@ -3,19 +3,24 @@
 
 import { Theme } from "../theme.slint";
 
-export component StateLayer inherits Rectangle {
-    callback clicked <=> i-touch-area.clicked;
+export component StateLayer inherits TouchArea {
+    in property <length> border-radius <=> i-container.border-radius;
+
+    width: 100%;
+    height: 100%;
 
-    background: Theme.palette.pure-black;
-    opacity: 0.0;
-
-    i-touch-area := TouchArea {}
-
-    animate background { duration: Theme.durations.medium; }
+    i-container := Rectangle {  
+        width: 100%;
+        height: 100%;
+        background: Theme.palette.pure-black;
+        opacity: 0.0;
+
+        animate background { duration: Theme.durations.medium; }
+    }
 
     states [  
-        pressed when i-touch-area.pressed : {
-            opacity: 0.12;
+        pressed when root.pressed : {
+            i-container.opacity: 0.12;
         }
     ]
 }

examples/energy_mng/ui/main_window.slint

@@ -3,8 +3,9 @@
 
 import { Theme } from "theme.slint";
 import { Navigation, MenuButton, Menu, Value } from "widgets/widgets.slint";
-import { Balance, BalanceAdapter, Overview, OverviewAdapter, Usage, UsageAdapter, Weather, WeatherAdapter } from "pages/pages.slint";
-export { OverviewAdapter, UsageAdapter, Value, WeatherAdapter }
+import { Balance, BalanceAdapter, Overview, OverviewAdapter, Usage, UsageAdapter, Weather, WeatherAdapter,
+    MenuPage, MenuPageAdapter, MenuOverviewAdapter, SettingsAdapter } from "pages/pages.slint";
+export { OverviewAdapter, UsageAdapter, Value, WeatherAdapter, MenuPageAdapter, MenuOverviewAdapter, SettingsAdapter }
 
 export component MainWindow inherits Window {
     title: "EnergyMNG Demo";
@@ -13,8 +14,8 @@ export component MainWindow inherits Window {
     background: Theme.palette.pure-black;
 
     i-navigation := Navigation { 
+        current-index <=> MenuOverviewAdapter.current-page;
         page-count: 4;
-        current-index: 2;
 
         Overview {
             index: 0;
@@ -35,6 +36,7 @@ export component MainWindow inherits Window {
 
         pagination-clicked => {  
             i-menu.show-button();
+            i-navigation.hide();
         }
 
         clicked => {
@@ -49,5 +51,11 @@ export component MainWindow inherits Window {
         end-y: 9px;
         width: parent.width - 8px;
         height: parent.height - 14px;  
+
+        MenuPage {
+            page-changed => {  
+                i-menu.hide();
+            }
+        }
     }
 }

examples/energy_mng/ui/pages/menu_page/about.slint

@@ -0,0 +1,73 @@
+// Copyright © SixtyFPS GmbH <[email protected]>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
+
+import { Theme } from "../../theme.slint";
+import { Page } from "../page.slint";
+import { IconButton } from "../../widgets/widgets.slint";
+
+export component About inherits Page {
+    callback back <=> i-back-button.clicked;
+
+    padding-left: 0;
+    padding-right: 0;
+
+    VerticalLayout {  
+        padding-left: Theme.spaces.medium;
+        padding-right: Theme.spaces.medium;
+        padding-top: Theme.spaces.medium;
+        padding-bottom: Theme.spaces.large;
+        spacing: Theme.spaces.medium;
+
+        HorizontalLayout {  
+            vertical-stretch: 0;
+            alignment: start;
+
+            i-back-button := IconButton {
+                horizontal-stretch: 0;
+                icon: @image-url("../../assets/arrow-left.svg");
+            }
+        }
+
+        Text {  
+            vertical-stretch: 0;
+            horizontal-alignment: center;
+            text: "Developed by";
+            color: Theme.palette.slint-blue-100;
+            font-size: Theme.typo.desciption.size;
+            font-weight: Theme.typo.desciption.weight;
+        }
+
+        Image {  
+            preferred-height: 45px;
+            source: @image-url("../../../../../logo/slint-logo-simple-white.svg");
+        }
+
+        // spacer
+        Rectangle { 
+            vertical-stretch: 1;
+        }
+
+        Text {  
+            vertical-stretch: 0;
+            horizontal-alignment: center;
+            text: "Designed by";
+            color: Theme.palette.slint-blue-100;
+            font-size: Theme.typo.desciption.size;
+            font-weight: Theme.typo.desciption.weight;
+        }
+
+        Text {  
+            vertical-stretch: 0;
+            horizontal-alignment: center;
+            text: "Spyrosoft";
+            color: Theme.palette.white;
+            font-size: Theme.typo.header-item.size;
+            font-weight: Theme.typo.header-item.weight;
+        }
+
+        // Image {  
+        //     preferred-height: 32px;
+        //     source: @image-url("../assets/logo-spyrosoft.svg");
+        // }
+    }
+}

examples/energy_mng/ui/pages/menu_page/menu_overview.slint

@@ -0,0 +1,56 @@
+// Copyright © SixtyFPS GmbH <[email protected]>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
+
+import { Theme } from "../../theme.slint";
+import { About } from "about.slint";
+import { Page } from "../page.slint";
+import { IconButton, ListView } from "../../widgets/widgets.slint";
+
+export global MenuOverviewAdapter {
+    in property <[StandardListViewItem]> model: [
+        { text: "Production & Self-consumption"},
+        { text: "Usage"},
+        { text: "Balance"},
+        { text: "Weather"},
+    ];
+    in-out property <int> current-page;
+}
+
+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: @image-url("../../assets/settings.svg");
+            }
+
+            // spacer
+            Rectangle {  
+                horizontal-stretch: 1;
+            }
+
+            i-about-button := IconButton { 
+                icon: @image-url("../../assets/information.svg");
+            }
+        }
+
+        i-page-list := ListView {  
+            model: root.model;
+            selected-index <=> root.current-page;
+        }
+    }
+}

examples/energy_mng/ui/pages/menu_page/menu_page.slint

@@ -0,0 +1,65 @@
+// Copyright © SixtyFPS GmbH <[email protected]>
+// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial
+
+import { About } from "about.slint";
+import { MenuOverview, MenuOverviewAdapter } from "menu_overview.slint";
+import { Settings, SettingsAdapter } from "settings.slint";
+import { Theme } from "../../theme.slint";
+
+export { MenuOverviewAdapter, SettingsAdapter }
+
+export global MenuPageAdapter {
+    in property <[StandardListViewItem]> model: [
+        { text: "Production & Self-consumption"},
+        { text: "Usage"},
+        { text: "Balance"},
+        { text: "Weather"},
+    ];
+    in-out property <int> selected-index;
+}
+
+export component MenuPage {
+    callback page-changed <=> i-overview.page-changed;
+
+    private property <int> current-index;
+    private property <bool> show-settings;
+
+    i-overview := MenuOverview {  
+         index: 0;
+         current-index: root.current-index;
+
+         show-settings => {  
+             show-settings = true;
+             current-index = 1;
+
+         }
+         show-about => {  
+             show-settings = false;
+             current-index = 1;
+         }
+    }
+
+    About {
+         visible: !show-settings;
+         index: 1;
+         current-index: root.current-index;
+
+         back => { 
+             back();
+         }
+     }
+
+    Settings {
+         visible: show-settings;
+         index: 1;
+         current-index: root.current-index;
+
+         back => {  
+             back();
+         }
+    }
+
+    function back() {
+         current-index = 0;
+    }
+ }