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-shift-l": "core:show-event-log"
},
"sidebar-node-config": {
"red-ui-sidebar-node-config": {
"backspace": "core:delete-config-selection",
"delete": "core:delete-config-selection",
"ctrl-a": "core:select-all-config-nodes",

View File

@ -104,7 +104,7 @@ RED.text.bidi = (function() {
$("#workspace").find('span.bidiAware').each(function() {
$(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()));
});
}

View File

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

View File

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

View File

@ -761,9 +761,9 @@ RED.palette.editor = (function() {
$('<span>').text(RED._("palette.editor.sort")+' ').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 sortAZ = $('<a href="#" class="palette-editor-install-sort-option 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 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 red-ui-sidebar-header-button-toggle" data-i18n="palette.editor.sortAZ"></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 = [
@ -785,7 +785,7 @@ RED.palette.editor = (function() {
});
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) {
e.preventDefault();
loadedList = [];

View File

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

View File

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

View File

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

View File

@ -16,33 +16,8 @@
RED.sidebar = (function() {
//$('#sidebar').tabs();
var sidebar_tabs = RED.tabs.create({
id:"sidebar-tabs",
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 = {
};
var sidebar_tabs;
var knownTabs = {};
function addTab(title,content,closeable,visible) {
var options;
@ -62,16 +37,16 @@ RED.sidebar = (function() {
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.hide();
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) {
$("#sidebar-footer").append(options.toolbar);
$("#red-ui-sidebar-footer").append(options.toolbar);
$(options.toolbar).hide();
}
var id = options.id;
@ -107,7 +82,7 @@ RED.sidebar = (function() {
var sidebarSeparator = {};
sidebarSeparator.dragging = false;
$("#sidebar-separator").draggable({
$("#red-ui-sidebar-separator").draggable({
axis: "x",
start:function(event,ui) {
sidebarSeparator.closing = false;
@ -121,14 +96,14 @@ RED.sidebar = (function() {
if (!RED.menu.isSelected("menu-item-sidebar")) {
sidebarSeparator.opening = true;
var newChartRight = 7;
$("#sidebar").addClass("closing");
$("#red-ui-sidebar").addClass("closing");
$("#workspace").css("right",newChartRight);
$("#editor-stack").css("right",newChartRight+1);
$("#sidebar").width(0);
$("#red-ui-sidebar").width(0);
RED.menu.setSelected("menu-item-sidebar",true);
RED.events.emit("sidebar:resize");
}
sidebarSeparator.width = $("#sidebar").width();
sidebarSeparator.width = $("#red-ui-sidebar").width();
},
drag: function(event,ui) {
var d = ui.position.left-sidebarSeparator.start;
@ -147,7 +122,7 @@ RED.sidebar = (function() {
if (newSidebarWidth < 150) {
if (!sidebarSeparator.closing) {
$("#sidebar").addClass("closing");
$("#red-ui-sidebar").addClass("closing");
sidebarSeparator.closing = true;
}
if (!sidebarSeparator.opening) {
@ -157,13 +132,13 @@ RED.sidebar = (function() {
}
} else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) {
sidebarSeparator.closing = false;
$("#sidebar").removeClass("closing");
$("#red-ui-sidebar").removeClass("closing");
}
var newChartRight = sidebarSeparator.chartRight-d;
$("#workspace").css("right",newChartRight);
$("#editor-stack").css("right",newChartRight+1);
$("#sidebar").width(newSidebarWidth);
$("#red-ui-sidebar").width(newSidebarWidth);
sidebar_tabs.resize();
RED.events.emit("sidebar:resize");
@ -171,26 +146,26 @@ RED.sidebar = (function() {
stop:function(event,ui) {
sidebarSeparator.dragging = false;
if (sidebarSeparator.closing) {
$("#sidebar").removeClass("closing");
$("#red-ui-sidebar").removeClass("closing");
RED.menu.setSelected("menu-item-sidebar",false);
if ($("#sidebar").width() < 180) {
$("#sidebar").width(180);
if ($("#red-ui-sidebar").width() < 180) {
$("#red-ui-sidebar").width(180);
$("#workspace").css("right",187);
$("#editor-stack").css("right",188);
}
}
$("#sidebar-separator").css("left","auto");
$("#sidebar-separator").css("right",($("#sidebar").width()+2)+"px");
$("#red-ui-sidebar-separator").css("left","auto");
$("#red-ui-sidebar-separator").css("right",($("#red-ui-sidebar").width()+2)+"px");
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.hide();
RED.menu.toggleSelected("menu-item-sidebar");
})
$("#sidebar-separator").on("mouseenter", function() {
$("#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");
@ -200,7 +175,7 @@ RED.sidebar = (function() {
sidebarControls.toggle("slide", { direction: "right" }, 200);
}
})
$("#sidebar-separator").on("mouseleave", function() {
$("#red-ui-sidebar-separator").on("mouseleave", function() {
if (!sidebarSeparator.dragging) {
sidebarControls.hide();
}
@ -208,9 +183,9 @@ RED.sidebar = (function() {
function toggleSidebar(state) {
if (!state) {
$("#main-container").addClass("sidebar-closed");
$("#main-container").addClass("red-ui-sidebar-closed");
} else {
$("#main-container").removeClass("sidebar-closed");
$("#main-container").removeClass("red-ui-sidebar-closed");
sidebar_tabs.resize();
}
RED.events.emit("sidebar:resize");
@ -233,6 +208,34 @@ RED.sidebar = (function() {
}
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){
if (state === undefined) {
RED.menu.toggleSelected("menu-item-sidebar");
@ -240,7 +243,7 @@ RED.sidebar = (function() {
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();
RED.sidebar.info.init();
RED.sidebar.config.init();

View File

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

View File

@ -33,12 +33,8 @@ RED.sidebar.context = (function() {
content = $("<div>").css({"position":"relative","height":"100%"});
content.className = "sidebar-context"
// var toolbar = $('<div class="sidebar-header">'+
// '</div>').appendTo(content);
var footerToolbar = $('<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>');
var footerToolbar = $('<div></div>');

View File

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

View File

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

View File

@ -297,13 +297,13 @@ RED.workspaces = (function() {
$("#chart svg").css({"pointer-events":"auto",filter:"none"})
$("#workspace-toolbar").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 {
RED.view.select(false)
$("#chart svg").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%)"})
$(".sidebar-shade").show();
$(".red-ui-sidebar-shade").show();
}
},
minimumActiveTabWidth: 150,

View File

@ -154,11 +154,11 @@
background: $background-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;
z-index: 2;
}
#sidebar-shade {
#red-ui-sidebar-shade {
left: -8px;
top: -1px;
bottom: -1px;

View File

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

View File

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

View File

@ -52,14 +52,9 @@
</div>
<div id="editor-stack"></div>
<div id="red-ui-palette"></div>
<div id="sidebar">
<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="red-ui-sidebar"></div>
<div id="sidebar-separator"></div>
<div id="red-ui-sidebar-separator"></div>
</div>
<div id="full-shade" class="hide"></div>

View File

@ -40,16 +40,16 @@ RED.debug = (function() {
config = _config;
var content = $("<div>").css({"position":"relative","height":"100%"});
var toolbar = $('<div class="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-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);
var toolbar = $('<div class="red-ui-sidebar-header">'+
'<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="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>'+
// '<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="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 selected" id="debug-tab-view-list" href="#"><span data-i18n="">list</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 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>');
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">'+
'<div class="debug-filter-row">'+
'<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="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 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" 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-filterCurrent" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent"></span></a> '+
'</span>'+
'</div>'+
'</div>').appendTo(toolbar);//content);