Initial Commit

2026-03-09 20:44:40 +01:00
commit d36e40db85
9 changed files with 6631 additions and 0 deletions
--- a/ui/app-window.slint
+++ b/ui/app-window.slint
@@ -0,0 +1,196 @@
+import { VerticalBox, Button } from "std-widgets.slint";
+import { Palette } from "palette.slint";
+
+
+
+component StatusBadge {
+    in property <string> label;
+    in property <brush> color;
+
+    horizontal-stretch: 0;
+    HorizontalLayout {
+        spacing: 6px;
+        Rectangle {
+            width: 10px;
+            height: 10px;
+            background: color;
+            border-radius: self.width / 2;
+            y: (parent.height - self.height) / 2;
+        }
+
+        Text {
+            text: label;
+            color: Palette.text-primary;
+            vertical-alignment: center;
+            font-size: 14px;
+        }
+    }
+}
+
+component MenuButton {
+    in property <string> text;
+    callback clicked;
+
+    height: 28px;
+
+    Rectangle {
+        border-width: 2px;
+        border-color: Palette.brand;
+
+        background: area.pressed ? Palette.brand.darker(0.3) : area.has-hover ? Palette.bg-hover : Palette.bg-main;
+
+        HorizontalLayout {
+            padding-left: 12px;
+            padding-right: 12px;
+
+            Text {
+                text: root.text;
+                font-size: 14px;
+                color: Palette.text-primary;
+                vertical-alignment: center;
+                horizontal-alignment: center;
+            }
+        }
+
+        area := TouchArea {
+            mouse-cursor: pointer;
+
+            clicked => {
+                root.clicked();
+            }
+        }
+    }
+}
+
+export component AppWindow inherits Window {
+    title: "My App";
+
+    // Allow WM to resize normally
+    min-width: 400px;
+    min-height: 300px;
+
+    preferred-width: 900px;
+    preferred-height: 600px;
+
+    VerticalBox {
+        width: 100%;
+        height: 100%;
+
+        spacing: 0;
+        padding: 0;
+
+        // Top bar
+        Rectangle {
+            height: 40px;
+            width: 100%;
+            background: Palette.bg-secondary;
+
+            HorizontalLayout {
+                padding-top: 6px;
+                padding-bottom: 6px;
+                padding-left: 10px;
+                padding-right: 10px;
+                spacing: 6px;
+
+                MenuButton {
+                    text: "File";
+                }
+
+                MenuButton {
+                    text: "Edit";
+                }
+
+                Rectangle {
+                    horizontal-stretch: 1;
+                }
+
+                MenuButton {
+                    text: "Setting";
+                }
+            }
+        }
+
+        Rectangle {
+            width: 100%;
+            height: 2px;
+            background: Palette.brand;
+        }
+
+        // Main content
+        Rectangle {
+            background: Palette.bg-main;
+            horizontal-stretch: 1;
+            vertical-stretch: 1;
+        }
+
+        Rectangle {
+            width: 100%;
+            height: 2px;
+            background: Palette.brand;
+        }
+
+        Rectangle {
+            height: 32px;
+            background: Palette.bg-secondary;
+            width: 100%;
+
+            HorizontalLayout {
+                height: 100%;
+                width: 100%;
+                padding-top: 6px;
+                padding-bottom: 6px;
+                padding-left: 10px;
+                padding-right: 10px;
+                spacing: 20px;
+
+                StatusBadge {
+                    label: "LoRa";
+                    color: Palette.success;
+                }
+
+                StatusBadge {
+                    label: "V-Link";
+                    color: Palette.error;
+                }
+
+                Rectangle {
+                    horizontal-stretch: 0;
+                    height: parent.height - (2 * parent.padding-top);
+                    width: 2px;
+                    background: Palette.bg-main;
+                }
+
+                Rectangle {
+                    horizontal-stretch: 1;
+                    Text {
+                        text: "ENGINE [WARNING] - High Engine Temperature";
+                        font-size: 14px;
+                        color: Palette.text-primary;
+                    }
+                }
+
+                Rectangle {
+                    horizontal-stretch: 0;
+                    height: parent.height - (2 * parent.padding-top);
+                    width: 2px;
+                    background: Palette.bg-main;
+                }
+
+                StatusBadge {
+                    label: "Engine";
+                    color: Palette.warning;
+                }
+
+                StatusBadge {
+                    label: "ECU";
+                    color: Palette.success;
+                }
+
+                StatusBadge {
+                    label: "Telemetry";
+                    color: Palette.success;
+                }
+            }
+        }
+    }
+}