Jayrude
/
fmeditor-slint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add theme palettes and rename Theme to Metrics

This commit is contained in:
Jarrod Doyle 2024-04-10 11:34:47 +01:00
parent 23daf927cd
commit a13ef6e15d
Signed by: Jayrude
GPG Key ID: 38B57B16E7C0ADF7
7 changed files with 110 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/appwindow.slint
View File

@ -1,4 +1,4 @@
import { Theme } from "theme.slint"; import { Metrics } from "theme.slint";
import { EditorBar } from "editor_bar.slint"; import { EditorBar } from "editor_bar.slint";
import { StatusBar } from "status_bar.slint"; import { StatusBar } from "status_bar.slint";
import { ToolBar } from "tool_bar.slint"; import { ToolBar } from "tool_bar.slint";
@ -18,7 +18,7 @@ export component AppWindow inherits Window {
Rectangle { Rectangle {
Text { Text {
font-size: Theme.font-lg; font-size: Metrics.font-lg;
text: "INSERT VIEWPORT HERE"; text: "INSERT VIEWPORT HERE";
vertical-alignment: center; vertical-alignment: center;
horizontal-alignment: center; horizontal-alignment: center;

10
ui/editor_bar.slint
View File

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

80
ui/object_tool_panel.slint
View File

@ -1,4 +1,4 @@
import { Theme } from "theme.slint"; import { Metrics } from "theme.slint";
import { Panel } from "widgets/panel.slint"; import { Panel } from "widgets/panel.slint";
export component ObjectToolPanel inherits Rectangle { export component ObjectToolPanel inherits Rectangle {
@ -7,13 +7,13 @@ export component ObjectToolPanel inherits Rectangle {
border-width: 1px; border-width: 1px;
VerticalLayout { VerticalLayout {
padding: Theme.padding-md; padding: Metrics.padding-md;
spacing: Theme.spacing-md; spacing: Metrics.spacing-md;
HorizontalLayout { HorizontalLayout {
height: Theme.size-md; height: Metrics.size-md;
Text { Text {
font-size: Theme.font-lg; font-size: Metrics.font-lg;
text: @tr("Object Tool"); text: @tr("Object Tool");
vertical-alignment: center; vertical-alignment: center;
} }
@ -28,33 +28,33 @@ export component ObjectToolPanel inherits Rectangle {
content-padding: 0px; content-padding: 0px;
content-spacing: 0px; content-spacing: 0px;
HorizontalLayout { HorizontalLayout {
height: Theme.size-md; height: Metrics.size-md;
padding-left: Theme.padding-md; padding-left: Metrics.padding-md;
padding-right: Theme.padding-md; padding-right: Metrics.padding-md;
Text { Text {
font-size: Theme.font-md; font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
} }
HorizontalLayout { HorizontalLayout {
height: Theme.size-md; height: Metrics.size-md;
padding-left: Theme.padding-md; padding-left: Metrics.padding-md;
padding-right: Theme.padding-md; padding-right: Metrics.padding-md;
Text { Text {
font-size: Theme.font-md; font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
} }
HorizontalLayout { HorizontalLayout {
height: Theme.size-md; height: Metrics.size-md;
padding-left: Theme.padding-md; padding-left: Metrics.padding-md;
padding-right: Theme.padding-md; padding-right: Metrics.padding-md;
Text { Text {
font-size: Theme.font-md; font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
@ -67,33 +67,33 @@ export component ObjectToolPanel inherits Rectangle {
content-padding: 0px; content-padding: 0px;
content-spacing: 0px; content-spacing: 0px;
HorizontalLayout { HorizontalLayout {
height: Theme.size-md; height: Metrics.size-md;
padding-left: Theme.padding-md; padding-left: Metrics.padding-md;
padding-right: Theme.padding-md; padding-right: Metrics.padding-md;
Text { Text {
font-size: Theme.font-md; font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
} }
HorizontalLayout { HorizontalLayout {
height: Theme.size-md; height: Metrics.size-md;
padding-left: Theme.padding-md; padding-left: Metrics.padding-md;
padding-right: Theme.padding-md; padding-right: Metrics.padding-md;
Text { Text {
font-size: Theme.font-md; font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
} }
HorizontalLayout { HorizontalLayout {
height: Theme.size-md; height: Metrics.size-md;
padding-left: Theme.padding-md; padding-left: Metrics.padding-md;
padding-right: Theme.padding-md; padding-right: Metrics.padding-md;
Text { Text {
font-size: Theme.font-md; font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
@ -104,10 +104,10 @@ export component ObjectToolPanel inherits Rectangle {
Panel { Panel {
title: @tr("Hierarchy"); title: @tr("Hierarchy");
HorizontalLayout { HorizontalLayout {
spacing: Theme.spacing-md; spacing: Metrics.spacing-md;
height: Theme.size-md; height: Metrics.size-md;
Text { Text {
font-size: Theme.font-md; font-size: Metrics.font-md;
vertical-alignment: center; vertical-alignment: center;
text: @tr("Name:"); text: @tr("Name:");
} }
@ -115,10 +115,10 @@ export component ObjectToolPanel inherits Rectangle {
Rectangle { Rectangle {
border-color: black; border-color: black;
border-width: 1px; border-width: 1px;
border-radius: Theme.radius-md; border-radius: Metrics.radius-md;
Text { Text {
font-size: Theme.font-md; font-size: Metrics.font-md;
vertical-alignment: center; vertical-alignment: center;
horizontal-alignment: left; horizontal-alignment: left;
text: "VicHutch (-514)"; text: "VicHutch (-514)";
@ -128,28 +128,28 @@ export component ObjectToolPanel inherits Rectangle {
Rectangle { Rectangle {
border-color: black; border-color: black;
border-width: 1px; border-width: 1px;
border-radius: Theme.radius-md; border-radius: Metrics.radius-md;
width: Theme.size-md; width: Metrics.size-md;
} }
Rectangle { Rectangle {
border-color: black; border-color: black;
border-width: 1px; border-width: 1px;
border-radius: Theme.radius-md; border-radius: Metrics.radius-md;
width: Theme.size-md; width: Metrics.size-md;
} }
} }
Rectangle { Rectangle {
border-color: black; border-color: black;
border-width: 1px; border-width: 1px;
border-radius: Theme.radius-md; border-radius: Metrics.radius-md;
clip: true; clip: true;
Text { Text {
font-size: Theme.font-lg; font-size: Metrics.font-lg;
text: "INSERT TREE VIEW HERE"; text: "INSERT TREE VIEW HERE";
vertical-alignment: center; vertical-alignment: center;
horizontal-alignment: center; horizontal-alignment: center;

14
ui/status_bar.slint
View File

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

65
ui/theme.slint
View File

@ -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: [#090d10, #263340, #4b6681, #7e99b4, #bfccd9, #eff2f6];
in-out property <length> spacing-lg: 16px; out property <[brush]> background: [#090c10, #252e41, #4a5d82, #7d90b5, #bec7da, #eff1f6];
in-out property <length> spacing-xl: 24px; out property <[brush]> primary: [#080d12, #203446, #3f678d, #729ac0, #b9cddf, #edf2f7];
out property <[brush]> secondary: [#070d12, #1d3349, #396693, #6c99c6, #b6cce2, #edf2f8];
in-out property <length> size-sm: 16px; out property <[brush]> accent: [#150e05, #523714, #a46e28, #d7a15b, #ebd0ad, #faf3ea];
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: [#eff3f6, #bfcdd9, #7e9cb4, #4b6981, #263440, #090d10];
in-out property <length> radius-sm: 4px; out property <[brush]> background: [#f0f0f5, #c2c2d6, #8585ad, #52527a, #29293d, #0a0a0f];
in-out property <length> radius-md: 8px; out property <[brush]> primary: [#edf2f7, #b9cddf, #729ac0, #3f678d, #203446, #080d12];
in-out property <length> radius-lg: 16px; out property <[brush]> secondary: [#edf2f8, #b6cce2, #6c99c6, #396693, #1d3349, #070d12];
in-out property <length> radius-xl: 32px; out property <[brush]> accent: [#faf3ea, #ebd0ad, #d7a15b, #a46e28, #523714, #150e05];
}
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;
} }

14
ui/tool_bar.slint
View File

@ -1,24 +1,24 @@
import { Theme } from "theme.slint"; import { Metrics } from "theme.slint";
import { Button } from "std-widgets.slint"; import { Button } from "std-widgets.slint";
import { HorizontalSeparator } from "widgets/separator.slint"; import { HorizontalSeparator } from "widgets/separator.slint";
component ToolBarItem inherits Rectangle { component ToolBarItem inherits Rectangle {
width: Theme.size-lg; width: Metrics.size-lg;
height: Theme.size-lg; height: Metrics.size-lg;
border-color: black; border-color: black;
border-width: 1px; border-width: 1px;
border-radius: Theme.radius-md; border-radius: Metrics.radius-md;
} }
export component ToolBar inherits Rectangle { export component ToolBar inherits Rectangle {
width: Theme.size-xl; width: Metrics.size-xl;
border-color: black; border-color: black;
border-width: 1px; border-width: 1px;
VerticalLayout { VerticalLayout {
alignment: start; alignment: start;
padding: Theme.padding-md; padding: Metrics.padding-md;
spacing: Theme.padding-md; spacing: Metrics.padding-md;
Button { Button {
checkable: true; checkable: true;

16
ui/widgets/panel.slint
View File

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