From b526367ebc497383a70b7854e91b7de8d5c28824 Mon Sep 17 00:00:00 2001
From: Tobias Hunger <tobias.hunger@slint.dev>
Date: Fri, 28 Jun 2024 18:59:55 +0200
Subject: [PATCH] live-preview: Have a simple mode for bools

The property editor built into the live-preview now comes with the
concept of a "simple/complex mode". There is a "K" (for complex, obviously;-)
or a "S" (for simple, just as obvious) beween the property name and property
value. you can click on the letter to switch from simple to complex mode,
but you can only switch back to simple mode if there are no complex expressions
in the line edit.

This implements a "simple" mode for bools.

# Todo

 * [ ] Find icons for simple/complex mode:-)
 * [ ] Figure out how to decide whether other types are "simple"

   To do so I will need some string functions in Slint, to e.g. detect that
   a string starts with and ends with a `"` and contains no unescaped `"`
   anywhere else to detect "simple strings". Same for colors, length, ...

 * [ ] Define more UIs for simple types
---
 tools/lsp/ui/property-editor.slint | 58 +++++++++++++++++++++++++-----
 1 file changed, 49 insertions(+), 9 deletions(-)

diff --git a/tools/lsp/ui/property-editor.slint b/tools/lsp/ui/property-editor.slint
index 22060e326a3..47472798560 100644
--- a/tools/lsp/ui/property-editor.slint
+++ b/tools/lsp/ui/property-editor.slint
@@ -1,7 +1,7 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
 
-import { LineEdit, Palette, VerticalBox } from "std-widgets.slint";
+import { LineEdit, Palette, VerticalBox, CheckBox } from "std-widgets.slint";
 
 import { Api, ElementInformation } from "api.slint";
 import { ListHead } from "list-head.slint";
@@ -12,7 +12,6 @@ component TypeHeader inherits Rectangle {
     in property <string> id;
 
     background: Palette.accent-background;
-    
     VerticalBox {
         height: self.min-height;
 
@@ -51,29 +50,70 @@ export component PropertyEditor inherits SideBarElement {
                         text: group.group-name;
                     }
 
-                    for property in group.properties: HorizontalLayout {
+                    for property in group.properties: property-row := HorizontalLayout {
+                        private property <string> property-name: property.name;
+                        private property <string> property-type: property.type-name;
+                        private property <string> property-value: property.defined-at.expression-value;
+
+                        private property <bool> is-defined: self.property-value != "";
+
+                        private property <bool> force-to-complex: false;
+                        private property <bool> simple-mode: (property-type == "bool" && (property-value == "true" || property-value == "false")) && !self.force-to-complex;
+
+                        private property <brush> text-foreground: property-row.is-defined ? Palette.foreground : Palette.foreground.transparentize(0.5);
+
                         spacing: 4px;
                         alignment: stretch;
                         TouchArea {
-                            width: root.key-width - (parent.spacing / 2.0);
+                            width: root.key-width - 0.5 * parent.spacing;
 
                             key := Text {
                                 width: 100%;
-                                color: property.defined-at.expression-value == "" ? Palette.foreground.transparentize(0.5) : Palette.foreground;
+                                color: property-row.text-foreground;
                                 vertical-alignment: center;
                                 text: property.name;
                             }
+
                             clicked() => {
                                 Api.show-document-offset-range(root.current-element.source-uri, property.defined-at.expression-range.start, property.defined-at.expression-range.start);
                             }
                         }
 
+                        complexity-icon := TouchArea {
+                            width: complexity-icon-icon.width;
+
+                            complexity-icon-icon := Text {
+                                width: self.preferred-width;
+                                vertical-alignment: center;
+                                color: property-row.text-foreground;
+
+                                text: property-row.simple-mode ? "S" : "K";
+                            }
+
+                            clicked() => { property-row.force-to-complex = !property-row.force-to-complex; }
+                        }
+
                         Rectangle {
-                            width: root.width - key.width - (parent.spacing / 2.0);
-                            LineEdit {
+                            width: root.width - root.key-width - complexity-icon.width - 1.5 * parent.spacing;
+
+                            private property <bool> have-simple-ui: false;
+
+                            if property-row.simple-mode && property-row.property-type == "bool": CheckBox {
+                                checked: property-row.property-value == "true";
+
+                                toggled() => {
+                                    Api.set-binding(
+                                        root.current-element.source-uri,
+                                        root.current-element.source-version,
+                                        root.current-element.range.start,
+                                        property.name,
+                                        self.checked ? "true" : "false",
+                                    );
+                                }
+                            }
+                            if !property-row.simple-mode: LineEdit {
                                 width: 100%;
-                                height: 100%;
-                                
+                                height: 100%; // otherwise this gets too high and covers several rows.
                                 text: property.defined-at.expression-value;
 
                                 edited(text) => {