From 6e2dc9fd6a17de6632249a7e93daebe64da44ef2 Mon Sep 17 00:00:00 2001
From: Jarrod Doyle <thejarroddoyle@gmail.com>
Date: Tue, 9 Apr 2024 20:47:10 +0100
Subject: [PATCH] Basic layout work

---
 ui/appwindow.slint         | 20 +++++++++--
 ui/editor_bar.slint        | 17 ++++++++++
 ui/status_bar.slint        | 36 ++++++++++++++++++++
 ui/theme.slint             | 21 ++++++++++++
 ui/tool_bar.slint          | 68 ++++++++++++++++++++++++++++++++++++++
 ui/widgets/separator.slint |  0
 6 files changed, 159 insertions(+), 3 deletions(-)
 create mode 100644 ui/editor_bar.slint
 create mode 100644 ui/status_bar.slint
 create mode 100644 ui/theme.slint
 create mode 100644 ui/tool_bar.slint
 create mode 100644 ui/widgets/separator.slint

diff --git a/ui/appwindow.slint b/ui/appwindow.slint
index 37a89a8..f5ce4da 100644
--- a/ui/appwindow.slint
+++ b/ui/appwindow.slint
@@ -1,6 +1,20 @@
+import { Theme } from "theme.slint";
+import { EditorBar } from "editor_bar.slint";
+import { StatusBar } from "status_bar.slint";
+import { ToolBar } from "tool_bar.slint";
+
 export component AppWindow inherits Window {
-    Text {
-        text: "Hello world!";
-        color: green;
+    title: @tr("FM Editor");
+    preferred-width: 1280px;
+    preferred-height: 720px;
+    VerticalLayout {
+        EditorBar { }
+
+        HorizontalLayout {
+            alignment: start;
+            ToolBar { }
+        }
+
+        StatusBar { }
     }
 }
diff --git a/ui/editor_bar.slint b/ui/editor_bar.slint
new file mode 100644
index 0000000..fb0f631
--- /dev/null
+++ b/ui/editor_bar.slint
@@ -0,0 +1,17 @@
+import { Theme } from "theme.slint";
+
+export component EditorBar inherits Rectangle {
+    height: Theme.size-xl;
+    border-color: black;
+    border-width: 1px;
+
+    HorizontalLayout {
+        alignment: start;
+        padding: Theme.padding-md;
+        spacing: Theme.padding-xl;
+        Text {
+            vertical-alignment: center;
+            text: "Damn look at all the options and shit here it's like Hammer 2!!";
+        }
+    }
+}
diff --git a/ui/status_bar.slint b/ui/status_bar.slint
new file mode 100644
index 0000000..a7cc0c1
--- /dev/null
+++ b/ui/status_bar.slint
@@ -0,0 +1,36 @@
+import { Theme } from "theme.slint";
+
+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 {
+            vertical-alignment: center;
+            text: "Last saved: 18:50";
+        }
+
+        Path {
+            width: 1px;
+            stroke: black;
+            stroke-width: 1px;
+            commands: "M 0 0 L 0 24 Z";
+        }
+
+        Text {
+            vertical-alignment: center;
+            text: "Saved by: Jayrude";
+        }
+
+        Path {
+            width: 1px;
+            stroke: black;
+            stroke-width: 1px;
+            commands: "M 0 0 L 0 24 Z";
+        }
+    }
+}
diff --git a/ui/theme.slint b/ui/theme.slint
new file mode 100644
index 0000000..5fed257
--- /dev/null
+++ b/ui/theme.slint
@@ -0,0 +1,21 @@
+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;
+    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;
+}
diff --git a/ui/tool_bar.slint b/ui/tool_bar.slint
new file mode 100644
index 0000000..53f10b8
--- /dev/null
+++ b/ui/tool_bar.slint
@@ -0,0 +1,68 @@
+import { Theme } from "theme.slint";
+import { Button } from "std-widgets.slint";
+
+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 Rectangle {
+    width: Theme.size-xl;
+    border-color: black;
+    border-width: 1px;
+
+    VerticalLayout {
+        alignment: start;
+        padding: Theme.padding-md;
+        spacing: Theme.padding-md;
+
+        Button {
+            checkable: true;
+        }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        Path {
+            width: 32px;
+            height: 1px;
+            stroke: black;
+            stroke-width: 1px;
+            commands: "M 0 0 L 32 0 Z";
+        }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        Path {
+            width: 32px;
+            height: 1px;
+            stroke: black;
+            stroke-width: 1px;
+            commands: "M 0 0 L 32 0 Z";
+        }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+
+        ToolBarItem { }
+    }
+}
diff --git a/ui/widgets/separator.slint b/ui/widgets/separator.slint
new file mode 100644
index 0000000..e69de29