frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #3746 from node-red/pr_3744 

Fix display direction of context sub-menu
This commit is contained in:
Nick O'Leary 2022-07-08 17:07:03 +01:00 committed by GitHub
parent e308e02f9d 241b47fe19
commit 62332a2b56
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/node_modules/@node-red/editor-client/src/js/ui/contextMenu.js vendored
View File

@ -133,9 +133,17 @@ RED.contextMenu = (function () {
} }
} }
var direction = "right";
var MENU_WIDTH = 500; // can not use menu width here
if ((options.x -$(document).scrollLeft()) >
($(window).width() -MENU_WIDTH)) {
direction = "left";
}
menu = RED.menu.init({ menu = RED.menu.init({
direction: 'right', direction: direction,
onpreselect: function () { onpreselect: function() {
disposeMenu() disposeMenu()
}, },
onpostselect: function () { onpostselect: function () {

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

@ -63,11 +63,14 @@
padding: 4px 12px 4px 12px; padding: 4px 12px 4px 12px;
} }
&.red-ui-menu-dropdown-submenus > li > a, &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a,
&.red-ui-menu-dropdown-submenus > li > a:focus { &.red-ui-menu-dropdown-submenus.red-ui-menu-dropdown-direction-right > li > a:focus {
padding-right: 20px; 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, & > .active > a,
@ -199,7 +202,7 @@
width: 0; width: 0;
height: 0; height: 0;
margin-top: 5px; margin-top: 5px;
margin-left: -30px; margin-left: -15px;
/* Caret Arrow */ /* Caret Arrow */
border-color: transparent; border-color: transparent;
border-right-color: var(--red-ui-menuCaret); border-right-color: var(--red-ui-menuCaret);

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

@ -191,7 +191,7 @@
margin-top: 0; margin-top: 0;
li a { li a {
color: var(--red-ui-header-menu-color); color: var(--red-ui-header-menu-color);
padding: 3px 10px 3px 40px; padding: 3px 10px 3px 30px;
img { img {
max-width: 100%; max-width: 100%;
margin-right: 10px; margin-right: 10px;
@ -243,6 +243,7 @@
} }
.red-ui-menu-dropdown-submenu>a:before { .red-ui-menu-dropdown-submenu>a:before {
border-right-color: var(--red-ui-headerMenuCaret); border-right-color: var(--red-ui-headerMenuCaret);
margin-left: -25px !important;
} }
/* Deploy menu customisations */ /* Deploy menu customisations */