Make debug/config sidebar headers consistent

node-red · Jan 12, 2016 · fa40066 · fa40066
1 parent cb8fe84
commit fa40066
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 31 deletions.
diff --git a/editor/js/ui/tab-config.js b/editor/js/ui/tab-config.js
@@ -19,7 +19,7 @@ RED.sidebar.config = (function() {
     var content = document.createElement("div");
     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" id="workspace-config-node-filter-unused" href="#"><span data-i18n="sidebar.config.filterUnused"></span></a> '+
       '</div>'

diff --git a/editor/sass/colors.scss b/editor/sass/colors.scss
@@ -43,6 +43,7 @@ $workspace-button-color-disabled: #ccc;
 $workspace-button-color-focus: #999;
 $workspace-button-color-hover: #666;
 $workspace-button-color-active: #666;
+$workspace-button-color-selected: #AAA;
 
 $typedInput-button-background: #efefef;
 $typedInput-button-background-hover: #ddd;

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

diff --git a/editor/sass/sidebar.scss b/editor/sass/sidebar.scss
@@ -62,6 +62,14 @@
     padding: 2px 8px;
 }
 
+.sidebar-header {
+    color: #666;
+    text-align: right;
+    padding: 8px 10px;
+    background: #f3f3f3;
+    border-bottom: 1px solid $secondary-border-color;
+}
+
 #sidebar-footer {
     @include component-footer;
 }
@@ -75,3 +83,6 @@
     line-height: 13px;
     padding: 5px 8px;
 }
+.sidebar-header-button:not(:first-child) {
+    border-left: none;
+}
diff --git a/editor/sass/tab-config.scss b/editor/sass/tab-config.scss
@@ -67,14 +67,3 @@
     border-style: dashed;
     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;
-}
diff --git a/nodes/core/core/58-debug.html b/nodes/core/core/58-debug.html
@@ -127,17 +127,10 @@
             }
         },
         onpaletteadd: function() {
-            var content = document.createElement("div");
-            $(content).css({"position":"relative","height":"100%"});
-            var toolbar = document.createElement("div");
-            toolbar.id = "debug-toolbar";
-            content.appendChild(toolbar);
+            var content = $("<div>").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);
 
-            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 = document.createElement("div");
-            messages.id = "debug-content";
-            content.appendChild(messages);
+            var messages = $('<div id="debug-content"/>').appendTo(content);
 
             RED.sidebar.addTab({
                 id: "debug",
@@ -221,9 +214,9 @@
                                     '</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++;
-                $(messages).append(msg);
+                messages.append(msg);
 
                 if (messageCount > 200) {
                     $("#debug-content .debug-message:first").remove();
@@ -257,17 +250,12 @@
 <style>
     #debug-content {
         position: absolute;
-        top: 30px;
+        top: 43px;
         bottom: 0px;
         left:0px;
         right: 0px;
         overflow-y: scroll;
     }
-    #debug-toolbar {
-        padding: 3px 10px;
-        height: 24px;
-        background: #f3f3f3;
-    }
     .debug-message {
         cursor: pointer;
         border-bottom: 1px solid #eee;