Skip to content

Commit 0796bb1

Browse files
ogoffartogoffart
committed
live-preview: Simplify the code of the property editor
Put the NameLabel outside of the typed property widget
1 parent d8997a0 commit 0796bb1

13 files changed

+57
-190
lines changed

‎tools/lsp/ui/components/property-widgets.slint‎

Lines changed: 45 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ export component PropertyValueWidget inherits VerticalLayout {
5555

5656
if root.property-value.kind == PropertyValueKind.boolean: BooleanWidget {
5757
enabled <=> root.enabled;
58-
property-name <=> root.property-name;
5958
property-value <=> root.property-value;
6059

6160
set-bool-binding(value) => {
@@ -96,13 +95,6 @@ export component PropertyValueWidget inherits VerticalLayout {
9695
root.update-display-string-impl(value);
9796
}
9897

99-
reset-action() => {
100-
root.reset-action();
101-
}
102-
code-action() => {
103-
root.code-action();
104-
}
105-
10698
init => {
10799
// Floating editors need to know the current property details. Call the update if something changes.
108100
if WindowManager.showing-color-picker && WindowManager.current-property-information.name == root.property-name {
@@ -114,7 +106,6 @@ export component PropertyValueWidget inherits VerticalLayout {
114106

115107
if root.property-value.kind == PropertyValueKind.code: CodeWidget {
116108
enabled <=> root.enabled;
117-
property-name <=> root.property-name;
118109
property-value <=> root.property-value;
119110

120111
update-display-string(value) => {
@@ -131,7 +122,6 @@ export component PropertyValueWidget inherits VerticalLayout {
131122

132123
if root.property-value.kind == PropertyValueKind.enum: EnumWidget {
133124
enabled <=> root.enabled;
134-
property-name <=> root.property-name;
135125
property-value <=> root.property-value;
136126

137127
set-enum-binding(text) => {
@@ -145,7 +135,6 @@ export component PropertyValueWidget inherits VerticalLayout {
145135

146136
if root.property-value.kind == PropertyValueKind.float: FloatWidget {
147137
enabled <=> root.enabled;
148-
property-name <=> root.property-name;
149138
property-value <=> root.property-value;
150139

151140
test-float-binding(text, unit) => {
@@ -162,7 +151,6 @@ export component PropertyValueWidget inherits VerticalLayout {
162151

163152
if root.property-value.kind == PropertyValueKind.integer: IntegerWidget {
164153
enabled <=> root.enabled;
165-
property-name <=> root.property-name;
166154
property-value <=> root.property-value;
167155

168156
test-integer-binding(text) => {
@@ -179,7 +167,6 @@ export component PropertyValueWidget inherits VerticalLayout {
179167

180168
if root.property-value.kind == PropertyValueKind.string: StringWidget {
181169
enabled <=> root.enabled;
182-
property-name <=> root.property-name;
183170
property-value: root.property-value;
184171

185172
has-code-action: root.has-code-action;
@@ -196,27 +183,26 @@ export component PropertyValueWidget inherits VerticalLayout {
196183
update-display-string(value) => {
197184
root.update-display-string-impl(value);
198185
}
199-
200-
reset-action() => {
201-
root.reset-action();
202-
}
203-
code-action() => {
204-
root.code-action();
205-
}
206186
}
207187
}
208188

209189
component IconButton inherits Rectangle {
210190
in property <image> icon;
211191
in property <bool> checked: false;
212-
TouchArea {
192+
in property <bool> enabled: true;
193+
ta := TouchArea {
213194
clicked => root.clicked();
195+
mouse-cursor: pointer;
196+
enabled: root.enabled;
214197
}
215198

216199
callback clicked();
217200
Image {
218201
height: 1rem;
219-
colorize: checked ? Palette.accent-background : Palette.foreground.transparentize(0.5);
202+
colorize: !enabled ? Palette.foreground.transparentize(0.8) :
203+
checked ? Palette.accent-background :
204+
ta.has-hover ? Palette.accent-background.transparentize(0.2) :
205+
Palette.foreground.transparentize(0.5);
220206
source: root.icon;
221207
}
222208
}
@@ -239,15 +225,37 @@ export component PropertyInformationWidget inherits TouchArea {
239225
}
240226
private property <PropertyWidgetMode> mode: kind == PropertyValueKind.code ? PropertyWidgetMode.expression : PropertyWidgetMode.value;
241227

228+
function code-action() {
229+
Api.show-document-offset-range(
230+
element-information.source-uri,
231+
Api.property-declaration-ranges(property-information.name).defined-at.expression-range.start,
232+
Api.property-declaration-ranges(property-information.name).defined-at.expression-range.start,
233+
true,
234+
);
235+
}
236+
function reset-action() {
237+
Api.set-code-binding(
238+
element-information.source-uri,
239+
element-information.source-version,
240+
element-information.offset,
241+
property-information.name,
242+
"",
243+
);
244+
}
245+
242246
VerticalLayout {
243247
padding-bottom: EditorSpaceSettings.default-padding;
244248
padding-right: EditorSpaceSettings.default-padding * 2;
249+
spacing: EditorSpaceSettings.default-spacing / 2;
245250

246251
HorizontalLayout {
247252
alignment: LayoutAlignment.space-between;
248253
NameLabel {
249254
property-name: property-information.name;
250255
property-value: property-information.value;
256+
TouchArea {
257+
double-clicked => { root.code-action(); }
258+
}
251259
}
252260

253261
HorizontalLayout {
@@ -261,6 +269,7 @@ export component PropertyInformationWidget inherits TouchArea {
261269
IconButton {
262270
icon: @image-url("../assets/constant.svg");
263271
checked: mode == PropertyWidgetMode.value;
272+
enabled: kind != PropertyValueKind.code;
264273
clicked => {
265274
mode = PropertyWidgetMode.value;
266275
}
@@ -276,32 +285,20 @@ export component PropertyInformationWidget inherits TouchArea {
276285

277286
IconButton {
278287
icon: @image-url("../assets/revert.svg");
288+
enabled: property-information.value.code != "";
279289
clicked => {
280-
Api.set-code-binding(
281-
element-information.source-uri,
282-
element-information.source-version,
283-
element-information.offset,
284-
property-information.name,
285-
"",
286-
);
290+
root.reset-action();
287291
}
288292
}
289293
}
290294
}
291295

292-
293296
if mode == PropertyWidgetMode.expression : HorizontalLayout {
297+
alignment: LayoutAlignment.stretch;
294298
spacing: 5px;
295299
IconButton {
296300
icon: @image-url("../assets/code.svg");
297-
clicked => {
298-
Api.show-document-offset-range(
299-
element-information.source-uri,
300-
Api.property-declaration-ranges(property-information.name).defined-at.expression-range.start,
301-
Api.property-declaration-ranges(property-information.name).defined-at.expression-range.start,
302-
true,
303-
);
304-
}
301+
clicked => { root.code-action(); }
305302
}
306303
ResettingLineEdit {
307304
enabled: root.enabled;
@@ -331,8 +328,7 @@ export component PropertyInformationWidget inherits TouchArea {
331328

332329
if mode == PropertyWidgetMode.value : PropertyValueWidget {
333330
property-value: root.property-information.value;
334-
// Because the name is given in the PropertyView already. FIXME: we should refactor this so that the PropertyValueWidget don't have the name
335-
property-name: "";
331+
property-name: root.property-information.name;
336332
enabled: root.enabled;
337333

338334
set-current-item() => {
@@ -400,21 +396,11 @@ export component PropertyInformationWidget inherits TouchArea {
400396
}
401397

402398
reset-action() => {
403-
Api.set-code-binding(
404-
element-information.source-uri,
405-
element-information.source-version,
406-
element-information.offset,
407-
property-information.name,
408-
"",
409-
);
399+
root.reset-action();
410400
}
401+
411402
code-action() => {
412-
Api.show-document-offset-range(
413-
element-information.source-uri,
414-
Api.property-declaration-ranges(property-information.name).defined-at.expression-range.start,
415-
Api.property-declaration-ranges(property-information.name).defined-at.expression-range.start,
416-
true,
417-
);
403+
root.code-action();
418404
}
419405
}
420406
}
@@ -453,6 +439,12 @@ export component PreviewDataPropertyValueWidget inherits VerticalLayout {
453439

454440
padding-bottom: EditorSpaceSettings.default-padding;
455441
padding-right: EditorSpaceSettings.default-padding * 2;
442+
spacing: EditorSpaceSettings.default-spacing / 2;
443+
444+
NameLabel {
445+
property-name: root.preview-data.name;
446+
property-value: root.value;
447+
}
456448

457449
if root.preview-data.kind == PreviewDataKind.Value: PropertyValueWidget {
458450
property-value <=> root.value;
@@ -516,7 +508,6 @@ export component PreviewDataPropertyValueWidget inherits VerticalLayout {
516508
}
517509
if root.preview-data.kind == PreviewDataKind.Json: JsonWidget {
518510
enabled: root.preview-data.has-setter;
519-
property-name: root.preview-data.name;
520511
property-value <=> root.value;
521512

522513
set-code-binding(text) => {

‎tools/lsp/ui/components/spreadsheet.slint‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { StatusLineApi } from "../components/status-line.slint";
77
import { EditorSizeSettings, Icons, EditorSpaceSettings } from "../components/styling.slint";
88
import { PropertyValueWidget } from "../components/property-widgets.slint";
99
import { TableData } from "../windowglobal.slint";
10+
import { NameLabel } from "widgets/basics.slint";
1011

1112
export struct CellData {
1213
property-group-id: string,
@@ -55,6 +56,11 @@ export component EditWindow inherits PopupWindow {
5556
padding-left: EditorSpaceSettings.default-padding;
5657
width: is-brush(root.current-table.values[root.current-cell-data.row][root.current-cell-data.col]) ? 220px : self.preferred-width;
5758

59+
NameLabel {
60+
property-name: pvw.property-name;
61+
property-value: pvw.property-value;
62+
}
63+
5864
pvw := PropertyValueWidget {
5965
property-value: root.current-table.values[root.current-cell-data.row][root.current-cell-data.col];
6066
property-name: root.current-table.headers[root.current-cell-data.col];

‎tools/lsp/ui/components/widgets/basics.slint‎

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -350,13 +350,6 @@ export component ViewHeader inherits Rectangle {
350350
export component SecondaryContent inherits Rectangle {
351351
in property <bool> enabled;
352352
in property <bool> open: false;
353-
in property <bool> has-code-action: true;
354-
in property <bool> has-reset-action: true;
355-
356-
callback reset();
357-
358-
callback code-action();
359-
callback reset-action();
360353

361354
background: Palette.background;
362355
clip: true;
@@ -376,27 +369,6 @@ export component SecondaryContent inherits Rectangle {
376369
spacing: EditorSpaceSettings.default-padding;
377370

378371
@children
379-
380-
HorizontalLayout {
381-
spacing: EditorSpaceSettings.default-spacing;
382-
383-
ResetButton {
384-
height: root.has-reset-action ? self.preferred-height : 0px;
385-
enabled: root.enabled;
386-
clicked() => {
387-
root.reset-action();
388-
root.reset();
389-
}
390-
}
391-
392-
CodeButton {
393-
height: root.has-code-action ? self.preferred-height : 0px;
394-
enabled: root.enabled;
395-
clicked() => {
396-
root.code-action();
397-
}
398-
}
399-
}
400372
}
401373
}
402374
}

‎tools/lsp/ui/components/widgets/boolean-widget.slint‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright © SixtyFPS GmbH <[email protected]>
22
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
33

4-
import { ChildIndicator, NameLabel, ResettingLineEdit } from "./basics.slint";
4+
import { ChildIndicator, ResettingLineEdit } from "./basics.slint";
55

66
import { PropertyValue, PropertyValueKind } from "../../api.slint";
77
import { EditorSizeSettings, EditorSpaceSettings } from "../../components/styling.slint";
@@ -10,23 +10,13 @@ import { CheckBox } from "std-widgets.slint";
1010

1111
export component BooleanWidget inherits GridLayout {
1212
in property <bool> enabled;
13-
in property <string> property-name;
1413
in-out property <PropertyValue> property-value;
1514

1615
callback set-bool-binding(value: bool);
1716
callback update-display-string(value: string);
1817

1918
spacing-vertical: EditorSpaceSettings.default-spacing / 2;
2019

21-
Row {
22-
NameLabel {
23-
col: 1;
24-
25-
property-name: root.property-name;
26-
property-value: root.property-value;
27-
}
28-
}
29-
3020
Row {
3121
childIndicator := ChildIndicator {
3222
horizontal-stretch: 0;

‎tools/lsp/ui/components/widgets/code-widget.slint‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright © SixtyFPS GmbH <[email protected]>
22
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
33

4-
import { ChildIndicator, CodeButton, NameLabel, ResetButton } from "./basics.slint";
4+
import { ChildIndicator, CodeButton, ResetButton } from "./basics.slint";
55

66
import { PropertyValue } from "../../api.slint";
77
import { EditorSpaceSettings } from "../../components/styling.slint";
@@ -18,15 +18,6 @@ export component CodeWidget inherits GridLayout {
1818

1919
spacing-vertical: EditorSpaceSettings.default-spacing;
2020

21-
Row {
22-
NameLabel {
23-
col: 1;
24-
25-
property-name: root.property-name;
26-
property-value: root.property-value;
27-
}
28-
}
29-
3021
Row {
3122
childIndicator := ChildIndicator {
3223
horizontal-stretch: 0;

‎tools/lsp/ui/components/widgets/enum-widget.slint‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright © SixtyFPS GmbH <[email protected]>
22
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
33

4-
import { ChildIndicator, NameLabel } from "./basics.slint";
4+
import { ChildIndicator } from "./basics.slint";
55

66
import { PropertyValue, PropertyValueKind } from "../../api.slint";
77
import { EditorSpaceSettings } from "../../components/styling.slint";
@@ -10,7 +10,6 @@ import { ComboBox } from "std-widgets.slint";
1010

1111
export component EnumWidget inherits GridLayout {
1212
in property <bool> enabled;
13-
in property <string> property-name;
1413
in property <PropertyValue> property-value;
1514

1615
changed property-value => {
@@ -23,15 +22,6 @@ export component EnumWidget inherits GridLayout {
2322

2423
callback set-enum-binding(text: string);
2524

26-
Row {
27-
NameLabel {
28-
col: 1;
29-
30-
property-name: root.property-name;
31-
property-value: root.property-value;
32-
}
33-
}
34-
3525
Row {
3626
childIndicator := ChildIndicator {
3727
horizontal-stretch: 0;

0 commit comments

Comments
 (0)