ui/appwindow.slint

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

ui/editor_bar.slint

@@ -1,15 +1,18 @@
-import { Metrics, DarkPalette } from "theme.slint";
-import { HorizontalBox } from "widgets/layout.slint";
+import { Theme } from "theme.slint";
 
-export component EditorBar inherits HorizontalBox {
-    height: Metrics.size-xl;
-    j-spacing: Metrics.spacing-xl;
-    j-alignment: start;
+export component EditorBar inherits Rectangle {
+    height: Theme.size-xl;
+    border-color: black;
+    border-width: 1px;
 
-    Text {
-        color: DarkPalette.text[4];
-        font-size: Metrics.font-md;
-        vertical-alignment: center;
-        text: "Damn look at all the options and shit here it's like Hammer 2!!";
+    HorizontalLayout {
+        alignment: start;
+        padding: Theme.padding-md;
+        spacing: Theme.padding-xl;
+        Text {
+            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,137 +1,159 @@
-import { Metrics, DarkPalette } from "theme.slint";
+import { Theme } from "theme.slint";
 import { Panel } from "widgets/panel.slint";
-import { Box, HorizontalBox, VerticalBox } from "widgets/layout.slint";
 
-
-export component ObjectToolPanel inherits VerticalBox {
+export component ObjectToolPanel inherits Rectangle {
     width: 280px;
+    border-color: black;
+    border-width: 1px;
 
-    Text {
-        height: Metrics.size-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;
+    VerticalLayout {
+        padding: Theme.padding-md;
+        spacing: Theme.spacing-md;
 
+        HorizontalLayout {
+            height: Theme.size-md;
             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;
-            }
-
-            Text {
-                height: Metrics.size-md;
-                color: DarkPalette.text[4];
-                font-size: Metrics.font-md;
-                text: "Object Name";
+                font-size: Theme.font-lg;
+                text: @tr("Object Tool");
                 vertical-alignment: center;
             }
         }
 
         Panel {
-            title: "Group Name";
-            title-alignment: center;
-            j-spacing: 0px;
+            title: @tr("Favourites");
 
-            Text {
-                height: Metrics.size-md;
-                color: DarkPalette.text[4];
-                font-size: Metrics.font-md;
-                text: "Object Name";
-                vertical-alignment: center;
-            }
+            Panel {
+                title: "Group Name";
+                title-alignment: center;
+                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;
+                    }
+                }
 
-            Text {
-                height: Metrics.size-md;
-                color: DarkPalette.text[4];
-                font-size: Metrics.font-md;
-                text: "Object Name";
-                vertical-alignment: center;
-            }
+                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;
+                    }
+                }
 
-            Text {
-                height: Metrics.size-md;
-                color: DarkPalette.text[4];
-                font-size: Metrics.font-md;
-                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)";
+                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;
+                    }
                 }
             }
 
-            Box {
-                width: Metrics.size-md;
-                j-elevation: 3;
+            Panel {
+                title: "Group Name";
+                title-alignment: center;
+                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;
+                    }
+                }
 
-                Rectangle { }
-            }
+                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;
+                    }
+                }
 
-            Box {
-                width: Metrics.size-md;
-                j-elevation: 3;
-
-                Rectangle { }
+                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;
+                    }
+                }
             }
         }
 
