language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-11-14 17:58:40 +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

403
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,46 +125,47 @@ 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;
} }
if property-value.code == "": Text { HorizontalLayout {
horizontal-alignment: left; if property-value.code == "": Text {
vertical-alignment: center; horizontal-alignment: left;
text: @tr("Not Set"); vertical-alignment: center;
font-italic: true; text: @tr("Not Set");
} font-italic: true;
if property-value.code != "": HorizontalLayout {
spacing: EditorSpaceSettings.default-spacing;
ResetButton {
enabled: root.enabled;
clicked() => {
root.reset-action();
}
} }
CodeButton { if property-value.code != "": HorizontalLayout {
enabled: root.enabled; spacing: EditorSpaceSettings.default-spacing;
clicked() => {
root.code-action(); ResetButton {
enabled: root.enabled;
clicked() => {
root.reset-action();
}
}
CodeButton {
enabled: root.enabled;
clicked() => {
root.code-action();
}
} }
} }
} }
@ -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;
@ -883,20 +870,34 @@ component EditMultiValueWidget inherits VerticalLayout {
in property <string> property-group-name; in property <string> property-group-name;
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%;
NameLabel { Row {
property-name: root.property-name; NameLabel {
property-value: root.property-value; col: 1;
property-name: root.property-name;
property-value: root.property-value;
}
} }
Button { Row {
text: preview-data.has-setter ? @tr("Edit") : @tr("View"); ChildIndicator {
clicked => { horizontal-stretch: 0;
root.edit-in-spreadsheet(root.property-group-name, root.preview-data, [[ ]]); visible: false;
}
Button {
text: preview-data.has-setter ? @tr("Edit") : @tr("View");
clicked => {
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,138 +1002,136 @@ 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;
BooleanWidget { BooleanWidget {
enabled <=> root.enabled; enabled <=> root.enabled;
property-name <=> root.property-name; property-name <=> root.property-name;
property-value <=> root.property-value; property-value <=> root.property-value;
set-bool-binding(value) => { set-bool-binding(value) => {
root.set-bool-binding(value); root.set-bool-binding(value);
}
} }
} }
Rectangle { }
clip: true; Rectangle {
height: (root.property-value.kind == PropertyValueKind.color) || (root.property-value.kind == PropertyValueKind.brush) ? self.preferred-height : 0px; clip: true;
height: (root.property-value.kind == PropertyValueKind.color) || (root.property-value.kind == PropertyValueKind.brush) ? self.preferred-height : 0px;
ColorWidget { ColorWidget {
enabled <=> root.enabled; enabled <=> root.enabled;
property-name <=> root.property-name; property-name <=> root.property-name;
property-value <=> root.property-value; property-value <=> root.property-value;
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;
test-color-binding(text) => { test-color-binding(text) => {
return (root.test-color-binding(text)); return (root.test-color-binding(text));
} }
set-color-binding(text) => { set-color-binding(text) => {
root.set-color-binding(text); root.set-color-binding(text);
} }
reset-action() => { reset-action() => {
root.reset-action(); root.reset-action();
} }
code-action() => { code-action() => {
root.code-action(); root.code-action();
}
} }
} }
Rectangle { }
clip: true; Rectangle {
height: root.property-value.kind == PropertyValueKind.code ? self.preferred-height : 0px; clip: true;
height: root.property-value.kind == PropertyValueKind.code ? self.preferred-height : 0px;
CodeWidget { CodeWidget {
enabled <=> root.enabled; enabled <=> root.enabled;
property-name <=> root.property-name; property-name <=> root.property-name;
property-value <=> root.property-value; property-value <=> root.property-value;
reset-action() => { reset-action() => {
root.reset-action(); root.reset-action();
} }
code-action() => { code-action() => {
root.code-action(); root.code-action();
}
} }
} }
Rectangle { }
clip: true; Rectangle {
height: root.property-value.kind == PropertyValueKind.enum ? self.preferred-height : 0px; clip: true;
height: root.property-value.kind == PropertyValueKind.enum ? self.preferred-height : 0px;
EnumWidget { EnumWidget {
enabled <=> root.enabled; enabled <=> root.enabled;
property-name <=> root.property-name; property-name <=> root.property-name;
property-value <=> root.property-value; property-value <=> root.property-value;
set-enum-binding(text) => { set-enum-binding(text) => {
root.set-enum-binding(text); root.set-enum-binding(text);
}
} }
} }
Rectangle { }
clip: true; Rectangle {
height: root.property-value.kind == PropertyValueKind.float ? self.preferred-height : 0px; clip: true;
height: root.property-value.kind == PropertyValueKind.float ? self.preferred-height : 0px;
FloatWidget { FloatWidget {
enabled <=> root.enabled; enabled <=> root.enabled;
property-name <=> root.property-name; property-name <=> root.property-name;
property-value <=> root.property-value; property-value <=> root.property-value;
test-float-binding(text, unit) => { test-float-binding(text, unit) => {
return (root.test-float-binding(text, unit)); return (root.test-float-binding(text, unit));
} }
set-float-binding(text, unit) => { set-float-binding(text, unit) => {
root.set-float-binding(text, unit); root.set-float-binding(text, unit);
}
} }
} }
Rectangle { }
clip: true; Rectangle {
height: root.property-value.kind == PropertyValueKind.integer ? self.preferred-height : 0px; clip: true;
height: root.property-value.kind == PropertyValueKind.integer ? self.preferred-height : 0px;
IntegerWidget { IntegerWidget {
enabled <=> root.enabled; enabled <=> root.enabled;
property-name <=> root.property-name; property-name <=> root.property-name;
property-value <=> root.property-value; property-value <=> root.property-value;
test-integer-binding(text) => { test-integer-binding(text) => {
return (root.test-code-binding(text)); return (root.test-code-binding(text));
} }
set-integer-binding(text) => { set-integer-binding(text) => {
root.set-code-binding(text); root.set-code-binding(text);
}
} }
} }
Rectangle { }
clip: true; Rectangle {
height: root.property-value.kind == PropertyValueKind.string ? self.preferred-height : 0px; clip: true;
height: root.property-value.kind == PropertyValueKind.string ? self.preferred-height : 0px;
StringWidget { StringWidget {
enabled <=> root.enabled; enabled <=> root.enabled;
property-name <=> root.property-name; property-name <=> root.property-name;
property-value: root.property-value; property-value: root.property-value;
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;
is-translatable <=> root.strings-are-translatable; is-translatable <=> root.strings-are-translatable;
reset-action() => { reset-action() => {
root.reset-action(); root.reset-action();
} }
code-action() => { code-action() => {
root.code-action(); root.code-action();
} }
test-string-binding(text, is_translated) => { test-string-binding(text, is_translated) => {
return root.test-string-binding(text, is_translated); return root.test-string-binding(text, is_translated);
} }
set-string-binding(text, is_translated) => { set-string-binding(text, is_translated) => {
root.set-string-binding(text, is_translated); root.set-string-binding(text, is_translated);
}
} }
} }
} }
@ -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;