Replace toolbar items with buttons

ui/tool_bar.slint

@@ -1,49 +1,71 @@
 import { Metrics, DarkPalette } from "theme.slint";
-import { Button } from "std-widgets.slint";
 import { HorizontalSeparator } from "widgets/separator.slint";
 import { Box, VerticalBox } from "widgets/layout.slint";
+import { Button } from "widgets/button.slint";
 
-component ToolBarItem inherits Box {
+component ToolBarItem inherits Button {
     width: Metrics.size-lg;
     height: Metrics.size-lg;
-    j-elevation: 2;
+    p-elevation: 0;
 }
 
 export component ToolBar inherits VerticalBox {
     width: Metrics.size-xl;
     j-alignment: start;
 
-    Button {
+    ToolBarItem {
-        checkable: true;
+        p-text: "s";
     }
 
-    ToolBarItem { }
+    ToolBarItem {
+        p-text: "m";
+    }
 
-    ToolBarItem { }
+    ToolBarItem {
+        p-text: "r";
+    }
 
-    ToolBarItem { }
+    ToolBarItem {
-
+        p-text: "s";
-    ToolBarItem { }
+    }
 
     HorizontalSeparator { }
 
-    ToolBarItem { }
+    ToolBarItem {
+        p-text: "b";
+    }
 
-    ToolBarItem { }
+    ToolBarItem {
+        p-text: "o";
+    }
 
-    ToolBarItem { }
+    ToolBarItem {
+        p-text: "f";
+    }
 
-    ToolBarItem { }
+    ToolBarItem {
+        p-text: "r";
+    }
 
-    ToolBarItem { }
+    ToolBarItem {
+        p-text: "l";
+    }
 
-    ToolBarItem { }
+    ToolBarItem {
+        p-text: "a";
+    }
 
     HorizontalSeparator { }
 
-    ToolBarItem { }
+    ToolBarItem {
+        p-text: "t";
+    }
 
-    ToolBarItem { }
+    ToolBarItem {
+        p-text: "t";
+    }
 
-    ToolBarItem { }
+    ToolBarItem {
+        p-text: "m";
+    }
 }

ui/widgets/button.slint

@@ -0,0 +1,65 @@
+import { Metrics, DarkPalette } from "../theme.slint";
+
+export component Button {
+    in property <string> p-text;
+    in property <image> p-icon;
+    in property <bool> p-primary;
+    in property <bool> p-shadow;
+    in property <bool> p-enabled: true;
+    in property <int> p-elevation: 1;
+    in property <length> p-radius: Metrics.radius-md;
+
+    callback a-clicked;
+
+    private property <brush> p-text-color: DarkPalette.text[4];
+    private property <float> p-opacity: root.p-enabled ? 1.0 : 0.5;
+    private property <brush> p-background: root.p-primary ? DarkPalette.primary[p-elevation] : DarkPalette.secondary[p-elevation];
+    private property <brush> p-touch-color: root.p-primary ? DarkPalette.primary[p-elevation + 1] : DarkPalette.secondary[p-elevation + 1];
+
+    c-background := Rectangle {
+        width: 100%;
+        height: 100%;
+        border-radius: root.p-radius;
+        background: root.p-background;
+        opacity: root.p-opacity;
+        drop-shadow-color: DarkPalette.background[0];
+        drop-shadow-offset-y: root.p-shadow ? 1px : 0px;
+        drop-shadow-blur: (root.p-shadow ? p-elevation : 0) * 2px;
+    }
+
+    c-touch-area := TouchArea {
+        width: 100%;
+        height: 100%;
+
+        clicked => {
+            root.a-clicked();
+        }
+
+        if self.has-hover: Rectangle {
+            border-radius: root.p-radius;
+            background: root.p-touch-color;
+            opacity: 0.5;
+        }
+
+        if self.pressed: Rectangle {
+            border-radius: root.p-radius;
+            background: root.p-touch-color;
+        }
+    }
+
+    c-layout := HorizontalLayout {
+        if (root.p-icon.width > 0 && root.p-icon.height > 0): c-icon := Image {
+            source <=> root.p-icon;
+            width: Metrics.size-md;
+            opacity: root.p-opacity;
+        }
+
+        if (root.p-text != ""): c-text := Text {
+            text: root.p-text;
+            color: root.p-text-color;
+            opacity: root.p-opacity;
+            vertical-alignment: center;
+            horizontal-alignment: center;
+        }
+    }
+}