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 34d3ba160..e78cad71c 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 @@ -16,7 +16,7 @@ RED.palette.editor = (function() { var disabled = false; - + const catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json', 'http://192.168.86.130:3002/catalogue.json'] var editorTabs; var filterInput; var searchInput; @@ -232,6 +232,7 @@ RED.palette.editor = (function() { function _refreshNodeModule(module) { + console.log("refresh",module); if (!nodeEntries.hasOwnProperty(module)) { nodeEntries[module] = {info:RED.nodes.registry.getModule(module)}; var index = [module]; @@ -421,7 +422,7 @@ RED.palette.editor = (function() { packageList.editableList('empty'); $(".red-ui-palette-module-shade-status").text(RED._('palette.editor.loading')); - var catalogues = RED.settings.theme('palette.catalogues')||['https://catalogue.nodered.org/catalogue.json']; + catalogueLoadStatus = []; catalogueLoadErrors = false; catalogueCount = catalogues.length; @@ -431,8 +432,11 @@ RED.palette.editor = (function() { $("#red-ui-palette-module-install-shade").show(); catalogueLoadStart = Date.now(); var handled = 0; - catalogues.forEach(function(catalog,index) { + const catalogTypes = [] + for (let index = 0; index < catalogues.length; index++) { + const catalog = catalogues[index]; $.getJSON(catalog, {_: new Date().getTime()},function(v) { + catalogTypes.push(v); handleCatalogResponse(null,catalog,index,v); refreshNodeModuleList(); }).fail(function(jqxhr, textStatus, error) { @@ -442,9 +446,19 @@ RED.palette.editor = (function() { handled++; if (handled === catalogueCount) { searchInput.searchBox('change'); + console.log("adding types to typedInput", catalogTypes) + const catalogSelection = $('#red-catalogue-filter-select') + catalogSelection.empty() + // loop through catalogTypes, and option per entry + for (let index = 0; index < catalogTypes.length; index++) { + const catalog = catalogTypes[index]; + catalogSelection.append(``) + } + // select the 1st option + catalogSelection.val(catalogSelection.find('option:first').val()) } }) - }); + } } } @@ -812,9 +826,9 @@ RED.palette.editor = (function() { content: installTab }) - var toolBar = $('
',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab); - - var searchDiv = $('
',{class:"red-ui-palette-search"}).appendTo(installTab); + const toolBar = $('
',{class:"red-ui-palette-editor-toolbar"}).appendTo(installTab); + + const searchDiv = $('
',{class:"red-ui-palette-search"}).appendTo(installTab); searchInput = $('') .appendTo(searchDiv) .searchBox({ @@ -836,14 +850,35 @@ RED.palette.editor = (function() { } }); - $('').text(RED._("palette.editor.sort")+' ').appendTo(toolBar); - var sortGroup = $('').appendTo(toolBar); - var sortRelevance = $('').appendTo(sortGroup); - var sortAZ = $('').appendTo(sortGroup); - var sortRecent = $('').appendTo(sortGroup); + // 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(uploadSpan); var uploadInput = uploadButton.find('input[type="file"]'); 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 ca387782b..60d9ae0eb 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 @@ -29,6 +29,13 @@ box-sizing:border-box; background: var(--red-ui-secondary-background); + .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; border-radius: 0; @@ -72,11 +79,8 @@ } .red-ui-palette-editor-tab { - position:absolute; - top:35px; - left:0; - right:0; - bottom:0 + display: flex; + flex-direction: column; } .red-ui-palette-editor-toolbar { background: var(--red-ui-primary-background); @@ -84,6 +88,15 @@ padding: 8px 10px; border-bottom: 1px solid var(--red-ui-primary-border-color); text-align: right; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 3px 12px; + .red-ui-palette-editor-toolbar-actions { + flex-shrink: 0; + flex-grow: 1; + } } .red-ui-palette-module-shade-status { color: var(--red-ui-secondary-text-color); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss index e4071b9db..a3afc3d76 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss @@ -54,7 +54,7 @@ } .red-ui-palette-search { position: relative; - overflow: hidden; + // overflow: hidden; background: var(--red-ui-form-input-background); text-align: center; height: 35px;