preview: attempting a header change to optimize usability (#6720)

changed the interaction for header view
both library and properties can be shown anytime
and selection is is a toggle button at any time
suggestions:
goes hand in hand with the selection mode
likely requires settings for toggle or single
select.

attempting a header change to optimize usability
TODO: make dragging from library automatically
into edit mode

the toggle that existed is the same as toggling a button - whcih can sit next to the closed library and properties.
properties should be editable while selection is active so those should be openable / visible whether in edit mode or not.

STILL TODO:
- make dragging from library automatically into edit mode
- add settings to either single select 'inspect' button or toggle on off
- change display of active icon OR add icon for toggled mode for clearer display than blue icon for inspect

Author: szecket

tools/lsp/ui/main.slint

@@ -16,6 +16,7 @@ import { PropertyView } from "./views/property-view.slint";
 
 export { Api }
 
+
 export component PreviewUi inherits Window {
     property <length> border: 20px;
     property <ComponentItem> visible-component: {
@@ -25,8 +26,9 @@ export component PreviewUi inherits Window {
         is-user-defined: false,
         is-currently-shown: false,
     };
-    property <bool> show-left-sidebar: true;
-    property <bool> show-right-sidebar: true;
+    property <bool> show-left-sidebar;
+    property <bool> show-right-sidebar;
+
 
     title: "Slint Live-Preview";
     icon: @image-url("assets/slint-logo-small-light.png");
@@ -63,20 +65,22 @@ export component PreviewUi inherits Window {
                         Api.style-changed();
                     }
 
-                    Button {
+                    edit:=Button {
                         icon: Icons.inspect;
-                        colorize-icon: true;
+                        colorize-icon: preview.select-mode ? false : true;
                         checkable: true;
                         checked <=> preview.select-mode;
                         enabled: !preview.design-mode;
                         visible: !preview.design-mode;
+                        primary: preview.select-mode;
                     }
                 }
 
+
                 HorizontalLayout {
                     spacing: EditorSpaceSettings.default-spacing;
 
-                    if Api.design-mode && root.show-left-sidebar: LibraryView {
+                    if  root.show-left-sidebar: LibraryView {
                         known-components: Api.known-components;
                         preview-area-position-x: preview.preview-area-position-x;
                         preview-area-position-y: preview.preview-area-position-y;
@@ -101,7 +105,7 @@ export component PreviewUi inherits Window {
                         visible-component <=> root.visible-component;
                     }
 
-                    if Api.design-mode && root.show-right-sidebar: PropertyView { }
+                    if  root.show-right-sidebar: PropertyView { }
                 }
 
                 StatusLine { }

tools/lsp/ui/views/header-view.slint

@@ -47,16 +47,16 @@ export component HeaderView {
                 spacing: EditorSpaceSettings.default-spacing;
 
                 HorizontalLayout {
+                    visible: false;
                     spacing: EditorSpaceSettings.default-spacing / 2;
-                    horizontal-stretch: 0;
-
-                    @children
+                    horizontal-stretch: 1;
 
                     BodyText {
                         text: @tr("Interact");
                     }
 
                     interaction-switch := Switch {
+                        checked: true;
                         toggled => {
                             root.edit-mode-toggled();
                         }
@@ -66,14 +66,14 @@ export component HeaderView {
                         text: @tr("Edit");
                     }
                 }
+                @children
 
                 left-panel-button := Button {
                     horizontal-stretch: 0;
 
                     checkable: true;
                     icon: self.checked ? Icons.sidebar-left : Icons.sidebar-left-off;
                     colorize-icon: true;
-                    visible:root.edit-mode;
                 }
 
                 right-panel-button := Button {
@@ -82,7 +82,7 @@ export component HeaderView {
                     checkable: true;
                     icon: self.checked ? Icons.sidebar-right : Icons.sidebar-right-off;
                     colorize-icon: true;
-                    visible: root.edit-mode;
+                    // visible: root.edit-mode;
                 }
             }