From b98741a35e4f4dfecaa5f84a09e3ff61d1827f5f Mon Sep 17 00:00:00 2001 From: Jarrod Doyle Date: Wed, 10 Apr 2024 13:28:43 +0100 Subject: [PATCH] Basic theming applied --- ui/appwindow.slint | 17 ++- ui/editor_bar.slint | 23 ++-- ui/object_tool_panel.slint | 254 ++++++++++++++++++------------------- ui/status_bar.slint | 44 +++---- ui/tool_bar.slint | 81 ++++++------ ui/widgets/layout.slint | 8 +- ui/widgets/panel.slint | 43 ++----- ui/widgets/separator.slint | 8 +- 8 files changed, 228 insertions(+), 250 deletions(-) diff --git a/ui/appwindow.slint b/ui/appwindow.slint index ba2def7..f062846 100644 --- a/ui/appwindow.slint +++ b/ui/appwindow.slint @@ -1,17 +1,28 @@ -import { Metrics } 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-padding: Metrics.padding-sm; + j-spacing: Metrics.spacing-sm; + j-alignment: stretch; + background: DarkPalette.background[0]; EditorBar { } - HorizontalLayout { + HorizontalBox { + j-alignment: stretch; + background: DarkPalette.background[0]; + j-padding: 0px; + j-spacing: Metrics.spacing-sm; + ToolBar { } ObjectToolPanel { } diff --git a/ui/editor_bar.slint b/ui/editor_bar.slint index 396a92a..695f212 100644 --- a/ui/editor_bar.slint +++ b/ui/editor_bar.slint @@ -1,18 +1,15 @@ -import { Metrics } 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: Metrics.size-xl; - border-color: black; - border-width: 1px; + j-spacing: Metrics.spacing-xl; + j-rounding: Metrics.radius-md; - HorizontalLayout { - alignment: start; - padding: Metrics.padding-md; - spacing: Metrics.padding-xl; - Text { - font-size: Metrics.font-md; - vertical-alignment: center; - text: "Damn look at all the options and shit here it's like Hammer 2!!"; - } + 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!!"; } } diff --git a/ui/object_tool_panel.slint b/ui/object_tool_panel.slint index b5fe134..84fa5fc 100644 --- a/ui/object_tool_panel.slint +++ b/ui/object_tool_panel.slint @@ -1,159 +1,147 @@ -import { Metrics } from "theme.slint"; +import { Metrics, DarkPalette } from "theme.slint"; import { Panel } from "widgets/panel.slint"; +import { HorizontalBox, VerticalBox } from "widgets/layout.slint"; -export component ObjectToolPanel inherits Rectangle { + +export component ObjectToolPanel inherits VerticalBox { width: 280px; - border-color: black; - border-width: 1px; + j-rounding: Metrics.radius-md; + j-alignment: stretch; - VerticalLayout { - padding: Metrics.padding-md; - spacing: Metrics.spacing-md; + Text { + height: Metrics.size-md; + color: DarkPalette.text[4]; + font-size: Metrics.font-lg; + text: @tr("Object Tool"); + vertical-alignment: center; + } + + Panel { + title: @tr("Favourites"); + j-elevation: 2; + + Panel { + title: "Group Name"; + title-alignment: center; + j-spacing: 0px; - HorizontalLayout { - height: Metrics.size-md; Text { - font-size: Metrics.font-lg; - text: @tr("Object Tool"); + 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"; vertical-alignment: center; } } Panel { - title: @tr("Favourites"); + title: "Group Name"; + title-alignment: center; + j-spacing: 0px; - Panel { - title: "Group Name"; - title-alignment: center; - content-padding: 0px; - content-spacing: 0px; - HorizontalLayout { - height: Metrics.size-md; - padding-left: Metrics.padding-md; - padding-right: Metrics.padding-md; - Text { - 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; + } - HorizontalLayout { - height: Metrics.size-md; - padding-left: Metrics.padding-md; - padding-right: Metrics.padding-md; - Text { - 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; + } - HorizontalLayout { - height: Metrics.size-md; - padding-left: Metrics.padding-md; - padding-right: Metrics.padding-md; - Text { - 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("Hierarchy"); + j-elevation: 2; + j-alignment: stretch; + vertical-stretch: 1; + + HorizontalBox { + j-alignment: stretch; + 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:"); + } + + HorizontalBox { + j-alignment: stretch; + j-rounding: Metrics.radius-md; + j-padding: 0px; + + Text { + color: DarkPalette.text[4]; + font-size: Metrics.font-md; + vertical-alignment: center; + horizontal-alignment: center; + text: "VicHutch (-514)"; } } - Panel { - title: "Group Name"; - title-alignment: center; - content-padding: 0px; - content-spacing: 0px; - HorizontalLayout { - height: Metrics.size-md; - padding-left: Metrics.padding-md; - padding-right: Metrics.padding-md; - Text { - font-size: Metrics.font-md; - text: "Object Name"; - vertical-alignment: center; - } - } + HorizontalBox { + width: Metrics.size-md; + j-rounding: Metrics.radius-md; + j-elevation: 3; - HorizontalLayout { - height: Metrics.size-md; - padding-left: Metrics.padding-md; - padding-right: Metrics.padding-md; - Text { - font-size: Metrics.font-md; - text: "Object Name"; - vertical-alignment: center; - } - } + Rectangle { } + } - HorizontalLayout { - height: Metrics.size-md; - padding-left: Metrics.padding-md; - padding-right: Metrics.padding-md; - Text { - font-size: Metrics.font-md; - text: "Object Name"; - vertical-alignment: center; - } - } + HorizontalBox { + width: Metrics.size-md; + j-rounding: Metrics.radius-md; + j-elevation: 3; + + Rectangle { } } } - Panel { - title: @tr("Hierarchy"); - HorizontalLayout { - spacing: Metrics.spacing-md; - height: Metrics.size-md; - Text { - font-size: Metrics.font-md; - vertical-alignment: center; - text: @tr("Name:"); - } + VerticalBox { + j-alignment: stretch; + j-rounding: Metrics.radius-md; - Rectangle { - border-color: black; - border-width: 1px; - border-radius: Metrics.radius-md; - - Text { - font-size: Metrics.font-md; - vertical-alignment: center; - horizontal-alignment: left; - text: "VicHutch (-514)"; - } - } - - Rectangle { - border-color: black; - border-width: 1px; - border-radius: Metrics.radius-md; - - width: Metrics.size-md; - } - - Rectangle { - border-color: black; - border-width: 1px; - border-radius: Metrics.radius-md; - - width: Metrics.size-md; - } - } - - Rectangle { - border-color: black; - border-width: 1px; - border-radius: Metrics.radius-md; - clip: true; - - Text { - font-size: Metrics.font-lg; - text: "INSERT TREE VIEW HERE"; - vertical-alignment: center; - horizontal-alignment: center; - } + Text { + color: DarkPalette.text[4]; + font-size: Metrics.font-lg; + text: "INSERT TREE VIEW HERE"; + vertical-alignment: center; + horizontal-alignment: center; } } } diff --git a/ui/status_bar.slint b/ui/status_bar.slint index 041a80d..a885416 100644 --- a/ui/status_bar.slint +++ b/ui/status_bar.slint @@ -1,29 +1,27 @@ -import { Metrics } 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 { - border-color: black; - border-width: 1px; +export component StatusBar inherits HorizontalBox { height: Metrics.size-lg; - HorizontalLayout { - alignment: start; - padding-left: Metrics.padding-lg; - padding-right: Metrics.padding-lg; - spacing: Metrics.padding-lg; - Text { - font-size: Metrics.font-md; - vertical-alignment: center; - text: "Last saved: 18:50"; - } + j-rounding: Metrics.radius-md; + j-spacing: Metrics.spacing-lg; - VerticalSeparator { } - - Text { - font-size: Metrics.font-md; - vertical-alignment: center; - text: "Saved by: Jayrude"; - } - - VerticalSeparator { } + Text { + color: DarkPalette.text[4]; + font-size: Metrics.font-md; + vertical-alignment: center; + text: "Last saved: 18:50"; } + + VerticalSeparator { } + + Text { + color: DarkPalette.text[4]; + font-size: Metrics.font-md; + vertical-alignment: center; + text: "Saved by: Jayrude"; + } + + VerticalSeparator { } } diff --git a/ui/tool_bar.slint b/ui/tool_bar.slint index 9994769..7eb4b23 100644 --- a/ui/tool_bar.slint +++ b/ui/tool_bar.slint @@ -1,57 +1,50 @@ -import { Metrics } from "theme.slint"; +import { Metrics, DarkPalette } from "theme.slint"; import { Button } from "std-widgets.slint"; import { HorizontalSeparator } from "widgets/separator.slint"; +import { VerticalBox } from "widgets/layout.slint"; component ToolBarItem inherits Rectangle { width: Metrics.size-lg; height: Metrics.size-lg; - border-color: black; - border-width: 1px; border-radius: Metrics.radius-md; + background: DarkPalette.background[2]; } -export component ToolBar inherits Rectangle { +export component ToolBar inherits VerticalBox { width: Metrics.size-xl; - border-color: black; - border-width: 1px; + j-rounding: Metrics.radius-md; - VerticalLayout { - alignment: start; - padding: Metrics.padding-md; - spacing: Metrics.padding-md; - - Button { - checkable: true; - } - - ToolBarItem { } - - ToolBarItem { } - - ToolBarItem { } - - ToolBarItem { } - - HorizontalSeparator { } - - ToolBarItem { } - - ToolBarItem { } - - ToolBarItem { } - - ToolBarItem { } - - ToolBarItem { } - - ToolBarItem { } - - HorizontalSeparator { } - - ToolBarItem { } - - ToolBarItem { } - - ToolBarItem { } + Button { + checkable: true; } + + ToolBarItem { } + + ToolBarItem { } + + ToolBarItem { } + + ToolBarItem { } + + HorizontalSeparator { } + + ToolBarItem { } + + ToolBarItem { } + + ToolBarItem { } + + ToolBarItem { } + + ToolBarItem { } + + ToolBarItem { } + + HorizontalSeparator { } + + ToolBarItem { } + + ToolBarItem { } + + ToolBarItem { } } diff --git a/ui/widgets/layout.slint b/ui/widgets/layout.slint index 385867e..013e113 100644 --- a/ui/widgets/layout.slint +++ b/ui/widgets/layout.slint @@ -8,13 +8,15 @@ struct BorderStyle { export component HorizontalBox inherits Rectangle { // TODO: border, shadow + in property j-elevation: 1; in property j-rounding: 0px; in property j-padding: Metrics.padding-md; in property j-spacing: Metrics.spacing-md; in property j-alignment: start; - background: DarkPalette.background[1]; + background: DarkPalette.background[j-elevation]; border-radius: j-rounding; + clip: true; HorizontalLayout { alignment: j-alignment; @@ -26,13 +28,15 @@ export component HorizontalBox inherits Rectangle { export component VerticalBox inherits Rectangle { // TODO: border, shadow + in property j-elevation: 1; in property j-rounding: 0px; in property j-padding: Metrics.padding-md; in property j-spacing: Metrics.spacing-md; in property j-alignment: start; - background: DarkPalette.background[1]; + background: DarkPalette.background[j-elevation]; border-radius: j-rounding; + clip: true; VerticalLayout { alignment: j-alignment; diff --git a/ui/widgets/panel.slint b/ui/widgets/panel.slint index 1445ffa..5f03be1 100644 --- a/ui/widgets/panel.slint +++ b/ui/widgets/panel.slint @@ -1,37 +1,20 @@ -import { Metrics } from "../theme.slint"; +import { Metrics, DarkPalette } from "../theme.slint"; +import { HorizontalBox, VerticalBox } from "layout.slint"; -export component Panel inherits Rectangle { +export component Panel inherits VerticalBox { in property title: "Title"; in property title-alignment: left; - in property content-padding: Metrics.padding-md; - in property content-spacing: Metrics.spacing-md; - border-color: black; - border-width: 1px; - border-radius: Metrics.radius-md; - clip: true; + j-rounding: Metrics.radius-md; - VerticalLayout { - Rectangle { - height: Metrics.size-md; - border-color: black; - border-width: 1px; - HorizontalLayout { - padding-left: Metrics.padding-md; - padding-right: Metrics.padding-md; - Text { - font-size: Metrics.font-md; - text: title; - vertical-alignment: center; - horizontal-alignment: title-alignment; - } - } - } - - VerticalLayout { - padding: content-padding; - spacing: content-spacing; - @children - } + Text { + height: Metrics.size-md; + color: DarkPalette.text[4]; + font-size: Metrics.font-md; + text: title; + vertical-alignment: center; + horizontal-alignment: title-alignment; } + + @children } diff --git a/ui/widgets/separator.slint b/ui/widgets/separator.slint index 9113c25..9f37969 100644 --- a/ui/widgets/separator.slint +++ b/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"; }