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

Compare commits

base: Jayrude:61f20f228e7a491b35d4fb3e78db4fb96df21ab8
Branches Tags
Jayrude:main
..
compare: Jayrude:23daf927cdfa4ee3dac876f2a8defce94995dd80
Branches Tags
Jayrude:main

No commits in common. "61f20f228e7a491b35d4fb3e78db4fb96df21ab8" and "23daf927cdfa4ee3dac876f2a8defce94995dd80" have entirely different histories.
61f20f228e ... 23daf927cd

9 changed files with 282 additions and 319 deletions
Show Stats Expand all files Collapse all files

18
ui/appwindow.slint
View File

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

19
ui/editor_bar.slint
View File

@ -1,15 +1,18 @@
import { Metrics, DarkPalette } from "theme.slint"; import { Theme } from "theme.slint";
import { HorizontalBox } from "widgets/layout.slint";
export component EditorBar inherits HorizontalBox { export component EditorBar inherits Rectangle {
height: Metrics.size-xl; height: Theme.size-xl;
j-spacing: Metrics.spacing-xl; border-color: black;
j-alignment: start; border-width: 1px;
HorizontalLayout {
alignment: start;
padding: Theme.padding-md;
spacing: Theme.padding-xl;
Text { Text {
color: DarkPalette.text[4]; 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!!";
} }
}
} }

138
ui/object_tool_panel.slint
View File

