diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js index e78cad71c..9df2d5911 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js @@ -683,7 +683,8 @@ RED.palette.editor = (function() { }); - nodeList = $('
    ',{id:"red-ui-palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(modulesTab).editableList({ + nodeList = $('
      ',{id:"red-ui-palette-module-list"}).appendTo(modulesTab).editableList({ + class: "scrollable", addButton: false, scrollOnAdd: false, sort: function(A,B) { @@ -818,8 +819,7 @@ RED.palette.editor = (function() { } function createInstallTab(content) { - var installTab = $('
      ',{class:"red-ui-palette-editor-tab hide"}).appendTo(content); - + const installTab = $('
      ',{class:"red-ui-palette-editor-tab", style: "display: none;"}).appendTo(content); editorTabs.addTab({ id: 'install', label: RED._('palette.editor.tab-install'), @@ -850,32 +850,19 @@ RED.palette.editor = (function() { } }); - // create a div, left aligned, to contain the label "catalog" and a dropdown select - const catalogGroup = $('
      ',{class:""}).appendTo(toolBar); - // const catalogSelection = $('', { class: "node-input-header-name", type: "text", style: "width: 100%" }).appendTo(catalogGroup); - // append a regular select/options el to the catalogGroup - const catalogSelection = $('').appendTo(toolBar); + catalogSelection.addClass('red-ui-palette-editor-catalogue-filter'); + catalogSelection.hide() // hide the select until the catalogues have been loaded + const toolBarActions = $('
      ',{class:"red-ui-palette-editor-toolbar-actions"}).appendTo(toolBar); $('').text(RED._("palette.editor.sort")+' ').appendTo(toolBarActions); const sortGroup = $('').appendTo(toolBarActions); const sortRelevance = $('').appendTo(sortGroup); - const sortAZ = $('').appendTo(sortGroup); - const sortRecent = $('').appendTo(sortGroup); + const sortAZ = $('').appendTo(sortGroup); + const sortRecent = $('').appendTo(sortGroup); + RED.popover.tooltip(sortAZ,RED._("palette.editor.sortAZ")); + RED.popover.tooltip(sortRecent,RED._("palette.editor.sortRecent")); const sortOpts = [ @@ -942,6 +929,9 @@ RED.palette.editor = (function() { var metaRow = $('
      ').appendTo(headerRow); $(' '+entry.version+'').appendTo(metaRow); $(' '+formatUpdatedAt(entry.updated_at)+'').appendTo(metaRow); + if (catalogSelection.val() === 'all') { + $('' + (entry.catalog.name || entry.catalog.url) + '').appendTo(metaRow); + } var duplicateType = false; if (entry.types && entry.types.length > 0) { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss index 60d9ae0eb..947ada2e8 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss @@ -14,7 +14,7 @@ * limitations under the License. **/ -#red-ui-settings-tab-palette { + #red-ui-settings-tab-palette { height: 100%; } @@ -28,13 +28,16 @@ padding: 0; box-sizing:border-box; background: var(--red-ui-secondary-background); + display: flex; + flex-direction: column; + + .red-ui-tabs { + flex-shrink: 0; + margin-bottom: 0; + } .red-ui-editableList.scrollable { overflow-y: auto; - background-color: aqua; - // padding: 0 10px; - // box-sizing: border-box; - // height: calc(100% - 40px); } .red-ui-editableList-container { border: none; @@ -81,6 +84,7 @@ .red-ui-palette-editor-tab { display: flex; flex-direction: column; + min-height: 0; } .red-ui-palette-editor-toolbar { background: var(--red-ui-primary-background); @@ -97,6 +101,15 @@ flex-shrink: 0; flex-grow: 1; } + .red-ui-palette-editor-catalogue-filter { + width: unset; + margin: 0; + flex-shrink: 1; + flex-grow: 1; + font-size: 12px; + height: 26px; + padding: 1px; + } } .red-ui-palette-module-shade-status { color: var(--red-ui-secondary-text-color);