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

Merge pull request #5318 from node-red/5317-sidebar-panels 

Update Sidebar UX
pull/5375/head
Nick O'Leary 2025-12-04 14:46:01 +00:00 committed by GitHub
parent 1b2ddf3bdf 192a863ba6
commit be4d5a4cc2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 597 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/node_modules/@node-red/editor-client/src/images/explorer.svg vendored Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 23.812 23.813"><g style="display:inline" transform="translate(-68.711 -174.66)scale(.26458)"><rect width="50" height="15" x="265" y="665.359" ry="5" style="fill:#000"/><rect width="50" height="15" x="295" y="690.359" ry="5" style="display:inline;fill:#000;stroke-width:.822633"/><rect width="50" height="15" x="295" y="710.359" ry="5" style="display:inline;fill:#000;stroke-width:.822633"/><rect width="50" height="15" x="295" y="730.359" ry="5" style="display:inline;fill:#000;stroke-width:.822633"/><path d="M295 696.359h-13v-16h-3.061l.061 57 2 2h14v-3h-12l-1-1v-16h13v-3h-13v-17h13" style="fill:#000"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 692 B

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

@ -843,7 +843,7 @@ var RED = (function() {
RED.user.init();
RED.notifications.init();
RED.library.init();
RED.palette.init();
RED.sidebar.init();
RED.eventLog.init();
if (RED.settings.get('externalModules.palette.allowInstall', true) !== false) {
@ -852,7 +852,6 @@ var RED = (function() {
console.log("Palette editor disabled");
}
RED.sidebar.init();
if (RED.settings.theme("projects.enabled",false)) {
RED.projects.init();
@ -869,23 +868,34 @@ var RED = (function() {
RED.diagnostics.init();
RED.diff.init();
RED.deploy.init(RED.settings.theme("deployButton",null));
RED.keyboard.init(() => {
buildMainMenu();
RED.keyboard.init(buildMainMenu);
RED.envVar.init();
// Register the core set of sidebar panels now the menu is ready to receive items
RED.palette.init();
RED.sidebar.info.init();
RED.sidebar.help.init();
RED.sidebar.config.init();
RED.sidebar.context.init();
// hide sidebar at start if screen rather narrow...
if ($("#red-ui-editor").width() < 600) { RED.menu.setSelected("menu-item-sidebar", false); }
RED.nodes.init();
RED.runtime.init()
RED.envVar.init();
if (RED.settings.theme("multiplayer.enabled",false)) {
RED.multiplayer.init()
}
RED.comms.connect();
RED.nodes.init();
RED.runtime.init()
$("#red-ui-main-container").show();
if (RED.settings.theme("multiplayer.enabled",false)) {
RED.multiplayer.init()
}
RED.comms.connect();
loadPluginList();
$("#red-ui-main-container").show();
RED.events.emit("sidebar:resize")
loadPluginList();
});
}
@ -894,13 +904,18 @@ var RED = (function() {
var logo = $('<span class="red-ui-header-logo"></span>').appendTo(header);
$('<ul class="red-ui-header-toolbar hide"></ul>').appendTo(header);
$('<div id="red-ui-header-shade" class="hide"></div>').appendTo(header);
$('<div id="red-ui-main-container" class="red-ui-sidebar-closed hide">'+
$('<div id="red-ui-main-container">'+
'<div id="red-ui-sidebar-left"></div>'+
'<div id="red-ui-workspace"></div>'+
'<div id="red-ui-editor-stack" tabindex="-1"></div>'+
'<div id="red-ui-palette"></div>'+
'<div id="red-ui-sidebar"></div>'+
'<div id="red-ui-sidebar-separator"></div>'+
'<div id="red-ui-editor-stack" tabindex="-1"></div>'+
// '<div id="red-ui-palette"></div>'+
'</div>').appendTo(options.target);
// Don't use the `hide` class on this container, as the show reverts it to block rather
// than the expected flex. So hide via jQuery as it'll track the show state internally.
options.target.find('#red-ui-main-container').hide()
$('<div id="red-ui-editor-plugin-configs"></div>').appendTo(options.target);
$('<div id="red-ui-editor-node-configs"></div>').appendTo(options.target);
$('<div id="red-ui-full-shade" class="hide"></div>').appendTo(options.target);

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 {

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

@ -323,7 +323,7 @@ RED.menu = (function() {
} else {
for (var i=0;i<groupItems.length;i++) {
var groupItem = groupItems[i];
var label = $(groupItem).find(".red-ui-menu-label").html();
var label = $(groupItem).find(".red-ui-menu-label span").text();
if (opt.label < label) {
$(groupItem).before(item);
break;

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

@ -545,7 +545,6 @@ RED.tabs = (function() {
ul.find("li.red-ui-tab.active .red-ui-tab-label").css({paddingLeft:""})
}
}
}
ul.find("li.red-ui-tab a")
@ -1045,7 +1044,8 @@ RED.tabs = (function() {
pinnedButtons["__menu__"].appendTo(collapsedButtonsRow);
updateTabWidths();
}
}
},
container: wrapper
}
return tabAPI;
}

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() {

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

@ -33,7 +33,6 @@ RED.palette = (function() {
];
var categoryContainers = {};
var sidebarControls;
let paletteState = { filter: "", collapsed: [] };
@ -310,6 +309,7 @@ RED.palette = (function() {
width: "300px",
content: "hi",
delay: { show: 750, hide: 50 }
// direction: "left"
});
d.data('popover',popover);
@ -332,7 +332,8 @@ RED.palette = (function() {
revert: 'invalid',
revertDuration: 200,
containment:'#red-ui-main-container',
start: function() {
start: function(e, ui) {
ui.helper.css('z-index', 1000);
dropEnabled = !(RED.nodes.workspace(RED.workspaces.active())?.locked);
paletteWidth = $("#red-ui-palette").width();
paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top;
@ -358,7 +359,9 @@ RED.palette = (function() {
},
drag: function(e,ui) {
var paletteNode = getPaletteNode(nt);
ui.originalPosition.left = paletteNode.offset().left;
console.log(ui.originalPosition.left, paletteNode.offset().left)
// ui.originalPosition.left = paletteNode.offset().left;
// console.log(paletteNode.offset())
if (dropEnabled) {
mouseX = ui.position.left - paletteWidth + (ui.helper.width()/2) + chart.scrollLeft();
mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop() + 10;
@ -607,11 +610,24 @@ RED.palette = (function() {
function init() {
const content = $('<div id="red-ui-palette" class="red-ui-sidebar-tab-content">')
const toolbar = $('<div></div>');
RED.sidebar.addTab({
target: 'secondary',
id: "palette",
label: "Palette",
name: "Palette",
icon: "red/images/subflow_tab.svg",
content,
toolbar,
pinned: true,
enableOnEdit: true
});
$('<img src="red/images/spin.svg" class="red-ui-palette-spinner hide"/>').appendTo("#red-ui-palette");
$('<div id="red-ui-palette-search" class="red-ui-palette-search hide"><input type="text" data-i18n="[placeholder]palette.filter"></input></div>').appendTo("#red-ui-palette");
$('<div id="red-ui-palette-container" class="red-ui-palette-scroll hide"></div>').appendTo("#red-ui-palette");
$('<div class="red-ui-component-footer"></div>').appendTo("#red-ui-palette");
$('<div id="red-ui-palette-shade" class="hide"></div>').appendTo("#red-ui-palette");
// $('<div id="red-ui-palette-shade" class="hide"></div>').appendTo("#red-ui-palette");
$("#red-ui-palette > .red-ui-palette-spinner").show();
@ -670,19 +686,6 @@ RED.palette = (function() {
}
});
sidebarControls = $('<div class="red-ui-sidebar-control-left"><i class="fa fa-chevron-left"></i></div>').appendTo($("#red-ui-palette"));
RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette");
sidebarControls.on("click", function() {
RED.menu.toggleSelected("menu-item-palette");
})
$("#red-ui-palette").on("mouseenter", function() {
sidebarControls.toggle("slide", { direction: "left" }, 200);
})
$("#red-ui-palette").on("mouseleave", function() {
sidebarControls.stop(false,true);
sidebarControls.hide();
})
var userCategories = [];
if (RED.settings.paletteCategories) {
userCategories = RED.settings.paletteCategories;
@ -704,7 +707,7 @@ RED.palette = (function() {
}
});
var paletteFooterButtons = $('<span class="button-group"></span>').appendTo("#red-ui-palette .red-ui-component-footer");
var paletteFooterButtons = $('<span class="button-group"></span>').appendTo(toolbar);
var paletteCollapseAll = $('<button type="button" class="red-ui-footer-button"><i class="fa fa-angle-double-up"></i></button>').appendTo(paletteFooterButtons);
paletteCollapseAll.on("click", function(e) {
e.preventDefault();
@ -727,13 +730,7 @@ RED.palette = (function() {
});
RED.popover.tooltip(paletteExpandAll,RED._('palette.actions.expand-all'));
RED.actions.add("core:toggle-palette", function(state) {
if (state === undefined) {
RED.menu.toggleSelected("menu-item-palette");
} else {
togglePalette(state);
}
});
try {
paletteState = JSON.parse(RED.settings.getLocal("palette-state") || '{"filter":"", "collapsed": []}');
@ -751,18 +748,6 @@ RED.palette = (function() {
}, 10000)
}
function togglePalette(state) {
if (!state) {
$("#red-ui-main-container").addClass("red-ui-palette-closed");
sidebarControls.hide();
sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
} else {
$("#red-ui-main-container").removeClass("red-ui-palette-closed");
sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
}
setTimeout(function() { $(window).trigger("resize"); } ,200);
}
function getCategories() {
var categories = [];
$("#red-ui-palette-container .red-ui-palette-category").each(function(i,d) {

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();

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

@ -14,19 +14,56 @@
* limitations under the License.
**/
RED.sidebar = (function() {
const sidebars = {
primary: {
id: 'primary',
direction: 'right',
menuToggle: 'menu-item-sidebar',
minimumWidth: 180,
maximumWidth: 800,
defaultWidth: 300
},
secondary: {
id: 'secondary',
direction: 'left',
menuToggle: 'menu-item-palette',
minimumWidth: 180,
maximumWidth: 800,
// Make LH side slightly narrower by default as its the palette that doesn't require a lot of width
defaultWidth: 210
}
}
const defaultSidebarConfiguration = {
primary: ['info','debug','help','config','context'],
secondary: ['palette']
}
const knownTabs = {};
function exportSidebarState () {
const state = {
primary: [],
secondary: []
}
sidebars.primary.tabBar.children('button').each(function() {
const tabId = $(this).attr('data-tab-id');
state.primary.push(tabId);
})
sidebars.secondary.tabBar.children('button').each(function() {
const tabId = $(this).attr('data-tab-id');
state.secondary.push(tabId);
})
RED.settings.set('editor.sidebar.state', state)
}
//$('#sidebar').tabs();
var sidebar_tabs;
var knownTabs = {};
// We store the current sidebar tab id in localStorage as 'last-sidebar-tab'
// This is restored when the editor is reloaded.
// We use sidebar_tabs.onchange to update localStorage. However that will
// We use sidebars.primary.tabs.onchange to update localStorage. However that will
// also get triggered when the first tab gets added to the tabs - typically
// the 'info' tab. So we use the following variable to store the retrieved
// value from localStorage before we start adding the actual tabs
var lastSessionSelectedTab = null;
let lastSessionSelectedTabs = {}
function addTab(title,content,closeable,visible) {
var options;
@ -43,10 +80,34 @@ RED.sidebar = (function() {
} else if (typeof title === "object") {
options = title;
}
options.target = options.target || 'primary';
let targetTabButtonIndex = -1 // Append to end by default
// Check the saved sidebar state to see if this tab should be added to the primary or secondary sidebar
const savedState = RED.settings.get('editor.sidebar.state', defaultSidebarConfiguration)
if (savedState) {
let targetSidebar = null
let sidebarState
if (savedState.secondary.includes(options.id)) {
options.target = 'secondary'
sidebarState = savedState.secondary
targetSidebar = sidebars.secondary
} else if (savedState.primary.includes(options.id)) {
options.target = 'primary'
sidebarState = savedState.primary
targetSidebar = sidebars.primary
}
if (targetSidebar) {
// This tab was found in the saved sidebar state. Now find the target position for the tab button
targetTabButtonIndex = sidebarState.indexOf(options.id)
}
}
const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary;
delete options.closeable;
options.wrapper = $('<div>',{style:"height:100%"}).appendTo("#red-ui-sidebar-content")
options.wrapper = $('<div>',{style:"height:100%"}).appendTo(targetSidebar.content)
options.wrapper.append(options.content);
options.wrapper.hide();
@ -55,11 +116,12 @@ RED.sidebar = (function() {
}
if (options.toolbar) {
$("#red-ui-sidebar-footer").append(options.toolbar);
targetSidebar.footer.append(options.toolbar);
$(options.toolbar).hide();
}
var id = options.id;
// console.log('menu', options.id, options.name)
RED.menu.addItem("menu-item-view-menu",{
id:"menu-item-view-menu-"+options.id,
label:options.name,
@ -72,208 +134,315 @@ RED.sidebar = (function() {
options.iconClass = options.iconClass || "fa fa-square-o"
knownTabs[options.id] = options;
options.tabButton = $('<button></button>')
// Insert the tab button at the correct index
if (targetTabButtonIndex === -1 || targetTabButtonIndex >= targetSidebar.tabBar.children().length) {
// Append to end
options.tabButton = $('<button></button>').appendTo(targetSidebar.tabBar);
} else {
// Insert before the item at targetTabButtonIndex
options.tabButton = $('<button></button>').insertBefore(targetSidebar.tabBar.children().eq(targetTabButtonIndex));
}
options.tabButton.attr('data-tab-id', options.id)
if (options.visible !== false) {
sidebar_tabs.addTab(knownTabs[options.id]);
options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action);
if (options.icon) {
$('<i>',{class: 'red-ui-sidebar-tab-icon', style:"mask-image: url("+options.icon+"); -webkit-mask-image: url("+options.icon+");"}).appendTo(options.tabButton);
} else if (options.iconClass) {
$('<i>',{class:options.iconClass}).appendTo(options.tabButton);
}
options.tabButton.on('mouseup', function(evt) {
if (draggingTabButton) {
draggingTabButton = false
return
}
const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary;
if (targetSidebar.activeTab === options.id && RED.menu.isSelected(targetSidebar.menuToggle)) {
RED.menu.setSelected(targetSidebar.menuToggle, false);
} else {
RED.sidebar.show(options.id)
}
})
if (targetSidebar.content.children().length === 1) {
RED.sidebar.show(options.id)
}
}
function removeTab(id) {
sidebar_tabs.removeTab(id);
$(knownTabs[id].wrapper).remove();
if (knownTabs[id].footer) {
knownTabs[id].footer.remove();
if (knownTabs[id]) {
const targetSidebar = knownTabs[id].target === 'secondary' ? sidebars.secondary : sidebars.primary;
$(knownTabs[id].wrapper).remove();
if (knownTabs[id].footer) {
knownTabs[id].footer.remove();
}
targetSidebar.tabBar.find('button[data-tab-id="'+id+'"]').remove()
RED.menu.removeItem("menu-item-view-menu-"+id);
if (knownTabs[id].onremove) {
knownTabs[id].onremove.call(knownTabs[id]);
}
delete knownTabs[id];
const firstTab = targetSidebar.tabBar.find('button').first().attr('data-tab-id');
if (firstTab) {
RED.sidebar.show(firstTab);
}
}
delete knownTabs[id];
RED.menu.removeItem("menu-item-view-menu-"+id);
}
var sidebarSeparator = {};
sidebarSeparator.dragging = false;
function moveTab(id, srcSidebar, targetSidebar) {
const options = knownTabs[id];
options.target = targetSidebar.id;
$(options.wrapper).appendTo(targetSidebar.content);
if (options.toolbar) {
targetSidebar.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);
function setupSidebarSeparator() {
$("#red-ui-sidebar-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.chartWidth = $("#red-ui-workspace").width();
sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2;
sidebarSeparator.dragging = true;
if (targetSidebar.content.children().length === 1) {
RED.sidebar.show(options.id)
}
if (srcSidebar.content.children().length === 0) {
RED.menu.setSelected(srcSidebar.menuToggle, false);
}
}
if (!RED.menu.isSelected("menu-item-sidebar")) {
sidebarSeparator.opening = true;
var newChartRight = 7;
$("#red-ui-sidebar").addClass("closing");
$("#red-ui-workspace").css("right",newChartRight);
$("#red-ui-editor-stack").css("right",newChartRight+1);
$("#red-ui-sidebar").width(0);
RED.menu.setSelected("menu-item-sidebar",true);
RED.events.emit("sidebar:resize");
}
sidebarSeparator.width = $("#red-ui-sidebar").width();
},
drag: function(event,ui) {
var d = ui.position.left-sidebarSeparator.start;
var newSidebarWidth = sidebarSeparator.width-d;
if (sidebarSeparator.opening) {
newSidebarWidth -= 3;
let draggingTabButton = false
function setupSidebarTabs(sidebar) {
const tabBar = $('<div class="red-ui-sidebar-tab-bar"></div>').addClass('red-ui-sidebar-' + sidebar.direction);
tabBar.attr('id', sidebar.container.attr('id') + '-tab-bar')
tabBar.data('sidebar', sidebar.id)
if (sidebar.direction === 'right') {
tabBar.insertAfter(sidebar.container);
} else if (sidebar.direction === 'left') {
tabBar.insertBefore(sidebar.container);
}
tabBar.sortable({
distance: 10,
cancel: false,
placeholder: "red-ui-sidebar-tab-bar-button-placeholder",
connectWith: ".red-ui-sidebar-tab-bar",
start: function(event, ui) {
// Remove the tooltip so it doesn't display unexpectedly whilst dragging
const tabId = ui.item.attr('data-tab-id');
const options = knownTabs[tabId];
options.tabButtonTooltip.delete()
draggingTabButton = true
tabBar.css('z-index','inherit')
},
stop: function(event, ui) {
// Restore the tooltip
const tabId = ui.item.attr('data-tab-id');
const options = knownTabs[tabId];
options.tabButtonTooltip.delete()
options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action);
// Save the sidebar state
exportSidebarState()
tabBar.css('z-index','')
},
receive: function(event, ui) {
// Tab has been moved from one sidebar to another
const src = sidebars[ui.sender.data('sidebar')]
const dest = sidebars[$(this).data('sidebar')]
const tabId = ui.item.attr('data-tab-id');
moveTab(tabId, src, dest)
if (ui.item.hasClass('selected')) {
const firstTab = src.tabBar.find('button').first().attr('data-tab-id');
if (firstTab) {
RED.sidebar.show(firstTab);
}
}
RED.sidebar.show(tabId)
}
})
// $(window).on("resize", function () {
// const lastChild = tabBar.children().last();
// if (lastChild.length > 0) {
// const tabBarHeight = tabBar.height();
// const lastChildBottom = lastChild.position().top + lastChild.outerHeight();
// if (lastChildBottom > tabBarHeight) {
// console.log('overflow')
// }
// }
// })
return tabBar
}
function setupSidebarSeparator(sidebar) {
const separator = $('<div class="red-ui-sidebar-separator"></div>');
separator.attr('id', sidebar.container.attr('id') + '-separator')
$('<div class="red-ui-sidebar-shade hide"></div>').appendTo(separator);
$('<div class="red-ui-sidebar-separator-handle"></div>').appendTo(separator);
let scaleFactor = 1;
if (sidebar.direction === 'right') {
separator.insertBefore(sidebar.container);
} else if (sidebar.direction === 'left') {
scaleFactor = -1;
separator.insertAfter(sidebar.container);
}
// Track sidebar state whilst dragging
const sidebarSeparator = {}
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;
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 < 150) {
if (!sidebarSeparator.closing) {
$("#red-ui-sidebar").addClass("closing");
sidebarSeparator.closing = true;
}
if (!sidebarSeparator.opening) {
newSidebarWidth = 150;
ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start);
d = ui.position.left-sidebarSeparator.start;
}
} else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
sidebarSeparator.closing = false;
$("#red-ui-sidebar").removeClass("closing");
}
var newChartRight = sidebarSeparator.chartRight-d;
$("#red-ui-workspace").css("right",newChartRight);
$("#red-ui-editor-stack").css("right",newChartRight+1);
$("#red-ui-sidebar").width(newSidebarWidth);
sidebar_tabs.resize();
RED.events.emit("sidebar:resize");
},
stop:function(event,ui) {
sidebarSeparator.dragging = false;
if (sidebarSeparator.closing) {
$("#red-ui-sidebar").removeClass("closing");
RED.menu.setSelected("menu-item-sidebar",false);
if ($("#red-ui-sidebar").width() < 180) {
$("#red-ui-sidebar").width(180);
$("#red-ui-workspace").css("right",187);
$("#red-ui-editor-stack").css("right",188);
}
}
$("#red-ui-sidebar-separator").css("left","auto");
$("#red-ui-sidebar-separator").css("right",($("#red-ui-sidebar").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 sidebarControls = $('<div class="red-ui-sidebar-control-right"><i class="fa fa-chevron-right"</div>').appendTo($("#red-ui-sidebar-separator"));
sidebarControls.on("click", function() {
sidebarControls.hide();
RED.menu.toggleSelected("menu-item-sidebar");
})
$("#red-ui-sidebar-separator").on("mouseenter", function() {
if (!sidebarSeparator.dragging) {
if (RED.menu.isSelected("menu-item-sidebar")) {
sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
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 {
sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left");
sidebarSeparator.closing = false
}
sidebarControls.toggle("slide", { direction: "right" }, 200);
}
})
$("#red-ui-sidebar-separator").on("mouseleave", function() {
if (!sidebarSeparator.dragging) {
sidebarControls.stop(false,true);
sidebarControls.hide();
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()
sidebar.separator.hide()
if (sidebar.container.width() < sidebar.minimumWidth) {
sidebar.container.width(sidebar.defaultWidth);
}
}
RED.events.emit("sidebar:resize");
}
});
return separator
}
function toggleSidebar(state) {
function toggleSidebar(sidebar, state) {
if (!state) {
$("#red-ui-main-container").addClass("red-ui-sidebar-closed");
sidebar.container.hide()
sidebar.separator.hide()
sidebar.tabBar.find('button').removeClass('selected')
} else {
$("#red-ui-main-container").removeClass("red-ui-sidebar-closed");
sidebar_tabs.resize();
sidebar.container.show()
sidebar.separator.show()
}
RED.events.emit("sidebar:resize");
}
function showSidebar(id, skipShowSidebar) {
if (id === ":first") {
id = lastSessionSelectedTab || RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"])[0]
// Show the last selected tab for each sidebar
Object.keys(sidebars).forEach(function(sidebarKey) {
const sidebar = sidebars[sidebarKey];
let lastTabId = lastSessionSelectedTabs[sidebarKey];
if (!lastTabId) {
lastTabId = sidebar.tabBar.children('button').first().attr('data-tab-id');
}
showSidebar(lastTabId, true)
})
return
}
if (id) {
if (!containsTab(id) && knownTabs[id]) {
sidebar_tabs.addTab(knownTabs[id]);
}
sidebar_tabs.activateTab(id);
if (!skipShowSidebar && !RED.menu.isSelected("menu-item-sidebar")) {
RED.menu.setSelected("menu-item-sidebar",true);
const tabOptions = knownTabs[id];
if (tabOptions) {
const targetSidebar = tabOptions.target === 'secondary' ? sidebars.secondary : sidebars.primary;
targetSidebar.content.children().hide();
targetSidebar.footer.children().hide();
if (tabOptions.onchange) {
tabOptions.onchange.call(tabOptions);
}
$(tabOptions.wrapper).show();
if (tabOptions.toolbar) {
$(tabOptions.toolbar).show();
}
RED.settings.setLocal("last-sidebar-tab-" + targetSidebar.id, tabOptions.id)
targetSidebar.tabBar.find('button').removeClass('selected')
targetSidebar.tabBar.find('button[data-tab-id="'+id+'"]').addClass('selected')
targetSidebar.activeTab = id
if (!skipShowSidebar && !RED.menu.isSelected(targetSidebar.menuToggle)) {
RED.menu.setSelected(targetSidebar.menuToggle,true);
}
}
}
}
function containsTab(id) {
return sidebar_tabs.contains(id);
return sidebars.primary.tabs.contains(id);
}
function init () {
setupSidebarSeparator();
sidebar_tabs = RED.tabs.create({
element: $('<ul id="red-ui-sidebar-tabs"></ul>').appendTo("#red-ui-sidebar"),
onchange:function(tab) {
$("#red-ui-sidebar-content").children().hide();
$("#red-ui-sidebar-footer").children().hide();
if (tab.onchange) {
tab.onchange.call(tab);
}
$(tab.wrapper).show();
if (tab.toolbar) {
$(tab.toolbar).show();
}
RED.settings.setLocal("last-sidebar-tab", tab.id)
},
onremove: function(tab) {
$(tab.wrapper).hide();
if (tab.onremove) {
tab.onremove.call(tab);
}
},
// minimumActiveTabWidth: 70,
collapsible: true,
onreorder: function(order) {
RED.settings.set("editor.sidebar.order",order);
},
order: RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"])
// scrollable: true
});
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.shade = $('<div class="red-ui-sidebar-shade hide"></div>').appendTo(sidebar.container);
$('<div id="red-ui-sidebar-content"></div>').appendTo("#red-ui-sidebar");
$('<div id="red-ui-sidebar-footer" class="red-ui-component-footer"></div>').appendTo("#red-ui-sidebar");
$('<div id="red-ui-sidebar-shade" class="hide"></div>').appendTo("#red-ui-sidebar");
}
function init () {
sidebars.primary.container = $("#red-ui-sidebar");
setupSidebar(sidebars.primary)
sidebars.secondary.container = $("#red-ui-sidebar-left");
setupSidebar(sidebars.secondary)
RED.actions.add("core:toggle-sidebar",function(state){
if (state === undefined) {
RED.menu.toggleSelected("menu-item-sidebar");
RED.menu.toggleSelected(sidebars.primary.menuToggle);
} else {
toggleSidebar(state);
toggleSidebar(sidebars.primary, state);
}
});
RED.actions.add("core:toggle-palette", function(state) {
if (state === undefined) {
RED.menu.toggleSelected(sidebars.secondary.menuToggle);
} else {
toggleSidebar(sidebars.secondary, state);
}
});
RED.popover.tooltip($("#red-ui-sidebar-separator").find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar");
lastSessionSelectedTab = RED.settings.getLocal("last-sidebar-tab")
RED.sidebar.info.init();
RED.sidebar.help.init();
RED.sidebar.config.init();
RED.sidebar.context.init();
// hide info bar at start if screen rather narrow...
if ($("#red-ui-editor").width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); }
// Remember the last selected tab for each sidebar before
// the tabs are readded causing the state to get updated
Object.keys(sidebars).forEach(function(sidebarKey) {
lastSessionSelectedTabs[sidebarKey] = RED.settings.getLocal("last-sidebar-tab-" + sidebarKey)
})
}
return {

5
packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js vendored
View File

@ -119,9 +119,10 @@ RED.sidebar.info = (function() {
RED.sidebar.addTab({
id: "info",
// target: "secondary",
label: RED._("sidebar.info.label"),
name: RED._("sidebar.info.name"),
iconClass: "fa fa-info",
icon: "red/images/explorer.svg",
action:"core:show-info-tab",
content: content,
pinned: true,
@ -157,6 +158,8 @@ RED.sidebar.info = (function() {
tips.stop();
}
resizeStack();
}
function show() {

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

@ -194,6 +194,8 @@
}
function handleWindowResize() {
let sidebarWidth = $("#red-ui-sidebar").is(":visible") ? $("#red-ui-sidebar").outerWidth() + $("#red-ui-sidebar-separator").outerWidth() : 0;
$("#red-ui-editor-stack").css('right', sidebarWidth + $("#red-ui-sidebar-tab-bar").outerWidth() + 1);
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

@ -7798,7 +7798,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");
@ -7820,7 +7820,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();

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

@ -44,17 +44,14 @@ html, body {
position: absolute;
top: var(--red-ui-header-height); left:0; bottom: 0; right:0;
overflow:hidden;
display: flex;
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;

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

@ -70,6 +70,7 @@
text-align: center;
margin:0;
cursor:pointer;
border-radius: 3px;
&.selected:not(.disabled):not(:disabled) {
color: var(--red-ui-workspace-button-color-selected) !important;

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

@ -18,54 +18,42 @@
#red-ui-palette{
position: absolute;
top: 0px;
bottom: 0px;
left:0px;
// position: absolute;
// top: 0px;
// bottom: 0px;
// left:0px;
background: var(--red-ui-primary-background);
width: 180px;
// width: 180px;
text-align: center;
@include mixins.disable-selection;
@include mixins.component-border;
transition: width 0.2s ease-in-out;
&:before {
content: '';
top: 0px;
bottom: 0px;
right: 0px;
width: 7px;
height: 100%;
z-index: 4;
position: absolute;
-webkit-mask-image: url(images/grip.svg);
mask-image: url(images/grip.svg);
-webkit-mask-size: auto;
mask-size: auto;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--red-ui-grip-color);
}
}
.red-ui-palette-closed {
#red-ui-palette {
width: 8px;
.red-ui-component-footer {
display: none;
}
}
#red-ui-palette-search { display: none; }
#red-ui-palette-container { display: none; }
// &:before {
// content: '';
// top: 0px;
// bottom: 0px;
// right: 0px;
// width: 7px;
// height: 100%;
// z-index: 4;
// position: absolute;
// -webkit-mask-image: url(images/grip.svg);
// mask-image: url(images/grip.svg);
// -webkit-mask-size: auto;
// mask-size: auto;
// -webkit-mask-position: 50% 50%;
// mask-position: 50% 50%;
// -webkit-mask-repeat: no-repeat;
// mask-repeat: no-repeat;
// background-color: var(--red-ui-grip-color);
// }
}
.red-ui-palette-scroll {
position: absolute;
top: 35px;
right: 0;
bottom: 25px;
bottom: 0;
left:0;
padding: 0;
overflow-y: auto;
@ -91,6 +79,11 @@
.red-ui-palette-content {
background: var(--red-ui-palette-content-background);
padding: 3px;
> div {
display: flex;
flex-direction: column;
align-items: center;
}
}
.red-ui-palette-header {
@ -144,7 +137,7 @@
// display: inline-block;
cursor: move;
background: var(--red-ui-secondary-background);
margin: 10px auto;
margin: 5px 0;
height: 25px;
border-radius: 5px;
border: 1px solid var(--red-ui-node-border);
@ -153,7 +146,7 @@
width: 120px;
background-size: contain;
position: relative;
z-index: 4;
z-index: 5;
&:not(.red-ui-palette-node-config):not(.red-ui-palette-node-small):first-child {
margin-top: 15px;
}

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

@ -16,65 +16,124 @@
* limitations under the License.
**/
#red-ui-sidebar {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
.red-ui-sidebar {
position: relative;
flex-grow: 0;
flex-shrink: 0;
width: 315px;
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;
}
.red-ui-sidebar-right {
border-right: none;
}
#red-ui-sidebar.closing {
border-style: dashed;
}
#red-ui-sidebar-content {
position: absolute;
.red-ui-sidebar > .red-ui-tabs {
flex-grow: 0;
flex-shrink: 0;
}
.red-ui-sidebar-footer {
@include mixins.component-footer;
position: relative;
flex-grow: 0;
flex-shrink: 0;
}
.red-ui-sidebar-content {
position: relative;
background: var(--red-ui-secondary-background);
top: 35px;
right: 0;
bottom: 25px;
left: 0px;
flex-grow: 1;
overflow-y: auto;
}
#red-ui-sidebar-separator {
position: absolute;
top: 5px;
right: 315px;
bottom:10px;
width: 7px;
.red-ui-sidebar-separator {
width: 0;
flex: 0 0 auto;
// z-index: 11;
background-color: var(--red-ui-primary-background);
background-color: var(--red-ui-view-background);
overflow: visible;
cursor: col-resize;
&:before {
content: '';
display: block;
width: 100%;
.red-ui-sidebar-separator-handle {
position: absolute;
// background: rgba(255,140,0,0.2);
top: 0;
left: -6px;
width: 12px;
height: 100%;
-webkit-mask-image: url(images/grip.svg);
mask-image: url(images/grip.svg);
-webkit-mask-size: auto;
mask-size: auto;
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--red-ui-grip-color);
z-index: 20;
}
// &:before {
// content: '';
// display: block;
// width: 100%;
// height: 100%;
// -webkit-mask-image: url(images/grip.svg);
// mask-image: url(images/grip.svg);
// -webkit-mask-size: auto;
// mask-size: auto;
// -webkit-mask-position: 50% 50%;
// mask-position: 50% 50%;
// -webkit-mask-repeat: no-repeat;
// mask-repeat: no-repeat;
// background-color: var(--red-ui-grip-color);
// }
}
.red-ui-sidebar-tab-bar {
// width: 40px;
padding: 8px;
background-color: var(--red-ui-secondary-background);
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
z-index: 10;
border: 1px solid var(--red-ui-primary-border-color);
&.red-ui-sidebar-left {
border-left: none;
}
&.red-ui-sidebar-right {
border-right: none;
}
button {
@include mixins.workspace-button;
display: flex;
flex-grow: 0;
flex-shrink: 0;
align-items: center;
justify-content: center;
padding: 0;
height: 28px;
width: 28px;
&:not(.selected):not(:hover) {
border: none;
i {
opacity: 0.7;
}
}
&.selected {
// box-shadow: 0 2px 0 0 var(--red-ui-form-input-border-selected-color);
}
}
.red-ui-sidebar-tab-bar-button-placeholder {
border: 1px dashed var(--red-ui-form-input-border-color);
}
}
.red-ui-sidebar-closed > #red-ui-sidebar { display: none; }
.red-ui-sidebar-closed > #red-ui-sidebar-separator { right: 0px !important; }
.red-ui-sidebar-closed > #red-ui-workspace { right: 7px !important; }
.red-ui-sidebar-closed > #red-ui-editor-stack { right: 8px !important; }
#red-ui-sidebar .button {
.red-ui-sidebar .button {
@include mixins.workspace-button;
line-height: 18px;
font-size: 12px;
@ -129,34 +188,20 @@ button.red-ui-sidebar-header-button-toggle {
border-left: none;
}
.red-ui-sidebar-shade {
@include mixins.shade;
}
@mixin red-ui-sidebar-control {
display: none;
position: absolute;
top: calc(50% - 26px);
padding:15px 8px;
border:1px solid var(--red-ui-primary-border-color);
background:var(--red-ui-primary-background);
color: var(--red-ui-secondary-text-color);
text-align: center;
cursor: pointer;
}
.red-ui-sidebar-control-right {
@include red-ui-sidebar-control;
right: calc(100%);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
z-index: 13;
}
.red-ui-sidebar-control-left {
@include red-ui-sidebar-control;
left: calc(100%);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
i.red-ui-sidebar-tab-icon {
display: inline-block;
// margin-left: -8px;
// margin-right: 3px;
// margin-top: -2px;
opacity: 1;
width: 18px;
height: 18px;
vertical-align: middle;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--red-ui-workspace-button-color);
}

13
packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss vendored
View File

@ -442,18 +442,6 @@ div.red-ui-info-table {
right: 1px;
padding: 1px 2px 0 1px;
text-align: right;
background: var(--red-ui-list-item-background);
.red-ui-treeList-label:hover & {
background: var(--red-ui-list-item-background-hover);
}
.red-ui-treeList-label.focus & {
background: var(--red-ui-list-item-background-hover);
}
.red-ui-treeList-label.selected & {
background: var(--red-ui-list-item-background-selected);
}
&.red-ui-info-outline-item-hover-controls button {
min-width: 23px;
@ -580,6 +568,7 @@ div.red-ui-info-table {
top: 6px;
right: 8px;
width: calc(100% - 130px);
min-width: 150px;
max-width: 250px;
background: var(--red-ui-palette-header-background);
}

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

@ -17,15 +17,14 @@
**/
#red-ui-workspace {
position: absolute;
margin: 0;
top:0px;
left:179px;
bottom: 0px;
right: 322px;
overflow: hidden;
@include mixins.component-border;
border-left: none;
border-right: none;
transition: left 0.1s ease-in-out;
position: relative;
flex-grow: 1;
}
#red-ui-workspace-chart {
@ -85,22 +84,6 @@
}
}
.red-ui-palette-closed #red-ui-workspace {
left: 7px;
}
// .workspace-footer-button {
// @include component-footer-button;
// margin-left: 2px;
// margin-right: 2px;
// }
//
// .workspace-footer-button-toggle {
// @include component-footer-button-toggle;
// margin-left: 2px;
// margin-right: 2px;
// }
#red-ui-workspace-tabs:not(.red-ui-workspace-focussed) {
opacity:0.8;
}

27
packages/node_modules/@node-red/editor-client/src/tours/welcome.js vendored
View File

@ -15,6 +15,33 @@ export default {
<p>We will be making incremental changes betwen each beta release, so please try it out and let us know your feedback!</p>
`
}
},
{
title: {
"en-US": "New Sidebar Design",
},
description: {
"en-US": `
<p>The sidebars have been redesigned to provide a cleaner and more consistent user experience.</p>
<p>Rather than hide them in a dropdown menu, the available sidebars are now listed down each side of the editor.</p>
<p>You can also move the sidebars between the two sides by dragging their buttons around.</p>
<p>We have moved the Information sidebar to the left-hand side to provide a more natural way to navigate around your flows.</p>
<p>This is the first iteration of changes. In a future beta we will add the ability to split the sidebar vertically, so you can have multiple
panels showing at once.</p>
`,
}
},
{
title: {
"en-US": "Better Flow Navigation",
},
description: {
"en-US": `
<p>Some of the ways you can pan and zoom around the editor workspace have been improved to provide a more standard way of working.</p>
<p>You can use your middle-mouse button to pan around the workspace, but if you don't have such a button, you can press the spacebar and drag with the left mouse button.</p>
<p>There is also a new 'zoom to fit' button in the status bar; this will set your zoom level to ensure all of your nodes are currently visible.</p>
`,
}
}
]
}