@ -1,138 +1,160 @@
import { Metrics, DarkPalette } from "theme.slint"; import { Theme } from "theme.slint";
import { Panel } from "widgets/panel.slint"; import { Panel } from "widgets/panel.slint";
import { Box, HorizontalBox, VerticalBox } from "widgets/layout.slint";
export component ObjectToolPanel inherits Rectangle {
export component ObjectToolPanel inherits VerticalBox {
width: 280px; width: 280px;
border-color: black;
border-width: 1px;
VerticalLayout {
padding: Theme.padding-md;
spacing: Theme.spacing-md;
HorizontalLayout {
height: Theme.size-md;
Text { Text {
height: Metrics.size-md; font-size: Theme.font-lg;
color: DarkPalette.text[4];
font-size: Metrics.font-lg;
text: @tr("Object Tool"); text: @tr("Object Tool");
vertical-alignment: center; vertical-alignment: center;
} }
}
Panel { Panel {
j-alignment: start;
title: @tr("Favourites"); title: @tr("Favourites");
j-elevation: 2;
Panel { Panel {
title: "Group Name"; title: "Group Name";
title-alignment: center; title-alignment: center;
j-spacing: 0px; content-padding: 0px;
content-spacing: 0px;
HorizontalLayout {
height: Theme.size-md;
padding-left: Theme.padding-md;
padding-right: Theme.padding-md;
Text { Text {
height: Metrics.size-md; font-size: Theme.font-md;
color: DarkPalette.text[4];
font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
}
HorizontalLayout {
height: Theme.size-md;
padding-left: Theme.padding-md;
padding-right: Theme.padding-md;
Text { Text {
height: Metrics.size-md; font-size: Theme.font-md;
color: DarkPalette.text[4];
font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
}
HorizontalLayout {
height: Theme.size-md;
padding-left: Theme.padding-md;
padding-right: Theme.padding-md;
Text { Text {
height: Metrics.size-md; font-size: Theme.font-md;
color: DarkPalette.text[4];
font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
} }
}
Panel { Panel {
title: "Group Name"; title: "Group Name";
title-alignment: center; title-alignment: center;
j-spacing: 0px; content-padding: 0px;
content-spacing: 0px;
HorizontalLayout {
height: Theme.size-md;
padding-left: Theme.padding-md;
padding-right: Theme.padding-md;
Text { Text {
height: Metrics.size-md; font-size: Theme.font-md;
color: DarkPalette.text[4];
font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
}
HorizontalLayout {
height: Theme.size-md;
padding-left: Theme.padding-md;
padding-right: Theme.padding-md;
Text { Text {
height: Metrics.size-md; font-size: Theme.font-md;
color: DarkPalette.text[4];
font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
}
HorizontalLayout {
height: Theme.size-md;
padding-left: Theme.padding-md;
padding-right: Theme.padding-md;
Text { Text {
height: Metrics.size-md; font-size: Theme.font-md;
color: DarkPalette.text[4];
font-size: Metrics.font-md;
text: "Object Name"; text: "Object Name";
vertical-alignment: center; vertical-alignment: center;
} }
} }
} }
}
Panel { Panel {
title: @tr("Hierarchy"); title: @tr("Hierarchy");
j-elevation: 2; HorizontalLayout {
vertical-stretch: 1; spacing: Theme.spacing-md;
height: Theme.size-md;
HorizontalBox {
j-elevation: 2;
j-padding: 0px;
j-spacing: Metrics.spacing-md;
height: Metrics.size-md;
Text { Text {
color: DarkPalette.text[4]; font-size: Theme.font-md;
font-size: Metrics.font-md;
vertical-alignment: center; vertical-alignment: center;
text: @tr("Name:"); text: @tr("Name:");
} }
Box { Rectangle {
j-padding: 0px; border-color: black;
border-width: 1px;
border-radius: Theme.radius-md;
Text { Text {
color: DarkPalette.text[4]; font-size: Theme.font-md;
font-size: Metrics.font-md;
vertical-alignment: center; vertical-alignment: center;
horizontal-alignment: center; horizontal-alignment: left;
text: "VicHutch (-514)"; text: "VicHutch (-514)";
} }
} }
Box { Rectangle {
width: Metrics.size-md; border-color: black;
j-elevation: 3; border-width: 1px;
border-radius: Theme.radius-md;
Rectangle { } width: Theme.size-md;
} }
Box { Rectangle {
width: Metrics.size-md; border-color: black;
j-elevation: 3; border-width: 1px;
border-radius: Theme.radius-md;
Rectangle { } width: Theme.size-md;
} }
} }
Box { Rectangle {
border-color: black;
border-width: 1px;
border-radius: Theme.radius-md;
clip: true;
Text { Text {
color: DarkPalette.text[4]; 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;
} }
} }
} }
}
} }

24
ui/status_bar.slint
View File

@ -1,15 +1,17 @@
import { Metrics, DarkPalette } from "theme.slint"; import { Theme } 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 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 { Text {
color: DarkPalette.text[4]; 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";
} }
@ -17,11 +19,11 @@ export component StatusBar inherits HorizontalBox {
VerticalSeparator { } VerticalSeparator { }
Text { Text {
color: DarkPalette.text[4]; font-size: Theme.font-md;
font-size: Metrics.font-md;
vertical-alignment: center; vertical-alignment: center;
text: "Saved by: Jayrude"; text: "Saved by: Jayrude";
} }
VerticalSeparator { } VerticalSeparator { }
}
} }

65
ui/theme.slint
View File

@ -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 { in-out property <length> spacing-sm: 4px;
out property <[brush]> text: [#78716c, #a8a29e, #d6d3d1, #e7e5e4, #fafaf9]; in-out property <length> spacing-md: 8px;
out property <[brush]> background: [#0c0a09, #1c1917, #292524, #44403c, #57534e]; in-out property <length> spacing-lg: 16px;
out property <[brush]> primary: [#083344, #164e63, #155e75, #0e7490, #0891b2]; in-out property <length> spacing-xl: 24px;
out property <[brush]> secondary: [#44403c, #57534e, #78716c, #a8a29e, #d6d3d1];
out property <[brush]> accent: [#4c1d95, #5b21b6, #6d28d9, #7c3aed, #8b5cf6]; in-out property <length> size-sm: 16px;
} in-out property <length> size-md: 24px;
in-out property <length> size-lg: 32px;
export global LightPalette { in-out property <length> size-xl: 48px;
out property <[brush]> text: [#57534e, #44403c, #292524, #1c1917, #0c0a09];
out property <[brush]> background: [#fafaf9, #e7e5e4, #d6d3d1, #a8a29e, #78716c]; in-out property <length> radius-sm: 4px;
out property <[brush]> primary: [#06b6d4, #0891b2, #0e7490, #155e75, #164e63]; in-out property <length> radius-md: 8px;
out property <[brush]> secondary: [#a8a29e, #78716c, #57534e, #44403c, #292524]; in-out property <length> radius-lg: 16px;
out property <[brush]> accent: [#8b5cf6, #7c3aed, #6d28d9, #5b21b6, #4c1d95]; in-out property <length> radius-xl: 32px;
}
in-out property <length> font-sm: 10px;
export global Metrics { in-out property <length> font-md: 12px;
out property <length> padding-sm: 4px; in-out property <length> font-lg: 16px;
out property <length> padding-md: 8px; in-out property <length> font-xl: 24px;
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;
} }

26
ui/tool_bar.slint
View File

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

60
ui/widgets/layout.slint
View File

@ -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
}

31
ui/widgets/panel.slint
View File

@ -1,18 +1,37 @@
import { Metrics, DarkPalette } from "../theme.slint"; import { Theme } from "../theme.slint";
import { VerticalBox } from "layout.slint";
export component Panel inherits VerticalBox { 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-spacing: Theme.spacing-md;
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 { Text {
height: Metrics.size-md; font-size: Theme.font-md;
color: DarkPalette.text[4];
font-size: Metrics.font-md;
text: title; text: title;
vertical-alignment: center; vertical-alignment: center;
horizontal-alignment: title-alignment; horizontal-alignment: title-alignment;
} }
}
}
VerticalLayout {
padding: content-padding;
spacing: content-spacing;
@children @children
}
}
} }

8
ui/widgets/separator.slint
View File

@ -1,20 +1,16 @@
import {DarkPalette} from "../theme.slint";
export component VerticalSeparator { export component VerticalSeparator {
width: 1px;
Path { Path {
width: 1px; width: 1px;
stroke: DarkPalette.background[0]; stroke: black;
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: DarkPalette.background[0]; stroke: black;
stroke-width: 1px; stroke-width: 1px;
commands: "M 0 0 L 1 0 Z"; commands: "M 0 0 L 1 0 Z";
} }