Add basic panel widget

This commit is contained in:
Jarrod Doyle 2024-04-09 22:12:54 +01:00
parent dfcf3ebbd3
commit 23daf927cd
Signed by: Jayrude
GPG Key ID: 38B57B16E7C0ADF7
2 changed files with 144 additions and 199 deletions

View File

@ -1,4 +1,5 @@
import { Theme } from "theme.slint"; import { Theme } from "theme.slint";
import { Panel } from "widgets/panel.slint";
export component ObjectToolPanel inherits Rectangle { export component ObjectToolPanel inherits Rectangle {
width: 280px; width: 280px;
@ -18,54 +19,53 @@ export component ObjectToolPanel inherits Rectangle {
} }
} }
Rectangle { Panel {
border-color: black; title: @tr("Favourites");
border-width: 1px;
border-radius: Theme.radius-md;
clip: true;
VerticalLayout { Panel {
Rectangle { title: "Group Name";
height: Theme.size-md; title-alignment: center;
border-color: black; content-padding: 0px;
border-width: 1px; content-spacing: 0px;
HorizontalLayout { HorizontalLayout {
height: Theme.size-md;
padding-left: Theme.padding-md; padding-left: Theme.padding-md;
padding-right: Theme.padding-md; padding-right: Theme.padding-md;
Text { Text {
font-size: Theme.font-md; font-size: Theme.font-md;
text: @tr("Favourites"); 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; vertical-alignment: center;
} }
} }
} }
VerticalLayout { Panel {
padding: Theme.padding-md; title: "Group Name";
spacing: Theme.spacing-md; title-alignment: center;
content-padding: 0px;
Rectangle { content-spacing: 0px;
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 { HorizontalLayout {
height: Theme.size-md; height: Theme.size-md;
padding-left: Theme.padding-md; padding-left: Theme.padding-md;
@ -100,99 +100,9 @@ export component ObjectToolPanel inherits Rectangle {
} }
} }
} }
}
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;
Panel {
title: @tr("Hierarchy");
HorizontalLayout { HorizontalLayout {
spacing: Theme.spacing-md; spacing: Theme.spacing-md;
height: Theme.size-md; height: Theme.size-md;
@ -247,6 +157,4 @@ export component ObjectToolPanel inherits Rectangle {
} }
} }
} }
}
}
} }

37
ui/widgets/panel.slint Normal file
View File

@ -0,0 +1,37 @@
import { Theme } from "../theme.slint";
export component Panel inherits Rectangle {
in property <string> title: "Title";
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 {
font-size: Theme.font-md;
text: title;
vertical-alignment: center;
horizontal-alignment: title-alignment;
}
}
}
VerticalLayout {
padding: content-padding;
spacing: content-spacing;
@children
}
}
}