More restyling - workspace buttons

editor/js/ui/workspaces.js

@@ -85,9 +85,11 @@ RED.workspaces = (function() {
             id: "workspace-tabs",
             onchange: function(tab) {
                 if (tab.type == "subflow") {
+                    $("#chart").css({"margin-top": "40px"});
                     $("#workspace-toolbar").show();
                 } else {
                     $("#workspace-toolbar").hide();
+                    $("#chart").css({"margin-top": "0"});
                 }
                 var event = {
                     old: activeWorkspace

editor/sass/colors.scss

@@ -15,7 +15,6 @@
  **/
 
 $form-placeholder-color: #bbbbbb;
-
 $form-text-color: #444;
 $form-input-focus-color:  rgba(85,150,230,0.8);
 $form-input-border-color:  #ccc;
@@ -23,3 +22,13 @@ $form-input-border-color:  #ccc;
 $node-selected-color: #5596E6; // #ff7f0e
 
 $primary-border-color: #bbbbbb;
+$secondary-border-color: #dddddd;
+
+$workspace-button-background: #fff;
+$workspace-button-background-hover: #f3f3f3;
+$workspace-button-background-active: #efefef;
+$workspace-button-color: #999;
+$workspace-button-color-disabled: #ccc;
+$workspace-button-color-focus: #999;
+$workspace-button-color-hover: #666;
+$workspace-button-color-active: #666;

editor/sass/library.scss

@@ -31,3 +31,17 @@
 #node-select-library li.list-hover {
     background: #ffffd0;
 }
+
+.library-button {
+    box-sizing: border-box;
+    height: 28px;
+    line-height: 28px;
+    display: inline-block;
+    font-size: 12px;
+    padding: 0px 8px;
+    text-decoration: none;
+    border-radius: 0px;
+    color: #666;
+    background: #f6f6f6;
+    margin: 0 5px;
+}

editor/sass/mixins.scss

@@ -25,4 +25,31 @@
 @mixin component-border {
    border: 1px solid $primary-border-color;
    box-sizing: border-box;
+
+}
+
+@mixin workspace-button {
+    color: $workspace-button-color;
+    box-sizing: border-box;
+    display: inline-block;
+    background: $workspace-button-background;
+    border: 1px solid $secondary-border-color;
+    text-align: center;
+    margin:0;
+    text-decoration: none;
+    &.disabled {
+        cursor: default;
+        color: $workspace-button-color-disabled;
+    }
+    &:not(.disabled):hover {
+        color: $workspace-button-color-hover;
+        background: $workspace-button-background-hover;
+    }
+    &:not(.disabled):focus {
+        color: $workspace-button-color-focus;
+    }
+    &:not(.disabled):active {
+        color: $workspace-button-color-active;
+        background: $workspace-button-background-active;
+    }
 }

editor/sass/workspace.scss

@@ -42,18 +42,22 @@
 
 #chart-zoom-controls {
     position: absolute;
-    bottom:30px; right: 350px;
+    bottom:30px;
+    right: 350px;
 }
 
-#chart-zoom-controls {
+.chart-zoom-button {
-    padding-top: 3px;
+    @include workspace-button;
-    text-align: right;
+    font-size: 10px;
-    float: right;
+    line-height: 17px;
+    width: 18px;
+    height: 18px;
 }
 
 #workspace-tabs {
     margin-right: 28px;
 }
+
 #workspace-add-tab {
     position: absolute;
     top: 0;
@@ -65,14 +69,9 @@
 }
 
 #btn-workspace-add-tab {
-    display: inline-block;
+    @include workspace-button;
+    border: none;
     width: 100%;
-    background: #f3f3f3;
     height: 100%;
     line-height: 35px;
-    text-align: center;
-    color: #000;
-}
-#btn-workspace-add-tab:hover {
-    background: #ddd;
 }

editor/sass/workspaceToolbar.scss

@@ -20,34 +20,18 @@
     position: absolute;
     top: 35px;
     left:0;
+    width: 100%;
     padding: 7px;
-    border-bottom-right-radius: 5px;
+    height: 40px;
-    background: #f3f3f3;
+    box-sizing: border-box;
+    background: #fff;
+    border-bottom: 1px solid $secondary-border-color;
 }
 
 #workspace-toolbar .button {
+    @include workspace-button;
     line-height: 18px;
-    display: inline-block;
     font-size: 12px;
-    padding: 2px 8px;
-    text-decoration: none;
-    border-radius: 3px;
-    color: #666;
-    background: #f6f6f6;
-    vertical-align: middle;
-    box-shadow: 0 0 2px #888;
     margin-right: 5px;
-}
+    padding: 2px 8px;
-#workspace-toolbar .button.disabled {
-    box-shadow: 0 0 2px #bbb;
-    color: #aaa;
-    cursor: default;
-}
-#workspace-toolbar .button:not(.disabled):hover {
-    background: #e6e6e6;
-    box-shadow: 0 0 2px #666;
-}
-#workspace-toolbar .button:not(.disabled):active {
-    background: #e0e0e0;
-    box-shadow: 0 0 2px #444;
 }

editor/templates/index.mst

@@ -62,11 +62,9 @@
     </div>
 
     <div id="chart-zoom-controls">
-        <div class="btn-group">
+        <a class="chart-zoom-button" id="btn-zoom-out" href="#"><i class="fa fa-minus"></i></a>
-            <a class="btn btn-mini" id="btn-zoom-out" href="#"><i class="fa fa-search-minus"></i></a>
+        <a class="chart-zoom-button" id="btn-zoom-zero" href="#"><i class="fa fa-circle-o"></i></a>
-            <a class="btn btn-mini" id="btn-zoom-zero" href="#"><i class="fa fa-dot-circle-o"></i></a>
+        <a class="chart-zoom-button" id="btn-zoom-in" href="#"><i class="fa fa-plus"></i></a>
-            <a class="btn btn-mini" id="btn-zoom-in" href="#"><i class="fa fa-search-plus"></i></a>
-        </div>
     </div>
 
     <div id="sidebar">
@@ -128,7 +126,7 @@
     <form class="form-horizontal">
         <div class="form-row">
             <ul id="node-dialog-library-breadcrumbs" class="breadcrumb">
-                <li class="active" data-i18n="[append]library.breadcrumb"><a href="#"></a></li>
+                <li class="active"><a href="#" data-i18n="[append]library.breadcrumb"></a></li>
             </ul>
         </div>
         <div class="form-row">