frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Make debug/config sidebar headers consistent

Browse Source
This commit is contained in:
Nick O'Leary 2016-01-12 23:55:18 +00:00
parent cb8fe8462a
commit fa4006619e
6 changed files with 25 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
editor/js/ui/tab-config.js
View File

@ -19,7 +19,7 @@ RED.sidebar.config = (function() {
var content = document.createElement("div"); var content = document.createElement("div");
content.className = "sidebar-node-config" content.className = "sidebar-node-config"
$('<div id="sidebar-node-config-header">'+ $('<div class="button-group sidebar-header">'+
'<a class="sidebar-header-button selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+ '<a class="sidebar-header-button selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
'<a class="sidebar-header-button" id="workspace-config-node-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+ '<a class="sidebar-header-button" id="workspace-config-node-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+
'</div>' '</div>'

1
editor/sass/colors.scss
View File

@ -43,6 +43,7 @@ $workspace-button-color-disabled: #ccc;
$workspace-button-color-focus: #999; $workspace-button-color-focus: #999;
$workspace-button-color-hover: #666; $workspace-button-color-hover: #666;
$workspace-button-color-active: #666; $workspace-button-color-active: #666;
$workspace-button-color-selected: #AAA;
$typedInput-button-background: #efefef; $typedInput-button-background: #efefef;
$typedInput-button-background-hover: #ddd; $typedInput-button-background-hover: #ddd;

7
editor/sass/mixins.scss
View File

@ -58,11 +58,16 @@
text-decoration: none; text-decoration: none;
} }
&.selected:not(.disabled) { &.selected:not(.disabled) {
color: $workspace-button-color-active; color: $workspace-button-color-selected;
background: $workspace-button-background-active; background: $workspace-button-background-active;
cursor: default; cursor: default;
} }
.button-group &:not(:first-child) {
border-left: none;
} }
}
@mixin component-footer { @mixin component-footer {
border-top: 1px solid $primary-border-color; border-top: 1px solid $primary-border-color;
background: #f3f3f3; background: #f3f3f3;

11
editor/sass/sidebar.scss
View File

@ -62,6 +62,14 @@
padding: 2px 8px; padding: 2px 8px;
} }
.sidebar-header {
color: #666;
text-align: right;
padding: 8px 10px;
background: #f3f3f3;
border-bottom: 1px solid $secondary-border-color;
}
#sidebar-footer { #sidebar-footer {
@include component-footer; @include component-footer;
} }
@ -75,3 +83,6 @@
line-height: 13px; line-height: 13px;
padding: 5px 8px; padding: 5px 8px;
} }
.sidebar-header-button:not(:first-child) {
border-left: none;
}

11
editor/sass/tab-config.scss
View File

@ -67,14 +67,3 @@
border-style: dashed; border-style: dashed;
color: #aaa; color: #aaa;
} }
#sidebar-node-config-header {
color: #666;
text-align: right;
padding: 8px 10px;
background: #f3f3f3;
border-bottom: 1px solid $secondary-border-color;
}
.sidebar-header-button:not(:first-child) {
border-left: none;
}

24
nodes/core/core/58-debug.html
View File

@ -127,17 +127,10 @@
} }
}, },
onpaletteadd: function() { onpaletteadd: function() {
var content = document.createElement("div"); var content = $("<div>").css({"position":"relative","height":"100%"});
$(content).css({"position":"relative","height":"100%"}); var toolbar = $('<div class="sidebar-header"><a id="debug-tab-clear" title="clear log" class="button" href="#"><i class="fa fa-trash"></i></a></div>').appendTo(content);
var toolbar = document.createElement("div");
toolbar.id = "debug-toolbar";
content.appendChild(toolbar);
toolbar.innerHTML = '<div class="pull-right"><a id="debug-tab-clear" title="clear log" class="button" href="#"><i class="fa fa-trash"></i></a></div> '; var messages = $('<div id="debug-content"/>').appendTo(content);
var messages = document.createElement("div");
messages.id = "debug-content";
content.appendChild(messages);
RED.sidebar.addTab({ RED.sidebar.addTab({
id: "debug", id: "debug",
@ -221,9 +214,9 @@
'</span>'; '</span>';
} }
msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>'; msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>';
var atBottom = (sbc.scrollHeight-messages.offsetHeight-sbc.scrollTop) < 5; var atBottom = (sbc.scrollHeight-messages.height()-sbc.scrollTop) < 5;
messageCount++; messageCount++;
$(messages).append(msg); messages.append(msg);
if (messageCount > 200) { if (messageCount > 200) {
$("#debug-content .debug-message:first").remove(); $("#debug-content .debug-message:first").remove();
@ -257,17 +250,12 @@
<style> <style>
#debug-content { #debug-content {
position: absolute; position: absolute;
top: 30px; top: 43px;
bottom: 0px; bottom: 0px;
left:0px; left:0px;
right: 0px; right: 0px;
overflow-y: scroll; overflow-y: scroll;
} }
#debug-toolbar {
padding: 3px 10px;
height: 24px;
background: #f3f3f3;
}
.debug-message { .debug-message {
cursor: pointer; cursor: pointer;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;