Begin implmenting keyboard power states

rog-control-center/ui/widgets/aura_power.slint

@@ -0,0 +1,67 @@
+import { VerticalBox, HorizontalBox } from "std-widgets.slint";
+import { SystemToggleVert } from "common.slint";
+import { Theme } from "../globals.slint";
+
+export component AuraPowerGroup inherits Rectangle {
+    border-radius: 20px;
+    background: Theme.window-background;
+
+    in-out property <string> title;
+    in-out property <bool> boot_checked;
+    in-out property <bool> awake_checked;
+    in-out property <bool> sleep_checked;
+    in-out property <bool> shutdown_checked;
+    callback boot_toggled(bool);
+    callback awake_toggled(bool);
+    callback sleep_toggled(bool);
+    callback shutdown_toggled(bool);
+
+    VerticalBox {
+        spacing: 10px;
+        alignment: LayoutAlignment.start;
+        Text {
+            font-size: 18px;
+            color: Theme.text-foreground-color;
+            horizontal-alignment: TextHorizontalAlignment.center;
+            text <=> root.title;
+        }
+
+        HorizontalBox {
+            SystemToggleVert {
+                max-height: 42px;
+                text: @tr("Boot");
+                checked <=> root.boot_checked;
+                toggled => {
+                    root.boot_toggled(self.checked);
+                }
+            }
+
+            SystemToggleVert {
+                max-height: 42px;
+                text: @tr("Awake");
+                checked <=> root.awake_checked;
+                toggled => {
+                    root.awake_toggled(self.checked);
+                }
+            }
+
+            SystemToggleVert {
+                max-height: 42px;
+                text: @tr("Sleep");
+                checked <=> root.sleep_checked;
+                toggled => {
+                    root.sleep_toggled(self.checked);
+                }
+            }
+
+            SystemToggleVert {
+                max-height: 42px;
+                text: @tr("Shutdown");
+                checked <=> root.shutdown_checked;
+                toggled => {
+                    root.shutdown_toggled(self.checked);
+                }
+            }
+        }
+    }
+}

rog-control-center/ui/widgets/colour_picker.slint

