fix layout bugs

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

@@ -683,7 +683,8 @@ RED.palette.editor = (function() {
             });
 
 
-        nodeList = $('<ol>',{id:"red-ui-palette-module-list", style:"position: absolute;top: 35px;bottom: 0;left: 0;right: 0px;"}).appendTo(modulesTab).editableList({
+        nodeList = $('<ol>',{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 = $('<div>',{class:"red-ui-palette-editor-tab hide"}).appendTo(content);
+        const installTab = $('<div>',{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 catalogSelection = $('<select id="red-catalogue-filter-select">').appendTo(toolBar);
-        const catalogGroup = $('<div>',{class:""}).appendTo(toolBar);
+        catalogSelection.addClass('red-ui-palette-editor-catalogue-filter');
-        // const catalogSelection = $('<input id="red-catalogue-selection" />', { class: "node-input-header-name", type: "text", style: "width: 100%" }).appendTo(catalogGroup);
+        catalogSelection.hide() // hide the select until the catalogues have been loaded
-        // append a regular select/options el to the catalogGroup
+ 
-        const catalogSelection = $('<select id="red-catalogue-filter-select">').appendTo(catalogGroup);
-        
-
-        // add a single dummy option "Loading..." to catalogSelection until the catalogues are loaded
-        catalogSelection.append($('<option>', { value: "loading", text: "Loading Catalogue List...", disabled: true, selected: true }));
-
-        // catalogSelection.typedInput({ types: [{ value: "loading", label: "Loading Catalogue List...", hasValue: false }] });
-
-        catalogSelection.on("change", function() {
-            var v = $(this).val();
-            console.log(v);
-            if (v === "all") {
-            }
-        })
-
         const toolBarActions = $('<div>',{class:"red-ui-palette-editor-toolbar-actions"}).appendTo(toolBar);
 
         $('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBarActions);
         const sortGroup = $('<span class="button-group"></span>').appendTo(toolBarActions);
         const sortRelevance = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
-        const sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
+        const sortAZ = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle"><i class="fa fa-sort-alpha-asc"></i></a>').appendTo(sortGroup);
-        const sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
+        const sortRecent = $('<a href="#" class="red-ui-palette-editor-install-sort-option red-ui-sidebar-header-button-toggle"><i class="fa fa-calendar"></i></a>').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 = $('<div class="red-ui-palette-module-meta"></div>').appendTo(headerRow);
                     $('<span class="red-ui-palette-module-version"><i class="fa fa-tag"></i> '+entry.version+'</span>').appendTo(metaRow);
                     $('<span class="red-ui-palette-module-updated"><i class="fa fa-calendar"></i> '+formatUpdatedAt(entry.updated_at)+'</span>').appendTo(metaRow);
+                    if (catalogSelection.val() === 'all') {
+                        $('<span class="red-ui-palette-module-updated"><i class="fa fa-cubes"></i>' + (entry.catalog.name || entry.catalog.url) + '</span>').appendTo(metaRow);
+                    }
 
                     var duplicateType = false;
                     if (entry.types && entry.types.length > 0) {

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);