Namespace all sidebar css

This commit is contained in:
Nick O'Leary 2019-04-30 22:56:39 +01:00
parent d251a30cb8
commit 9dac679b72
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
19 changed files with 130 additions and 127 deletions

View File

@ -23,7 +23,7 @@
"ctrl-g v": "core:show-version-control-tab", "ctrl-g v": "core:show-version-control-tab",
"ctrl-shift-l": "core:show-event-log" "ctrl-shift-l": "core:show-event-log"
}, },
"sidebar-node-config": { "red-ui-sidebar-node-config": {
"backspace": "core:delete-config-selection", "backspace": "core:delete-config-selection",
"delete": "core:delete-config-selection", "delete": "core:delete-config-selection",
"ctrl-a": "core:select-all-config-nodes", "ctrl-a": "core:select-all-config-nodes",

View File

@ -104,7 +104,7 @@ RED.text.bidi = (function() {
$("#workspace").find('span.bidiAware').each(function() { $("#workspace").find('span.bidiAware').each(function() {
$(this).attr("dir", resolveBaseTextDir($(this).html())); $(this).attr("dir", resolveBaseTextDir($(this).html()));
}); });
$("#sidebar").find('span.bidiAware').each(function() { $("#red-ui-sidebar").find('span.bidiAware').each(function() {
$(this).attr("dir", resolveBaseTextDir($(this).text())); $(this).attr("dir", resolveBaseTextDir($(this).text()));
}); });
} }

View File

@ -274,7 +274,7 @@ RED.deploy = (function() {
$("#header-shade").show(); $("#header-shade").show();
$("#editor-shade").show(); $("#editor-shade").show();
$("#red-ui-palette-shade").show(); $("#red-ui-palette-shade").show();
$("#sidebar-shade").show(); $("#red-ui-sidebar-shade").show();
$.ajax({ $.ajax({
url:"flows", url:"flows",
@ -309,7 +309,7 @@ RED.deploy = (function() {
$("#header-shade").hide(); $("#header-shade").hide();
$("#editor-shade").hide(); $("#editor-shade").hide();
$("#red-ui-palette-shade").hide(); $("#red-ui-palette-shade").hide();
$("#sidebar-shade").hide(); $("#red-ui-sidebar-shade").hide();
},delta); },delta);
}); });
} }
@ -425,7 +425,7 @@ RED.deploy = (function() {
$("#header-shade").show(); $("#header-shade").show();
$("#editor-shade").show(); $("#editor-shade").show();
$("#red-ui-palette-shade").show(); $("#red-ui-palette-shade").show();
$("#sidebar-shade").show(); $("#red-ui-sidebar-shade").show();
$.ajax({ $.ajax({
url:"flows", url:"flows",
type: "POST", type: "POST",
@ -495,7 +495,7 @@ RED.deploy = (function() {
$("#header-shade").hide(); $("#header-shade").hide();
$("#editor-shade").hide(); $("#editor-shade").hide();
$("#red-ui-palette-shade").hide(); $("#red-ui-palette-shade").hide();
$("#sidebar-shade").hide(); $("#red-ui-sidebar-shade").hide();
},delta); },delta);
}); });
} }

View File

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

View File