@@ -13,19 +13,43 @@ export component ColourSlider inherits VerticalLayout {
     in-out property <float> c1value<=> c1.value;
     in-out property <float> c2value<=> c2.value;
     property <[color]> base_colours: [
-        Colors.rgb( 255, 0, 0),
-        Colors.rgb( 255, 128, 0),
-        Colors.rgb( 255, 255, 0),
-        Colors.rgb( 128, 255, 0),
-        Colors.rgb( 0, 255, 0),
-        Colors.rgb( 0, 255, 128),
-        Colors.rgb( 0, 255, 255),
-        Colors.rgb( 0, 128, 255),
-        Colors.rgb( 0, 0, 255),
-        Colors.rgb( 127, 0, 255),
-        Colors.rgb( 255, 0, 255),
-        Colors.rgb( 255, 0, 127),
-        Colors.rgb( 128, 128, 128)
+        hsv(0, 1, 1),
+        hsv(10, 1, 1),
+        hsv(20, 1, 1),
+        hsv(30, 1, 1),
+        hsv(40, 1, 1),
+        hsv(50, 1, 1),
+        hsv(60, 1, 1),
+        hsv(70, 1, 1),
+        hsv(80, 1, 1),
+        hsv(90, 1, 1),
+        hsv(100, 1, 1),
+        hsv(110, 1, 1),
+        hsv(120, 1, 1),
+        hsv(130, 1, 1),
+        hsv(140, 1, 1),
+        hsv(150, 1, 1),
+        hsv(160, 1, 1),
+        hsv(170, 1, 1),
+        hsv(180, 1, 1),
+        hsv(190, 1, 1),
+        hsv(200, 1, 1),
+        hsv(210, 1, 1),
+        hsv(220, 1, 1),
+        hsv(230, 1, 1),
+        hsv(240, 1, 1),
+        hsv(250, 1, 1),
+        hsv(260, 1, 1),
+        hsv(270, 1, 1),
+        hsv(280, 1, 1),
+        hsv(290, 1, 1),
+        hsv(300, 1, 1),
+        hsv(310, 1, 1),
+        hsv(320, 1, 1),
+        hsv(330, 1, 1),
+        hsv(340, 1, 1),
+        hsv(350, 1, 1),
+        hsv(360, 1, 1),
     ];
     property <[color]> base_shade: [
         blend_lightness(base_colour, 1.0),
@@ -42,15 +66,13 @@ export component ColourSlider inherits VerticalLayout {
     ];
 
     function blend_lightness(c1: color, f: float) -> color {
-        rgb(c1.red() * f, c1.green() * f, c1.blue() * f)
-     }
-
+        rgb(c1.red * f, c1.green * f, c1.blue * f)
+    }
     function set_base_colour() {
-        root.base_colour = base_colours[c1.value].linear-blend(base_colours[c1.value + 1], c1.value - Math.floor(c1.value));
+        root.base_colour = base_colours[c1.value].interpolate(base_colours[c1.value + 1], c1.value - Math.floor(c1.value));
         root.final_colour = blend_lightness(base_colour, ((base_shade.length - c2.value) / base_shade.length));
         root.colourbox = root.final_colour;
-    }
-    callback external_colour_change();
+    }callback external_colour_change();
     external_colour_change => {
         if (root.final_colour.hue() < 0) {
             c1.value = (root.base_colours.length - 1) * ((root.final_colour.hue() + 360) / 360);
@@ -64,14 +86,15 @@ export component ColourSlider inherits VerticalLayout {
     Rectangle {
         height: 32px;
         // 13 colours
-        background: @linear-gradient(90deg, base_colours[0], base_colours[1], base_colours[2], base_colours[3], base_colours[4], base_colours[5], base_colours[6], base_colours[7], base_colours[8], base_colours[9], base_colours[10], base_colours[11], base_colours[12]);
+        background: @linear-gradient(90deg, base_colours[0], base_colours[1], base_colours[2], base_colours[3], base_colours[4], base_colours[5], base_colours[6], base_colours[7], base_colours[8], base_colours[9], base_colours[10], base_colours[11], base_colours[12], base_colours[13], base_colours[14], base_colours[15], base_colours[16], base_colours[17], base_colours[18], base_colours[19], base_colours[20], base_colours[21], base_colours[22], base_colours[23], base_colours[24], base_colours[25], base_colours[26], base_colours[27], base_colours[28], base_colours[29], base_colours[30], base_colours[31], base_colours[32], base_colours[33], base_colours[34], base_colours[35]);
         clip: true;
         border-radius: 6px;
         c1 := Slider {
             width: parent.width;
             height: parent.height;
             minimum: 0;
-            maximum: root.base_colours.length - 1; // One less than the array length
+            maximum: root.base_colours.length - 1;
+            // One less than the array length
             changed => {
                 set_base_colour();
                 hex = set_hex_from_colour(final_colour);
@@ -110,7 +133,6 @@ export component ColourSlider inherits VerticalLayout {
         Rectangle {
             width: self.height;
             background <=> root.colourbox;
-
         }
     }
 }

rog-control-center/ui/widgets/common.slint

@@ -0,0 +1,240 @@
+import { VerticalBox , StandardButton, Button, HorizontalBox, ComboBox, Switch, Slider} from "std-widgets.slint";
+import { Theme } from "../globals.slint";
+
+export component RogItem inherits Rectangle {
+    background: Theme.background-color;
+    border-color: Colors.black;
+    border-width: 3px;
+    border-radius: 10px;
+}
+
+export component SystemSlider inherits RogItem {
+    in property <string> text;
+    in-out property <float> value;
+    in-out property <float> minimum;
+    in-out property <float> maximum;
+    callback released(int);
+    HorizontalLayout {
+        HorizontalBox {
+            width: 30%;
+            alignment: LayoutAlignment.start;
+            Text {
+                font-size: 16px;
+                vertical-alignment: TextVerticalAlignment.center;
+                color: Theme.text-foreground-color;
+                text <=> root.text;
+            }
+
+            Text {
+                font-size: 16px;
+                vertical-alignment: TextVerticalAlignment.center;
+                color: Theme.text-foreground-color;
+                text: ": \{Math.round(root.value)}";
+            }
+        }
+
+        HorizontalBox {
+            // alignment: LayoutAlignment.end;
+            padding-right: 20px;
+            Slider {
+                maximum: root.maximum;
+                minimum: root.minimum;
+                value <=> root.value;
+                released => {
+                    root.released(Math.round(root.value))
+                }
+            }
+        }
+    }
+}
+
+export component SystemToggle inherits RogItem {
+    in property <string> text;
+    in-out property <bool> checked;
+    callback toggled(bool);
+    HorizontalLayout {
+        HorizontalBox {
+            alignment: LayoutAlignment.start;
+            Text {
+                font-size: 16px;
+                vertical-alignment: TextVerticalAlignment.center;
+                color: Theme.text-foreground-color;
+                text <=> root.text;
+            }
+        }
+
+        HorizontalBox {
+            alignment: LayoutAlignment.end;
+            padding-right: 20px;
+            Switch {
+                checked <=> root.checked;
+                toggled => {
+                    root.toggled(root.checked)
+                }
+            }
+        }
+    }
+}
+
+export component SystemToggleVert inherits RogItem {
+    in property <string> text;
+    in-out property <bool> checked;
+    callback toggled(bool);
+    VerticalLayout {
+        HorizontalBox {
+            alignment: LayoutAlignment.center;
+            padding-top: 10px;
+            Text {
+                font-size: 16px;
+                vertical-alignment: TextVerticalAlignment.bottom;
+                horizontal-alignment: TextHorizontalAlignment.center;
+                color: Theme.text-foreground-color;
+                text <=> root.text;
+            }
+        }
+
+        HorizontalBox {
+            alignment: LayoutAlignment.center;
+            padding: 10px;
+            Switch {
+                checked <=> root.checked;
+                toggled => {
+                    root.toggled(root.checked)
+                }
+            }
+        }
+    }
+}
+
+export component SystemDropdown inherits RogItem {
+    in property <string> text;
+    in-out property <int> current_index;
+    in-out property <string> current_value;
+    in-out property <[string]> model;
+    callback selected(int);
+    HorizontalLayout {
+        HorizontalBox {
+            alignment: LayoutAlignment.start;
+            Text {
+                font-size: 16px;
+                vertical-alignment: TextVerticalAlignment.center;
+                color: Theme.text-foreground-color;
+                text <=> root.text;
+            }
+        }
+
+        HorizontalBox {
+            alignment: LayoutAlignment.end;
+            padding-right: 20px;
+            ComboBox {
+                model <=> root.model;
+                current-index <=> root.current_index;
+                current-value <=> root.current_value;
+                selected => {
+                    root.selected(root.current_index)
+                }
+            }
+        }
+    }
+}
+
+// A variable bar that can be single or double ended
+export component ValueBar inherits Rectangle {
+    in property <float> value: 0.0;
+    in property <float> min: 0.0;
+    in property <float> max: 1.0;
+    function percentage(min: float, max: float, value: float) -> float {
+        if (min < 0.0 && max > 0.0) {
+            // do a percentage of each half as 0-50%
+            if (value >= max + min) {
+                return (value - (max + min) / 2) / (max - min);
+            }
+            return 0.50 - (value - (min - max) / 2) / (max - min);
+        }
+        return (value - min) / (max - min);
+    }function set_x(min: float, max: float, value: float, width: length) -> length {
+        if (min < 0.0 && max > 0.0) {
+            if (value < max + min) {
+                return width / 2 - width * (percentage(min, max, value));
+            }
+            return width / 2;
+        }
+        return 0;
+    }Rectangle {
+        border-radius: 3px;
+        background: Theme.neutral-box;
+        Rectangle {
+            x: set_x(root.min, root.max, root.value, root.width);
+            width: parent.x + parent.width * percentage(root.min, root.max, root.value);
+            border-radius: parent.border-radius;
+            background: Theme.control-secondary;
+        }
+
+        Text {
+            vertical-alignment: center;
+            horizontal-alignment: center;
+            text: root.value;
+            font-size: root.height;
+            font-weight: 900;
+            color: Theme.control-foreground;
+        }
+    }
+}
+
+export component PopupNotification {
+    in property <string> heading;
+    in property <string> content;
+    _p := PopupWindow {
+        x: root.x;
+        y: root.y;
+        width: root.width;
+        height: root.height;
+        // TODO: add properties to display
+        Rectangle {
+            border-width: 2px;
+            border-color: Theme.control-outline;
+            background: Theme.notification-background;
+            // TODO: drop shadows slow
+            // drop-shadow-offset-x: 7px;
+            // drop-shadow-offset-y: 7px;
+            // drop-shadow-color: black;
+            // drop-shadow-blur: 30px;
+            VerticalLayout {
+                Dialog {
+                    VerticalLayout {
+                        alignment: start;
+                        Text {
+                            text: heading;
+                            color: Theme.text-foreground-color;
+                            font-size: 32px;
+                            font-weight: 900;
+                        }
+
+                        Text {
+                            text: content;
+                            color: Theme.text-foreground-color;
+                            font-size: 18px;
+                        }
+                    }
+
+                    StandardButton {
+                        kind: ok;
+                    }
+
+                    StandardButton {
+                        kind: cancel;
+                    }
+
+                    Button {
+                        text: "More Info";
+                        dialog-button-role: action;
+                    }
+                }
+            }
+        }
+    }
+
+    public function show() {
+        _p.show();
+    }
+}

rog-control-center/ui/widgets/sidebar.slint

@@ -4,11 +4,13 @@
 import { StyleMetrics } from "std-widgets.slint";
 
 component SideBarItem inherits Rectangle {
+    padding: 10px;
     in property <bool> selected;
     in property <bool> has-focus;
     in-out property <string> text<=> label.text;
     callback clicked<=>touch.clicked;
-    min-height: self.visible ? l.preferred-height : 0px;
+    min-height: self.visible ? l.preferred-height + 10px : 0px;
+    // min-width: self.visible ? l.preferred-width + 10px : 0px;
     states [
         pressed when touch.pressed: {
             state.opacity: 0.8;
@@ -30,6 +32,7 @@ component SideBarItem inherits Rectangle {
         background: StyleMetrics.window-background;
         animate opacity { duration: 150ms; }
         animate border-width { duration: 150ms; }
+        height: l.preferred-height;
     }
 
     l := HorizontalLayout {
@@ -102,7 +105,7 @@ export component SideBar inherits Rectangle {
         }
 
         navigation := VerticalLayout {
-            spacing: 10px;
+            // spacing: 10px;
             alignment: start;
             vertical-stretch: 0;
             for item[index] in root.model: SideBarItem {