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

More restyling - workspace buttons

Browse Source
This commit is contained in:
Nick O'Leary 2015-07-13 15:08:17 +01:00
parent 5d8dae05c4
commit a1d7bb4208
7 changed files with 75 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
editor/js/ui/workspaces.js
View File

@ -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

11
editor/sass/colors.scss
View File

@ -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;

14
editor/sass/library.scss
View File

@ -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;
}

27
editor/sass/mixins.scss
View File

@ -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;
}
}

23
editor/sass/workspace.scss
View File

@ -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;
}

30
editor/sass/workspaceToolbar.scss
View File

@ -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;
}

10
editor/templates/index.mst
View File

@ -62,11 +62,9 @@
</div>
<div id="chart-zoom-controls">
<div class="btn-group">
<a class="btn btn-mini" id="btn-zoom-out" href="#"><i class="fa fa-search-minus"></i></a>
<a class="btn btn-mini" id="btn-zoom-zero" href="#"><i class="fa fa-dot-circle-o"></i></a>
<a class="btn btn-mini" id="btn-zoom-in" href="#"><i class="fa fa-search-plus"></i></a>
</div>
<a class="chart-zoom-button" id="btn-zoom-out" href="#"><i class="fa fa-minus"></i></a>
<a class="chart-zoom-button" id="btn-zoom-zero" href="#"><i class="fa fa-circle-o"></i></a>
<a class="chart-zoom-button" id="btn-zoom-in" href="#"><i class="fa fa-plus"></i></a>
</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">