diff --git a/ui/appwindow.slint b/ui/appwindow.slint index f5ce4da..953cca1 100644 --- a/ui/appwindow.slint +++ b/ui/appwindow.slint @@ -2,6 +2,7 @@ import { Theme } 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"; export component AppWindow inherits Window { title: @tr("FM Editor"); @@ -11,8 +12,20 @@ export component AppWindow inherits Window { EditorBar { } HorizontalLayout { - alignment: start; ToolBar { } + + ObjectToolPanel { } + + Rectangle { + Text { + font-size: Theme.font-lg; + text: "INSERT VIEWPORT HERE"; + vertical-alignment: center; + horizontal-alignment: center; + } + } + + ObjectToolPanel { } } StatusBar { } diff --git a/ui/object_tool_panel.slint b/ui/object_tool_panel.slint new file mode 100644 index 0000000..20416ee --- /dev/null +++ b/ui/object_tool_panel.slint @@ -0,0 +1,252 @@ +import { Theme } from "theme.slint"; + +export component ObjectToolPanel inherits Rectangle { + width: 280px; + border-color: black; + border-width: 1px; + + VerticalLayout { + padding: Theme.padding-md; + spacing: Theme.spacing-md; + + HorizontalLayout { + height: Theme.size-md; + Text { + font-size: Theme.font-lg; + text: @tr("Object Tool"); + vertical-alignment: center; + } + } + + Rectangle { + 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 { + font-size: Theme.font-md; + text: @tr("Favourites"); + vertical-alignment: center; + } + } + } + + VerticalLayout { + padding: Theme.padding-md; + spacing: Theme.spacing-md; + + Rectangle { + 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 { + font-size: Theme.font-md; + text: "Group Name"; + vertical-alignment: center; + horizontal-alignment: center; + } + } + } + + HorizontalLayout { + height: Theme.size-md; + padding-left: Theme.padding-md; + padding-right: Theme.padding-md; + Text { + font-size: Theme.font-md; + text: "Object Name"; + vertical-alignment: center; + } + } + + HorizontalLayout { + height: Theme.size-md; + padding-left: Theme.padding-md; + padding-right: Theme.padding-md; + Text { + font-size: Theme.font-md; + text: "Object Name"; + vertical-alignment: center; + } + } + + HorizontalLayout { + height: Theme.size-md; + padding-left: Theme.padding-md; + padding-right: Theme.padding-md; + Text { + font-size: Theme.font-md; + text: "Object Name"; + vertical-alignment: center; + } + } + } + } + } + + VerticalLayout { + padding: Theme.padding-md; + spacing: Theme.spacing-md; + + Rectangle { + 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 { + font-size: Theme.font-md; + text: "Group Name"; + vertical-alignment: center; + horizontal-alignment: center; + } + } + } + + HorizontalLayout { + height: Theme.size-md; + padding-left: Theme.padding-md; + padding-right: Theme.padding-md; + Text { + font-size: Theme.font-md; + text: "Object Name"; + vertical-alignment: center; + } + } + + HorizontalLayout { + height: Theme.size-md; + padding-left: Theme.padding-md; + padding-right: Theme.padding-md; + Text { + font-size: Theme.font-md; + text: "Object Name"; + vertical-alignment: center; + } + } + + HorizontalLayout { + height: Theme.size-md; + padding-left: Theme.padding-md; + padding-right: Theme.padding-md; + Text { + font-size: Theme.font-md; + text: "Object Name"; + vertical-alignment: center; + } + } + } + } + } + } + } + + Rectangle { + 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 { + font-size: Theme.font-md; + text: @tr("Hierarchy"); + vertical-alignment: center; + } + } + } + + VerticalLayout { + padding: Theme.padding-md; + spacing: Theme.spacing-md; + + HorizontalLayout { + spacing: Theme.spacing-md; + height: Theme.size-md; + Text { + font-size: Theme.font-md; + vertical-alignment: center; + text: @tr("Name:"); + } + + Rectangle { + border-color: black; + border-width: 1px; + border-radius: Theme.radius-md; + + Text { + font-size: Theme.font-md; + vertical-alignment: center; + horizontal-alignment: left; + text: "VicHutch (-514)"; + } + } + + Rectangle { + border-color: black; + border-width: 1px; + border-radius: Theme.radius-md; + + width: Theme.size-md; + } + + Rectangle { + border-color: black; + border-width: 1px; + border-radius: Theme.radius-md; + + width: Theme.size-md; + } + } + + Rectangle { + border-color: black; + border-width: 1px; + border-radius: Theme.radius-md; + clip: true; + + Text { + font-size: Theme.font-lg; + text: "INSERT TREE VIEW HERE"; + vertical-alignment: center; + horizontal-alignment: center; + } + } + } + } + } + } +}