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

Merge pull request #3686 from node-red/fix-menu-padding

Browse Source 
Fix menu padding to handle both icons and submenus
This commit is contained in:
Nick O'Leary 2022-06-17 10:05:01 +01:00 committed by GitHub
commit 226ab406b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js vendored
View File

@ -133,6 +133,8 @@ RED.menu = (function() {
if (opt.options) { if (opt.options) {
item.addClass("red-ui-menu-dropdown-submenu"+(opt.direction!=='right'?" pull-left":"")); item.addClass("red-ui-menu-dropdown-submenu"+(opt.direction!=='right'?" pull-left":""));
var submenu = $('<ul id="'+opt.id+'-submenu" class="red-ui-menu-dropdown"></ul>').appendTo(item); var submenu = $('<ul id="'+opt.id+'-submenu" class="red-ui-menu-dropdown"></ul>').appendTo(item);
var hasIcons = false
var hasSubmenus = false
for (var i=0;i<opt.options.length;i++) { for (var i=0;i<opt.options.length;i++) {
@ -144,6 +146,8 @@ RED.menu = (function() {
opt.options[i].onpostselect = opt.onpostselect opt.options[i].onpostselect = opt.onpostselect
} }
opt.options[i].direction = opt.direction opt.options[i].direction = opt.direction
hasIcons = hasIcons || (opt.options[i].icon);
hasSubmenus = hasSubmenus || (opt.options[i].options);
} }
var li = createMenuItem(opt.options[i]); var li = createMenuItem(opt.options[i]);
@ -151,6 +155,14 @@ RED.menu = (function() {
li.appendTo(submenu); li.appendTo(submenu);
} }
} }
if (!hasIcons) {
submenu.addClass("red-ui-menu-dropdown-noicons")
}
if (hasSubmenus) {
submenu.addClass("red-ui-menu-dropdown-submenus")
}
} }
if (opt.disabled) { if (opt.disabled) {
item.addClass("disabled"); item.addClass("disabled");
@ -191,6 +203,8 @@ RED.menu = (function() {
} }
var lastAddedSeparator = false; var lastAddedSeparator = false;
var hasSubmenus = false;
var hasIcons = false;
for (var i=0;i<options.options.length;i++) { for (var i=0;i<options.options.length;i++) {
var opt = options.options[i]; var opt = options.options[i];
if (opt) { if (opt) {
@ -203,6 +217,8 @@ RED.menu = (function() {
opt.direction = options.direction || 'left' opt.direction = options.direction || 'left'
} }
if (opt !== null || !lastAddedSeparator) { if (opt !== null || !lastAddedSeparator) {
hasIcons = hasIcons || (opt && opt.icon);
hasSubmenus = hasSubmenus || (opt && opt.options);
var li = createMenuItem(opt); var li = createMenuItem(opt);
if (li) { if (li) {
li.appendTo(topMenu); li.appendTo(topMenu);
@ -210,7 +226,12 @@ RED.menu = (function() {
} }
} }
} }
if (!hasIcons) {
topMenu.addClass("red-ui-menu-dropdown-noicons")
}
if (hasSubmenus) {
topMenu.addClass("red-ui-menu-dropdown-submenus")
}
return topMenu; return topMenu;
} }

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

@ -46,7 +46,7 @@
& > li > a, & > li > a,
& > li > a:focus { & > li > a:focus {
display: block; display: block;
padding: 4px 20px 4px 12px; padding: 4px 12px 4px 32px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
@ -58,6 +58,18 @@
& > li.pull-left > a:focus { & > li.pull-left > a:focus {
padding: 4px 12px 4px 32px; padding: 4px 12px 4px 32px;
} }
&.red-ui-menu-dropdown-noicons > li > a,
&.red-ui-menu-dropdown-noicons > li > a:focus {
padding: 4px 12px 4px 12px;
}
&.red-ui-menu-dropdown-submenus > li > a,
&.red-ui-menu-dropdown-submenus > li > a:focus {
padding-right: 20px;
}
& > .active > a, & > .active > a,
& > .active > a:hover, & > .active > a:hover,
& > .active > a:focus { & > .active > a:focus {