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 ui redesign

Browse Source
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: [{
dest: 'public/red/style.min.css',
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',
src: [
'ace/**',
'bootstrap/css/**',
//'bootstrap/css/**',
'bootstrap/img/**',
'jquery/css/**',
'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

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

@ -22,7 +22,7 @@ RED.palette = (function() {
function createCategoryContainer(category, label){
label = label || category.replace("_", " ");
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 id="palette-'+category+'-input"></div>'+
'<div id="palette-'+category+'-output"></div>'+

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

@ -97,7 +97,7 @@ RED.sidebar = (function() {
if (!RED.menu.isSelected("menu-item-sidebar")) {
sidebarSeparator.opening = true;
var newChartRight = 15;
var newChartRight = 10;
$("#sidebar").addClass("closing");
$("#workspace").css("right",newChartRight);
$("#chart-zoom-controls").css("right",newChartRight+20);
@ -151,8 +151,8 @@ RED.sidebar = (function() {
RED.menu.setSelected("menu-item-sidebar",false);
if ($("#sidebar").width() < 180) {
$("#sidebar").width(180);
$("#workspace").css("right",208);
$("#chart-zoom-controls").css("right",228);
$("#workspace").css("right",191);
$("#chart-zoom-controls").css("right",211);
}
}
$("#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 width = ul.width();
var tabCount = tabs.size();
var tabWidth = (width-6-(tabCount*7))/tabCount;
var tabWidth = (width-10-(tabCount*6))/tabCount;
currentTabWidth = 100*tabWidth/width;
currentActiveTabWidth = currentTabWidth+"%";
if (options.hasOwnProperty("minimumActiveTabWidth")) {
if (tabWidth < options.minimumActiveTabWidth) {
tabCount -= 1;
tabWidth = (width-7-options.minimumActiveTabWidth-(tabCount*7))/tabCount;
tabWidth = (width-10-options.minimumActiveTabWidth-(tabCount*6))/tabCount;
currentTabWidth = 100*tabWidth/width;
currentActiveTabWidth = options.minimumActiveTabWidth+"px";
} 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 {
clear: both;
color: $form-text-color;
margin-bottom:10px;
}
.form-row label {
@ -73,4 +74,3 @@ button.input-append-right {
font-size: 14px !important;
font-family: monospace !important;
}

8
editor/sass/flow.scss
View File

@ -155,7 +155,7 @@
}
.node_selected {
stroke-width: 2;
stroke: #ff7f0e !important;
stroke: $node-selected-color !important;
}
.node_highlighted {
stroke: #dd1616;
@ -176,14 +176,14 @@
}
.drag_line {
stroke: #ff7f0e;
stroke: $node-selected-color;
stroke-width: 4;
fill: none;
pointer-events: none;
}
.drag_line_hidden {
stroke: #ff7f0e;
stroke: $node-selected-color;
stroke-width: 0;
pointer-events: none;
fill: none;
@ -218,7 +218,7 @@
}
g.link_selected path.link_line {
stroke: #ff7f0e;
stroke: $node-selected-color;
}
g.link_unknown path.link_line {
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 {
padding: 10px;
background: #f0f0f0;
background: #f3f3f3;
border: none;
border-bottom: 2px solid #888;
border-bottom: 1px solid #999;
border-radius: 0;
}
.ui-corner-all {
border-radius: 2px;
border-radius: 1px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: #f3f3f3;

2
editor/sass/mixins.scss
View File

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

8
editor/sass/palette.scss
View File

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

8
editor/sass/sidebar.scss
View File

@ -14,8 +14,6 @@
* limitations under the License.
**/
#sidebar {
position: absolute;
top: 0px;
@ -49,12 +47,12 @@
top: 5px;
right: 316px;
bottom:10px;
width: 15px;
width: 10px;
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: 15px !important; }
.sidebar-closed > #chart-zoom-controls { right: 35px !important; }
.sidebar-closed > #workspace { right: 10px !important; }
.sidebar-closed > #chart-zoom-controls { right: 30px !important; }

5
editor/sass/style.scss
View File

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

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

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

16
editor/sass/tabs.scss
View File

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

6
editor/sass/workspace.scss
View File

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

3
editor/sass/workspaceToolbar.scss
View File

@ -18,9 +18,8 @@
#workspace-toolbar {
display: none;
position: absolute;
top: 30px;
top: 35px;
left:0;
right: 20px;
padding: 7px;
border-bottom-right-radius: 5px;
background: #f3f3f3;

3
editor/templates/index.mst
View File

@ -43,11 +43,10 @@
<div id="main-container" class="sidebar-closed hide">
<div id="palette">
<img src="red/images/spin.svg" class="palette-spinner hide"/>
<div id="palette-container" class="palette-scroll">
</div>
<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>
</div>
<div id="palette-container" class="palette-scroll"></div>
</div><!-- /palette -->
<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() {
var content = document.createElement("div");
$(content).css({"position":"relative","height":"100%"});
var toolbar = document.createElement("div");
toolbar.id = "debug-toolbar";
content.appendChild(toolbar);