Added Tab Bar and animations

2026-03-10 13:52:05 +01:00
parent 8faa56c522
commit 4ccd49b11b
4 changed files with 61 additions and 1 deletions
--- a/ui/components/minimized-tab.slint
+++ b/ui/components/minimized-tab.slint
@@ -0,0 +1,40 @@
+// Copyright (C) 2026 Hector van der Aa <hector@h3cx.dev>
+// Copyright (C) 2026 Association Exergie <association.exergie@gmail.com>
+// SPDX-License-Identifier: GPL-3.0-or-later
+import { Palette } from "../palette.slint";
+
+export component MinimizedTab {
+    in property <string> 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;
+            }
+        }
+    }
+}