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

Basic theming applied

This commit is contained in:
Jarrod Doyle 2024-04-10 13:28:43 +01:00
parent 0788dd10d5
commit b98741a35e
Signed by: Jayrude
GPG Key ID: 38B57B16E7C0ADF7
8 changed files with 228 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ui/appwindow.slint
View File

@ -1,17 +1,28 @@
import { Metrics } from "theme.slint"; import { Metrics, DarkPalette } 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";
import { ObjectToolPanel } from "object_tool_panel.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 { export component AppWindow inherits Window {
title: @tr("FM Editor"); title: @tr("FM Editor");
preferred-width: 1280px; preferred-width: 1280px;
preferred-height: 720px; preferred-height: 720px;
VerticalLayout { VerticalBox {
j-padding: Metrics.padding-sm;
j-spacing: Metrics.spacing-sm;
j-alignment: stretch;
background: DarkPalette.background[0];
EditorBar { } EditorBar { }
HorizontalLayout { HorizontalBox {
j-alignment: stretch;
background: DarkPalette.background[0];
j-padding: 0px;
j-spacing: Metrics.spacing-sm;
ToolBar { } ToolBar { }
ObjectToolPanel { } ObjectToolPanel { }

23
ui/editor_bar.slint
View File

@ -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; height: Metrics.size-xl;
border-color: black; j-spacing: Metrics.spacing-xl;
border-width: 1px; j-rounding: Metrics.radius-md;
HorizontalLayout { Text {
alignment: start; color: DarkPalette.text[4];
padding: Metrics.padding-md; font-size: Metrics.font-md;
spacing: Metrics.padding-xl; vertical-alignment: center;
Text { text: "Damn look at all the options and shit here it's like Hammer 2!!";
font-size: Metrics.font-md;
vertical-alignment: center;
text: "Damn look at all the options and shit here it's like Hammer 2!!";
}
} }
} }

254
ui/object_tool_panel.slint
View File

@ -1,159 +1,147 @@
import { Metrics } from "theme.slint"; import { Metrics, DarkPalette } from "theme.slint";
import { Panel } from "widgets/panel.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; width: 280px;
border-color: black; j-rounding: Metrics.radius-md;
border-width: 1px; j-alignment: stretch;
VerticalLayout { Text {
padding: Metrics.padding-md; height: Metrics.size-md;
spacing: Metrics.spacing-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 { Text {
font-size: Metrics.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; vertical-alignment: center;
} }
} }
Panel { 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: 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;
}
}
HorizontalLayout { Text {
height: Metrics.size-md; height: Metrics.size-md;
padding-left: Metrics.padding-md; color: DarkPalette.text[4];
padding-right: Metrics.padding-md; font-size: Metrics.font-md;
Text { text: "Object Name";
font-size: Metrics.font-md; vertical-alignment: center;
text: "Object Name"; }
vertical-alignment: center;
}
}
HorizontalLayout { Text {
height: Metrics.size-md; height: Metrics.size-md;
padding-left: Metrics.padding-md; color: DarkPalette.text[4];
padding-right: Metrics.padding-md; font-size: Metrics.font-md;
Text { text: "Object Name";
font-size: Metrics.font-md; vertical-alignment: center;
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 { HorizontalBox {
title: "Group Name"; width: Metrics.size-md;
title-alignment: center; j-rounding: Metrics.radius-md;
content-padding: 0px; j-elevation: 3;
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;
}
}
HorizontalLayout { Rectangle { }
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;
}
}
HorizontalLayout { HorizontalBox {
height: Metrics.size-md; width: Metrics.size-md;
padding-left: Metrics.padding-md; j-rounding: Metrics.radius-md;
padding-right: Metrics.padding-md; j-elevation: 3;
Text {
font-size: Metrics.font-md; Rectangle { }
text: "Object Name";
vertical-alignment: center;
}
}
} }
} }
Panel { VerticalBox {
title: @tr("Hierarchy"); j-alignment: stretch;
HorizontalLayout { j-rounding: Metrics.radius-md;
spacing: Metrics.spacing-md;
height: Metrics.size-md;
Text {
font-size: Metrics.font-md;
vertical-alignment: center;
text: @tr("Name:");
}
Rectangle { Text {
border-color: black; color: DarkPalette.text[4];
border-width: 1px; font-size: Metrics.font-lg;
border-radius: Metrics.radius-md; text: "INSERT TREE VIEW HERE";
vertical-alignment: center;
Text { horizontal-alignment: center;
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;
}
} }
} }
} }

