diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js index eea69b3fb..56d1d26bd 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js @@ -633,7 +633,7 @@ // $('').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 { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index e97ce8ffc..d3bb6d524 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/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 = $('
').appendTo(tabBar); + const tabBarButtonsContainer = $('
').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 { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js index 2c56786c8..7a918fcb6 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-context.js @@ -35,8 +35,6 @@ RED.sidebar.context = (function() { content = $("
").css({"position":"relative","height":"100%"}); content.className = "red-ui-sidebar-context" - var footerToolbar = $('
'); - var stackContainer = $("
",{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" diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js index 53587dd13..f1ea10dce 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js +++ b/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 = $("
", {class:"red-ui-info-outline"}).css({'height': '100%'}); - var toolbar = $("
", {class:"red-ui-sidebar-header red-ui-info-toolbar"}).appendTo(container); + var toolbar = $("
", {class:"red-ui-info-toolbar red-ui-palette-search"}).appendTo(container); searchInput = $('').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]); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/editor.scss index 9a3bd3c24..02be71d7d 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/editor.scss +++ b/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; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss index 8cbf8b0d3..8aaba2d12 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss +++ b/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); - } - -} diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss index 25373b138..c2d6b8642 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/treeList.scss +++ b/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; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index 692751ad9..965f11405 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/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; } }