@ -761,9 +761,9 @@ RED.palette.editor = (function() {
$('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBar); $('<span>').text(RED._("palette.editor.sort")+' ').appendTo(toolBar);
var sortGroup = $('<span class="button-group"></span>').appendTo(toolBar); var sortGroup = $('<span class="button-group"></span>').appendTo(toolBar);
var sortRelevance = $('<a href="#" class="palette-editor-install-sort-option sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup); var sortRelevance = $('<a href="#" class="palette-editor-install-sort-option red-ui-sidebar-header-button-toggle selected"><i class="fa fa-sort-amount-desc"></i></a>').appendTo(sortGroup);
var sortAZ = $('<a href="#" class="palette-editor-install-sort-option sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup); var sortAZ = $('<a href="#" class="palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
var sortRecent = $('<a href="#" class="palette-editor-install-sort-option sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup); var sortRecent = $('<a href="#" class="palette-editor-install-sort-option red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
var sortOpts = [ var sortOpts = [
@ -785,7 +785,7 @@ RED.palette.editor = (function() {
}); });
var refreshSpan = $('<span>').appendTo(toolBar); var refreshSpan = $('<span>').appendTo(toolBar);
var refreshButton = $('<a href="#" class="sidebar-header-button"><i class="fa fa-refresh"></i></a>').appendTo(refreshSpan); var refreshButton = $('<a href="#" class="red-ui-sidebar-header-button"><i class="fa fa-refresh"></i></a>').appendTo(refreshSpan);
refreshButton.on("click", function(e) { refreshButton.on("click", function(e) {
e.preventDefault(); e.preventDefault();
loadedList = []; loadedList = [];

View File

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

View File

@ -2229,13 +2229,13 @@ RED.projects = (function() {
// $("#header-shade").show(); // $("#header-shade").show();
// $("#editor-shade").show(); // $("#editor-shade").show();
// $("#red-ui-palette-shade").show(); // $("#red-ui-palette-shade").show();
// $("#sidebar-shade").show(); // $("#red-ui-sidebar-shade").show();
}, },
close: function(e) { close: function(e) {
// $("#header-shade").hide(); // $("#header-shade").hide();
// $("#editor-shade").hide(); // $("#editor-shade").hide();
// $("#red-ui-palette-shade").hide(); // $("#red-ui-palette-shade").hide();
// $("#sidebar-shade").hide(); // $("#red-ui-sidebar-shade").hide();
} }
}); });
dialogBody = dialog.find("form"); dialogBody = dialog.find("form");

View File

@ -257,8 +257,8 @@ RED.search = (function() {
$("#header-shade").show(); $("#header-shade").show();
$("#editor-shade").show(); $("#editor-shade").show();
$("#red-ui-palette-shade").show(); $("#red-ui-palette-shade").show();
$("#sidebar-shade").show(); $("#red-ui-sidebar-shade").show();
$("#sidebar-separator").hide(); $("#red-ui-sidebar-separator").hide();
indexWorkspace(); indexWorkspace();
if (dialog === null) { if (dialog === null) {
createDialog(); createDialog();
@ -278,8 +278,8 @@ RED.search = (function() {
$("#header-shade").hide(); $("#header-shade").hide();
$("#editor-shade").hide(); $("#editor-shade").hide();
$("#red-ui-palette-shade").hide(); $("#red-ui-palette-shade").hide();
$("#sidebar-shade").hide(); $("#red-ui-sidebar-shade").hide();
$("#sidebar-separator").show(); $("#red-ui-sidebar-separator").show();
if (dialog !== null) { if (dialog !== null) {
dialog.slideUp(200,function() { dialog.slideUp(200,function() {
searchInput.searchBox('value',''); searchInput.searchBox('value','');
@ -302,7 +302,7 @@ RED.search = (function() {
$("#header-shade").on('mousedown',hide); $("#header-shade").on('mousedown',hide);
$("#editor-shade").on('mousedown',hide); $("#editor-shade").on('mousedown',hide);
$("#red-ui-palette-shade").on('mousedown',hide); $("#red-ui-palette-shade").on('mousedown',hide);
$("#sidebar-shade").on('mousedown',hide); $("#red-ui-sidebar-shade").on('mousedown',hide);
} }
return { return {

View File

@ -16,33 +16,8 @@
RED.sidebar = (function() { RED.sidebar = (function() {
//$('#sidebar').tabs(); //$('#sidebar').tabs();
var sidebar_tabs = RED.tabs.create({ var sidebar_tabs;
id:"sidebar-tabs", var knownTabs = {};
onchange:function(tab) {
$("#sidebar-content").children().hide();
$("#sidebar-footer").children().hide();
if (tab.onchange) {
tab.onchange.call(tab);
}
$(tab.wrapper).show();
if (tab.toolbar) {
$(tab.toolbar).show();
}
},
onremove: function(tab) {
$(tab.wrapper).hide();
if (tab.onremove) {
tab.onremove.call(tab);
}
},
// minimumActiveTabWidth: 70,
collapsible: true
// scrollable: true
});
var knownTabs = {
};
function addTab(title,content,closeable,visible) { function addTab(title,content,closeable,visible) {
var options; var options;
@ -62,16 +37,16 @@ RED.sidebar = (function() {
delete options.closeable; delete options.closeable;
options.wrapper = $('<div>',{style:"height:100%"}).appendTo("#sidebar-content") options.wrapper = $('<div>',{style:"height:100%"}).appendTo("#red-ui-sidebar-content")
options.wrapper.append(options.content); options.wrapper.append(options.content);
options.wrapper.hide(); options.wrapper.hide();
if (!options.enableOnEdit) { if (!options.enableOnEdit) {
options.shade = $('<div>',{class:"sidebar-shade hide"}).appendTo(options.wrapper); options.shade = $('<div>',{class:"red-ui-sidebar-shade hide"}).appendTo(options.wrapper);
} }
if (options.toolbar) { if (options.toolbar) {
$("#sidebar-footer").append(options.toolbar); $("#red-ui-sidebar-footer").append(options.toolbar);
$(options.toolbar).hide(); $(options.toolbar).hide();
} }
var id = options.id; var id = options.id;
@ -107,7 +82,7 @@ RED.sidebar = (function() {
var sidebarSeparator = {}; var sidebarSeparator = {};
sidebarSeparator.dragging = false; sidebarSeparator.dragging = false;
$("#sidebar-separator").draggable({ $("#red-ui-sidebar-separator").draggable({
axis: "x", axis: "x",
start:function(event,ui) { start:function(event,ui) {
sidebarSeparator.closing = false; sidebarSeparator.closing = false;
@ -121,14 +96,14 @@ RED.sidebar = (function() {
if (!RED.menu.isSelected("menu-item-sidebar")) { if (!RED.menu.isSelected("menu-item-sidebar")) {
sidebarSeparator.opening = true; sidebarSeparator.opening = true;
var newChartRight = 7; var newChartRight = 7;
$("#sidebar").addClass("closing"); $("#red-ui-sidebar").addClass("closing");
$("#workspace").css("right",newChartRight); $("#workspace").css("right",newChartRight);
$("#editor-stack").css("right",newChartRight+1); $("#editor-stack").css("right",newChartRight+1);
$("#sidebar").width(0); $("#red-ui-sidebar").width(0);
RED.menu.setSelected("menu-item-sidebar",true); RED.menu.setSelected("menu-item-sidebar",true);
RED.events.emit("sidebar:resize"); RED.events.emit("sidebar:resize");
} }
sidebarSeparator.width = $("#sidebar").width(); sidebarSeparator.width = $("#red-ui-sidebar").width();
}, },
drag: function(event,ui) { drag: function(event,ui) {
var d = ui.position.left-sidebarSeparator.start; var d = ui.position.left-sidebarSeparator.start;
@ -147,7 +122,7 @@ RED.sidebar = (function() {
if (newSidebarWidth < 150) { if (newSidebarWidth < 150) {
if (!sidebarSeparator.closing) { if (!sidebarSeparator.closing) {
$("#sidebar").addClass("closing"); $("#red-ui-sidebar").addClass("closing");
sidebarSeparator.closing = true; sidebarSeparator.closing = true;
} }
if (!sidebarSeparator.opening) { if (!sidebarSeparator.opening) {
@ -157,13 +132,13 @@ RED.sidebar = (function() {
} }
} else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) { } else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
sidebarSeparator.closing = false; sidebarSeparator.closing = false;
$("#sidebar").removeClass("closing"); $("#red-ui-sidebar").removeClass("closing");
} }
var newChartRight = sidebarSeparator.chartRight-d; var newChartRight = sidebarSeparator.chartRight-d;
$("#workspace").css("right",newChartRight); $("#workspace").css("right",newChartRight);
$("#editor-stack").css("right",newChartRight+1); $("#editor-stack").css("right",newChartRight+1);
$("#sidebar").width(newSidebarWidth); $("#red-ui-sidebar").width(newSidebarWidth);
sidebar_tabs.resize(); sidebar_tabs.resize();
RED.events.emit("sidebar:resize"); RED.events.emit("sidebar:resize");
@ -171,26 +146,26 @@ RED.sidebar = (function() {
stop:function(event,ui) { stop:function(event,ui) {
sidebarSeparator.dragging = false; sidebarSeparator.dragging = false;
if (sidebarSeparator.closing) { if (sidebarSeparator.closing) {
$("#sidebar").removeClass("closing"); $("#red-ui-sidebar").removeClass("closing");
RED.menu.setSelected("menu-item-sidebar",false); RED.menu.setSelected("menu-item-sidebar",false);
if ($("#sidebar").width() < 180) { if ($("#red-ui-sidebar").width() < 180) {
$("#sidebar").width(180); $("#red-ui-sidebar").width(180);
$("#workspace").css("right",187); $("#workspace").css("right",187);
$("#editor-stack").css("right",188); $("#editor-stack").css("right",188);
} }
} }
$("#sidebar-separator").css("left","auto"); $("#red-ui-sidebar-separator").css("left","auto");
$("#sidebar-separator").css("right",($("#sidebar").width()+2)+"px"); $("#red-ui-sidebar-separator").css("right",($("#red-ui-sidebar").width()+2)+"px");
RED.events.emit("sidebar:resize"); RED.events.emit("sidebar:resize");
} }
}); });
var sidebarControls = $('<div class="sidebar-control-right"><i class="fa fa-chevron-right"</div>').appendTo($("#sidebar-separator")); 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.on("click", function() {
sidebarControls.hide(); sidebarControls.hide();
RED.menu.toggleSelected("menu-item-sidebar"); RED.menu.toggleSelected("menu-item-sidebar");
}) })
$("#sidebar-separator").on("mouseenter", function() { $("#red-ui-sidebar-separator").on("mouseenter", function() {
if (!sidebarSeparator.dragging) { if (!sidebarSeparator.dragging) {
if (RED.menu.isSelected("menu-item-sidebar")) { if (RED.menu.isSelected("menu-item-sidebar")) {
sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left");
@ -200,7 +175,7 @@ RED.sidebar = (function() {
sidebarControls.toggle("slide", { direction: "right" }, 200); sidebarControls.toggle("slide", { direction: "right" }, 200);
} }
}) })
$("#sidebar-separator").on("mouseleave", function() { $("#red-ui-sidebar-separator").on("mouseleave", function() {
if (!sidebarSeparator.dragging) { if (!sidebarSeparator.dragging) {
sidebarControls.hide(); sidebarControls.hide();
} }
@ -208,9 +183,9 @@ RED.sidebar = (function() {
function toggleSidebar(state) { function toggleSidebar(state) {
if (!state) { if (!state) {
$("#main-container").addClass("sidebar-closed"); $("#main-container").addClass("red-ui-sidebar-closed");
} else { } else {
$("#main-container").removeClass("sidebar-closed"); $("#main-container").removeClass("red-ui-sidebar-closed");
sidebar_tabs.resize(); sidebar_tabs.resize();
} }
RED.events.emit("sidebar:resize"); RED.events.emit("sidebar:resize");
@ -233,6 +208,34 @@ RED.sidebar = (function() {
} }
function init () { function init () {
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();
}
},
onremove: function(tab) {
$(tab.wrapper).hide();
if (tab.onremove) {
tab.onremove.call(tab);
}
},
// minimumActiveTabWidth: 70,
collapsible: true
// scrollable: true
});
$('<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");
RED.actions.add("core:toggle-sidebar",function(state){ RED.actions.add("core:toggle-sidebar",function(state){
if (state === undefined) { if (state === undefined) {
RED.menu.toggleSelected("menu-item-sidebar"); RED.menu.toggleSelected("menu-item-sidebar");
@ -240,7 +243,7 @@ RED.sidebar = (function() {
toggleSidebar(state); toggleSidebar(state);
} }
}); });
RED.popover.tooltip($("#sidebar-separator").find(".sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar"); RED.popover.tooltip($("#red-ui-sidebar-separator").find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar");
showSidebar(); showSidebar();
RED.sidebar.info.init(); RED.sidebar.info.init();
RED.sidebar.config.init(); RED.sidebar.config.init();

View File

@ -17,20 +17,20 @@ RED.sidebar.config = (function() {
var content = document.createElement("div"); var content = document.createElement("div");
content.className = "sidebar-node-config"; content.className = "red-ui-sidebar-node-config";
content.id = "sidebar-node-config"; content.id = "red-ui-sidebar-node-config";
content.tabIndex = 0; content.tabIndex = 0;
$('<div class="sidebar-header"><span class="button-group">'+ $('<div class="red-ui-sidebar-header"><span class="button-group">'+
'<a class="sidebar-header-button-toggle selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+ '<a class="red-ui-sidebar-header-button-toggle selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
'<a class="sidebar-header-button-toggle" id="workspace-config-node-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+ '<a class="red-ui-sidebar-header-button-toggle" id="workspace-config-node-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+
'</span></div>' '</span></div>'
).appendTo(content); ).appendTo(content);
var toolbar = $('<div>'+ var toolbar = $('<div>'+
'<a class="sidebar-footer-button" id="workspace-config-node-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a> '+ '<a class="red-ui-footer-button" id="workspace-config-node-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a> '+
'<a class="sidebar-footer-button" id="workspace-config-node-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>'+ '<a class="red-ui-footer-button" id="workspace-config-node-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>'+
'</div>'); '</div>');
var globalCategories = $("<div>").appendTo(content); var globalCategories = $("<div>").appendTo(content);
@ -45,7 +45,7 @@ RED.sidebar.config = (function() {
name = name.replace(/\./i,"-"); name = name.replace(/\./i,"-");
if (!categories[name]) { if (!categories[name]) {
var container = $('<div class="red-ui-palette-category workspace-config-node-category" id="workspace-config-node-category-'+name+'"></div>').appendTo(parent); var container = $('<div class="red-ui-palette-category workspace-config-node-category" id="workspace-config-node-category-'+name+'"></div>').appendTo(parent);
var header = $('<div class="workspace-config-node-tray-header palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container); var header = $('<div class="workspace-config-node-tray-header red-ui-palette-header"><i class="fa fa-angle-down expanded"></i></div>').appendTo(container);
if (label) { if (label) {
$('<span class="config-node-label"/>').text(label).appendTo(header); $('<span class="config-node-label"/>').text(label).appendTo(header);
} else { } else {
@ -355,7 +355,7 @@ RED.sidebar.config = (function() {
var node = $(".red-ui-palette-node_id_"+id); var node = $(".red-ui-palette-node_id_"+id);
var y = node.position().top; var y = node.position().top;
var h = node.height(); var h = node.height();
var scrollWindow = $(".sidebar-node-config"); var scrollWindow = $(".red-ui-sidebar-node-config");
var scrollHeight = scrollWindow.height(); var scrollHeight = scrollWindow.height();
if (y+h > scrollHeight) { if (y+h > scrollHeight) {

View File

@ -33,12 +33,8 @@ RED.sidebar.context = (function() {
content = $("<div>").css({"position":"relative","height":"100%"}); content = $("<div>").css({"position":"relative","height":"100%"});
content.className = "sidebar-context" content.className = "sidebar-context"
// var toolbar = $('<div class="sidebar-header">'+
// '</div>').appendTo(content);
var footerToolbar = $('<div>'+ var footerToolbar = $('<div></div>');
// '<span class="button-group"><a class="sidebar-footer-button" href="#" data-i18n="[title]node-red:debug.sidebar.openWindow"><i class="fa fa-desktop"></i></a></span> ' +
'</div>');

View File

@ -118,7 +118,7 @@ RED.tray = (function() {
$("#header-shade").show(); $("#header-shade").show();
$("#editor-shade").show(); $("#editor-shade").show();
$("#red-ui-palette-shade").show(); $("#red-ui-palette-shade").show();
$(".sidebar-shade").show(); $(".red-ui-sidebar-shade").show();
tray.preferredWidth = Math.max(el.width(),500); tray.preferredWidth = Math.max(el.width(),500);
if (!options.maximized) { if (!options.maximized) {
body.css({"minWidth":tray.preferredWidth-40}); body.css({"minWidth":tray.preferredWidth-40});
@ -270,7 +270,7 @@ RED.tray = (function() {
$("#header-shade").hide(); $("#header-shade").hide();
$("#editor-shade").hide(); $("#editor-shade").hide();
$("#red-ui-palette-shade").hide(); $("#red-ui-palette-shade").hide();
$(".sidebar-shade").hide(); $(".red-ui-sidebar-shade").hide();
RED.events.emit("editor:close"); RED.events.emit("editor:close");
RED.view.focus(); RED.view.focus();
} }

View File

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

View File

@ -297,13 +297,13 @@ RED.workspaces = (function() {
$("#chart svg").css({"pointer-events":"auto",filter:"none"}) $("#chart svg").css({"pointer-events":"auto",filter:"none"})
$("#workspace-toolbar").css({"pointer-events":"auto",filter:"none"}) $("#workspace-toolbar").css({"pointer-events":"auto",filter:"none"})
$("#red-ui-palette-container").css({"pointer-events":"auto",filter:"none"}) $("#red-ui-palette-container").css({"pointer-events":"auto",filter:"none"})
$(".sidebar-shade").hide(); $(".red-ui-sidebar-shade").hide();
} else { } else {
RED.view.select(false) RED.view.select(false)
$("#chart svg").css({"pointer-events":"none",filter:"opacity(60%)"}) $("#chart svg").css({"pointer-events":"none",filter:"opacity(60%)"})
$("#workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"}) $("#workspace-toolbar").css({"pointer-events":"none",filter:"opacity(60%)"})
$("#red-ui-palette-container").css({"pointer-events":"none",filter:"opacity(60%)"}) $("#red-ui-palette-container").css({"pointer-events":"none",filter:"opacity(60%)"})
$(".sidebar-shade").show(); $(".red-ui-sidebar-shade").show();
} }
}, },
minimumActiveTabWidth: 150, minimumActiveTabWidth: 150,

View File

@ -154,11 +154,11 @@
background: $background-color; background: $background-color;
color: $workspace-button-color; color: $workspace-button-color;
} }
#red-ui-palette-shade, #editor-shade, #header-shade, #sidebar-shade { #red-ui-palette-shade, #editor-shade, #header-shade, #red-ui-sidebar-shade {
@include shade; @include shade;
z-index: 2; z-index: 2;
} }
#sidebar-shade { #red-ui-sidebar-shade {
left: -8px; left: -8px;
top: -1px; top: -1px;
bottom: -1px; bottom: -1px;

View File

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
**/ **/
#sidebar { #red-ui-sidebar {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
@ -26,13 +26,13 @@
@include component-border; @include component-border;
} }
#sidebar.closing { #red-ui-sidebar.closing {
background: #eee; background: #eee;
border-color: #900; border-color: #900;
border-style: dashed; border-style: dashed;
} }
#sidebar-content { #red-ui-sidebar-content {
position: absolute; position: absolute;
top: 35px; top: 35px;
right: 0; right: 0;
@ -41,7 +41,7 @@
overflow-y: auto; overflow-y: auto;
} }
#sidebar-separator { #red-ui-sidebar-separator {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 315px; right: 315px;
@ -52,12 +52,12 @@
cursor: col-resize; cursor: col-resize;
} }
.sidebar-closed > #sidebar { display: none; } .red-ui-sidebar-closed > #red-ui-sidebar { display: none; }
.sidebar-closed > #sidebar-separator { right: 0px !important; } .red-ui-sidebar-closed > #red-ui-sidebar-separator { right: 0px !important; }
.sidebar-closed > #workspace { right: 7px !important; } .red-ui-sidebar-closed > #workspace { right: 7px !important; }
.sidebar-closed > #editor-stack { right: 8px !important; } .red-ui-sidebar-closed > #editor-stack { right: 8px !important; }
#sidebar .button { #red-ui-sidebar .button {
@include workspace-button; @include workspace-button;
line-height: 18px; line-height: 18px;
font-size: 12px; font-size: 12px;
@ -65,7 +65,8 @@
padding: 2px 8px; padding: 2px 8px;
} }
.sidebar-header { .sidebar-header, /* Deprecated -> red-ui-sidebar-header */
.red-ui-sidebar-header {
color: #666; color: #666;
text-align: right; text-align: right;
padding: 8px 10px; padding: 8px 10px;
@ -74,34 +75,42 @@
white-space: nowrap; white-space: nowrap;
} }
/* Deprecated -> red-ui-footer-button */
.sidebar-footer-button { .sidebar-footer-button {
@include component-footer-button; @include component-footer-button;
} }
/* Deprecated -> red-ui-footer-button-toggle */
.sidebar-footer-button-toggle { .sidebar-footer-button-toggle {
@include component-footer-button-toggle; @include component-footer-button-toggle;
} }
.sidebar-header-button {
.sidebar-header-button, /* Deprecated -> red-ui-sidebar-header-button */
.red-ui-sidebar-header-button {
@include workspace-button; @include workspace-button;
font-size: 13px; font-size: 13px;
line-height: 13px; line-height: 13px;
padding: 5px 8px; padding: 5px 8px;
} }
.sidebar-header-button-toggle {
.sidebar-header-button-toggle, /* Deprecated -> red-ui-sidebar-header-button-toggle */
.red-ui-sidebar-header-button-toggle {
@include workspace-button-toggle; @include workspace-button-toggle;
font-size: 13px; font-size: 13px;
line-height: 13px; line-height: 13px;
padding: 5px 8px; padding: 5px 8px;
} }
.sidebar-header-button:not(:first-child) {
.sidebar-header-button, /* Deprecated -> red-ui-sidebar-header-button */
.red-ui-sidebar-header-button:not(:first-child) {
border-left: none; border-left: none;
} }
.sidebar-shade { .red-ui-sidebar-shade {
@include shade; @include shade;
} }
@mixin sidebar-control { @mixin red-ui-sidebar-control {
display: none; display: none;
position: absolute; position: absolute;
top: calc(50% - 26px); top: calc(50% - 26px);
@ -114,14 +123,14 @@
cursor: pointer; cursor: pointer;
} }
.sidebar-control-right { .red-ui-sidebar-control-right {
@include sidebar-control; @include red-ui-sidebar-control;
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;
} }
.sidebar-control-left { .red-ui-sidebar-control-left {
@include sidebar-control; @include red-ui-sidebar-control;
left: calc(100%); left: calc(100%);
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;

View File

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
**/ **/
.sidebar-node-config { .red-ui-sidebar-node-config {
position: relative; position: relative;
background: #f3f3f3; background: #f3f3f3;
height: 100%; height: 100%;

View File

@ -52,14 +52,9 @@
</div> </div>
<div id="editor-stack"></div> <div id="editor-stack"></div>
<div id="red-ui-palette"></div> <div id="red-ui-palette"></div>
<div id="sidebar"> <div id="red-ui-sidebar"></div>
<ul id="sidebar-tabs"></ul>
<div id="sidebar-content"></div>
<div id="sidebar-footer" class="red-ui-component-footer"></div>
<div id="sidebar-shade" class="hide"></div>
</div>
<div id="sidebar-separator"></div> <div id="red-ui-sidebar-separator"></div>
</div> </div>
<div id="full-shade" class="hide"></div> <div id="full-shade" class="hide"></div>

View File

@ -40,16 +40,16 @@ RED.debug = (function() {
config = _config; config = _config;
var content = $("<div>").css({"position":"relative","height":"100%"}); var content = $("<div>").css({"position":"relative","height":"100%"});
var toolbar = $('<div class="sidebar-header">'+ var toolbar = $('<div class="red-ui-sidebar-header">'+
'<span class="button-group"><a id="debug-tab-filter" class="sidebar-header-button" href="#"><i class="fa fa-filter"></i> <span></span></a></span>'+ '<span class="button-group"><a id="debug-tab-filter" class="red-ui-sidebar-header-button" href="#"><i class="fa fa-filter"></i> <span></span></a></span>'+
'<span class="button-group"><a id="debug-tab-clear" class="sidebar-header-button" href="#" data-i18n="[title]node-red:debug.sidebar.clearLog"><i class="fa fa-trash"></i></a></span></div>').appendTo(content); '<span class="button-group"><a id="debug-tab-clear" class="red-ui-sidebar-header-button" href="#" data-i18n="[title]node-red:debug.sidebar.clearLog"><i class="fa fa-trash"></i></a></span></div>').appendTo(content);
var footerToolbar = $('<div>'+ var footerToolbar = $('<div>'+
// '<span class="button-group">'+ // '<span class="button-group">'+
// '<a class="sidebar-footer-button-toggle text-button selected" id="debug-tab-view-list" href="#"><span data-i18n="">list</span></a>'+ // '<a class="red-ui-footer-button-toggle text-button selected" id="debug-tab-view-list" href="#"><span data-i18n="">list</span></a>'+
// '<a class="sidebar-footer-button-toggle text-button" id="debug-tab-view-table" href="#"><span data-i18n="">table</span></a> '+ // '<a class="red-ui-footer-button-toggle text-button" id="debug-tab-view-table" href="#"><span data-i18n="">table</span></a> '+
// '</span>'+ // '</span>'+
'<span class="button-group"><a id="debug-tab-open" class="sidebar-footer-button" href="#" data-i18n="[title]node-red:debug.sidebar.openWindow"><i class="fa fa-desktop"></i></a></span> ' + '<span class="button-group"><a id="debug-tab-open" class="red-ui-footer-button" href="#" data-i18n="[title]node-red:debug.sidebar.openWindow"><i class="fa fa-desktop"></i></a></span> ' +
'</div>'); '</div>');
messageList = $('<div class="debug-content debug-content-list"/>').appendTo(content); messageList = $('<div class="debug-content debug-content-list"/>').appendTo(content);
@ -59,9 +59,9 @@ RED.debug = (function() {
var filterDialog = $('<div class="debug-filter-box hide">'+ var filterDialog = $('<div class="debug-filter-box hide">'+
'<div class="debug-filter-row">'+ '<div class="debug-filter-row">'+
'<span class="button-group">'+ '<span class="button-group">'+
'<a class="sidebar-header-button-toggle debug-tab-filter-option selected" id="debug-tab-filterAll" href="#"><span data-i18n="node-red:debug.sidebar.filterAll"></span></a>'+ '<a class="red-ui-sidebar-header-button-toggle debug-tab-filter-option selected" id="debug-tab-filterAll" href="#"><span data-i18n="node-red:debug.sidebar.filterAll"></span></a>'+
'<a class="sidebar-header-button-toggle debug-tab-filter-option" id="debug-tab-filterSelected" href="#"><span data-i18n="node-red:debug.sidebar.filterSelected"></span></a>'+ '<a class="red-ui-sidebar-header-button-toggle debug-tab-filter-option" id="debug-tab-filterSelected" href="#"><span data-i18n="node-red:debug.sidebar.filterSelected"></span></a>'+
'<a class="sidebar-header-button-toggle debug-tab-filter-option" id="debug-tab-filterCurrent" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent"></span></a> '+ '<a class="red-ui-sidebar-header-button-toggle debug-tab-filter-option" id="debug-tab-filterCurrent" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent"></span></a> '+
'</span>'+ '</span>'+
'</div>'+ '</div>'+
'</div>').appendTo(toolbar);//content); '</div>').appendTo(toolbar);//content);