44
ui/status_bar.slint
View File

@ -1,29 +1,27 @@
import { Metrics } from "theme.slint"; import { Metrics, DarkPalette } from "theme.slint";
import { VerticalSeparator } from "widgets/separator.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;
border-width: 1px;
height: Metrics.size-lg; height: Metrics.size-lg;
HorizontalLayout { j-rounding: Metrics.radius-md;
alignment: start; j-spacing: Metrics.spacing-lg;
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";
}
VerticalSeparator { } Text {
color: DarkPalette.text[4];
Text { font-size: Metrics.font-md;
font-size: Metrics.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 { }
} }

81
ui/tool_bar.slint
View File

@ -1,57 +1,50 @@
import { Metrics } from "theme.slint"; import { Metrics, DarkPalette } 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";
import { VerticalBox } from "widgets/layout.slint";
component ToolBarItem inherits Rectangle { component ToolBarItem inherits Rectangle {
width: Metrics.size-lg; width: Metrics.size-lg;
height: Metrics.size-lg; height: Metrics.size-lg;
border-color: black;
border-width: 1px;
border-radius: Metrics.radius-md; border-radius: Metrics.radius-md;
background: DarkPalette.background[2];
} }
export component ToolBar inherits Rectangle { export component ToolBar inherits VerticalBox {
width: Metrics.size-xl; width: Metrics.size-xl;
border-color: black; j-rounding: Metrics.radius-md;
border-width: 1px;
VerticalLayout { Button {
alignment: start; checkable: true;
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 { }
} }
ToolBarItem { }
ToolBarItem { }
ToolBarItem { }
ToolBarItem { }
HorizontalSeparator { }
ToolBarItem { }
ToolBarItem { }
ToolBarItem { }
ToolBarItem { }
ToolBarItem { }
ToolBarItem { }
HorizontalSeparator { }
ToolBarItem { }
ToolBarItem { }
ToolBarItem { }
} }

8
ui/widgets/layout.slint
View File

@ -8,13 +8,15 @@ struct BorderStyle {
export component HorizontalBox inherits Rectangle { export component HorizontalBox inherits Rectangle {
// TODO: border, shadow // TODO: border, shadow
in property <int> j-elevation: 1;
in property <length> j-rounding: 0px; in property <length> j-rounding: 0px;
in property <length> j-padding: Metrics.padding-md; in property <length> j-padding: Metrics.padding-md;
in property <length> j-spacing: Metrics.spacing-md; in property <length> j-spacing: Metrics.spacing-md;
in property <LayoutAlignment> j-alignment: start; in property <LayoutAlignment> j-alignment: start;
background: DarkPalette.background[1]; background: DarkPalette.background[j-elevation];
border-radius: j-rounding; border-radius: j-rounding;
clip: true;
HorizontalLayout { HorizontalLayout {
alignment: j-alignment; alignment: j-alignment;
@ -26,13 +28,15 @@ export component HorizontalBox inherits Rectangle {
export component VerticalBox inherits Rectangle { export component VerticalBox inherits Rectangle {
// TODO: border, shadow // TODO: border, shadow
in property <int> j-elevation: 1;
in property <length> j-rounding: 0px; in property <length> j-rounding: 0px;
in property <length> j-padding: Metrics.padding-md; in property <length> j-padding: Metrics.padding-md;
in property <length> j-spacing: Metrics.spacing-md; in property <length> j-spacing: Metrics.spacing-md;
in property <LayoutAlignment> j-alignment: start; in property <LayoutAlignment> j-alignment: start;
background: DarkPalette.background[1]; background: DarkPalette.background[j-elevation];
border-radius: j-rounding; border-radius: j-rounding;
clip: true;
VerticalLayout { VerticalLayout {
alignment: j-alignment; alignment: j-alignment;

43
ui/widgets/panel.slint
View File

@ -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 <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: Metrics.padding-md;
in property <length> content-spacing: Metrics.spacing-md;
border-color: black; j-rounding: Metrics.radius-md;
border-width: 1px;
border-radius: Metrics.radius-md;
clip: true;
VerticalLayout { Text {
Rectangle { height: Metrics.size-md;
height: Metrics.size-md; color: DarkPalette.text[4];
border-color: black; font-size: Metrics.font-md;
border-width: 1px; text: title;
HorizontalLayout { vertical-alignment: center;
padding-left: Metrics.padding-md; horizontal-alignment: title-alignment;
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
}
} }
@children
} }

8
ui/widgets/separator.slint
View File

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