-        Box {
-            Text {
-                color: DarkPalette.text[4];
-                font-size: Metrics.font-lg;
-                text: "INSERT TREE VIEW HERE";
-                vertical-alignment: center;
-                horizontal-alignment: center;
+        Panel {
+            title: @tr("Hierarchy");
+            HorizontalLayout {
+                spacing: Theme.spacing-md;
+                height: Theme.size-md;
+                Text {
+                    font-size: Theme.font-md;
+                    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,27 +1,29 @@
-import { Metrics, DarkPalette } from "theme.slint";
+import { Theme } from "theme.slint";
 import { VerticalSeparator } from "widgets/separator.slint";
-import { HorizontalBox } from "widgets/layout.slint";
 
-export component StatusBar inherits HorizontalBox {
-    height: Metrics.size-lg;
-    j-spacing: Metrics.spacing-lg;
-    j-alignment: start;
+export component StatusBar inherits Rectangle {
+    border-color: black;
+    border-width: 1px;
+    height: Theme.size-lg;
+    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";
+        }
 
-    Text {
-        color: DarkPalette.text[4];
-        font-size: Metrics.font-md;
-        vertical-alignment: center;
-        text: "Last saved: 18:50";
+        VerticalSeparator { }
+
+        Text {
+            font-size: Theme.font-md;
+            vertical-alignment: center;
+            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,43 +1,26 @@
+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;
 
-export global DarkPalette {
-    out property <[brush]> text: [#78716c, #a8a29e, #d6d3d1, #e7e5e4, #fafaf9];
-    out property <[brush]> background: [#0c0a09, #1c1917, #292524, #44403c, #57534e];
-    out property <[brush]> primary: [#083344, #164e63, #155e75, #0e7490, #0891b2];
-    out property <[brush]> secondary: [#44403c, #57534e, #78716c, #a8a29e, #d6d3d1];
-    out property <[brush]> accent: [#4c1d95, #5b21b6, #6d28d9, #7c3aed, #8b5cf6];
-}
-
-export global LightPalette {
-    out property <[brush]> text: [#57534e, #44403c, #292524, #1c1917, #0c0a09];
-    out property <[brush]> background: [#fafaf9, #e7e5e4, #d6d3d1, #a8a29e, #78716c];
-    out property <[brush]> primary: [#06b6d4, #0891b2, #0e7490, #155e75, #164e63];
-    out property <[brush]> secondary: [#a8a29e, #78716c, #57534e, #44403c, #292524];
-    out property <[brush]> accent: [#8b5cf6, #7c3aed, #6d28d9, #5b21b6, #4c1d95];
-}
-
-export global Metrics {
-    out property <length> padding-sm: 4px;
-    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;
+    in-out property <length> spacing-sm: 4px;
+    in-out property <length> spacing-md: 8px;
+    in-out property <length> spacing-lg: 16px;
+    in-out property <length> spacing-xl: 24px;
+
+    in-out property <length> size-sm: 16px;
+    in-out property <length> size-md: 24px;
+    in-out property <length> size-lg: 32px;
+    in-out property <length> size-xl: 48px;
+
+    in-out property <length> radius-sm: 4px;
+    in-out property <length> radius-md: 8px;
+    in-out property <length> radius-lg: 16px;
+    in-out property <length> radius-xl: 32px;
+
+    in-out property <length> font-sm: 10px;
+    in-out property <length> font-md: 12px;
+    in-out property <length> font-lg: 16px;
+    in-out property <length> font-xl: 24px;
 }

ui/tool_bar.slint

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

@@ -1,60 +0,0 @@
-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,18 +1,37 @@
-import { Metrics, DarkPalette } from "../theme.slint";
-import { VerticalBox } from "layout.slint";
+import { Theme } from "../theme.slint";
 
-export component Panel inherits VerticalBox {
+export component Panel inherits Rectangle {
     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;
 
-    Text {
-        height: Metrics.size-md;
-        color: DarkPalette.text[4];
-        font-size: Metrics.font-md;
-        text: title;
-        vertical-alignment: center;
-        horizontal-alignment: title-alignment;
+    border-color: black;
+    border-width: 1px;
+    border-radius: Theme.radius-md;
+    clip: true;
+
+    VerticalLayout {
+        Rectangle {
+            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,20 +1,16 @@
-import {DarkPalette} from "../theme.slint";
-
 export component VerticalSeparator {
-    width: 1px;
     Path {
         width: 1px;
-        stroke: DarkPalette.background[0];
+        stroke: black;
         stroke-width: 1px;
         commands: "M 0 0 L 0 1 Z";
     }
 }
 
 export component HorizontalSeparator {
-    height: 1px;
     Path {
         height: 1px;
-        stroke: DarkPalette.background[0];
+        stroke: black;
         stroke-width: 1px;
         commands: "M 0 0 L 1 0 Z";
     }