From 257b1f89f30cb430479e10854979b43f2ed2ad90 Mon Sep 17 00:00:00 2001 From: Hiroyasu Nishiyama Date: Thu, 7 Jul 2022 16:47:26 +0900 Subject: [PATCH 1/4] fix display direction of context sub-menu --- .../@node-red/editor-client/src/js/ui/contextMenu.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js index a8b787ba5..44090aa1a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js @@ -152,8 +152,16 @@ RED.contextMenu = (function() { } } + + var direction = "right"; + var MENU_WIDTH = 600; // can not use menu width here + if ((options.x -$(document).scrollLeft()) > + ($(window).height() -MENU_WIDTH)) { + direction = "left"; + } + menu = RED.menu.init({ - direction: 'right', + direction: direction, onpreselect: function() { disposeMenu() }, From bd4a5ac8441c473f3b6da2b9c1c949157eca984f Mon Sep 17 00:00:00 2001 From: Hiroyasu Nishiyama Date: Thu, 7 Jul 2022 19:39:28 +0900 Subject: [PATCH 2/4] fixed menu width and window width --- .../@node-red/editor-client/src/js/ui/contextMenu.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js index 44090aa1a..7d893225b 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js @@ -154,9 +154,9 @@ RED.contextMenu = (function() { } var direction = "right"; - var MENU_WIDTH = 600; // can not use menu width here + var MENU_WIDTH = 500; // can not use menu width here if ((options.x -$(document).scrollLeft()) > - ($(window).height() -MENU_WIDTH)) { + ($(window).width() -MENU_WIDTH)) { direction = "left"; } From 18f9ab0cdae802f5c857b3a283a79d6db8108fa1 Mon Sep 17 00:00:00 2001 From: Hiroyasu Nishiyama Date: Thu, 7 Jul 2022 20:23:27 +0900 Subject: [PATCH 3/4] make left sub-menu caret fit within context menu --- .../@node-red/editor-client/src/sass/dropdownMenu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5cb5f725c..84edd405e 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 @@ -199,7 +199,7 @@ width: 0; height: 0; margin-top: 5px; - margin-left: -30px; + margin-left: -8px; /* Caret Arrow */ border-color: transparent; border-right-color: var(--red-ui-menuCaret); From 69beecf334aafe21f1f344c652d3699f7347a71b Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Fri, 8 Jul 2022 13:06:05 +0100 Subject: [PATCH 4/4] Fix menu padding for pull-left submenus --- .../editor-client/src/sass/dropdownMenu.scss | 11 +++++++---- .../@node-red/editor-client/src/sass/header.scss | 3 ++- 2 files changed, 9 insertions(+), 5 deletions(-) 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 84edd405e..f6a2d6fde 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 @@ -63,11 +63,14 @@ padding: 4px 12px 4px 12px; } - &.red-ui-menu-dropdown-submenus > li > a, - &.red-ui-menu-dropdown-submenus > li > a:focus { + &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a, + &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a:focus { padding-right: 20px; } - + &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-left > li > a, + &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-left > li > a:focus { + padding-left: 20px; + } & > .active > a, @@ -199,7 +202,7 @@ width: 0; height: 0; margin-top: 5px; - margin-left: -8px; + margin-left: -15px; /* Caret Arrow */ border-color: transparent; border-right-color: var(--red-ui-menuCaret); 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 e837f0805..723c1e9bd 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,7 +191,7 @@ margin-top: 0; li a { color: var(--red-ui-header-menu-color); - padding: 3px 10px 3px 40px; + padding: 3px 10px 3px 30px; img { max-width: 100%; margin-right: 10px; @@ -243,6 +243,7 @@ } .red-ui-menu-dropdown-submenu>a:before { border-right-color: var(--red-ui-headerMenuCaret); + margin-left: -25px !important; } /* Deploy menu customisations */