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

prevent editor context menu being clipped by sidebar

Browse Source 
- raise / lower tray z-index for correct slide animation
This commit is contained in:
Steve-Mcl 2021-04-29 17:03:17 +01:00
parent 71bdade7b9
commit f29488b24f
2 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -166,6 +166,8 @@ RED.tray = (function() {
setTimeout(function() { setTimeout(function() {
// Delay resetting the flag, so we don't close prematurely // Delay resetting the flag, so we don't close prematurely
openingTray = false; openingTray = false;
raiseTrayZ();
handleWindowResize();//cause call to monaco layout
},200); },200);
body.find(":focusable:first").trigger("focus"); body.find(":focusable:first").trigger("focus");
@ -206,6 +208,17 @@ RED.tray = (function() {
} }
} }
//raise tray z-index to prevent editor context menu being clipped by sidebar
function raiseTrayZ() {
setTimeout(function(){
$('#red-ui-editor-stack').css("zIndex","13");
},300);
}
//lower tray z-index back to original place for correct slide animation (related to fix for editor context menu clipped by sidebar)
function lowerTrayZ(){
$('#red-ui-editor-stack').css("zIndex","9");
}
return { return {
init: function init() { init: function init() {
editorStack = $("#red-ui-editor-stack"); editorStack = $("#red-ui-editor-stack");
@ -221,6 +234,7 @@ RED.tray = (function() {
}); });
}, },
show: function show(options) { show: function show(options) {
lowerTrayZ();
if (!options) { if (!options) {
if (stack.length > 0) { if (stack.length > 0) {
var tray = stack[stack.length-1]; var tray = stack[stack.length-1];
@ -252,6 +266,7 @@ RED.tray = (function() {
}, },
hide: function hide() { hide: function hide() {
lowerTrayZ();
if (stack.length > 0) { if (stack.length > 0) {
var tray = stack[stack.length-1]; var tray = stack[stack.length-1];
tray.tray.css({ tray.tray.css({
@ -266,6 +281,7 @@ RED.tray = (function() {
}, },
resize: handleWindowResize, resize: handleWindowResize,
close: function close(done) { close: function close(done) {
lowerTrayZ(); //lower tray z-index for correct animation
if (stack.length > 0) { if (stack.length > 0) {
var tray = stack.pop(); var tray = stack.pop();
tray.tray.css({ tray.tray.css({
@ -284,6 +300,8 @@ RED.tray = (function() {
handleWindowResize(); handleWindowResize();
oldTray.tray.css({right:0}); oldTray.tray.css({right:0});
if (oldTray.options.show) { if (oldTray.options.show) {
raiseTrayZ();
handleWindowResize();//cause call to monaco layout
oldTray.options.show(); oldTray.options.show();
} }
},0); },0);

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

@ -46,7 +46,7 @@
right: 315px; right: 315px;
bottom:10px; bottom:10px;
width: 7px; width: 7px;
z-index: 11; // z-index: 11;
background: $primary-background url(images/grip.png) no-repeat 50% 50%; background: $primary-background url(images/grip.png) no-repeat 50% 50%;
cursor: col-resize; cursor: col-resize;
} }
@ -134,6 +134,7 @@ button.red-ui-sidebar-header-button-toggle {
right: calc(100%); right: calc(100%);
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
z-index: 13;
} }
.red-ui-sidebar-control-left { .red-ui-sidebar-control-left {
@include red-ui-sidebar-control; @include red-ui-sidebar-control;