frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

fix layout bugs

Browse Source
This commit is contained in:
Steve-Mcl 2023-07-13 19:48:13 +01:00
parent 1fa4aaf706
commit 6ac2e703a6
2 changed files with 32 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js vendored
View File

@ -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 catalogGroup = $('<div>',{class:""}).appendTo(toolBar);
// const catalogSelection = $('<input id="red-catalogue-selection" />', { class: "node-input-header-name", type: "text", style: "width: 100%" }).appendTo(catalogGroup);
// 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 catalogSelection = $('<select id="red-catalogue-filter-select">').appendTo(toolBar);
catalogSelection.addClass('red-ui-palette-editor-catalogue-filter');
catalogSelection.hide() // hide the select until the catalogues have been loaded
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 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 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"><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) {

23
packages/node_modules/@node-red/editor-client/src/sass/palette-editor.scss vendored
View File

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