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

Handle resizing and shade on separators

pull/5327/head
Nick O'Leary 2025-10-24 11:40:56 +01:00
parent c90f93ec56
commit 2e777db80c
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
11 changed files with 94 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -154,8 +154,7 @@ RED.actionList = (function() {
$("#red-ui-header-shade").show();
$("#red-ui-editor-shade").show();
$("#red-ui-palette-shade").show();
$("#red-ui-sidebar-shade").show();
$("#red-ui-sidebar-separator").hide();
$(".red-ui-sidebar-shade").show();
if (dialog === null) {
createDialog();
}
@ -189,8 +188,7 @@ RED.actionList = (function() {
$("#red-ui-header-shade").hide();
$("#red-ui-editor-shade").hide();
$("#red-ui-palette-shade").hide();
$("#red-ui-sidebar-shade").hide();
$("#red-ui-sidebar-separator").show();
$(".red-ui-sidebar-shade").hide();
if (dialog !== null) {
dialog.slideUp(200,function() {
searchInput.searchBox('value','');
@ -222,7 +220,7 @@ RED.actionList = (function() {
$("#red-ui-header-shade").on('mousedown',hide);
$("#red-ui-editor-shade").on('mousedown',hide);
$("#red-ui-palette-shade").on('mousedown',hide);
$("#red-ui-sidebar-shade").on('mousedown',hide);
$(".red-ui-sidebar-shade").on('mousedown',hide);
}
return {

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

@ -313,13 +313,13 @@ RED.deploy = (function() {
$("#red-ui-header-shade").show();
$("#red-ui-editor-shade").show();
$("#red-ui-palette-shade").show();
$("#red-ui-sidebar-shade").show();
$(".red-ui-sidebar-shade").show();
}
function shadeHide() {
$("#red-ui-header-shade").hide();
$("#red-ui-editor-shade").hide();
$("#red-ui-palette-shade").hide();
$("#red-ui-sidebar-shade").hide();
$(".red-ui-sidebar-shade").hide();
}
function deployButtonSetBusy(){
$(".red-ui-deploy-button-content").css('opacity',0);

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

@ -1363,11 +1363,11 @@ RED.diff = (function() {
diffTable.finish();
diffTable.list.show();
},300);
$("#red-ui-sidebar-shade").show();
$(".red-ui-sidebar-shade").show();
},
close: function() {
diffVisible = false;
$("#red-ui-sidebar-shade").hide();
$(".red-ui-sidebar-shade").hide();
},
show: function() {

4
packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js vendored
View File

@ -95,7 +95,7 @@ RED.projects.settings = (function() {
});
settingsContent.i18n();
settingsTabs.activateTab("red-ui-project-settings-tab-"+(initialTab||'main'))
$("#red-ui-sidebar-shade").show();
$(".red-ui-sidebar-shade").show();
},
close: function() {
settingsVisible = false;
@ -104,7 +104,7 @@ RED.projects.settings = (function() {
pane.close();
}
});
$("#red-ui-sidebar-shade").hide();
$(".red-ui-sidebar-shade").hide();
},
show: function() {}

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

@ -518,8 +518,7 @@ RED.search = (function() {
$("#red-ui-header-shade").show();
$("#red-ui-editor-shade").show();
$("#red-ui-palette-shade").show();
$("#red-ui-sidebar-shade").show();
$("#red-ui-sidebar-separator").hide();
$(".red-ui-sidebar-shade").show();
if (dialog === null) {
createDialog();
@ -543,8 +542,7 @@ RED.search = (function() {
$("#red-ui-header-shade").hide();
$("#red-ui-editor-shade").hide();
$("#red-ui-palette-shade").hide();
$("#red-ui-sidebar-shade").hide();
$("#red-ui-sidebar-separator").show();
$(".red-ui-sidebar-shade").hide();
if (dialog !== null) {
dialog.slideUp(200,function() {
searchInput.searchBox('value','');
@ -644,7 +642,7 @@ RED.search = (function() {
$("#red-ui-header-shade").on('mousedown',hide);
$("#red-ui-editor-shade").on('mousedown',hide);
$("#red-ui-palette-shade").on('mousedown',hide);
$("#red-ui-sidebar-shade").on('mousedown',hide);
$(".red-ui-sidebar-shade").on('mousedown',hide);
$("#red-ui-view-searchtools-close").on("click", function close() {
clearActiveSearch();

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

@ -20,6 +20,7 @@ RED.sidebar = (function() {
direction: 'right',
menuToggle: 'menu-item-sidebar',
minimumWidth: 180,
maximumWidth: 800,
defaultWidth: 300
}
@ -29,10 +30,10 @@ RED.sidebar = (function() {
direction: 'left',
menuToggle: 'menu-item-palette',
minimumWidth: 180,
maximumWidth: 180,
defaultWidth: 180
}
var knownTabs = {};
// We store the current sidebar tab id in localStorage as 'last-sidebar-tab'
@ -119,6 +120,7 @@ RED.sidebar = (function() {
function setupSidebarSeparator(sidebar) {
const separator = $('<div class="red-ui-sidebar-separator"></div>');
const shade = $('<div class="red-ui-sidebar-shade hide"></div>').appendTo(separator);
let scaleFactor = 1;
let controlClass = 'red-ui-sidebar-control-right';
let controlSlideDirection = 'right';
@ -131,73 +133,75 @@ RED.sidebar = (function() {
separator.insertAfter(sidebar.container);
}
separator.draggable({
axis: "x",
start:function(event,ui) {
sidebarSeparator.closing = false;
sidebarSeparator.opening = false;
// var winWidth = $("#red-ui-editor").width();
sidebarSeparator.start = ui.position.left;
sidebarSeparator.width = sidebar.container.width();
sidebarSeparator.chartWidth = $("#red-ui-workspace").width();
sidebarSeparator.dragging = true;
axis: "x",
start:function(event,ui) {
if (shade.is(":visible")) {
return false
}
sidebarSeparator.closing = false;
sidebarSeparator.opening = false;
// var winWidth = $("#red-ui-editor").width();
sidebarSeparator.start = ui.position.left;
sidebarSeparator.width = sidebar.container.width();
sidebarSeparator.chartWidth = $("#red-ui-workspace").width();
sidebarSeparator.dragging = true;
if (!RED.menu.isSelected(sidebar.menuToggle)) {
sidebarSeparator.opening = true;
sidebar.container.width(0);
RED.menu.setSelected(sidebar.menuToggle,true);
RED.events.emit("sidebar:resize");
}
sidebarSeparator.width = sidebar.container.width();
},
drag: function(event,ui) {
var d = scaleFactor * (ui.position.left-sidebarSeparator.start);
var newSidebarWidth = sidebarSeparator.width - d;
if (sidebarSeparator.opening) {
newSidebarWidth -= 3 * scaleFactor;
}
if (newSidebarWidth > 150) {
if (sidebarSeparator.chartWidth + d < 200) {
ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth;
d = ui.position.left-sidebarSeparator.start;
newSidebarWidth = sidebarSeparator.width-d;
}
}
if (newSidebarWidth < sidebar.minimumWidth) {
if (newSidebarWidth > 100) {
newSidebarWidth = sidebar.minimumWidth
sidebarSeparator.closing = false
} else {
newSidebarWidth = 0
sidebarSeparator.closing = true
}
} else {
sidebarSeparator.closing = false
}
sidebar.container.width(newSidebarWidth);
ui.position.left -= scaleFactor * d
sidebar.tabs.resize();
RED.events.emit("sidebar:resize");
},
stop:function(event,ui) {
sidebarSeparator.dragging = false;
if (sidebarSeparator.closing) {
sidebar.container.removeClass("closing");
if (sidebar.menuToggle) {
RED.menu.setSelected(sidebar.menuToggle,false);
}
sidebar.container.hide()
if (sidebar.container.width() < sidebar.minimumWidth) {
sidebar.container.width(sidebar.defaultWidth);
}
}
// $(".red-ui-sidebar-separator").css("left","auto");
// $(".red-ui-sidebar-separator").css("right",(sidebar.container.width()+2)+"px");
if (!RED.menu.isSelected(sidebar.menuToggle)) {
sidebarSeparator.opening = true;
sidebar.container.width(0);
RED.menu.setSelected(sidebar.menuToggle,true);
RED.events.emit("sidebar:resize");
}
sidebarSeparator.width = sidebar.container.width();
},
drag: function(event,ui) {
var d = scaleFactor * (ui.position.left-sidebarSeparator.start);
var newSidebarWidth = sidebarSeparator.width - d;
if (newSidebarWidth > sidebar.maximumWidth) {
newSidebarWidth = sidebar.maximumWidth;
d = sidebarSeparator.width - sidebar.maximumWidth;
ui.position.left = sidebarSeparator.start + scaleFactor * d;
}
if (newSidebarWidth > sidebar.minimumWidth) {
if (sidebarSeparator.chartWidth + d < 200) {
// Chart is now too small, but we have room to resize the sidebar
d += (200 - (sidebarSeparator.chartWidth + d));
newSidebarWidth = sidebarSeparator.width - d;
ui.position.left = sidebarSeparator.start + scaleFactor * d;
}
} else if (newSidebarWidth < sidebar.minimumWidth) {
if (newSidebarWidth > 100) {
newSidebarWidth = sidebar.minimumWidth
sidebarSeparator.closing = false
} else {
newSidebarWidth = 0
sidebarSeparator.closing = true
}
} else {
sidebarSeparator.closing = false
}
sidebar.container.width(newSidebarWidth);
ui.position.left -= scaleFactor * d
sidebar.tabs.resize();
RED.events.emit("sidebar:resize");
},
stop:function(event,ui) {
sidebarSeparator.dragging = false;
if (sidebarSeparator.closing) {
sidebar.container.removeClass("closing");
if (sidebar.menuToggle) {
RED.menu.setSelected(sidebar.menuToggle,false);
}
sidebar.container.hide()
if (sidebar.container.width() < sidebar.minimumWidth) {
sidebar.container.width(sidebar.defaultWidth);
}
}
RED.events.emit("sidebar:resize");
}
});
var sidebarControls = $('<div><i class="fa fa-chevron-right"></div>').appendTo(separator);
@ -207,7 +211,7 @@ RED.sidebar = (function() {
RED.menu.toggleSelected(sidebar.menuToggle);
})
separator.on("mouseenter", function() {
if (!sidebarSeparator.dragging) {
if (!sidebarSeparator.dragging && !shade.is(":visible")) {
if ( (RED.menu.isSelected(sidebar.menuToggle) && sidebar.direction === 'right') ||
(!RED.menu.isSelected(sidebar.menuToggle) && sidebar.direction === 'left') ) {
sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
@ -218,7 +222,7 @@ RED.sidebar = (function() {
}
})
separator.on("mouseleave", function() {
if (!sidebarSeparator.dragging) {
if (!sidebarSeparator.dragging && !shade.is(":visible")) {
sidebarControls.stop(false,true);
sidebarControls.hide();
}

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

@ -194,6 +194,8 @@
}
function handleWindowResize() {
// TODO: red-ui-sidebar has a width when hidden - so we need to handle that case and set the right pos to its separator
$("#red-ui-editor-stack").css('right', $("#red-ui-sidebar").outerWidth() + 11);
if (stack.length > 0) {
var tray = stack[stack.length-1];
if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) {

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

@ -81,7 +81,7 @@ RED.userSettings = (function() {
});
settingsContent.i18n();
settingsTabs.activateTab("red-ui-settings-tab-"+(initialTab||'view'))
$("#red-ui-sidebar-shade").show();
$(".red-ui-sidebar-shade").show();
},
close: function() {
settingsVisible = false;
@ -90,7 +90,7 @@ RED.userSettings = (function() {
pane.close();
}
});
$("#red-ui-sidebar-shade").hide();
$(".red-ui-sidebar-shade").hide();
},
show: function() {}

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

@ -6973,7 +6973,7 @@ RED.view = (function() {
selectNodes: function(options) {
$("#red-ui-workspace-tabs-shade").show();
$("#red-ui-palette-shade").show();
$("#red-ui-sidebar-shade").show();
$(".red-ui-sidebar-shade").show();
$("#red-ui-header-shade").show();
$("#red-ui-workspace").addClass("red-ui-workspace-select-mode");
@ -6995,7 +6995,7 @@ RED.view = (function() {
clearSelection();
$("#red-ui-workspace-tabs-shade").hide();
$("#red-ui-palette-shade").hide();
$("#red-ui-sidebar-shade").hide();
$(".red-ui-sidebar-shade").hide();
$("#red-ui-header-shade").hide();
$("#red-ui-workspace").removeClass("red-ui-workspace-select-mode");
resetMouseVars();

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

@ -46,15 +46,10 @@ body {
flex-direction: row;
}
#red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade {
#red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, .red-ui-sidebar-shade {
@include mixins.shade;
z-index: 5;
}
#red-ui-sidebar-shade {
left: -8px;
top: -1px;
bottom: -1px;
}
#red-ui-full-shade {
@include mixins.shade;
z-index: 15;

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

@ -128,8 +128,10 @@ button.red-ui-sidebar-header-button-toggle {
border-left: none;
}
.red-ui-sidebar-shade {
@include mixins.shade;
.red-ui-sidebar-separator .red-ui-sidebar-shade {
// Other shades overlay their element so consume pointer events
// Sidebar separator shade is a child element so needs to explicitly block
pointer-events: none;
}