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-10 13:34:43 +00:00
parent e95fdb7fa6
commit ef0e67e65f
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
5 changed files with 72 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,6 +45,7 @@ RED.sidebar = (function() {
primary: [],
secondary: []
}
// TODO: move to tabBars
sidebars.primary.tabBar.children('button').each(function() {
const tabId = $(this).attr('data-tab-id');
state.primary.push(tabId);
@ -139,12 +140,17 @@ RED.sidebar = (function() {
knownTabs[options.id] = options;
options.tabButton = $('<button></button>')
// Insert the tab button at the correct index
if (targetTabButtonIndex === -1 || targetTabButtonIndex >= targetSidebar.tabBar.children().length) {
if (targetTabButtonIndex === -1 || targetTabButtonIndex >= targetSidebar.tabBars[targetSection].children().length) {
// Append to end
options.tabButton = $('<button></button>').insertBefore(targetSidebar.tabOverflowButton);
// TODO: quick hack
if (targetSection === 'top') {
options.tabButton = $('<button></button>').insertBefore(targetSidebar.tabOverflowButton);
} else {
options.tabButton = $('<button></button>').appendTo(targetSidebar.tabBars[targetSection]);
}
} else {
// Insert before the item at targetTabButtonIndex
options.tabButton = $('<button></button>').insertBefore(targetSidebar.tabBar.children().eq(targetTabButtonIndex));
options.tabButton = $('<button></button>').insertBefore(targetSidebar.tabBars[targetSection].children().eq(targetTabButtonIndex));
}
options.tabButton.attr('data-tab-id', options.id)
@ -217,12 +223,17 @@ RED.sidebar = (function() {
}
function setupSidebarTabs(sidebar) {
const tabBar = $('<div class="red-ui-sidebar-tab-bar"></div>').addClass('red-ui-sidebar-' + sidebar.direction);
const tabBarButtonsContainer = $('<div class="red-ui-sidebar-tab-bar-buttons"></div>').appendTo(tabBar);
const tabBarButtonsContainerBottom = $('<div class="red-ui-sidebar-tab-bar-buttons"></div>').appendTo(tabBar);
const dummyButton = $('<button><i class="fa fa-rocket"></i></button>').appendTo(tabBarButtonsContainerBottom);
const dummyButton2 = $('<button><i class="fa fa-box"></i></button>').appendTo(tabBarButtonsContainerBottom);
// TODO: make this an API object, not just a jQuery object
sidebar.tabBar = tabBarButtonsContainer;
sidebar.tabBars = {
top: tabBarButtonsContainer,
bottom: tabBarButtonsContainerBottom
}
const tabOverflowButton = $('<button class="red-ui-sidebar-tab-bar-overflow-button"><i class="fa fa-ellipsis-h"></i></button>').appendTo(tabBarButtonsContainer);
sidebar.tabOverflowButton = tabOverflowButton
@ -460,7 +471,8 @@ RED.sidebar = (function() {
if (!state) {
sidebar.container.hide()
sidebar.separator.hide()
sidebar.tabBar.find('button').removeClass('selected')
sidebar.tabBars.top.find('button').removeClass('selected')
sidebar.tabBars.bottom.find('button').removeClass('selected')
} else {
sidebar.container.show()
sidebar.separator.show()
@ -475,7 +487,7 @@ RED.sidebar = (function() {
const sidebar = sidebars[sidebarKey];
let lastTabId = lastSessionSelectedTabs[sidebarKey];
if (!lastTabId) {
lastTabId = sidebar.tabBar.children('button').first().attr('data-tab-id');
lastTabId = sidebar.tabBars.top.children('button').first().attr('data-tab-id');
}
showSidebar(lastTabId, true)
})
@ -496,6 +508,7 @@ RED.sidebar = (function() {
$(tabOptions.toolbar).show();
}
RED.settings.setLocal("last-sidebar-tab-" + targetSidebar.id, tabOptions.id)
// TODO: find which tabBar the button is in
targetSidebar.tabBar.find('button').removeClass('selected')
targetSidebar.tabBar.find('button[data-tab-id="'+id+'"]').addClass('selected')
targetSidebar.activeTab = id
@ -530,6 +543,9 @@ RED.sidebar = (function() {
invisibleSeparator: true,
resize: function(size1, size2) {
console.log('resize', size1, size2)
// sidebar.tabBarTop.outerHeight(size1);
// sidebar.tabBarBottom.outerHeight(size2);
// RED.events.emit("sidebar:resize");
}
})
// sidebar.panels.ratio(1)
@ -537,7 +553,7 @@ RED.sidebar = (function() {
sidebar.separator = setupSidebarSeparator(sidebar);
sidebar.tabBar = setupSidebarTabs(sidebar)
setupSidebarTabs(sidebar)
}
function init () {

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

@ -253,14 +253,14 @@ $deploy-button-color-disabled: #999;
$deploy-button-background: #8C101C;
$deploy-button-background-hover: #6E0A1E;
$deploy-button-background-active: #4C0A17;
$deploy-button-background-disabled: #444;
$deploy-button-background-disabled: $workspace-button-background;
$deploy-button-background-disabled-hover: #555;
$header-background: #000;
$header-background: $primary-background;
$header-button-background-active: #121212;
$header-accent: #C02020;
$header-menu-color: #eee;
$header-menu-color: $primary-text-color;
$header-menu-color-disabled: #666;
$header-menu-heading-color: #fff;
$header-menu-sublabel-color: #aeaeae;

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

@ -34,7 +34,7 @@
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid var(--red-ui-header-accent);
// border-bottom: 2px solid var(--red-ui-header-accent);
padding-top: 2px;
span.red-ui-header-logo {

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

@ -21,7 +21,11 @@
flex-grow: 0;
flex-shrink: 0;
width: 315px;
background: var(--red-ui-primary-background);
margin: 4px 0;
@include mixins.component-border;
border-left: none;
border-right: none;
background: var(--red-ui-secondary-background);
box-sizing: border-box;
z-index: 10;
display: flex;
@ -29,12 +33,12 @@
overflow: hidden;
}
.red-ui-sidebar-left {
border-left: none;
border-right: none;
background: var(--red-ui-primary-background);
margin: 0;
border: none;
}
.red-ui-sidebar-right {
border-left: none;
border-right: none;
margin-left: 0;
}
.red-ui-sidebar-footer {
@ -51,12 +55,12 @@
min-height: 40px;
background: rgba(0,0,255,0.2);
flex-grow: 1;
border-radius: 8px;
border-radius: 6px;
border: 1px solid var(--red-ui-primary-border-color);
// overflow: hidden;
}
.red-ui-sidebar-left .red-ui-sidebar-section {
margin-left: 0
margin-left: 0;
}
.red-ui-sidebar-right .red-ui-sidebar-section {
margin-right: 0
@ -101,15 +105,23 @@
display: flex;
flex-direction: column;
align-items: center;
margin: 4px;
@include mixins.component-border;
z-index: 10;
overflow: hidden;
// border: 1px solid var(--red-ui-primary-border-color);
// height: 100%;
&.red-ui-sidebar-left {
border-left: none;
border: none;
margin-right: 0;
background: var(--red-ui-primary-background);
}
&.red-ui-sidebar-right {
border-right: none;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
margin-left: 0;
border-left: none;
}
button {
@ -136,7 +148,7 @@
.red-ui-sidebar-tab-bar-buttons {
display: flex;
width: 100%;
background-color: var(--red-ui-primary-background);
// background-color: var(--red-ui-primary-background);
// background: rgba(255, 0, 0, 0.1);
padding: 6px;
box-sizing: border-box;

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

@ -20,8 +20,10 @@
margin: 0;
overflow: hidden;
@include mixins.component-border;
border-radius: 8px;
margin: 4px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-right: none;
margin: 4px 0 4px;
transition: left 0.1s ease-in-out;
position: relative;
flex-grow: 1;
@ -30,7 +32,7 @@
#red-ui-workspace-chart {
overflow: auto;
position: absolute;
bottom:26px;
bottom:0;
top: 35px;
left:0px;
right:0px;
@ -39,14 +41,16 @@
touch-action: none;
padding: 0;
margin: 0;
border-right: 1px solid var(--red-ui-primary-border-color);
// border-top-right-radius: px;
// Hide scrollbars - to be done in a future iteration
// scrollbar-width: none; /* Firefox */
// -ms-overflow-style: none; /* Internet Explorer 10+ */
// &::-webkit-scrollbar { /* WebKit */
// width: 0;
// height: 0;
// }
// Hide scrollbars
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
&::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
// Reset SVG default margins
> svg {
@ -169,6 +173,12 @@
fill: var(--red-ui-view-background);
}
#red-ui-workspace-footer {
border: none;
background: none;
bottom: 4px;
padding: 0;
}
.red-ui-component-footer {
@include mixins.component-footer;
@ -211,13 +221,13 @@ button.red-ui-footer-button-toggle {
bottom: 0;
}
.red-ui-statusbar-bucket-left {
left: 10px;
left: 6px;
.red-ui-statusbar-widget:first-child {
margin-left: 0;
}
}
.red-ui-statusbar-bucket-right {
right: 10px;
right: 6px;
.red-ui-statusbar-widget:last-child {
margin-right: 0;
}