diff --git a/ui/app-window.slint b/ui/app-window.slint index ccee7d0..1f09565 100644 --- a/ui/app-window.slint +++ b/ui/app-window.slint @@ -6,6 +6,7 @@ import { VerticalBox, Button } from "std-widgets.slint"; import { Palette } from "palette.slint"; import { DataWindow } from "components/data-window.slint"; import { MapWindow } from "components/map-window.slint"; +import { MinimizedTab } from "components/minimized-tab.slint"; component StatusBadge { in property label; @@ -43,6 +44,8 @@ component MenuButton { border-radius: 8px; background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main; + animate background { duration: 100ms; } + animate border-color { duration: 100ms; } HorizontalLayout { padding-left: 12px; @@ -123,6 +126,21 @@ export component AppWindow inherits Window { background: Palette.bg-secondary; horizontal-stretch: 1; vertical-stretch: 1; + VerticalLayout { + padding-top: 4px; + height: 100%; + width: 28px; + x: parent.width - self.width + 2px; + alignment: start; + MinimizedTab { + name: "Spark Advance"; + } + + MinimizedTab { + name: "Voltage Graph"; + } + } + DataWindow { x: 0; y: 0; @@ -149,7 +167,7 @@ export component AppWindow inherits Window { y: 0; data-min: 2200; data-max: 9400; - name: "Config 1 - Injection Period"; + name: "Injection Period"; map-axis: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]; rpm-axis: [ 250, diff --git a/ui/components/data-window.slint b/ui/components/data-window.slint index 4f15240..62496bb 100644 --- a/ui/components/data-window.slint +++ b/ui/components/data-window.slint @@ -106,6 +106,7 @@ export component DataWindow { border-width: 2px; border-radius: 8px; vertical-stretch: 1; + animate border-color { duration: 200ms; } } } } diff --git a/ui/components/map-window.slint b/ui/components/map-window.slint index 590c429..f3e396b 100644 --- a/ui/components/map-window.slint +++ b/ui/components/map-window.slint @@ -139,6 +139,7 @@ export component MapWindow { border-width: 2px; border-radius: 8px; vertical-stretch: 1; + animate border-color { duration: 200ms; } } } } diff --git a/ui/components/minimized-tab.slint b/ui/components/minimized-tab.slint new file mode 100644 index 0000000..d020dba --- /dev/null +++ b/ui/components/minimized-tab.slint @@ -0,0 +1,40 @@ +// Copyright (C) 2026 Hector van der Aa +// Copyright (C) 2026 Association Exergie +// SPDX-License-Identifier: GPL-3.0-or-later +import { Palette } from "../palette.slint"; + +export component MinimizedTab { + in property name; + height: label.width + 20px; + VerticalLayout { + padding-bottom: 4px; + Rectangle { + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + border-width: 2px; + border-color: area.has-hover ? Palette.brand : Palette.border; + background: area.pressed ? Palette.brand : area.has-hover ? Palette.bg-hover : Palette.bg-main; + + animate background { duration: 100ms; } + animate border-color { duration: 100ms; } + + label := Text { + text: name; + transform-origin: { x: self.width / 2, y: self.height / 2 }; + transform-rotation: -90deg; + color: Palette.text-primary; + font-size: 14px; + + horizontal-alignment: center; + vertical-alignment: center; + + x: parent.width / 2 - self.width / 2 + 1px; + y: parent.height / 2 - self.height / 2; + } + + area := TouchArea { + mouse-cursor: pointer; + } + } + } +}