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

Checkpoint

pull/5378/head
Nick O'Leary 2025-12-09 18:05:09 +00:00
parent 04f7c8dc9f
commit e95fdb7fa6
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
5 changed files with 92 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/node_modules/@node-red/editor-client/src/js/ui/common/panels.js vendored
View File

@ -34,6 +34,13 @@ RED.panels = (function() {
$(children[1]).addClass("red-ui-panel");
var separator = $('<div class="red-ui-panels-separator"></div>').insertAfter(children[0]);
if (options.invisibleSeparator) {
if (!vertical) {
throw new Error("invisibleSeparator option is only valid for vertical panels");
}
separator.addClass("red-ui-panels-separator-invisible");
$('<div class="red-ui-panels-separator-handle"></div>').appendTo(separator)
}
var startPosition;
var panelSizes = [];
var modifiedSizes = false;

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

@ -105,9 +105,12 @@ RED.sidebar = (function() {
const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary;
const targetSection = Math.floor(Math.random()*2) === 0 ? 'top' : 'bottom';
options.targetSection = targetSection;
delete options.closeable;
options.wrapper = $('<div>',{style:"height:100%"}).appendTo(targetSidebar.content)
options.wrapper = $('<div>',{style:"height:100%"}).appendTo(targetSidebar.sections[targetSection].content)
options.wrapper.append(options.content);
options.wrapper.hide();
@ -116,7 +119,7 @@ RED.sidebar = (function() {
}
if (options.toolbar) {
targetSidebar.footer.append(options.toolbar);
targetSidebar.sections[targetSection].footer.append(options.toolbar);
$(options.toolbar).hide();
}
var id = options.id;
@ -163,7 +166,7 @@ RED.sidebar = (function() {
RED.sidebar.show(options.id)
}
})
if (targetSidebar.content.children().length === 1) {
if (targetSidebar.sections[targetSection].content.children().length === 1) {
RED.sidebar.show(options.id)
}
targetSidebar.resizeSidebarTabBar()
@ -192,18 +195,18 @@ RED.sidebar = (function() {
function moveTab(id, srcSidebar, targetSidebar) {
const options = knownTabs[id];
options.target = targetSidebar.id;
$(options.wrapper).appendTo(targetSidebar.content);
$(options.wrapper).appendTo(targetSidebar.sections.top.content);
if (options.toolbar) {
targetSidebar.footer.append(options.toolbar);
targetSidebar.sections.top.footer.append(options.toolbar);
}
// Reset the tooltip so its left/right direction is recalculated
options.tabButtonTooltip.delete()
options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action);
if (targetSidebar.content.children().length === 1) {
if (targetSidebar.sections.top.content.children().length === 1) {
RED.sidebar.show(options.id)
}
if (srcSidebar.content.children().length === 0) {
if (srcSidebar.sections.top.content.children().length === 0) {
RED.menu.setSelected(srcSidebar.menuToggle, false);
}
}
@ -482,8 +485,9 @@ RED.sidebar = (function() {
const tabOptions = knownTabs[id];
if (tabOptions) {
const targetSidebar = tabOptions.target === 'secondary' ? sidebars.secondary : sidebars.primary;
targetSidebar.content.children().hide();
targetSidebar.footer.children().hide();
const targetSection = tabOptions.targetSection || 'top'
targetSidebar.sections[targetSection].content.children().hide();
targetSidebar.sections[targetSection].footer.children().hide();
if (tabOptions.onchange) {
tabOptions.onchange.call(tabOptions);
}
@ -510,12 +514,31 @@ RED.sidebar = (function() {
function setupSidebar(sidebar) {
sidebar.container.addClass("red-ui-sidebar").addClass('red-ui-sidebar-' + sidebar.direction);
sidebar.container.width(sidebar.defaultWidth);
sidebar.separator = setupSidebarSeparator(sidebar);
sidebar.tabBar = setupSidebarTabs(sidebar)
sidebar.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.container);
sidebar.footer = $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.container);
sidebar.sections = {};
sidebar.sections.top = {}
sidebar.sections.top.container = $('<div class="red-ui-sidebar-section"></div>').appendTo(sidebar.container);
sidebar.sections.top.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.top.container);
sidebar.sections.top.footer = $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.top.container);
sidebar.sections.bottom = {}
sidebar.sections.bottom.container = $('<div class="red-ui-sidebar-section"></div>').appendTo(sidebar.container);
sidebar.sections.bottom.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.bottom.container);
sidebar.sections.bottom.footer = $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.bottom.container);
sidebar.panels = RED.panels.create({
container: sidebar.container,
invisibleSeparator: true,
resize: function(size1, size2) {
console.log('resize', size1, size2)
}
})
// sidebar.panels.ratio(1)
sidebar.shade = $('<div class="red-ui-sidebar-shade hide"></div>').appendTo(sidebar.container);
sidebar.separator = setupSidebarSeparator(sidebar);
sidebar.tabBar = setupSidebarTabs(sidebar)
}
function init () {
sidebars.primary.container = $("#red-ui-sidebar");

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

@ -42,7 +42,22 @@
cursor: ns-resize;
background-color: var(--red-ui-primary-background);
&:before {
&.red-ui-panels-separator-invisible {
border: none;
height: 0px;
position: relative;
overflow: visible;
.red-ui-panels-separator-handle {
position: absolute;
// background: rgba(255,140,0,0.2);
top: -6px;
left: 0;
width: 100%;
height: 12px;
}
}
&:not(.red-ui-panels-separator-invisible):before {
content: '';
display: block;
width: 100%;

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

@ -24,15 +24,16 @@
background: var(--red-ui-primary-background);
box-sizing: border-box;
z-index: 10;
@include mixins.component-border;
display: flex;
flex-direction: column;
overflow: hidden;
}
.red-ui-sidebar-left {
border-left: none;
border-right: none;
}
.red-ui-sidebar-right {
border-left: none;
border-right: none;
}
@ -42,6 +43,32 @@
flex-grow: 0;
flex-shrink: 0;
}
.red-ui-sidebar-section {
margin: 4px;
display: flex;
flex-direction: column;
min-height: 40px;
background: rgba(0,0,255,0.2);
flex-grow: 1;
border-radius: 8px;
border: 1px solid var(--red-ui-primary-border-color);
// overflow: hidden;
}
.red-ui-sidebar-left .red-ui-sidebar-section {
margin-left: 0
}
.red-ui-sidebar-right .red-ui-sidebar-section {
margin-right: 0
}
.red-ui-sidebar-content-wrapper {
display: flex;
flex-direction: column;
height: 100%;
flex-grow: 1;
flex-shrink: 0;
}
.red-ui-sidebar-content {
position: relative;
background: var(--red-ui-secondary-background);
@ -75,7 +102,7 @@
flex-direction: column;
align-items: center;
z-index: 10;
border: 1px solid var(--red-ui-primary-border-color);
// border: 1px solid var(--red-ui-primary-border-color);
// height: 100%;
&.red-ui-sidebar-left {
@ -109,7 +136,8 @@
.red-ui-sidebar-tab-bar-buttons {
display: flex;
width: 100%;
background: rgba(255, 0, 0, 0.1);
background-color: var(--red-ui-primary-background);
// background: rgba(255, 0, 0, 0.1);
padding: 6px;
box-sizing: border-box;
flex-direction: column;

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

@ -20,8 +20,8 @@
margin: 0;
overflow: hidden;
@include mixins.component-border;
border-left: none;
border-right: none;
border-radius: 8px;
margin: 4px;
transition: left 0.1s ease-in-out;
position: relative;
flex-grow: 1;