Add footer buttons

2026-06-04 00:11:04 +02:00
parent 0f4391d388
commit 799aebb49c
6 changed files with 104 additions and 12 deletions
--- a/ui/footer.slint
+++ b/ui/footer.slint
@@ -0,0 +1,59 @@
+import { Palette } from "std-widgets.slint";
+
+export component FooterButton inherits Rectangle {
+    in property <string> title: "Button";
+    in property <image> icon;
+    callback clicked <=> touch.clicked;
+
+    states [
+        pressed when touch.pressed: {
+             background: #0000ff30;
+        }
+        hovered when touch.has-hover: {
+             background: #0000ff15;
+        }
+        default: {
+            background: #0000;
+        }
+    ]
+
+    animate background {
+         duration: 0.1s;
+         easing: ease-in-out;
+    }
+
+    border-radius: 20px;
+
+    VerticalLayout {
+        padding: 10px;
+        padding-left: 20px;
+        padding-right: 20px;
+        Image {
+            source: icon;
+            colorize: #accbfa;
+        }
+        Text {
+            text: title;
+            horizontal-alignment: center;
+        }
+    }
+
+    touch := TouchArea {}
+}
+
+export component Footer inherits Rectangle {
+    width: 100%;
+    height: 88px;
+    background: Palette.alternate-background;
+
+    HorizontalLayout {
+        height: parent.height;
+        spacing: 16px;
+        padding-top: 8px;
+        padding-bottom: 16px;
+        padding-left: 16px;
+        padding-right: 16px;
+
+        @children
+    }
+}