frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

More ui redesign

This commit is contained in:
Nick O'Leary 2015-07-13 11:26:29 +01:00
parent 6bde07b5a0
commit 5d8dae05c4
21 changed files with 6213 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Gruntfile.js
View File

@ -156,6 +156,10 @@ module.exports = function(grunt) {
files: [{ files: [{
dest: 'public/red/style.min.css', dest: 'public/red/style.min.css',
src: 'editor/sass/style.scss' src: 'editor/sass/style.scss'
},
{
dest: 'public/vendor/bootstrap/css/bootstrap.min.css',
src: 'editor/vendor/bootstrap/css/bootstrap.css'
}] }]
} }
}, },
@ -254,7 +258,7 @@ module.exports = function(grunt) {
cwd: 'editor/vendor', cwd: 'editor/vendor',
src: [ src: [
'ace/**', 'ace/**',
'bootstrap/css/**', //'bootstrap/css/**',
'bootstrap/img/**', 'bootstrap/img/**',
'jquery/css/**', 'jquery/css/**',
'font-awesome/**' 'font-awesome/**'

BIN
editor/images/grip.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 223 B

After

Width:  |  Height:  |  Size: 193 B

4
editor/js/ui/palette.js
View File

@ -22,7 +22,7 @@ RED.palette = (function() {
function createCategoryContainer(category, label){ function createCategoryContainer(category, label){
label = label || category.replace("_", " "); label = label || category.replace("_", " ");
var catDiv = $("#palette-container").append('<div id="palette-container-'+category+'" class="palette-category hide">'+ var catDiv = $("#palette-container").append('<div id="palette-container-'+category+'" class="palette-category hide">'+
'<div id="palette-header-'+category+'" class="palette-header"><i class="expanded fa fa-caret-down"></i><span>'+label+'</span></div>'+ '<div id="palette-header-'+category+'" class="palette-header"><i class="expanded fa fa-angle-down"></i><span>'+label+'</span></div>'+
'<div class="palette-content" id="palette-base-category-'+category+'">'+ '<div class="palette-content" id="palette-base-category-'+category+'">'+
'<div id="palette-'+category+'-input"></div>'+ '<div id="palette-'+category+'-input"></div>'+
'<div id="palette-'+category+'-output"></div>'+ '<div id="palette-'+category+'-output"></div>'+
@ -150,7 +150,7 @@ RED.palette = (function() {
if ($("#palette-base-category-"+rootCategory).length === 0) { if ($("#palette-base-category-"+rootCategory).length === 0) {
if(core.indexOf(rootCategory) !== -1){ if(core.indexOf(rootCategory) !== -1){
createCategoryContainer(rootCategory, RED._("node-red:palette.label."+rootCategory, {defaultValue:rootCategory})); createCategoryContainer(rootCategory, RED._("node-red:palette.label."+rootCategory, {defaultValue:rootCategory}));
} else { } else {
var ns = def.set.id; var ns = def.set.id;
createCategoryContainer(rootCategory, RED._(ns+":palette.label."+rootCategory, {defaultValue:rootCategory})); createCategoryContainer(rootCategory, RED._(ns+":palette.label."+rootCategory, {defaultValue:rootCategory}));
} }

6
editor/js/ui/sidebar.js
View File

@ -97,7 +97,7 @@ RED.sidebar = (function() {
if (!RED.menu.isSelected("menu-item-sidebar")) { if (!RED.menu.isSelected("menu-item-sidebar")) {
sidebarSeparator.opening = true; sidebarSeparator.opening = true;
var newChartRight = 15; var newChartRight = 10;
$("#sidebar").addClass("closing"); $("#sidebar").addClass("closing");
$("#workspace").css("right",newChartRight); $("#workspace").css("right",newChartRight);
$("#chart-zoom-controls").css("right",newChartRight+20); $("#chart-zoom-controls").css("right",newChartRight+20);
@ -151,8 +151,8 @@ RED.sidebar = (function() {
RED.menu.setSelected("menu-item-sidebar",false); RED.menu.setSelected("menu-item-sidebar",false);
if ($("#sidebar").width() < 180) { if ($("#sidebar").width() < 180) {
$("#sidebar").width(180); $("#sidebar").width(180);
$("#workspace").css("right",208); $("#workspace").css("right",191);
$("#chart-zoom-controls").css("right",228); $("#chart-zoom-controls").css("right",211);
} }
} }
$("#sidebar-separator").css("left","auto"); $("#sidebar-separator").css("left","auto");

4
editor/js/ui/tabs.js
View File

@ -68,14 +68,14 @@ RED.tabs = (function() {
var tabs = ul.find("li.red-ui-tab"); var tabs = ul.find("li.red-ui-tab");
var width = ul.width(); var width = ul.width();
var tabCount = tabs.size(); var tabCount = tabs.size();
var tabWidth = (width-6-(tabCount*7))/tabCount; var tabWidth = (width-10-(tabCount*6))/tabCount;
currentTabWidth = 100*tabWidth/width; currentTabWidth = 100*tabWidth/width;
currentActiveTabWidth = currentTabWidth+"%"; currentActiveTabWidth = currentTabWidth+"%";
if (options.hasOwnProperty("minimumActiveTabWidth")) { if (options.hasOwnProperty("minimumActiveTabWidth")) {
if (tabWidth < options.minimumActiveTabWidth) { if (tabWidth < options.minimumActiveTabWidth) {
tabCount -= 1; tabCount -= 1;
tabWidth = (width-7-options.minimumActiveTabWidth-(tabCount*7))/tabCount; tabWidth = (width-10-options.minimumActiveTabWidth-(tabCount*6))/tabCount;
currentTabWidth = 100*tabWidth/width; currentTabWidth = 100*tabWidth/width;
currentActiveTabWidth = options.minimumActiveTabWidth+"px"; currentActiveTabWidth = options.minimumActiveTabWidth+"px";
} else { } else {

25
editor/sass/colors.scss Normal file
View File

@ -0,0 +1,25 @@
/**
* Copyright 2015 IBM Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/
$form-placeholder-color: #bbbbbb;
$form-text-color: #444;
$form-input-focus-color: rgba(85,150,230,0.8);
$form-input-border-color: #ccc;
$node-selected-color: #5596E6; // #ff7f0e
$primary-border-color: #bbbbbb;

2
editor/sass/editor.scss
View File

@ -29,6 +29,7 @@
.form-row { .form-row {
clear: both; clear: both;
color: $form-text-color;
margin-bottom:10px; margin-bottom:10px;
} }
.form-row label { .form-row label {
@ -73,4 +74,3 @@ button.input-append-right {
font-size: 14px !important; font-size: 14px !important;
font-family: monospace !important; font-family: monospace !important;
} }

8
editor/sass/flow.scss
View File

@ -155,7 +155,7 @@
} }
.node_selected { .node_selected {
stroke-width: 2; stroke-width: 2;
stroke: #ff7f0e !important; stroke: $node-selected-color !important;
} }
.node_highlighted { .node_highlighted {
stroke: #dd1616; stroke: #dd1616;
@ -176,14 +176,14 @@
} }
.drag_line { .drag_line {
stroke: #ff7f0e; stroke: $node-selected-color;
stroke-width: 4; stroke-width: 4;
fill: none; fill: none;
pointer-events: none; pointer-events: none;
} }
.drag_line_hidden { .drag_line_hidden {
stroke: #ff7f0e; stroke: $node-selected-color;
stroke-width: 0; stroke-width: 0;
pointer-events: none; pointer-events: none;
fill: none; fill: none;
@ -218,7 +218,7 @@
} }
g.link_selected path.link_line { g.link_selected path.link_line {
stroke: #ff7f0e; stroke: $node-selected-color;
} }
g.link_unknown path.link_line { g.link_unknown path.link_line {
stroke: #f00; stroke: #f00;

1048
editor/sass/forms.scss Normal file
View File

File diff suppressed because it is too large Load Diff

6
editor/sass/jquery.scss
View File

@ -37,13 +37,13 @@
} }
.ui-dialog .ui-dialog-titlebar { .ui-dialog .ui-dialog-titlebar {
padding: 10px; padding: 10px;
background: #f0f0f0; background: #f3f3f3;
border: none; border: none;
border-bottom: 2px solid #888; border-bottom: 1px solid #999;
border-radius: 0; border-radius: 0;
} }
.ui-corner-all { .ui-corner-all {
border-radius: 2px; border-radius: 1px;
} }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: #f3f3f3; background: #f3f3f3;

2
editor/sass/mixins.scss
View File

@ -23,6 +23,6 @@
} }
@mixin component-border { @mixin component-border {
border: 1px solid #999; border: 1px solid $primary-border-color;
box-sizing: border-box; box-sizing: border-box;
} }

8
editor/sass/palette.scss
View File

@ -32,7 +32,7 @@
position: absolute; position: absolute;
top: 35px; top: 35px;
right: 0; right: 0;
bottom: 0; bottom: 0px;
left:0; left:0;
padding: 0; padding: 0;
overflow-y: auto; overflow-y: auto;
@ -52,7 +52,7 @@
text-align: center; text-align: center;
height: 35px; height: 35px;
padding: 3px; padding: 3px;
border-bottom: 1px solid #999; border-bottom: 1px solid $primary-border-color;
box-sizing:border-box; box-sizing:border-box;
} }
#palette-search i { #palette-search i {
@ -126,6 +126,7 @@
clear: both; clear: both;
} }
.palette_label { .palette_label {
font-size: 13px;
margin: 4px 0 4px 28px; margin: 4px 0 4px 28px;
line-height: 20px; line-height: 20px;
overflow: hidden; overflow: hidden;
@ -137,7 +138,6 @@
.palette_node { .palette_node {
cursor:move; cursor:move;
font-size:13px;
background: #ddd; background: #ddd;
margin: 10px auto; margin: 10px auto;
height: 25px; height: 25px;
@ -150,7 +150,7 @@
position: relative; position: relative;
} }
.palette_node:hover { .palette_node:hover {
border-color: #ff7f0e; border-color: $node-selected-color;
background-color: #eee; background-color: #eee;
} }
.palette_port { .palette_port {

8
editor/sass/sidebar.scss
View File

@ -14,8 +14,6 @@
* limitations under the License. * limitations under the License.
**/ **/
#sidebar { #sidebar {
position: absolute; position: absolute;
top: 0px; top: 0px;
@ -49,12 +47,12 @@
top: 5px; top: 5px;
right: 316px; right: 316px;
bottom:10px; bottom:10px;
width: 15px; width: 10px;
background: url(images/grip.png) no-repeat 50% 50%; background: url(images/grip.png) no-repeat 50% 50%;
cursor: col-resize; cursor: col-resize;
} }
.sidebar-closed > #sidebar { display: none; } .sidebar-closed > #sidebar { display: none; }
.sidebar-closed > #sidebar-separator { right: 0px !important; } .sidebar-closed > #sidebar-separator { right: 0px !important; }
.sidebar-closed > #workspace { right: 15px !important; } .sidebar-closed > #workspace { right: 10px !important; }
.sidebar-closed > #chart-zoom-controls { right: 35px !important; } .sidebar-closed > #chart-zoom-controls { right: 30px !important; }

5
editor/sass/style.scss
View File

@ -14,8 +14,11 @@
* limitations under the License. * limitations under the License.
**/ **/
@import "colors";
@import "mixins"; @import "mixins";
@import "forms";
@import "jquery"; @import "jquery";
@import "bootstrap"; @import "bootstrap";
@ -44,7 +47,7 @@
body { body {
font: 13px "Helvetica" !important; font: 14px "Helvetica" !important;
padding-top: 100px; padding-top: 100px;
background: #f3f3f3; background: #f3f3f3;
} }

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

@ -56,22 +56,23 @@ div.node-info {
text-decoration: none; text-decoration: none;
} }
.node-help { .node-help {
font-size: 16px; font-size: 14px;
line-height: 1.5em;
h1 { h1 {
font-weight: normal; font-weight: normal;
font-size: 1.953em; font-size: 23px;
margin: 8px auto; margin: 8px auto;
} }
h2 { h2 {
font-weight: normal; font-weight: normal;
font-size: 1.563em; font-size: 16px;
margin: 8px auto; margin: 8px auto;
} }
h3, h3,
h4, h4,
h5 { h5 {
font-weight: normal; font-weight: normal;
font-size: 1.25em; font-size: 14px;
margin: 8px auto; margin: 8px auto;
} }
} }

16
editor/sass/tabs.scss
View File

@ -21,7 +21,7 @@ ul.red-ui-tabs {
display: block; display: block;
height: 35px; height: 35px;
box-sizing:border-box; box-sizing:border-box;
border-bottom: 1px solid #999; border-bottom: 1px solid $primary-border-color;
background: #fff; background: #fff;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -31,16 +31,16 @@ ul.red-ui-tabs {
} }
ul.red-ui-tabs li { ul.red-ui-tabs li {
box-sizing:border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
border-left: 1px solid #999; border-left: 1px solid $primary-border-color;
border-top: 1px solid #999; border-top: 1px solid $primary-border-color;
border-right: 1px solid #999; border-right: 1px solid $primary-border-color;
border-bottom: 1px solid #999; border-bottom: 1px solid $primary-border-color;
background: #f3f3f3; background: #f3f3f3;
margin: 3px 3px 0 3px; margin: 3px 3px 0 3px;
height: 32px; height: 32px;
line-height: 24px; line-height: 29px;
max-width: 200px; max-width: 200px;
width: 14%; width: 14%;
overflow: hidden; overflow: hidden;
@ -49,7 +49,7 @@ ul.red-ui-tabs li {
ul.red-ui-tabs li a.red-ui-tab-label { ul.red-ui-tabs li a.red-ui-tab-label {
display: block; display: block;
padding: 3px 12px; padding-left: 12px;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #666; color: #666;

6
editor/sass/workspace.scss
View File

@ -35,7 +35,7 @@
top:0px; top:0px;
left:179px; left:179px;
bottom: 10px; bottom: 10px;
right: 330px; right: 326px;
overflow: hidden; overflow: hidden;
@include component-border; @include component-border;
} }
@ -60,8 +60,8 @@
right: 0; right: 0;
height: 34px; height: 34px;
width: 28px; width: 28px;
border-bottom: 1px solid #999; border-bottom: 1px solid $primary-border-color;
border-left: 1px solid #999; border-left: 1px solid $primary-border-color;
} }
#btn-workspace-add-tab { #btn-workspace-add-tab {

5
editor/sass/workspaceToolbar.scss
View File

@ -14,13 +14,12 @@
* limitations under the License. * limitations under the License.
**/ **/
#workspace-toolbar { #workspace-toolbar {
display: none; display: none;
position: absolute; position: absolute;
top: 30px; top: 35px;
left:0; left:0;
right: 20px;
padding: 7px; padding: 7px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
background: #f3f3f3; background: #f3f3f3;

3
editor/templates/index.mst
View File

@ -43,11 +43,10 @@
<div id="main-container" class="sidebar-closed hide"> <div id="main-container" class="sidebar-closed hide">
<div id="palette"> <div id="palette">
<img src="red/images/spin.svg" class="palette-spinner hide"/> <img src="red/images/spin.svg" class="palette-spinner hide"/>
<div id="palette-container" class="palette-scroll">
</div>
<div id="palette-search"> <div id="palette-search">
<i class="fa fa-search"></i><input id="palette-search-input" type="text" data-i18n="[placeholder]palette.filter"><a href="#" id="palette-search-clear"><i class="fa fa-times"></i></a></input> <i class="fa fa-search"></i><input id="palette-search-input" type="text" data-i18n="[placeholder]palette.filter"><a href="#" id="palette-search-clear"><i class="fa fa-times"></i></a></input>
</div> </div>
<div id="palette-container" class="palette-scroll"></div>
</div><!-- /palette --> </div><!-- /palette -->
<div id="workspace"> <div id="workspace">

5088
editor/vendor/bootstrap/css/bootstrap.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

2
nodes/core/core/58-debug.html
View File

@ -128,7 +128,7 @@
}, },
onpaletteadd: function() { onpaletteadd: function() {
var content = document.createElement("div"); var content = document.createElement("div");
$(content).css({"position":"relative","height":"100%"});
var toolbar = document.createElement("div"); var toolbar = document.createElement("div");
toolbar.id = "debug-toolbar"; toolbar.id = "debug-toolbar";
content.appendChild(toolbar); content.appendChild(toolbar);