197 lines
4.6 KiB
Plaintext
197 lines
4.6 KiB
Plaintext
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|