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