diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index 3f1e32588..adeae0c2d 100755 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -116,7 +116,16 @@ "groupSelection": "Group selection", "ungroupSelection": "Ungroup selection", "groupMergeSelection": "Merge selection", - "groupRemoveSelection": "Remove from group" + "groupRemoveSelection": "Remove from group", + "arrange":"Arrange", + "alignLeft":"Align to left", + "alignCenter":"Align to center", + "alignRight":"Align to right", + "alignTop":"Align to top", + "alignMiddle":"Align to middle", + "alignBottom":"Align to bottom", + "distributeHorizontally":"Distribute horizontally", + "distributeVertically":"Distribute vertically" } }, "actions": { @@ -450,8 +459,9 @@ "unassigned": "Unassigned", "global": "global", "workspace": "workspace", - "selectAll": "Select all nodes", - "selectAllConnected": "Select all connected nodes", + "selectAll": "Select all", + "selectNone": "Select none", + "selectAllConnected": "Select connected", "addRemoveNode": "Add/remove node from selection", "editSelected": "Edit selected node", "deleteSelected": "Delete selected nodes or link", @@ -464,7 +474,10 @@ "copyNode": "Copy selected nodes", "cutNode": "Cut selected nodes", "pasteNode": "Paste nodes", - "undoChange": "Undo the last change performed", + "copyGroupStyle": "Copy group style", + "pasteGroupStyle": "Paste group style", + "undoChange": "Undo", + "redoChange": "Redo", "searchBox": "Open search box", "managePalette": "Manage palette", "actionList":"Action list" diff --git a/packages/node_modules/@node-red/editor-client/src/js/history.js b/packages/node_modules/@node-red/editor-client/src/js/history.js index 338d955e1..21823ae26 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/history.js +++ b/packages/node_modules/@node-red/editor-client/src/js/history.js @@ -658,6 +658,8 @@ RED.history = (function() { push: function(ev) { undoHistory.push(ev); redoHistory = []; + RED.menu.setDisabled("menu-item-edit-undo", false); + RED.menu.setDisabled("menu-item-edit-redo", true); }, pop: function() { var ev = undoHistory.pop(); @@ -665,6 +667,8 @@ RED.history = (function() { if (rev) { redoHistory.push(rev); } + RED.menu.setDisabled("menu-item-edit-undo", undoHistory.length === 0); + RED.menu.setDisabled("menu-item-edit-redo", redoHistory.length === 0); }, peek: function() { return undoHistory[undoHistory.length-1]; @@ -672,6 +676,8 @@ RED.history = (function() { clear: function() { undoHistory = []; redoHistory = []; + RED.menu.setDisabled("menu-item-edit-undo", true); + RED.menu.setDisabled("menu-item-edit-redo", true); }, redo: function() { var ev = redoHistory.pop(); @@ -681,6 +687,8 @@ RED.history = (function() { undoHistory.push(uev); } } + RED.menu.setDisabled("menu-item-edit-undo", undoHistory.length === 0); + RED.menu.setDisabled("menu-item-edit-redo", redoHistory.length === 0); } } diff --git a/packages/node_modules/@node-red/editor-client/src/js/keymap.json b/packages/node_modules/@node-red/editor-client/src/js/keymap.json index c323b3e64..c50508389 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json +++ b/packages/node_modules/@node-red/editor-client/src/js/keymap.json @@ -77,6 +77,15 @@ "right": "core:go-to-nearest-node-on-right", "left": "core:go-to-nearest-node-on-left", "up": "core:go-to-nearest-node-above", - "down": "core:go-to-nearest-node-below" + "down": "core:go-to-nearest-node-below", + "alt-a g": "core:align-selection-to-grid", + "alt-a l": "core:align-selection-to-left", + "alt-a r": "core:align-selection-to-right", + "alt-a t": "core:align-selection-to-top", + "alt-a b": "core:align-selection-to-bottom", + "alt-a m": "core:align-selection-to-middle", + "alt-a c": "core:align-selection-to-center", + "alt-a h": "core:distribute-selection-horizontally", + "alt-a v": "core:distribute-selection-vertically" } } diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index 1a7d9b08f..171e3124b 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -559,6 +559,22 @@ var RED = (function() { {id:"menu-item-projects-settings",label:RED._("menu.label.projects-settings"),disabled:false,onselect:"core:show-project-settings"} ]}); } + menuOptions.push({id:"menu-item-edit-menu", label:"Edit", options: [ + {id: "menu-item-edit-undo", label:RED._("keyboard.undoChange"), disabled: true, onselect: "core:undo"}, + {id: "menu-item-edit-redo", label:RED._("keyboard.redoChange"), disabled: true, onselect: "core:redo"}, + null, + {id: "menu-item-edit-cut", label:RED._("keyboard.cutNode"), onselect: "core:cut-selection-to-internal-clipboard"}, + {id: "menu-item-edit-copy", label:RED._("keyboard.copyNode"), onselect: "core:copy-selection-to-internal-clipboard"}, + {id: "menu-item-edit-paste", label:RED._("keyboard.pasteNode"), disabled: true, onselect: "core:paste-from-internal-clipboard"}, + null, + {id: "menu-item-edit-copy-group-style", label:RED._("keyboard.copyGroupStyle"), onselect: "core:copy-group-style"}, + {id: "menu-item-edit-paste-group-style", label:RED._("keyboard.pasteGroupStyle"), disabled: true, onselect: "core:paste-group-style"}, + null, + {id: "menu-item-edit-select-all", label:RED._("keyboard.selectAll"), onselect: "core:select-all-nodes"}, + {id: "menu-item-edit-select-connected", label:RED._("keyboard.selectAllConnected"), onselect: "core:select-connected-nodes"}, + {id: "menu-item-edit-select-none", label:RED._("keyboard.selectNone"), onselect: "core:select-none"} + ]}); + menuOptions.push({id:"menu-item-view-menu",label:RED._("menu.label.view.view"),options:[ {id:"menu-item-palette",label:RED._("menu.label.palette.show"),toggle:true,onselect:"core:toggle-palette", selected: true}, {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:"core:toggle-sidebar", selected: true}, @@ -566,6 +582,20 @@ var RED = (function() { {id:"menu-item-action-list",label:RED._("keyboard.actionList"),onselect:"core:show-action-list"}, null ]}); + + menuOptions.push({id:"menu-item-arrange-menu", label:RED._("menu.label.arrange"), options: [ + {id: "menu-item-view-tools-align-left", label:RED._("menu.label.alignLeft"), onselect: "core:align-selection-to-left"}, + {id: "menu-item-view-tools-align-center", label:RED._("menu.label.alignCenter"), onselect: "core:align-selection-to-center"}, + {id: "menu-item-view-tools-align-right", label:RED._("menu.label.alignRight"), onselect: "core:align-selection-to-right"}, + null, + {id: "menu-item-view-tools-align-top", label:RED._("menu.label.alignTop"), onselect: "core:align-selection-to-top"}, + {id: "menu-item-view-tools-align-middle", label:RED._("menu.label.alignMiddle"), onselect: "core:align-selection-to-middle"}, + {id: "menu-item-view-tools-align-bottom", label:RED._("menu.label.alignBottom"), onselect: "core:align-selection-to-bottom"}, + null, + {id: "menu-item-view-tools-distribute-horizontally", label:RED._("menu.label.distributeHorizontally"), onselect: "core:distribute-selection-horizontally"}, + {id: "menu-item-view-tools-distribute-veritcally", label:RED._("menu.label.distributeVertically"), onselect: "core:distribute-selection-vertically"} + ]}); + menuOptions.push(null); if (RED.settings.theme("menu.menu-item-import-library", true)) { menuOptions.push({id: "menu-item-import", label: RED._("menu.label.import"), onselect: "core:show-import-dialog"}); @@ -626,7 +656,6 @@ var RED = (function() { RED.user.init(); RED.notifications.init(); RED.library.init(); - RED.keyboard.init(); RED.palette.init(); RED.eventLog.init(); @@ -655,7 +684,7 @@ var RED = (function() { RED.deploy.init(RED.settings.theme("deployButton",null)); - buildMainMenu(); + RED.keyboard.init(buildMainMenu); RED.nodes.init(); RED.comms.connect(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js index 7ebe659c9..e8c678333 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js @@ -88,6 +88,13 @@ RED.menu = (function() { linkContent += ''; var link = $(linkContent).appendTo(item); + opt.link = link; + if (typeof opt.onselect === 'string') { + var shortcut = RED.keyboard.getShortcut(opt.onselect); + if (shortcut && shortcut.key) { + opt.shortcutSpan = $(''+RED.keyboard.formatKey(shortcut.key, true)+'').appendTo(link); + } + } menuItems[opt.id] = opt; @@ -276,6 +283,22 @@ RED.menu = (function() { } } + function refreshShortcuts() { + for (var id in menuItems) { + if (menuItems.hasOwnProperty(id)) { + var opt = menuItems[id]; + if (typeof opt.onselect === "string" && opt.shortcutSpan) { + opt.shortcutSpan.remove(); + delete opt.shortcutSpan; + var shortcut = RED.keyboard.getShortcut(opt.onselect); + if (shortcut && shortcut.key) { + opt.shortcutSpan = $(''+RED.keyboard.formatKey(shortcut.key, true)+'').appendTo(opt.link); + } + } + } + } + } + return { init: createMenu, setSelected: setSelected, @@ -284,6 +307,7 @@ RED.menu = (function() { setDisabled: setDisabled, addItem: addItem, removeItem: removeItem, - setAction: setAction + setAction: setAction, + refreshShortcuts: refreshShortcuts } })(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js index 1c86eb631..6e4ff98f5 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/group.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/group.js @@ -183,7 +183,9 @@ RED.group = (function() { var activateUngroup = false; var activateMerge = false; var activateRemove = false; + var singleGroupSelected = false; if (activateGroup) { + singleGroupSelected = selection.nodes.length === 1 && selection.nodes[0].type === 'group'; selection.nodes.forEach(function (n) { if (n.type === "group") { activateUngroup = true; @@ -200,6 +202,8 @@ RED.group = (function() { RED.menu.setDisabled("menu-item-group-ungroup", !activateUngroup); RED.menu.setDisabled("menu-item-group-merge", !activateMerge); RED.menu.setDisabled("menu-item-group-remove", !activateRemove); + RED.menu.setDisabled("menu-item-edit-copy-group-style", !singleGroupSelected); + RED.menu.setDisabled("menu-item-edit-paste-group-style", !activateUngroup); }); RED.actions.add("core:group-selection", function() { groupSelection() }) @@ -252,6 +256,7 @@ RED.group = (function() { if (selection.nodes && selection.nodes.length === 1 && selection.nodes[0].type === 'group') { groupStyleClipboard = JSON.parse(JSON.stringify(selection.nodes[0].style)); RED.notify(RED._("clipboard.groupStyleCopied"),{id:"clipboard"}) + RED.menu.setDisabled("menu-item-edit-paste-group-style", false) } } function pasteGroupStyle() { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js index 9e976e4fc..7a38a290d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/keyboard.js @@ -131,7 +131,7 @@ RED.keyboard = (function() { return mergedKeymap; } - function init() { + function init(done) { // Migrate from pre-0.18 migrateOldKeymap(); @@ -164,6 +164,7 @@ RED.keyboard = (function() { } } } + done(); }); RED.userSettings.add({ @@ -174,6 +175,9 @@ RED.keyboard = (function() { setTimeout(function() { $("#red-ui-settings-tab-keyboard-filter").trigger("focus"); },200); + }, + close: function() { + RED.menu.refreshShortcuts(); } }) } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js index 6c3889832..ede8d3442 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js @@ -427,8 +427,266 @@ RED.view.tools = (function() { } } } + } + + function alignSelectionToEdge(direction) { + var selection = RED.view.selection(); + + if (selection.nodes && selection.nodes.length > 1) { + var changedNodes = []; + var bounds = { + minX: Number.MAX_SAFE_INTEGER, + minY: Number.MAX_SAFE_INTEGER, + maxX: Number.MIN_SAFE_INTEGER, + maxY: Number.MIN_SAFE_INTEGER + } + selection.nodes.forEach(function(n) { + if (n.type === "group") { + bounds.minX = Math.min(bounds.minX, n.x); + bounds.minY = Math.min(bounds.minY, n.y); + bounds.maxX = Math.max(bounds.maxX, n.x + n.w); + bounds.maxY = Math.max(bounds.maxY, n.y + n.h); + } else { + bounds.minX = Math.min(bounds.minX, n.x - n.w/2); + bounds.minY = Math.min(bounds.minY, n.y - n.h/2); + bounds.maxX = Math.max(bounds.maxX, n.x + n.w/2); + bounds.maxY = Math.max(bounds.maxY, n.y + n.h/2); + } + }); + + bounds.midX = bounds.minX + (bounds.maxX - bounds.minX)/2; + bounds.midY = bounds.minY + (bounds.maxY - bounds.minY)/2; + + selection.nodes.forEach(function(n) { + var targetX; + var targetY; + var isGroup = n.type==="group"; + switch(direction) { + case 'top': + targetX = n.x; + targetY = bounds.minY + (isGroup?0:(n.h/2)); + break; + case 'bottom': + targetX = n.x; + targetY = bounds.maxY - (isGroup?n.h:(n.h/2)); + break; + case 'left': + targetX = bounds.minX + (isGroup?0:(n.w/2)); + targetY = n.y; + break; + case 'right': + targetX = bounds.maxX - (isGroup?n.w:(n.w/2)); + targetY = n.y; + break; + case 'middle': + targetX = n.x; + targetY = bounds.midY - (isGroup?n.h/2:0) + break; + case 'center': + targetX = bounds.midX - (isGroup?n.w/2:0) + targetY = n.y; + break; + } + + if (n.x !== targetX || n.y !== targetY) { + if (!isGroup) { + changedNodes.push({ + n:n, + ox: n.x, + oy: n.y, + moved: n.moved + }); + n.x = targetX; + n.y = targetY; + n.dirty = true; + n.moved = true; + } else { + var groupNodes = RED.group.getNodes(n, true); + var deltaX = n.x - targetX; + var deltaY = n.y - targetY; + groupNodes.forEach(function(gn) { + if (gn.type !== "group" ) { + changedNodes.push({ + n:gn, + ox: gn.x, + oy: gn.y, + moved: gn.moved + }); + gn.x = gn.x - deltaX; + gn.y = gn.y - deltaY; + gn.dirty = true; + gn.moved = true; + } + }) + + } + } + }); + if (changedNodes.length > 0) { + RED.history.push({t:"move",nodes:changedNodes,dirty:RED.nodes.dirty()}); + RED.nodes.dirty(true); + RED.view.redraw(true); + } + } + } + function distributeSelection(direction) { + var selection = RED.view.selection(); + + if (selection.nodes && selection.nodes.length > 2) { + var changedNodes = []; + var bounds = { + minX: Number.MAX_SAFE_INTEGER, + minY: Number.MAX_SAFE_INTEGER, + maxX: Number.MIN_SAFE_INTEGER, + maxY: Number.MIN_SAFE_INTEGER + } + var startAnchors = []; + var endAnchors = []; + + selection.nodes.forEach(function(n) { + var nx,ny; + if (n.type === "group") { + nx = n.x + n.w/2; + ny = n.y + n.h/2; + } else { + nx = n.x; + ny = n.y; + } + if (direction === "h") { + if (nx < bounds.minX) { + startAnchors = []; + bounds.minX = nx; + } + if (nx === bounds.minX) { + startAnchors.push(n); + } + if (nx > bounds.maxX) { + endAnchors = []; + bounds.maxX = nx; + } + if (nx === bounds.maxX) { + endAnchors.push(n); + } + } else { + if (ny < bounds.minY) { + startAnchors = []; + bounds.minY = ny; + } + if (ny === bounds.minY) { + startAnchors.push(n); + } + if (ny > bounds.maxY) { + endAnchors = []; + bounds.maxY = ny; + } + if (ny === bounds.maxY) { + endAnchors.push(n); + } + } + }); + + var startAnchor = startAnchors[0]; + var endAnchor = endAnchors[0]; + + var nodeSpace = 0; + var nodesToMove = selection.nodes.filter(function(n) { + if (n.id !== startAnchor.id && n.id !== endAnchor.id) { + nodeSpace += direction === 'h'?n.w:n.h; + return true; + } + return false; + }).sort(function(A,B) { + if (direction === 'h') { + return A.x - B.x + } else { + return A.y - B.y + } + }) + + var saX = startAnchor.x + startAnchor.w/2; + var saY = startAnchor.y + startAnchor.h/2; + if (startAnchor.type === "group") { + saX = startAnchor.x + startAnchor.w; + saY = startAnchor.y + startAnchor.h; + } + var eaX = endAnchor.x; + var eaY = endAnchor.y; + if (endAnchor.type !== "group") { + eaX -= endAnchor.w/2; + eaY -= endAnchor.h/2; + } + var spaceToFill = direction === 'h'?(eaX - saX - nodeSpace): (eaY - saY - nodeSpace); + var spaceBetweenNodes = spaceToFill / (nodesToMove.length + 1); + + var tx = saX; + var ty = saY; + while(nodesToMove.length > 0) { + if (direction === 'h') { + tx += spaceBetweenNodes; + } else { + ty += spaceBetweenNodes; + } + var nextNode = nodesToMove.shift(); + var isGroup = nextNode.type==="group"; + + var nx = nextNode.x; + var ny = nextNode.y; + if (!isGroup) { + tx += nextNode.w/2; + ty += nextNode.h/2; + } + if ((direction === 'h' && nx !== tx) || (direction === 'v' && ny !== ty)) { + if (!isGroup) { + changedNodes.push({ + n:nextNode, + ox: nextNode.x, + oy: nextNode.y, + moved: nextNode.moved + }); + if (direction === 'h') { + nextNode.x = tx; + } else { + nextNode.y = ty; + } + nextNode.dirty = true; + nextNode.moved = true; + } else { + var groupNodes = RED.group.getNodes(nextNode, true); + var deltaX = direction === 'h'? nx - tx : 0; + var deltaY = direction === 'v'? ny - ty : 0; + groupNodes.forEach(function(gn) { + if (gn.type !== "group" ) { + changedNodes.push({ + n:gn, + ox: gn.x, + oy: gn.y, + moved: gn.moved + }); + gn.x = gn.x - deltaX; + gn.y = gn.y - deltaY; + gn.dirty = true; + gn.moved = true; + } + }) + } + } + if (isGroup) { + tx += nextNode.w; + ty += nextNode.h; + } else { + tx += nextNode.w/2; + ty += nextNode.h/2; + } + } + + if (changedNodes.length > 0) { + RED.history.push({t:"move",nodes:changedNodes,dirty:RED.nodes.dirty()}); + RED.nodes.dirty(true); + RED.view.redraw(true); + } + } } @@ -437,8 +695,6 @@ RED.view.tools = (function() { RED.actions.add("core:show-selected-node-labels", function() { setSelectedNodeLabelState(true); }) RED.actions.add("core:hide-selected-node-labels", function() { setSelectedNodeLabelState(false); }) - RED.actions.add("core:align-selection-to-grid", alignToGrid); - RED.actions.add("core:scroll-view-up", function() { RED.view.scroll(0,-RED.view.gridSize());}); RED.actions.add("core:scroll-view-right", function() { RED.view.scroll(RED.view.gridSize(),0);}); RED.actions.add("core:scroll-view-down", function() { RED.view.scroll(0,RED.view.gridSize());}); @@ -474,6 +730,19 @@ RED.view.tools = (function() { RED.actions.add("core:go-to-nearest-node-on-right", function() { gotoNearestNode('right')}) RED.actions.add("core:go-to-nearest-node-above", function() { gotoNearestNode('up') }) RED.actions.add("core:go-to-nearest-node-below", function() { gotoNearestNode('down') }) + + RED.actions.add("core:align-selection-to-grid", alignToGrid); + RED.actions.add("core:align-selection-to-left", function() { alignSelectionToEdge('left') }) + RED.actions.add("core:align-selection-to-right", function() { alignSelectionToEdge('right') }) + RED.actions.add("core:align-selection-to-top", function() { alignSelectionToEdge('top') }) + RED.actions.add("core:align-selection-to-bottom", function() { alignSelectionToEdge('bottom') }) + RED.actions.add("core:align-selection-to-middle", function() { alignSelectionToEdge('middle') }) + RED.actions.add("core:align-selection-to-center", function() { alignSelectionToEdge('center') }) + + RED.actions.add("core:distribute-selection-horizontally", function() { distributeSelection('h') }) + RED.actions.add("core:distribute-selection-vertically", function() { distributeSelection('v') }) + + // RED.actions.add("core:add-node", function() { addNode() }) }, /** diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index afbf5f5f7..51f4428f6 100755 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -501,6 +501,14 @@ RED.view = (function() { RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection); RED.actions.add("core:cut-selection-to-internal-clipboard",function(){copySelection();deleteSelection();}); RED.actions.add("core:paste-from-internal-clipboard",function(){importNodes(clipboard,{generateIds: true});}); + + RED.events.on("view:selection-changed", function(selection) { + var hasSelection = (selection.nodes && selection.nodes.length > 0); + RED.menu.setDisabled("menu-item-edit-cut",!hasSelection); + RED.menu.setDisabled("menu-item-edit-copy",!hasSelection); + RED.menu.setDisabled("menu-item-edit-select-connected",!hasSelection); + }) + RED.actions.add("core:delete-selection",deleteSelection); RED.actions.add("core:edit-selected-node",editSelection); RED.actions.add("core:go-to-selection",function() { @@ -2332,6 +2340,7 @@ RED.view = (function() { } } clipboard = JSON.stringify(nns); + RED.menu.setDisabled("menu-item-edit-paste", false); if (nodeCount > 0) { RED.notify(RED._("clipboard.nodeCopied",{count:nodeCount}),{id:"clipboard"}); } else if (groupCount > 0) { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss index bb91846bb..ca19afc73 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/dropdownMenu.scss @@ -68,6 +68,10 @@ & > .disabled > a:hover, & > .disabled > a:focus { color: $menuDisabledColor; + .red-ui-popover-key { + color: $menuDisabledColor; + border-color: $menuDisabledColor; + } } & > .disabled > a:hover, @@ -102,6 +106,14 @@ display: none; } } + .red-ui-popover-key { + border: none; + padding: 0; + font-size: 13px; + float: right; + color: $menuColor; + border-color: $menuColor; + } } } @@ -209,4 +221,4 @@ ul.red-ui-menu:not(.red-ui-menu-dropdown) { } } -} \ No newline at end of file +} diff --git a/packages/node_modules/@node-red/editor-client/src/sass/header.scss b/packages/node_modules/@node-red/editor-client/src/sass/header.scss index 4093e9bca..02528a446 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/header.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/header.scss @@ -191,14 +191,17 @@ margin-top: 0; li a { color: $header-menu-color; - padding: 3px 40px; + padding: 3px 10px 3px 40px; img { max-width: 100%; margin-right: 10px; padding: 4px; border: 3px solid transparent; } - + .red-ui-popover-key { + color: $header-menu-color-disabled !important; + border-color: $header-menu-color-disabled !important; + } &.active img { border: 3px solid $header-menu-item-border-active; }