Add box layout widget

ui/appwindow.slint

@@ -1,24 +1,34 @@
-import { Theme } from "theme.slint";
+import { Metrics, DarkPalette } from "theme.slint";
 import { EditorBar } from "editor_bar.slint";
 import { StatusBar } from "status_bar.slint";
 import { ToolBar } 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");
     preferred-width: 1280px;
     preferred-height: 720px;
-    VerticalLayout {
+    VerticalBox {
+        j-rounding: 0px;
+        j-padding: Metrics.padding-sm;
+        j-spacing: Metrics.spacing-sm;
+        background: DarkPalette.background[0];
         EditorBar { }
 
-        HorizontalLayout {
+        HorizontalBox {
+            background: DarkPalette.background[0];
+            j-padding: 0px;
+            j-spacing: Metrics.spacing-sm;
+
             ToolBar { }
 
             ObjectToolPanel { }
 
             Rectangle {
                 Text {
-                    font-size: Theme.font-lg;
+                    font-size: Metrics.font-lg;
                     text: "INSERT VIEWPORT HERE";
                     vertical-alignment: center;
                     horizontal-alignment: center;

ui/editor_bar.slint

@@ -1,18 +1,15 @@
-import { Theme } from "theme.slint";
+import { Metrics, DarkPalette } from "theme.slint";
+import { HorizontalBox } from "widgets/layout.slint";
 
-export component EditorBar inherits Rectangle {
+export component EditorBar inherits HorizontalBox {
-    height: Theme.size-xl;
+    height: Metrics.size-xl;
-    border-color: black;
+    j-spacing: Metrics.spacing-xl;
-    border-width: 1px;
+    j-alignment: start;
 
-    HorizontalLayout {
+    Text {
-        alignment: start;
+        color: DarkPalette.text[4];
-        padding: Theme.padding-md;
+        font-size: Metrics.font-md;
-        spacing: Theme.padding-xl;
+        vertical-alignment: center;
-        Text {
+        text: "Damn look at all the options and shit here it's like Hammer 2!!";
-            font-size: Theme.font-md;
-            vertical-alignment: center;
-            text: "Damn look at all the options and shit here it's like Hammer 2!!";
-        }
     }
 }

ui/object_tool_panel.slint

@@ -1,159 +1,137 @@
-import { Theme } from "theme.slint";
+import { Metrics, DarkPalette } from "theme.slint";
 import { Panel } from "widgets/panel.slint";
+import { Box, HorizontalBox, VerticalBox } from "widgets/layout.slint";
 
-export component ObjectToolPanel inherits Rectangle {
+
+export component ObjectToolPanel inherits VerticalBox {
     width: 280px;
-    border-color: black;
-    border-width: 1px;
 
-    VerticalLayout {
+    Text {
-        padding: Theme.padding-md;
+        height: Metrics.size-md;
-        spacing: Theme.spacing-md;
+        color: DarkPalette.text[4];
+        font-size: Metrics.font-lg;
+        text: @tr("Object Tool");
+        vertical-alignment: center;
+    }
+
+    Panel {
+        j-alignment: start;
+        title: @tr("Favourites");
+        j-elevation: 2;
+
+        Panel {
+            title: "Group Name";
+            title-alignment: center;
+            j-spacing: 0px;
 
-        HorizontalLayout {
-            height: Theme.size-md;
             Text {
-                font-size: Theme.font-lg;
+                height: Metrics.size-md;
-                text: @tr("Object Tool");
+                color: DarkPalette.text[4];
+                font-size: Metrics.font-md;
+                text: "Object Name";
+                vertical-alignment: center;
+            }
+
+            Text {
+                height: Metrics.size-md;
+                color: DarkPalette.text[4];
+                font-size: Metrics.font-md;
+                text: "Object Name";
+                vertical-alignment: center;
+            }
+
+            Text {
+                height: Metrics.size-md;
+                color: DarkPalette.text[4];
+                font-size: Metrics.font-md;
+                text: "Object Name";
                 vertical-alignment: center;
             }
         }
 
         Panel {
-            title: @tr("Favourites");
+            title: "Group Name";
+            title-alignment: center;
+            j-spacing: 0px;
 
-            Panel {
+            Text {
-                title: "Group Name";
+                height: Metrics.size-md;
-                title-alignment: center;
+                color: DarkPalette.text[4];
-                content-padding: 0px;
+                font-size: Metrics.font-md;
-                content-spacing: 0px;
+                text: "Object Name";
-                HorizontalLayout {
+                vertical-alignment: center;
-                    height: Theme.size-md;
+            }
-                    padding-left: Theme.padding-md;
-                    padding-right: Theme.padding-md;
-                    Text {
-                        font-size: Theme.font-md;
-                        text: "Object Name";
-                        vertical-alignment: center;
-                    }
-                }
 
-                HorizontalLayout {
+            Text {
-                    height: Theme.size-md;
+                height: Metrics.size-md;
-                    padding-left: Theme.padding-md;
+                color: DarkPalette.text[4];
-                    padding-right: Theme.padding-md;
+                font-size: Metrics.font-md;
-                    Text {
+                text: "Object Name";
-                        font-size: Theme.font-md;
+                vertical-alignment: center;
-                        text: "Object Name";
+            }
-                        vertical-alignment: center;
-                    }
-                }
 
-                HorizontalLayout {
+            Text {
-                    height: Theme.size-md;
+                height: Metrics.size-md;
-                    padding-left: Theme.padding-md;
+                color: DarkPalette.text[4];
-                    padding-right: Theme.padding-md;
+                font-size: Metrics.font-md;
-                    Text {
+                text: "Object Name";
-                        font-size: Theme.font-md;
+                vertical-alignment: center;
-                        text: "Object Name";
+            }
-                        vertical-alignment: center;
+        }
-                    }
+    }
+
+    Panel {
+        title: @tr("Hierarchy");
+        j-elevation: 2;
+        vertical-stretch: 1;
+
+        HorizontalBox {
+            j-elevation: 2;
+            j-padding: 0px;
+            j-spacing: Metrics.spacing-md;
+            height: Metrics.size-md;
+
+            Text {
+                color: DarkPalette.text[4];
+                font-size: Metrics.font-md;
+                vertical-alignment: center;
+                text: @tr("Name:");
+            }
+
+            Box {
+                j-padding: 0px;
+
+                Text {
+                    color: DarkPalette.text[4];
+                    font-size: Metrics.font-md;
+                    vertical-alignment: center;
+                    horizontal-alignment: center;
+                    text: "VicHutch (-514)";
                 }
             }
 
-            Panel {
+            Box {
-                title: "Group Name";
+                width: Metrics.size-md;
-                title-alignment: center;
+                j-elevation: 3;
-                content-padding: 0px;
-                content-spacing: 0px;
-                HorizontalLayout {
-                    height: Theme.size-md;
-                    padding-left: Theme.padding-md;
-                    padding-right: Theme.padding-md;
-                    Text {
-                        font-size: Theme.font-md;
-                        text: "Object Name";
-                        vertical-alignment: center;
-                    }
-                }
 
-                HorizontalLayout {
+                Rectangle { }
-                    height: Theme.size-md;
+            }
-                    padding-left: Theme.padding-md;
-                    padding-right: Theme.padding-md;
-                    Text {
-                        font-size: Theme.font-md;
-                        text: "Object Name";
-                        vertical-alignment: center;
-                    }
-                }
 
-                HorizontalLayout {
+            Box {
-                    height: Theme.size-md;
+                width: Metrics.size-md;
-                    padding-left: Theme.padding-md;
+                j-elevation: 3;
-                    padding-right: Theme.padding-md;
+
-                    Text {
+                Rectangle { }
-                        font-size: Theme.font-md;
-                        text: "Object Name";
-                        vertical-alignment: center;
-                    }
-                }
             }
         }
 
-        Panel {
+        Box {
-            title: @tr("Hierarchy");
+            Text {
-            HorizontalLayout {
+                color: DarkPalette.text[4];
-                spacing: Theme.spacing-md;
+                font-size: Metrics.font-lg;
-                height: Theme.size-md;
+                text: "INSERT TREE VIEW HERE";
-                Text {
+                vertical-alignment: center;
-                    font-size: Theme.font-md;
+                horizontal-alignment: center;
-                    vertical-alignment: center;
-                    text: @tr("Name:");
-                }
-
-                Rectangle {
-                    border-color: black;
-                    border-width: 1px;
-                    border-radius: Theme.radius-md;
-
-                    Text {
-                        font-size: Theme.font-md;
-                        vertical-alignment: center;
-                        horizontal-alignment: left;
-                        text: "VicHutch (-514)";
-                    }
-                }
-
-                Rectangle {
-                    border-color: black;
-                    border-width: 1px;
-                    border-radius: Theme.radius-md;
-
-                    width: Theme.size-md;
-                }
-
-                Rectangle {
-                    border-color: black;
-                    border-width: 1px;
-                    border-radius: Theme.radius-md;
-
-                    width: Theme.size-md;
-                }
-            }
-
-            Rectangle {
-                border-color: black;
-                border-width: 1px;
-                border-radius: Theme.radius-md;
-                clip: true;
-
-                Text {
-                    font-size: Theme.font-lg;
-                    text: "INSERT TREE VIEW HERE";
-                    vertical-alignment: center;
-                    horizontal-alignment: center;
-                }
             }
         }
     }

ui/status_bar.slint

@@ -1,29 +1,27 @@
-import { Theme } from "theme.slint";
+import { Metrics, DarkPalette } from "theme.slint";
 import { VerticalSeparator } from "widgets/separator.slint";
+import { HorizontalBox } from "widgets/layout.slint";
 
-export component StatusBar inherits Rectangle {
+export component StatusBar inherits HorizontalBox {
-    border-color: black;
+    height: Metrics.size-lg;
-    border-width: 1px;
+    j-spacing: Metrics.spacing-lg;
-    height: Theme.size-lg;
+    j-alignment: start;
-    HorizontalLayout {
-        alignment: start;
-        padding-left: Theme.padding-lg;
-        padding-right: Theme.padding-lg;
-        spacing: Theme.padding-lg;
-        Text {
-            font-size: Theme.font-md;
-            vertical-alignment: center;
-            text: "Last saved: 18:50";
-        }
 
-        VerticalSeparator { }
+    Text {
-
+        color: DarkPalette.text[4];
-        Text {
+        font-size: Metrics.font-md;
-            font-size: Theme.font-md;
+        vertical-alignment: center;
-            vertical-alignment: center;
+        text: "Last saved: 18:50";
-            text: "Saved by: Jayrude";
-        }
-
-        VerticalSeparator { }
     }
+
+    VerticalSeparator { }
+
+    Text {
+        color: DarkPalette.text[4];
+        font-size: Metrics.font-md;
+        vertical-alignment: center;
+        text: "Saved by: Jayrude";
+    }
+
+    VerticalSeparator { }
 }

ui/theme.slint

@@ -1,26 +1,43 @@
-export global Theme {
-    in-out property <length> padding-sm: 4px;
-    in-out property <length> padding-md: 8px;
-    in-out property <length> padding-lg: 16px;
-    in-out property <length> padding-xl: 24px;
 
-    in-out property <length> spacing-sm: 4px;
+export global DarkPalette {
-    in-out property <length> spacing-md: 8px;
+    out property <[brush]> text: [#78716c, #a8a29e, #d6d3d1, #e7e5e4, #fafaf9];
-    in-out property <length> spacing-lg: 16px;
+    out property <[brush]> background: [#0c0a09, #1c1917, #292524, #44403c, #57534e];
-    in-out property <length> spacing-xl: 24px;
+    out property <[brush]> primary: [#083344, #164e63, #155e75, #0e7490, #0891b2];
-
+    out property <[brush]> secondary: [#44403c, #57534e, #78716c, #a8a29e, #d6d3d1];
-    in-out property <length> size-sm: 16px;
+    out property <[brush]> accent: [#4c1d95, #5b21b6, #6d28d9, #7c3aed, #8b5cf6];
-    in-out property <length> size-md: 24px;
+}
-    in-out property <length> size-lg: 32px;
+
-    in-out property <length> size-xl: 48px;
+export global LightPalette {
-
+    out property <[brush]> text: [#57534e, #44403c, #292524, #1c1917, #0c0a09];
-    in-out property <length> radius-sm: 4px;
+    out property <[brush]> background: [#fafaf9, #e7e5e4, #d6d3d1, #a8a29e, #78716c];
-    in-out property <length> radius-md: 8px;
+    out property <[brush]> primary: [#06b6d4, #0891b2, #0e7490, #155e75, #164e63];
-    in-out property <length> radius-lg: 16px;
+    out property <[brush]> secondary: [#a8a29e, #78716c, #57534e, #44403c, #292524];
-    in-out property <length> radius-xl: 32px;
+    out property <[brush]> accent: [#8b5cf6, #7c3aed, #6d28d9, #5b21b6, #4c1d95];
-
+}
-    in-out property <length> font-sm: 10px;
+
-    in-out property <length> font-md: 12px;
+export global Metrics {
-    in-out property <length> font-lg: 16px;
+    out property <length> padding-sm: 4px;
-    in-out property <length> font-xl: 24px;
+    out property <length> padding-md: 8px;
+    out property <length> padding-lg: 16px;
+    out property <length> padding-xl: 24px;
+
+    out property <length> spacing-sm: 4px;
+    out property <length> spacing-md: 8px;
+    out property <length> spacing-lg: 16px;
+    out property <length> spacing-xl: 24px;
+
+    out property <length> size-sm: 16px;
+    out property <length> size-md: 24px;
+    out property <length> size-lg: 32px;
+    out property <length> size-xl: 48px;
+
+    out property <length> radius-sm: 4px;
+    out property <length> radius-md: 8px;
+    out property <length> radius-lg: 16px;
+    out property <length> radius-xl: 32px;
+
+    out property <length> font-sm: 10px;
+    out property <length> font-md: 12px;
+    out property <length> font-lg: 16px;
+    out property <length> font-xl: 24px;
 }

ui/tool_bar.slint

@@ -1,57 +1,49 @@
-import { Theme } from "theme.slint";
+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";
 
-component ToolBarItem inherits Rectangle {
+component ToolBarItem inherits Box {
-    width: Theme.size-lg;
+    width: Metrics.size-lg;
-    height: Theme.size-lg;
+    height: Metrics.size-lg;
-    border-color: black;
+    j-elevation: 2;
-    border-width: 1px;
-    border-radius: Theme.radius-md;
 }
 
-export component ToolBar inherits Rectangle {
+export component ToolBar inherits VerticalBox {
-    width: Theme.size-xl;
+    width: Metrics.size-xl;
-    border-color: black;
+    j-alignment: start;
-    border-width: 1px;
 
-    VerticalLayout {
+    Button {
-        alignment: start;
+        checkable: true;
-        padding: Theme.padding-md;
-        spacing: Theme.padding-md;
-
-        Button {
-            checkable: true;
-        }
-
-        ToolBarItem { }
-
-        ToolBarItem { }
-
-        ToolBarItem { }
-
-        ToolBarItem { }
-
-        HorizontalSeparator { }
-
-        ToolBarItem { }
-
-        ToolBarItem { }
-
-        ToolBarItem { }
-
-        ToolBarItem { }
-
-        ToolBarItem { }
-
-        ToolBarItem { }
-
-        HorizontalSeparator { }
-
-        ToolBarItem { }
-
-        ToolBarItem { }
-
-        ToolBarItem { }
     }
+
+    ToolBarItem { }
+
+    ToolBarItem { }
+
+    ToolBarItem { }
+
+    ToolBarItem { }
+
+    HorizontalSeparator { }
+
+    ToolBarItem { }
+
+    ToolBarItem { }
+
+    ToolBarItem { }
+
+    ToolBarItem { }
+
+    ToolBarItem { }
+
+    ToolBarItem { }
+
+    HorizontalSeparator { }
+
+    ToolBarItem { }
+
+    ToolBarItem { }
+
+    ToolBarItem { }
 }

ui/widgets/layout.slint

@@ -0,0 +1,60 @@
+import {Metrics, DarkPalette} from "../theme.slint";
+
+struct BorderStyle {
+    border-width: length,
+    border-color: brush,
+    border-radius: length,
+}
+
+export component HorizontalBox inherits Rectangle {
+    // TODO: border, shadow
+    in property <int> j-elevation: 1;
+    in property <length> j-rounding: Metrics.radius-md;
+    in property <length> j-padding: Metrics.padding-md;
+    in property <length> j-spacing: Metrics.spacing-md;
+    in property <LayoutAlignment> j-alignment: stretch;
+
+    background: DarkPalette.background[j-elevation];
+    border-radius: j-rounding;
+    clip: true;
+
+    HorizontalLayout {
+        alignment: j-alignment;
+        padding: j-padding;
+        spacing: j-spacing;
+        @children
+    }
+}
+
+export component VerticalBox inherits Rectangle {
+    // TODO: border, shadow
+    in property <int> j-elevation: 1;
+    in property <length> j-rounding: Metrics.radius-md;
+    in property <length> j-padding: Metrics.padding-md;
+    in property <length> j-spacing: Metrics.spacing-md;
+    in property <LayoutAlignment> j-alignment: stretch;
+
+    background: DarkPalette.background[j-elevation];
+    border-radius: j-rounding;
+    clip: true;
+
+    VerticalLayout {
+        alignment: j-alignment;
+        padding: j-padding;
+        spacing: j-spacing;
+        @children
+    }
+}
+
+export component Box inherits Rectangle {
+    in property <int> j-elevation: 1;
+    in property <length> j-rounding: Metrics.radius-md;
+    in property <length> j-padding: Metrics.padding-md;
+
+    background: DarkPalette.background[j-elevation];
+    border-radius: j-rounding;
+    clip: true;
+    padding: j-padding;
+
+    @children
+}

ui/widgets/panel.slint

@@ -1,37 +1,18 @@
-import { Theme } from "../theme.slint";
+import { Metrics, DarkPalette } from "../theme.slint";
+import { VerticalBox } from "layout.slint";
 
-export component Panel inherits Rectangle {
+export component Panel inherits VerticalBox {
     in property <string> title: "Title";
     in property <TextHorizontalAlignment> title-alignment: left;
-    in property <length> content-padding: Theme.padding-md;
-    in property <length> content-spacing: Theme.spacing-md;
 
-    border-color: black;
+    Text {
-    border-width: 1px;
+        height: Metrics.size-md;
-    border-radius: Theme.radius-md;
+        color: DarkPalette.text[4];
-    clip: true;
+        font-size: Metrics.font-md;
-
+        text: title;
-    VerticalLayout {
+        vertical-alignment: center;
-        Rectangle {
+        horizontal-alignment: title-alignment;
-            height: Theme.size-md;
-            border-color: black;
-            border-width: 1px;
-            HorizontalLayout {
-                padding-left: Theme.padding-md;
-                padding-right: Theme.padding-md;
-                Text {
-                    font-size: Theme.font-md;
-                    text: title;
-                    vertical-alignment: center;
-                    horizontal-alignment: title-alignment;
-                }
-            }
-        }
-
-        VerticalLayout {
-            padding: content-padding;
-            spacing: content-spacing;
-            @children
-        }
     }
+
+    @children
 }

ui/widgets/separator.slint

@@ -1,16 +1,20 @@
+import {DarkPalette} from "../theme.slint";
+
 export component VerticalSeparator {
+    width: 1px;
     Path {
         width: 1px;
-        stroke: black;
+        stroke: DarkPalette.background[0];
         stroke-width: 1px;
         commands: "M 0 0 L 0 1 Z";
     }
 }
 
 export component HorizontalSeparator {
+    height: 1px;
     Path {
         height: 1px;
-        stroke: black;
+        stroke: DarkPalette.background[0];
         stroke-width: 1px;
         commands: "M 0 0 L 1 0 Z";
     }