Initial Commit

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;
+                }
+            }
+        }
+    }
+}

ui/palette.slint

@@ -0,0 +1,24 @@
+export global Palette {
+
+    // ---------- BRAND ----------
+    in property <color> brand: #f67a00;
+
+    // ---------- BACKGROUND ----------
+    in property <color> bg-main: #0f1115;
+    in property <color> bg-secondary: #3a3a3a;
+    in property <color> bg-panel: #171a1f;
+    in property <color> bg-hover: #1f232a;
+
+    // ---------- TEXT ----------
+    in property <color> text-primary: #ffffff;
+    in property <color> text-secondary: #a0a7b4;
+    in property <color> text-dim: #6b7280;
+
+    // ---------- STATES ----------
+    in property <color> success: #22c55e;
+    in property <color> warning: #f59e0b;
+    in property <color> error: #ef4444;
+
+    // ---------- BORDERS ----------
+    in property <color> border: #2a2f36;
+}