frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

More UI refresh

Browse Source
This commit is contained in:
Nick O'Leary
2015-07-13 23:21:03 +01:00
parent 62e8f564b9
commit 27aa5ae7db
25 changed files with 189 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
editor/sass/colors.scss
View File

@@ -19,13 +19,24 @@ $form-text-color: #444;
$form-input-focus-color: rgba(85,150,230,0.8);
$form-input-border-color: #ccc;
$node-selected-color: #5596E6; // #ff7f0e
$node-selected-color: #ff7f0e;
$port-selected-color: #ff7f0e;
$link-color: #888;
$link-subflow-color: #bbb;
$link-unknown-color: #f00;
$primary-border-color: #bbbbbb;
$secondary-border-color: #dddddd;
$tab-background-active: #fff;
$tab-background-inactive: #f0f0f0;
$tab-background-hover: #ddd;
$palette-header-background: #f3f3f3;
$workspace-button-background: #fff;
$workspace-button-background-hover: #f3f3f3;
$workspace-button-background-hover: #ddd;
$workspace-button-background-active: #efefef;
$workspace-button-color: #999;
$workspace-button-color-disabled: #ccc;

34
editor/sass/editor.scss
View File

@@ -30,7 +30,7 @@
.form-row {
clear: both;
color: $form-text-color;
margin-bottom:10px;
margin-bottom:12px;
}
.form-row label {
display: inline-block;
@@ -40,32 +40,21 @@
width:70%;
}
input.input-append-left {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
button.input-append-right {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
margin-left: -1px !important;
padding-left: 4px !important;
padding-right: 4px !important;
}
.form-tips {
background: lightgoldenrodyellow;
background: #ffe;
font-size: 12px;
padding: 8px;
border-radius: 5px;
border: 1px solid #999;
border-radius: 2px;
border: 1px solid $secondary-border-color;
max-width: 450px;
}
.form-tips code {
border: none;
padding: auto;
}
.form-tips a {
text-decoration: underline;
}
.node-text-editor {
border:1px solid #ccc;
@@ -74,3 +63,12 @@ button.input-append-right {
font-size: 14px !important;
font-family: monospace !important;
}
.editor-button {
@include workspace-button;
height: 30px;
line-height: 28px;
font-size: 12px;
border-radius: 3px;
padding: 0 10px;
}

10
editor/sass/flow.scss
View File

@@ -166,8 +166,8 @@
}
.port_hovered {
stroke: #ff7f0e;
fill: #ff7f0e;
stroke: $port-selected-color;
fill: $port-selected-color;
}
.subflowport {
stroke-dasharray: 5,5;
@@ -190,14 +190,14 @@
}
.link_line {
stroke: #7f7f7f;
stroke: $link-color;
stroke-width: 3;
fill: none;
pointer-events: none;
}
.link_subflow {
stroke: #bbb;
stroke: $link-subflow-color;
stroke-dasharray: 10,5;
stroke-width: 2;
}
@@ -221,7 +221,7 @@ g.link_selected path.link_line {
stroke: $node-selected-color;
}
g.link_unknown path.link_line {
stroke: #f00;
stroke: $link-unknown-color;
stroke-width: 2;
stroke-dasharray: 10, 4;
}

14
editor/sass/library.scss
View File

@@ -31,17 +31,3 @@
#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;
}

3
editor/sass/mixins.scss
View File

