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

Add RED.popover.menu as a new type of menu widget

Browse Source
This commit is contained in:
Nick O'Leary 2020-06-08 12:01:05 +01:00
parent 7006c00233
commit ce7d7a8e01
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
6 changed files with 126 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -158,7 +158,7 @@ RED.menu = (function() {
activeMenu = null;
topMenu.hide();
});
$(".red-ui-menu").hide();
$(".red-ui-menu.red-ui-menu-dropdown").hide();
topMenu.show();
}
})

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

@ -278,6 +278,85 @@ RED.popover = (function() {
delay: { show: 750, hide: 50 }
});
},
menu: function(options) {
var list = $('<ul class="red-ui-menu"></ul>');
if (options.style === 'compact') {
list.addClass("red-ui-menu-compact");
}
var menuOptions = options.options || [];
var first;
menuOptions.forEach(function(opt) {
var item = $('<li>').appendTo(list);
var link = $('<a href="#"></a>').text(opt.label).appendTo(item);
link.on("click", function(evt) {
evt.preventDefault();
if (opt.onselect) {
opt.onselect();
}
menu.hide();
})
if (!first) { first = link}
})
var container = RED.popover.panel(list);
var menu = {
show: function(opts) {
$(document).on("keydown.red-ui-menu", function(evt) {
var currentItem = list.find(":focus").parent();
if (evt.keyCode === 40) {
evt.preventDefault();
// DOWN
if (currentItem.length > 0) {
if (currentItem.index() === menuOptions.length-1) {
console.log("WARP TO TOP")
// Wrap to top of list
list.children().first().children().first().focus();
} else {
console.log("GO DOWN ONE")
currentItem.next().children().first().focus();
}
} else {
list.children().first().children().first().focus();
}
} else if (evt.keyCode === 38) {
evt.preventDefault();
// UP
if (currentItem.length > 0) {
if (currentItem.index() === 0) {
console.log("WARP TO BOTTOM")
// Wrap to bottom of list
list.children().last().children().first().focus();
} else {
console.log("GO UP ONE")
currentItem.prev().children().first().focus();
}
} else {
list.children().last().children().first().focus();
}
} else if (evt.keyCode === 27) {
// ESCAPE
evt.preventDefault();
menu.hide(true);
}
evt.stopPropagation();
})
opts.onclose = function() {
$(document).off("keydown.red-ui-menu");
if (options.onclose) {
options.onclose(true);
}
}
container.show(opts);
},
hide: function(cancelled) {
$(document).off("keydown.red-ui-menu");
container.hide(options.disposeOnClose);
if (options.onclose) {
options.onclose(cancelled);
}
}
}
return menu;
},
panel: function(content) {
var panel = $('<div class="red-ui-editor-dialog red-ui-popover-panel"></div>');
panel.css({ display: "none" });
@ -285,18 +364,20 @@ RED.popover = (function() {
content.appendTo(panel);
var closeCallback;
function hide() {
function hide(dispose) {
$(document).off("mousedown.red-ui-popover-panel-close");
panel.hide();
panel.css({
height: "auto"
});
panel.remove();
if (dispose !== false) {
panel.remove();
}
}
function show(options) {
var closeCallback = options.onclose;
var target = options.target;
var align = options.align || "left";
var align = options.align || "right";
var offset = options.offset || [0,0];
var pos = target.offset();
@ -313,12 +394,12 @@ RED.popover = (function() {
panelHeight.height(panelHeight+top)
top = 0;
}
if (align === "left") {
if (align === "right") {
panel.css({
top: top+"px",
left: (pos.left+offset[0])+"px",
});
} else if(align === "right") {
} else if (align === "left") {
panel.css({
top: top+"px",
left: (pos.left-panelWidth+offset[0])+"px",
@ -331,7 +412,7 @@ RED.popover = (function() {
if (closeCallback) {
closeCallback();
}
hide();
hide(options.dispose);
}
// if ($(event.target).closest(target).length) {
// event.preventDefault();

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

@ -153,7 +153,7 @@ RED.tabs = (function() {
if (collapsibleMenu.is(":visible")) {
$(document).off("click.red-ui-tabmenu");
} else {
$(".red-ui-menu").hide();
$(".red-ui-menu.red-ui-menu-dropdown").hide();
$(document).on("click.red-ui-tabmenu", function(evt) {
$(document).off("click.red-ui-tabmenu");
collapsibleMenu.hide();

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

@ -913,7 +913,7 @@
panel.show({
target:that.optionExpandButton,
onclose:content.onclose,
align: "right"
align: "left"
});
}
})

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

@ -175,3 +175,38 @@
.red-ui-menu-dropdown-submenu.disabled > a:before {
border-right-color: $menuCaret;
}
// Menu NG
ul.red-ui-menu:not(.red-ui-menu-dropdown) {
font-family: $primary-font;
font-size: 12px;
list-style-type: none;
padding: 0;
margin: 0;
li a {
display: block;
padding: 4px 8px 4px 16px;
clear: both;
font-weight: normal;
line-height: 20px;
color: $menuColor;
white-space: nowrap;
text-decoration: none;
&:hover,&:focus {
color: $menuHoverColor;
text-decoration: none;
background-color: $menuHoverBackground;
border: none;
outline: none;
}
}
&.red-ui-menu-compact {
font-size: 12px;
li a {
line-height: 16px;
}
}
}

2
packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss vendored
View File

@ -501,7 +501,7 @@ div.red-ui-info-table {
position: absolute;
top: 6px;
right: 8px;
width: calc(100% - 150px);
width: calc(100% - 130px);
max-width: 250px;
background: $palette-header-background;
}