language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-11-15 02:07:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

live-preview: Polish the property widgets a bit

Browse source 
Use a GridLayout, that seems simpler and add a bit of extra padding.
This commit is contained in:
Tobias Hunger 2025-03-12 09:47:32 +00:00 • committed by Tobias Hunger
parent f6f8d92cec
commit 5e5ac0d1b4
1 changed files with 202 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

149
tools/lsp/ui/components/property-widgets.slint
View file

@ -117,7 +117,7 @@ component ChildIndicator inherits Rectangle {
} }
} }
component CodeWidget inherits VerticalLayout { component CodeWidget inherits GridLayout {
in property <bool> enabled; in property <bool> enabled;
in property <string> property-name; in property <string> property-name;
in property <PropertyValue> property-value; in property <PropertyValue> property-value;
@ -125,25 +125,25 @@ component CodeWidget inherits VerticalLayout {
callback code-action(); callback code-action();
callback reset-action(); callback reset-action();
spacing: EditorSpaceSettings.default-spacing; spacing-vertical: EditorSpaceSettings.default-spacing;
width: 100%; width: 100%;
HorizontalLayout { Row {
Rectangle {
width: childIndicator.width;
}
NameLabel { NameLabel {
col: 1;
property-name: root.property-name; property-name: root.property-name;
property-value: root.property-value; property-value: root.property-value;
} }
} }
HorizontalLayout { Row {
childIndicator := ChildIndicator { childIndicator := ChildIndicator {
horizontal-stretch: 0;
visible: false; visible: false;
} }
HorizontalLayout {
if property-value.code == "": Text { if property-value.code == "": Text {
horizontal-alignment: left; horizontal-alignment: left;
vertical-alignment: center; vertical-alignment: center;
@ -169,6 +169,7 @@ component CodeWidget inherits VerticalLayout {
} }
} }
} }
}
} }
component SecondaryContent inherits Rectangle { component SecondaryContent inherits Rectangle {
@ -225,7 +226,7 @@ component SecondaryContent inherits Rectangle {
} }
} }
component FloatWidget inherits VerticalLayout { component FloatWidget inherits GridLayout {
in property <bool> enabled; in property <bool> enabled;
in property <string> property-name; in property <string> property-name;
in property <PropertyValue> property-value; in property <PropertyValue> property-value;
@ -270,21 +271,19 @@ component FloatWidget inherits VerticalLayout {
apply-value(); apply-value();
} }
spacing: EditorSpaceSettings.default-spacing; spacing-vertical: EditorSpaceSettings.default-spacing;
width: 100%; width: 100%;
HorizontalLayout { Row {
Rectangle {
width: childIndicator.width;
}
NameLabel { NameLabel {
col: 1;
property-name: root.property-name; property-name: root.property-name;
property-value: root.property-value; property-value: root.property-value;
} }
} }
HorizontalLayout { Row {
childIndicator := ChildIndicator { childIndicator := ChildIndicator {
horizontal-stretch: 0; horizontal-stretch: 0;
visible: false; visible: false;
@ -343,7 +342,7 @@ component FloatWidget inherits VerticalLayout {
} }
} }
component StringWidget inherits VerticalLayout { component StringWidget inherits GridLayout {
// FIXME: @ogoffart says the plural support is not working at this time, so // FIXME: @ogoffart says the plural support is not working at this time, so
// we do not offer it in the UI for the time being... // we do not offer it in the UI for the time being...
@ -403,21 +402,18 @@ component StringWidget inherits VerticalLayout {
} }
} }
spacing: EditorSpaceSettings.default-spacing; spacing-vertical: EditorSpaceSettings.default-spacing;
width: 100%; width: 100%;
HorizontalLayout { Row {
Rectangle {
width: childIndicator.width;
}
NameLabel { NameLabel {
col: 1;
property-name: root.property-name; property-name: root.property-name;
property-value: root.property-value; property-value: root.property-value;
} }
} }
HorizontalLayout { Row {
childIndicator := ChildIndicator { childIndicator := ChildIndicator {
visible: root.is-translatable; visible: root.is-translatable;
horizontal-stretch: 0; horizontal-stretch: 0;
@ -439,14 +435,12 @@ component StringWidget inherits VerticalLayout {
} }
} }
if root.is-translatable: HorizontalLayout { Row {
Rectangle {
width: childIndicator.width;
}
sub := SecondaryContent { sub := SecondaryContent {
col: 1;
enabled: root.enabled; enabled: root.enabled;
open: childIndicator.open; open: childIndicator.open && root.is-translatable;
has-code-action <=> root.has-code-action; has-code-action <=> root.has-code-action;
has-reset-action <=> root.has-reset-action; has-reset-action <=> root.has-reset-action;
@ -558,7 +552,7 @@ component ColorLineEdit inherits HorizontalLayout {
} }
} }
component ColorWidget inherits VerticalLayout { component ColorWidget inherits GridLayout {
in property <bool> enabled; in property <bool> enabled;
in property <string> property-name; in property <string> property-name;
in property <PropertyValue> property-value; in property <PropertyValue> property-value;
@ -590,7 +584,7 @@ component ColorWidget inherits VerticalLayout {
a.value = self.current-color-data.a; a.value = self.current-color-data.a;
} }
spacing: EditorSpaceSettings.default-spacing; spacing-vertical: EditorSpaceSettings.default-spacing;
width: 100%; width: 100%;
function apply-value() { function apply-value() {
@ -620,18 +614,15 @@ component ColorWidget inherits VerticalLayout {
} }
} }
HorizontalLayout { Row {
Rectangle {
width: childIndicator.width;
}
NameLabel { NameLabel {
col: 1;
property-name: root.property-name; property-name: root.property-name;
property-value: root.property-value; property-value: root.property-value;
} }
} }
HorizontalLayout { Row {
childIndicator := ChildIndicator { childIndicator := ChildIndicator {
horizontal-stretch: 0; horizontal-stretch: 0;
control-hover: rle.has-focus; control-hover: rle.has-focus;
@ -672,12 +663,14 @@ component ColorWidget inherits VerticalLayout {
} }
} }
HorizontalLayout { Row {
Rectangle { Rectangle {
width: childIndicator.width; width: childIndicator.width;
} }
sub := SecondaryContent { sub := SecondaryContent {
col: 1;
private property <color> slider-color: Api.rgba-to-color(r.value, g.value, b.value, a.value); private property <color> slider-color: Api.rgba-to-color(r.value, g.value, b.value, a.value);
enabled: root.enabled; enabled: root.enabled;
@ -741,7 +734,7 @@ component ColorWidget inherits VerticalLayout {
} }
} }
component IntegerWidget inherits VerticalLayout { component IntegerWidget inherits GridLayout {
in property <bool> enabled; in property <bool> enabled;
in property <string> property-name; in property <string> property-name;
in property <PropertyValue> property-value; in property <PropertyValue> property-value;
@ -749,21 +742,19 @@ component IntegerWidget inherits VerticalLayout {
callback test-integer-binding(text: string) -> bool; callback test-integer-binding(text: string) -> bool;
callback set-integer-binding(text: string); callback set-integer-binding(text: string);
spacing: EditorSpaceSettings.default-spacing; spacing-vertical: EditorSpaceSettings.default-spacing;
width: 100%; width: 100%;
HorizontalLayout { Row {
Rectangle {
width: childIndicator.width;
}
NameLabel { NameLabel {
col: 1;
property-name: root.property-name; property-name: root.property-name;
property-value: root.property-value; property-value: root.property-value;
} }
} }
HorizontalLayout { Row {
childIndicator := ChildIndicator { childIndicator := ChildIndicator {
horizontal-stretch: 0; horizontal-stretch: 0;
visible: false; visible: false;
@ -787,7 +778,7 @@ component IntegerWidget inherits VerticalLayout {
} }
} }
component EnumWidget inherits VerticalLayout { component EnumWidget inherits GridLayout {
in property <bool> enabled; in property <bool> enabled;
in property <string> property-name; in property <string> property-name;
in property <PropertyValue> property-value; in property <PropertyValue> property-value;
@ -802,21 +793,19 @@ component EnumWidget inherits VerticalLayout {
callback set-enum-binding(text: string); callback set-enum-binding(text: string);
spacing: EditorSpaceSettings.default-spacing; spacing-vertical: EditorSpaceSettings.default-spacing;
width: 100%; width: 100%;
HorizontalLayout { Row {
Rectangle {
width: childIndicator.width;
}
NameLabel { NameLabel {
col: 1;
property-name: root.property-name; property-name: root.property-name;
property-value: root.property-value; property-value: root.property-value;
} }
} }
HorizontalLayout { Row {
childIndicator := ChildIndicator { childIndicator := ChildIndicator {
horizontal-stretch: 0; horizontal-stretch: 0;
visible: false; visible: false;
@ -836,28 +825,26 @@ component EnumWidget inherits VerticalLayout {
} }
} }
component BooleanWidget inherits VerticalLayout { component BooleanWidget inherits GridLayout {
in property <bool> enabled; in property <bool> enabled;
in property <string> property-name; in property <string> property-name;
in property <PropertyValue> property-value; in property <PropertyValue> property-value;
callback set-bool-binding(value: bool); callback set-bool-binding(value: bool);
spacing: EditorSpaceSettings.default-spacing; spacing-vertical: EditorSpaceSettings.default-spacing;
width: 100%; width: 100%;
HorizontalLayout { Row {
Rectangle {
width: childIndicator.width;
}
NameLabel { NameLabel {
col: 1;
property-name: root.property-name; property-name: root.property-name;
property-value: root.property-value; property-value: root.property-value;
} }
} }
HorizontalLayout { Row {
childIndicator := ChildIndicator { childIndicator := ChildIndicator {
horizontal-stretch: 0; horizontal-stretch: 0;
visible: false; visible: false;
@ -875,7 +862,7 @@ component BooleanWidget inherits VerticalLayout {
} }
} }
component EditMultiValueWidget inherits VerticalLayout { component EditMultiValueWidget inherits GridLayout {
in property <bool> enabled; in property <bool> enabled;
in property <string> property-name; in property <string> property-name;
in property <PropertyValue> property-value; in property <PropertyValue> property-value;
@ -884,19 +871,33 @@ component EditMultiValueWidget inherits VerticalLayout {
callback edit-in-spreadsheet(property-group-name: string, data: PreviewData, values: [[PropertyValue]]); callback edit-in-spreadsheet(property-group-name: string, data: PreviewData, values: [[PropertyValue]]);
spacing-vertical: EditorSpaceSettings.default-spacing;
width: 100%;
Row {
NameLabel { NameLabel {
col: 1;
property-name: root.property-name; property-name: root.property-name;
property-value: root.property-value; property-value: root.property-value;
} }
}
Row {
ChildIndicator {
horizontal-stretch: 0;
visible: false;
}
Button { Button {
text: preview-data.has-setter ? @tr("Edit") : @tr("View"); text: preview-data.has-setter ? @tr("Edit") : @tr("View");
clicked => { clicked => {
root.edit-in-spreadsheet(root.property-group-name, root.preview-data, [[ ]]); root.edit-in-spreadsheet(root.property-group-name, root.preview-data, [[ ]]);
} }
} }
}
} }
component EditJsonWidget inherits VerticalLayout { component EditJsonWidget inherits GridLayout {
in property <bool> enabled; in property <bool> enabled;
in property <string> property-name; in property <string> property-name;
in property <PropertyValue> property-value; in property <PropertyValue> property-value;
@ -906,7 +907,7 @@ component EditJsonWidget inherits VerticalLayout {
callback set-code-binding(text: string) -> bool; callback set-code-binding(text: string) -> bool;
spacing: EditorSpaceSettings.default-spacing; spacing-vertical: EditorSpaceSettings.default-spacing;
width: 100%; width: 100%;
function apply-value() { function apply-value() {
@ -931,18 +932,16 @@ component EditJsonWidget inherits VerticalLayout {
} }
} }
HorizontalLayout { Row {
Rectangle {
width: childIndicator.width;
}
NameLabel { NameLabel {
col: 1;
property-name: root.property-name; property-name: root.property-name;
property-value: root.property-value; property-value: root.property-value;
} }
} }
HorizontalLayout { Row {
childIndicator := ChildIndicator { childIndicator := ChildIndicator {
horizontal-stretch: 0; horizontal-stretch: 0;
visible: false; visible: false;
@ -1003,7 +1002,6 @@ export component PropertyValueWidget inherits VerticalLayout {
callback reset-action(); callback reset-action();
callback code-action(); callback code-action();
VerticalLayout {
Rectangle { Rectangle {
clip: true; clip: true;
height: root.property-value.kind == PropertyValueKind.boolean ? self.preferred-height : 0px; height: root.property-value.kind == PropertyValueKind.boolean ? self.preferred-height : 0px;
@ -1137,7 +1135,6 @@ export component PropertyValueWidget inherits VerticalLayout {
} }
} }
} }
}
} }
export component PropertyInformationWidget inherits VerticalLayout { export component PropertyInformationWidget inherits VerticalLayout {
@ -1145,6 +1142,8 @@ export component PropertyInformationWidget inherits VerticalLayout {
in property <ElementInformation> element-information; in property <ElementInformation> element-information;
in property <bool> enabled; in property <bool> enabled;
padding-bottom: EditorSpaceSettings.default-padding;
PropertyValueWidget { PropertyValueWidget {
property-value: root.property-information.value; property-value: root.property-information.value;
property-name: root.property-information.name; property-name: root.property-information.name;
@ -1245,6 +1244,8 @@ export component PreviewDataPropertyValueWidget inherits VerticalLayout {
return (self.possible-error == ""); return (self.possible-error == "");
} }
padding-bottom: EditorSpaceSettings.default-padding;
if root.preview-data.kind == PreviewDataKind.Value: PropertyValueWidget { if root.preview-data.kind == PreviewDataKind.Value: PropertyValueWidget {
property-value <=> root.value; property-value <=> root.value;
property-name: root.preview-data.name; property-name: root.preview-data.name;