@@ -29,6 +29,7 @@
}
@mixin workspace-button {
@include disable-selection;
color: $workspace-button-color;
box-sizing: border-box;
display: inline-block;
@@ -37,11 +38,13 @@
text-align: center;
margin:0;
text-decoration: none;
cursor:pointer;
&.disabled {
cursor: default;
color: $workspace-button-color-disabled;
}
&:not(.disabled):hover {
text-decoration: none;
color: $workspace-button-color-hover;
background: $workspace-button-background-hover;
}

90
editor/sass/notifications.scss
View File

@@ -14,19 +14,87 @@
* limitations under the License.
**/
#notifications {
z-index: 10000;
width: 500px;
margin-left: -250px;
left: 50%;
position: absolute;
top: 1px;
}
.notification {
box-sizing: border-box;
position: relative;
padding: 14px 18px;
margin-bottom: 4px;
box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
background-color: #fff;
color: #666;
border: 1px solid #325C80;
border-left-width: 16px;
}
.notification-success {
border-color: #4B8400;
}
.notification-warning {
border-color: #D74108;
}
.notification-error {
border-color: #AD1625;
}
/*
.notification {
box-sizing: border-box;
position: relative;
padding: 12px 20px;
margin-bottom: 4px;
box-shadow: 0 1px 1px 1px rgba(0,0,0, 0.15);
color: #f0f0f0;
background-color: #5AAAFA;
border: 1px solid #325C80;
border-left-width: 16px;
}
.notification-success {
background: #5AA700;
border-color: #4B8400;
}
.notification-warning {
background:#FF7832;
border-color: #D74108;
}
.notification-error {
background: #FF5050;
border-color: #AD1625;
}
*/
/*
.notification {
position: absolute;
position: relative;
padding: 12px 20px;
margin-bottom: 4px;
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.15);
color: #325C80;
background-color: #C0E6FF;
border: 1px solid #325C80;
}
#notifications {
z-index: 10000;
width: 500px;
margin-left: -250px;
left: 50%;
position: absolute;
top: 1px;
.notification-success {
color: #4B8400;
background-color: #C8F08F;
border-color: #4B8400;
}
#notifications .alert {
box-shadow: 0 0 1px 1px;
margin-bottom: 5px;
.notification-warning {
color:#D74108;
border-color: #D74108;
background-color:#FFD791;
}
.notification-error {
color: #AD1625;
background-color: #FFD2DD;
border-color: #AD1625;
}
*/

2
editor/sass/palette.scss
View File

@@ -102,7 +102,7 @@
}
.palette-header {
background: #f3f3f3;
background: $palette-header-background;
cursor: pointer;
text-align: left;
padding: 9px;

14
editor/sass/sidebar.scss
View File

@@ -45,14 +45,22 @@
#sidebar-separator {
position: absolute;
top: 5px;
right: 316px;
right: 315px;
bottom:10px;
width: 10px;
width: 7px;
background: url(images/grip.png) no-repeat 50% 50%;
cursor: col-resize;
}
.sidebar-closed > #sidebar { display: none; }
.sidebar-closed > #sidebar-separator { right: 0px !important; }
.sidebar-closed > #workspace { right: 10px !important; }
.sidebar-closed > #workspace { right: 7px !important; }
.sidebar-closed > #chart-zoom-controls { right: 30px !important; }
#sidebar .button {
@include workspace-button;
line-height: 18px;
font-size: 12px;
margin-right: 5px;
padding: 2px 8px;
}

10
editor/sass/tab-info.scss
View File

@@ -14,6 +14,10 @@
* limitations under the License.
**/
.sidebar-node-info hr {
margin: 10px 0;
}
table.node-info {
font-size: 14px;
margin: 5px;
@@ -64,11 +68,15 @@ div.node-info {
margin: 8px auto;
}
h2 {
font-weight: normal;
font-size: 18px;
margin: 8px auto;
}
h3 {
font-weight: normal;
font-size: 16px;
margin: 8px auto;
}
h3,
h4,
h5 {
font-weight: normal;

6
editor/sass/tabs.scss
View File

@@ -37,7 +37,7 @@ ul.red-ui-tabs li {
border-top: 1px solid $primary-border-color;
border-right: 1px solid $primary-border-color;
border-bottom: 1px solid $primary-border-color;
background: #f3f3f3;
background: $tab-background-inactive;
margin: 3px 3px 0 3px;
height: 32px;
line-height: 29px;
@@ -77,14 +77,14 @@ ul.red-ui-tabs li a.red-ui-tab-close:hover {
}
ul.red-ui-tabs li a:hover {
text-decoration: none;
background: #ddd;
background: $tab-background-hover;
}
ul.red-ui-tabs li a:focus {
text-decoration: none;
}
ul.red-ui-tabs li.active {
background: #fff;
background: $tab-background-active;
font-weight: bold;
border-bottom: 1px solid #fff;
}

2
editor/sass/workspace.scss
View File

@@ -35,7 +35,7 @@
top:0px;
left:179px;
bottom: 10px;
right: 326px;
right: 322px;
overflow: hidden;
@include component-border;
}