Add basic panel widget
This commit is contained in:
parent
dfcf3ebbd3
commit
23daf927cd
GPG Key ID:
38B57B16E7C0ADF7
|
|
@ -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,233 +19,140 @@ 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";
|
||||||
|
title-alignment: center;
|
||||||
|
content-padding: 0px;
|
||||||
|
content-spacing: 0px;
|
||||||
|
HorizontalLayout {
|
||||||
height: Theme.size-md;
|
height: Theme.size-md;
|
||||||
border-color: black;
|
padding-left: Theme.padding-md;
|
||||||
border-width: 1px;
|
padding-right: Theme.padding-md;
|
||||||
HorizontalLayout {
|
Text {
|
||||||
padding-left: Theme.padding-md;
|
font-size: Theme.font-md;
|
||||||
padding-right: Theme.padding-md;
|
text: "Object Name";
|
||||||
Text {
|
vertical-alignment: center;
|
||||||
font-size: Theme.font-md;
|
|
||||||
text: @tr("Favourites");
|
|
||||||
vertical-alignment: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
VerticalLayout {
|
HorizontalLayout {
|
||||||
padding: Theme.padding-md;
|
height: Theme.size-md;
|
||||||
spacing: Theme.spacing-md;
|
padding-left: Theme.padding-md;
|
||||||
|
padding-right: Theme.padding-md;
|
||||||
Rectangle {
|
Text {
|
||||||
border-color: black;
|
font-size: Theme.font-md;
|
||||||
border-width: 1px;
|
text: "Object Name";
|
||||||
border-radius: Theme.radius-md;
|
vertical-alignment: center;
|
||||||
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 {
|
HorizontalLayout {
|
||||||
padding: Theme.padding-md;
|
height: Theme.size-md;
|
||||||
spacing: Theme.spacing-md;
|
padding-left: Theme.padding-md;
|
||||||
|
padding-right: Theme.padding-md;
|
||||||
|
Text {
|
||||||
|
font-size: Theme.font-md;
|
||||||
|
text: "Object Name";
|
||||||
|
vertical-alignment: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Rectangle {
|
Panel {
|
||||||
border-color: black;
|
title: "Group Name";
|
||||||
border-width: 1px;
|
title-alignment: center;
|
||||||
border-radius: Theme.radius-md;
|
content-padding: 0px;
|
||||||
clip: true;
|
content-spacing: 0px;
|
||||||
VerticalLayout {
|
HorizontalLayout {
|
||||||
Rectangle {
|
height: Theme.size-md;
|
||||||
height: Theme.size-md;
|
padding-left: Theme.padding-md;
|
||||||
border-color: black;
|
padding-right: Theme.padding-md;
|
||||||
border-width: 1px;
|
Text {
|
||||||
HorizontalLayout {
|
font-size: Theme.font-md;
|
||||||
padding-left: Theme.padding-md;
|
text: "Object Name";
|
||||||
padding-right: Theme.padding-md;
|
vertical-alignment: center;
|
||||||
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;
|
||||||
padding-right: Theme.padding-md;
|
padding-right: Theme.padding-md;
|
||||||
Text {
|
Text {
|
||||||
font-size: Theme.font-md;
|
font-size: Theme.font-md;
|
||||||
text: "Object Name";
|
text: "Object Name";
|
||||||
vertical-alignment: center;
|
vertical-alignment: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
HorizontalLayout {
|
HorizontalLayout {
|
||||||
height: Theme.size-md;
|
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: "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 {
|
|
||||||
font-size: Theme.font-md;
|
|
||||||
text: "Object Name";
|
|
||||||
vertical-alignment: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Panel {
|
||||||
border-color: black;
|
title: @tr("Hierarchy");
|
||||||
border-width: 1px;
|
HorizontalLayout {
|
||||||
border-radius: Theme.radius-md;
|
spacing: Theme.spacing-md;
|
||||||
clip: true;
|
height: Theme.size-md;
|
||||||
|
Text {
|
||||||
VerticalLayout {
|
font-size: Theme.font-md;
|
||||||
|
vertical-alignment: center;
|
||||||
|
text: @tr("Name:");
|
||||||
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
height: Theme.size-md;
|
|
||||||
border-color: black;
|
border-color: black;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
HorizontalLayout {
|
border-radius: Theme.radius-md;
|
||||||
padding-left: Theme.padding-md;
|
|
||||||
padding-right: Theme.padding-md;
|
Text {
|
||||||
Text {
|
font-size: Theme.font-md;
|
||||||
font-size: Theme.font-md;
|
vertical-alignment: center;
|
||||||
text: @tr("Hierarchy");
|
horizontal-alignment: left;
|
||||||
vertical-alignment: center;
|
text: "VicHutch (-514)";
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
VerticalLayout {
|
Rectangle {
|
||||||
padding: Theme.padding-md;
|
border-color: black;
|
||||||
spacing: Theme.spacing-md;
|
border-width: 1px;
|
||||||
|
border-radius: Theme.radius-md;
|
||||||
|
|
||||||
HorizontalLayout {
|
width: Theme.size-md;
|
||||||
spacing: Theme.spacing-md;
|
}
|
||||||
height: Theme.size-md;
|
|
||||||
Text {
|
|
||||||
font-size: Theme.font-md;
|
|
||||||
vertical-alignment: center;
|
|
||||||
text: @tr("Name:");
|
|
||||||
}
|
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
border-color: black;
|
border-color: black;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-radius: Theme.radius-md;
|
border-radius: Theme.radius-md;
|
||||||
|
|
||||||
Text {
|
width: Theme.size-md;
|
||||||
font-size: Theme.font-md;
|
}
|
||||||
vertical-alignment: center;
|
}
|
||||||
horizontal-alignment: left;
|
|
||||||
text: "VicHutch (-514)";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
border-color: black;
|
border-color: black;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-radius: Theme.radius-md;
|
border-radius: Theme.radius-md;
|
||||||
|
clip: true;
|
||||||
|
|
||||||
width: Theme.size-md;
|
Text {
|
||||||
}
|
font-size: Theme.font-lg;
|
||||||
|
text: "INSERT TREE VIEW HERE";
|
||||||
Rectangle {
|
vertical-alignment: center;
|
||||||
border-color: black;
|
horizontal-alignment: center;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue