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 e73c82293..7ebe659c9 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
@@ -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();
}
})
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js
index 6f8724a8a..6a9148896 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js
@@ -278,6 +278,85 @@ RED.popover = (function() {
delay: { show: 750, hide: 50 }
});
},
+ menu: function(options) {
+ var list = $('');
+ if (options.style === 'compact') {
+ list.addClass("red-ui-menu-compact");
+ }
+ var menuOptions = options.options || [];
+ var first;
+ menuOptions.forEach(function(opt) {
+ var item = $('').appendTo(list);
+ var link = $('').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 = $('');
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();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
index 249d7daa7..f23def3c2 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
@@ -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();
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
index 74346c30f..037e8e454 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js
@@ -913,7 +913,7 @@
panel.show({
target:that.optionExpandButton,
onclose:content.onclose,
- align: "right"
+ align: "left"
});
}
})
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 658094571..bb91846bb 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
@@ -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;
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
index f51622b89..d401e0c70 100644
--- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
+++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss
@@ -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;
}