Merge pull request #5570 from node-red/final-tweaks

Various UX tweaks and tidy ups

packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js

@@ -633,7 +633,7 @@
                 // $('<span class="red-ui-treeList-icon"><i class="fa fa-folder-o" /></span>').appendTo(label);
                 label.on("click.red-ui-treeList-expand", function(e) {
                     if (container.hasClass("expanded")) {
-                        if (label.hasClass("selected")) {
+                        if (item.expandOnLabel === true || label.hasClass("selected")) {
                             item.treeList.collapse();
                         }
                     } else {

packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js

@@ -438,7 +438,7 @@ RED.sidebar = (function() {
     }
 
     function setupTabSection(sidebar, tabBar, position) {
-        const tabBarButtonsContainer = $('<div class="red-ui-sidebar-tab-bar-buttons"></div>').appendTo(tabBar);
+        const tabBarButtonsContainer = $('<div class="red-ui-sidebar-tab-bar-buttons red-ui-sidebar-tab-bar-empty"></div>').appendTo(tabBar);
         tabBarButtonsContainer.data('sidebar', sidebar.id)
         tabBarButtonsContainer.data('sidebar-position', position)
         tabBarButtonsContainer.sortable({
@@ -488,6 +488,7 @@ RED.sidebar = (function() {
         return {
             container: tabBarButtonsContainer,
             addButton: function(button, position) {
+                tabBarButtonsContainer.removeClass('red-ui-sidebar-tab-bar-empty');
                 if (position === undefined || position >= tabBarButtonsContainer.children().length) {
                     button.appendTo(tabBarButtonsContainer);
                 } else {

packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js

@@ -35,8 +35,6 @@ RED.sidebar.context = (function() {
         content = $("<div>").css({"position":"relative","height":"100%"});
         content.className = "red-ui-sidebar-context"
 
-        var footerToolbar = $('<div></div>');
-
         var stackContainer = $("<div>",{class:"red-ui-sidebar-context-stack"}).appendTo(content);
         sections = RED.stack.create({
             container: stackContainer
@@ -133,7 +131,6 @@ RED.sidebar.context = (function() {
             name: RED._("sidebar.context.name"),
             iconClass: "fa fa-database",
             content: content,
-            toolbar: footerToolbar,
             // pinned: true,
             enableOnEdit: true,
             action: "core:show-context-tab"

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js

@@ -258,10 +258,10 @@ RED.sidebar.info.outliner = (function() {
 
     function build() {
         var container = $("<div>", {class:"red-ui-info-outline"}).css({'height': '100%'});
-        var toolbar = $("<div>", {class:"red-ui-sidebar-header red-ui-info-toolbar"}).appendTo(container);
+        var toolbar = $("<div>", {class:"red-ui-info-toolbar red-ui-palette-search"}).appendTo(container);
 
         searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.search">').appendTo(toolbar).searchBox({
-            style: "compact",
+            // style: "compact",
             delay: 500,
             change: function() {
                 var val = $(this).val();
@@ -613,6 +613,7 @@ RED.sidebar.info.outliner = (function() {
                 config: true,
                 flow: parent,
                 types: {},
+                expandOnLabel: true,
                 label: RED._("menu.label.displayConfig"),
                 children: []
             }
@@ -623,6 +624,7 @@ RED.sidebar.info.outliner = (function() {
             configNodeTypes[parent].types[type] = {
                 config: true,
                 label: type,
+                expandOnLabel: true,
                 children: []
             }
             configNodeTypes[parent].treeList.addChild(configNodeTypes[parent].types[type]);

packages/node_modules/@node-red/editor-client/src/sass/editor.scss

@@ -91,10 +91,14 @@
 
 .red-ui-tray-footer {
     @include mixins.component-footer;
+    text-align: left;
     height: 35px;
     font-size: 14px !important;
     line-height: 35px;
     vertical-align: middle;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 
     button.red-ui-button {
         padding: 0px 8px;
@@ -108,19 +112,23 @@
 
     .red-ui-tray-footer-left {
         margin-right: 20px;
-        float:left;
-        & :not(:first-child) {
-            margin-left: 5px
-        }
+        flex: 1 1 auto;
+        display: flex;
+        gap: 5px;
+        align-items: center;
+      
     }
     .red-ui-tray-footer-right {
-        float: right;
+        flex: 0 0 auto;
+        display: flex;
+        gap: 5px;
+        align-items: center;
     }
 }
 
 .red-ui-tray-toolbar {
     text-align: right;
-    padding: 6px;
+    padding: 5px;
 
     button {
         @include mixins.editor-button;
@@ -133,7 +141,8 @@
 .red-ui-tray-titlebar {
     color: var(--red-ui-header-text-color);
     border-bottom: 1px solid var(--red-ui-secondary-border-color);
-    padding: 8px;
+    padding: 6px;
+    font-size: 13px;
 }
 .red-ui-editor ul.red-ui-tray-breadcrumbs {
     list-style-type: none;

packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss

@@ -552,24 +552,3 @@ div.red-ui-info-table {
     // filter: brightness(2.5);
 }
 
-.red-ui-info-toolbar {
-    min-height: 39px;
-    height: 39px;
-    box-sizing: border-box;
-    text-align: left;
-    // padding-left: 9px;
-    // box-sizing: border-box;
-    // background: var(--red-ui-palette-header-background);
-    // border-bottom: 1px solid var(--red-ui-secondary-border-color);
-
-    .red-ui-searchBox-container {
-        position: absolute;
-        top: 6px;
-        right: 8px;
-        width: calc(100% - 130px);
-        min-width: 150px;
-        max-width: 250px;
-        background: var(--red-ui-palette-header-background);
-    }
-
-}

packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss

@@ -26,7 +26,7 @@
     width: 100%;
     height: 100%;
     position: relative;
-    background: var(--red-ui-tertiary-background);
+    background: var(--red-ui-secondary-background);
 
     border: 1px solid var(--red-ui-form-input-border-color);
     border-radius: 4px;

packages/node_modules/@node-red/editor-client/src/sass/workspace.scss

@@ -233,6 +233,7 @@ button.red-ui-footer-button-toggle {
         min-width: 28px;
         height: 28px;
         text-wrap: nowrap;
+        padding: 0 6px;
     }
 }