diff --git a/editor/js/ui/workspaces.js b/editor/js/ui/workspaces.js
index 5eeac88ee..9e4bf9560 100644
--- a/editor/js/ui/workspaces.js
+++ b/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
diff --git a/editor/sass/colors.scss b/editor/sass/colors.scss
index c04a55409..4a9ab8fcd 100644
--- a/editor/sass/colors.scss
+++ b/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;
diff --git a/editor/sass/library.scss b/editor/sass/library.scss
index 50429d92e..987811881 100644
--- a/editor/sass/library.scss
+++ b/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;
+}
diff --git a/editor/sass/mixins.scss b/editor/sass/mixins.scss
index dade50065..c9f93d9a5 100644
--- a/editor/sass/mixins.scss
+++ b/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;
+ }
}
diff --git a/editor/sass/workspace.scss b/editor/sass/workspace.scss
index 4acbf1ba6..a2a728070 100644
--- a/editor/sass/workspace.scss
+++ b/editor/sass/workspace.scss
@@ -42,18 +42,22 @@
#chart-zoom-controls {
position: absolute;
- bottom:30px; right: 350px;
+ bottom:30px;
+ right: 350px;
}
-#chart-zoom-controls {
- padding-top: 3px;
- text-align: right;
- float: right;
+.chart-zoom-button {
+ @include workspace-button;
+ font-size: 10px;
+ 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;
}
diff --git a/editor/sass/workspaceToolbar.scss b/editor/sass/workspaceToolbar.scss
index 20bae633f..7698f4bf8 100644
--- a/editor/sass/workspaceToolbar.scss
+++ b/editor/sass/workspaceToolbar.scss
@@ -20,34 +20,18 @@
position: absolute;
top: 35px;
left:0;
+ width: 100%;
padding: 7px;
- border-bottom-right-radius: 5px;
- background: #f3f3f3;
+ height: 40px;
+ 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;
-}
-#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;
+ padding: 2px 8px;
}
diff --git a/editor/templates/index.mst b/editor/templates/index.mst
index f72d00bd0..c3f518021 100644
--- a/editor/templates/index.mst
+++ b/editor/templates/index.mst
@@ -62,11 +62,9 @@