Move constants to constants file; add standardised horizontal/vertical layouts

Author: suchmememanyskill

src/main.rs

@@ -85,7 +85,6 @@ async fn main() -> Result<(), Box<dyn Error>> {
 
     register_temperature_set_new_target_temperature(&ui, &moonraker_connection);
 
-    register_util_image_exists(&ui);
     register_util_format_bytes(&ui);
     register_util_prettify_name(&ui);
     register_util_time_in_seconds_to_string(&ui);

src/ui_functions/mod.rs

@@ -1,6 +1,5 @@
 pub mod util_format_bytes;
 pub mod filesystem_fetch_metadata;
-pub mod util_image_exists;
 pub mod filesystem_list_files;
 pub mod util_prettify_name;
 pub mod temperature_set_new_target_temperature;
@@ -15,7 +14,6 @@ pub mod util_time_in_seconds_to_string;
 
 pub use util_format_bytes::*;
 pub use filesystem_fetch_metadata::*;
-pub use util_image_exists::*;
 pub use filesystem_list_files::*;
 pub use util_prettify_name::*;
 pub use temperature_set_new_target_temperature::*;

src/ui_functions/util_image_exists.rs

@@ -7,13 +7,11 @@ export component BottomBar inherits Rectangle {
     background: Palette.alternate-background;
     in property <string> text;
 
-    HorizontalLayout {
-        Text {
-            text: text;
-            horizontal-alignment: center;
-            vertical-alignment: center;
-            color: Palette.alternate-foreground;
-        }
+    Text {
+        text: text;
+        horizontal-alignment: center;
+        vertical-alignment: bottom;
+        color: Palette.alternate-foreground;
     }
 }
 

ui/components/bottom-bar.slint

@@ -1,30 +1,29 @@
 import { Palette } from "std-widgets.slint";
+import { Constants } from "../constants.slint";
 
-export component GhostButton inherits VerticalLayout {
+export component GhostButton inherits Rectangle {
     in property <string> text;
     in property <color> text-color: Palette.foreground;
     callback clicked;
 
     states [
         pressed when touch-area.pressed : {
-            container.background: Palette.selection-background;
+            root.background: Palette.selection-background;
         }
     ]
 
-    container := Rectangle {
-        min-height: t.height * 2;
-        min-width: t.width * 1.5;
-        border-radius: 10px;
-        //background: red;
+    min-height: t.height * 2;
+    min-width: t.width * 1.5;
+    border-radius: Constants.radius-md;
+    //background: red;
 
-        t := Text {
-            text: text;
-            color: text-color;
-            font-weight: 600;
-        }
+    t := Text {
+        text: text;
+        color: text-color;
+        font-weight: 600;
+    }
 
-        touch-area := TouchArea {
-            clicked => { root.clicked(); }
-        }
+    touch-area := TouchArea {
+        clicked => { root.clicked(); }
     }
 }

ui/components/ghost-button.slint

@@ -0,0 +1,28 @@
+
+import { Palette, StyleMetrics } from "std-widgets.slint";
+import { Constants } from "../constants.slint";
+export component HorizontalStart inherits HorizontalLayout {
+    spacing: Constants.spacing;
+    alignment: LayoutAlignment.start;
+}
+
+export component HorizontalStretch inherits HorizontalStart  {
+    alignment: LayoutAlignment.stretch;
+}
+
+export component HorizontalCenter inherits HorizontalStart  {
+    alignment: LayoutAlignment.center;
+}
+
+export component HorizontalEnd inherits HorizontalStart  {
+    alignment: LayoutAlignment.end;
+}
+
+export component HorizontalScrollable inherits Flickable {
+    in property <length> list-padding <=> layout.padding;
+    in property <length> list-spacing <=> layout.spacing;
+
+    layout := HorizontalStart {
+        @children
+    }
+}

ui/components/horizontal.slint

@@ -1,4 +1,5 @@
 import { Palette, StyleMetrics } from "std-widgets.slint";
+import { Constants } from "../constants.slint";
 
 export component IconButton inherits Rectangle {
     in property <image> icon <=> img.source;
@@ -30,13 +31,13 @@ export component IconButton inherits Rectangle {
 export component RightSideIconButton inherits IconButton {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    border-top-right-radius: StyleMetrics.layout-padding;
-    border-bottom-right-radius: StyleMetrics.layout-padding;
+    border-top-right-radius: Constants.radius-lg;
+    border-bottom-right-radius: Constants.radius-lg;
 }
 
 export component LeftSideIconButton inherits IconButton {
-    border-top-left-radius: StyleMetrics.layout-padding;
-    border-bottom-left-radius: StyleMetrics.layout-padding;
+    border-top-left-radius: Constants.radius-lg;
+    border-bottom-left-radius: Constants.radius-lg;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }

ui/components/icon-button.slint

@@ -1,7 +1,9 @@
 import { VirtualKeyboardButton } from "../virtual_keyboard.slint";
-import { Icons } from "../constants.slint";
+import { Icons, Constants } from "../constants.slint";
 import { StyleMetrics } from "std-widgets.slint";
 import { TemperatureSensors } from "../state.slint";
+import { VerticalStart, VerticalStretch } from "vertical.slint";
+import { HorizontalStart, HorizontalStretch } from "horizontal.slint";
 
 export component NumberPad inherits Rectangle 
 {
@@ -28,19 +30,16 @@ export component NumberPad inherits Rectangle
             : ceil(current-number / 10);
     }
 
-    VerticalLayout {
-        spacing: 5px;
-        
-        HorizontalLayout {
-            spacing: 5px;
+    VerticalStretch {
+        HorizontalStretch {
             vertical-stretch: 1;
 
             Text {
                 text: name + ": " + current-number;
                 horizontal-alignment: center;
                 vertical-alignment: center;
-                font-size: 20px;
-                font-weight: 900;
+                font-size: Constants.font-size-lg;
+                font-weight: Constants.font-weight-bold;
                 horizontal-stretch: 5;
             }
 
@@ -49,26 +48,23 @@ export component NumberPad inherits Rectangle
             if can_go_negative: VirtualKeyboardButton { key: current-number >= 0 ? "-" : "+"; key-pressed => { current-number *= -1; } }
         }
 
-        HorizontalLayout {
-            spacing: 5px;
+        HorizontalStretch {
             vertical-stretch: 1;
             VirtualKeyboardButton { key: "1"; key-pressed => { add(1) } }
             VirtualKeyboardButton { key: "2"; key-pressed => { add(2) } }
             VirtualKeyboardButton { key: "3"; key-pressed => { add(3) } }
             VirtualKeyboardButton { icon: Icons.check; key-pressed => { accept(current-number); current-number = 0; } }
         }
 
-        HorizontalLayout {
-            spacing: 5px;
+        HorizontalStretch {
             vertical-stretch: 1;
             VirtualKeyboardButton { key: "4"; key-pressed => { add(4) } }
             VirtualKeyboardButton { key: "5"; key-pressed => { add(5) } }
             VirtualKeyboardButton { key: "6"; key-pressed => { add(6) } }
             VirtualKeyboardButton { icon: Icons.close; key-pressed => { cancel(); } }
         }
 
-        HorizontalLayout {
-            spacing: 5px;
+        HorizontalStretch {
             vertical-stretch: 1;
             VirtualKeyboardButton { key: "7"; key-pressed => { add(7) } }
             VirtualKeyboardButton { key: "8"; key-pressed => { add(8) } }
@@ -94,8 +90,8 @@ export component TemperatureEntry
     height: 100%;
 
     if is_keyboard_open: GridLayout {
-        padding-left: StyleMetrics.layout-padding / 2;
-        padding-right: StyleMetrics.layout-padding / 2;
+        padding-left: Constants.padding-half;
+        padding-right: Constants.padding-half;
         NumberPad {
             name: friendly_temp_device_name;
             accept(number) => {

ui/components/number-pad.slint

@@ -1,11 +1,15 @@
 import { StyleMetrics } from "std-widgets.slint";
+import { Constants } from "../constants.slint";
 
 export component Page inherits Rectangle {
     in property <string> header;
     width: 100%; 
     height: 100%;
     GridLayout {
-        padding: StyleMetrics.layout-padding / 2;
+        padding-top: Constants.padding-half;
+        padding-bottom: Constants.padding-half;
+        padding-left: Constants.padding;
+        padding-right: Constants.padding;
         Rectangle {
             vertical-stretch: 1;
             @children

ui/components/page.slint

@@ -1,13 +1,15 @@
 import { Palette, StyleMetrics } from "std-widgets.slint";
 import { Utils } from "../state.slint";
+import { Constants } from "../constants.slint";
+import { HorizontalStart, HorizontalCenter } from "horizontal.slint";
 
 export component SmallButton inherits Rectangle {
     in property <string> text;
     in property <image> icon;
     callback clicked();
 
     background: Palette.control-background;
-    border-radius: 20px;
+    border-radius: Constants.radius-lg;
 
     states [
         pressed when touch-area.pressed : {
@@ -16,17 +18,16 @@ export component SmallButton inherits Rectangle {
     ]
 
     GridLayout {
-        padding-left: 10px;
-        padding-right: 10px;
+        padding-left: Constants.padding-half;
+        padding-right: Constants.padding-half;
 
         Rectangle {
             touch-area := TouchArea {
                 clicked => { root.clicked(); }
             }
 
-            HorizontalLayout {
-                spacing: 10px;
-                alignment: center;
+            HorizontalCenter {
+                spacing: Constants.spacing-half;
                 if Utils.image_exists(root.icon) : Image {
                     source: root.icon;
                     colorize: Palette.control-foreground;