Use loops for toolbar items

ui/appwindow.slint

@@ -1,10 +1,10 @@
 import { Metrics, DarkPalette } from "theme.slint";
+import { VerticalBox, HorizontalBox } from "widgets/components.slint";
+
 import { EditorBar } from "editor_bar.slint";
 import { StatusBar } from "status_bar.slint";
-import { ToolBar } from "tool_bar.slint";
+import { ToolBar, ToolType } from "tool_bar.slint";
 import { ObjectToolPanel } from "object_tool_panel.slint";
-import { VerticalBox, HorizontalBox } from "widgets/layout.slint";
-import { VerticalSeparator } from "widgets/separator.slint";
 
 export component AppWindow inherits Window {
     title: @tr("FM Editor");
@@ -14,17 +14,17 @@ export component AppWindow inherits Window {
         p-rounding: 0px;
         p-padding: Metrics.padding-sm;
         p-spacing: Metrics.spacing-sm;
-        background: DarkPalette.background[0];
+        p-elevation: 0;
         EditorBar { }
 
         HorizontalBox {
-            background: DarkPalette.background[0];
+            p-elevation: 0;
             p-padding: 0px;
             p-spacing: Metrics.spacing-sm;
 
-            ToolBar { }
+            c-toolbar := ToolBar { }
 
-            ObjectToolPanel { }
+            if (c-toolbar.p-current-tool == ToolType.Object): ObjectToolPanel { }
 
             Rectangle {
                 Text {

ui/editor_bar.slint

@@ -1,5 +1,5 @@
 import { Metrics, DarkPalette } from "theme.slint";
-import { HorizontalBox } from "widgets/layout.slint";
+import { HorizontalBox } from "widgets/components.slint";
 
 export component EditorBar inherits HorizontalBox {
     height: Metrics.size-xl;

ui/object_tool_panel.slint

@@ -1,7 +1,5 @@
 import { Metrics, DarkPalette } from "theme.slint";
-import { Panel } from "widgets/panel.slint";
-import { Box, HorizontalBox, VerticalBox } from "widgets/layout.slint";
-
+import { Box, HorizontalBox, VerticalBox, Panel } from "widgets/components.slint";
 
 export component ObjectToolPanel inherits VerticalBox {
     width: 280px;

ui/status_bar.slint

@@ -1,6 +1,5 @@
 import { Metrics, DarkPalette } from "theme.slint";
-import { VerticalSeparator } from "widgets/separator.slint";
-import { HorizontalBox } from "widgets/layout.slint";
+import { HorizontalBox, VerticalSeparator } from "widgets/components.slint";
 
 export component StatusBar inherits HorizontalBox {
     height: Metrics.size-lg;

ui/tool_bar.slint

@@ -1,7 +1,21 @@
 import { Metrics, DarkPalette } from "theme.slint";
-import { HorizontalSeparator } from "widgets/separator.slint";
-import { Box, VerticalBox } from "widgets/layout.slint";
-import { Button } from "widgets/button.slint";
+import { Box, Button, HorizontalSeparator, VerticalBox } from "widgets/components.slint";
+
+export enum ToolType {
+    Select,
+    Move,
+    Rotate,
+    Scale,
+    Brush,
+    Light,
+    Area,
+    Object,
+    Flow,
+    Room,
+    Texture,
+    Timeline,
+    Multibrush,
+}
 
 component ToolBarItem inherits Button {
     width: Metrics.size-lg;
@@ -13,59 +27,50 @@ export component ToolBar inherits VerticalBox {
     width: Metrics.size-xl;
     p-alignment: start;
 
-    ToolBarItem {
-        p-text: "s";
-    }
+    out property <ToolType> p-current-tool: ToolType.Select;
 
-    ToolBarItem {
-        p-text: "m";
-    }
+    private property <[{text: string, type: ToolType}]> p-transform-tools: [
+        { text: "s", type: ToolType.Select },
+        { text: "m", type: ToolType.Move },
+        { text: "r", type: ToolType.Rotate },
+        { text: "s", type: ToolType.Scale },
+    ];
+    private property <[{text: string, type: ToolType}]> p-brush-tools: [
+        { text: "b", type: ToolType.Brush },
+        { text: "o", type: ToolType.Object },
+        { text: "f", type: ToolType.Flow },
+        { text: "r", type: ToolType.Room },
+        { text: "l", type: ToolType.Light },
+        { text: "a", type: ToolType.Area },
+    ];
+    private property <[{text: string, type: ToolType}]> p-other-tools: [
+        { text: "t", type: ToolType.Texture },
+        { text: "t", type: ToolType.Timeline },
+        { text: "m", type: ToolType.Multibrush },
+    ];
 
-    ToolBarItem {
-        p-text: "r";
+    for item[index] in root.p-transform-tools: ToolBarItem {
+        p-text: item.text;
+        a-clicked => {
+            root.p-current-tool = item.type;
         }
-
-    ToolBarItem {
-        p-text: "s";
     }
 
     HorizontalSeparator { }
 
-    ToolBarItem {
-        p-text: "b";
+    for item[index] in root.p-brush-tools: ToolBarItem {
+        p-text: item.text;
+        a-clicked => {
+            root.p-current-tool = item.type;
         }
-
-    ToolBarItem {
-        p-text: "o";
-    }
-
-    ToolBarItem {
-        p-text: "f";
-    }
-
-    ToolBarItem {
-        p-text: "r";
-    }
-
-    ToolBarItem {
-        p-text: "l";
-    }
-
-    ToolBarItem {
-        p-text: "a";
     }
 
     HorizontalSeparator { }
 
-    ToolBarItem {
-        p-text: "t";
+    for item[index] in root.p-other-tools: ToolBarItem {
+        p-text: item.text;
+        a-clicked => {
+            root.p-current-tool = item.type;
         }
-
-    ToolBarItem {
-        p-text: "t";
-    }
-
-    ToolBarItem {
-        p-text: "m";
     }
 }

ui/widgets/components.slint

@@ -0,0 +1,6 @@
+import { Button } from "button.slint";
+import { VerticalBox, HorizontalBox, Box } from "layout.slint";
+import { Panel } from "panel.slint";
+import { VerticalSeparator, HorizontalSeparator } from "separator.slint";
+
+export { Button, VerticalBox, HorizontalBox, Box, Panel, VerticalSeparator, HorizontalSeparator }

ui/widgets/separator.slint

@@ -1,21 +1,19 @@
 import {DarkPalette} from "../theme.slint";
 
-export component VerticalSeparator {
+export component VerticalSeparator inherits Path {
+    in property <int> p-elevation: 0;
+
     width: 1px;
-    Path {
-        width: 1px;
-        stroke: DarkPalette.background[0];
+    stroke: DarkPalette.background[root.p-elevation];
     stroke-width: 1px;
     commands: "M 0 0 L 0 1 Z";
-    }
 }
 
-export component HorizontalSeparator {
+export component HorizontalSeparator inherits Path {
+    in property <int> p-elevation: 0;
+
     height: 1px;
-    Path {
-        height: 1px;
-        stroke: DarkPalette.background[0];
+    stroke: DarkPalette.background[root.p-elevation];
     stroke-width: 1px;
     commands: "M 0 0 L 1 0 Z";
-    }
 }