More ui redesign

Gruntfile.js

@@ -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/**'

editor/js/ui/palette.js

@@ -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>'+
@@ -150,7 +150,7 @@ RED.palette = (function() {
             if ($("#palette-base-category-"+rootCategory).length === 0) {
                 if(core.indexOf(rootCategory) !== -1){
                     createCategoryContainer(rootCategory, RED._("node-red:palette.label."+rootCategory, {defaultValue:rootCategory}));
-                } else { 
+                } else {
                     var ns = def.set.id;
                     createCategoryContainer(rootCategory, RED._(ns+":palette.label."+rootCategory, {defaultValue:rootCategory}));
                 }

editor/js/ui/sidebar.js

@@ -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);
+                        $("#workspace").css("right",191);
-                        $("#chart-zoom-controls").css("right",228);
+                        $("#chart-zoom-controls").css("right",211);
                     }
                 }
                 $("#sidebar-separator").css("left","auto");

editor/js/ui/tabs.js

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

editor/sass/colors.scss

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

editor/sass/editor.scss

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

editor/sass/flow.scss

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

editor/sass/jquery.scss

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

editor/sass/mixins.scss

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

editor/sass/palette.scss

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

editor/sass/sidebar.scss

@@ -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 > #workspace { right: 10px !important; }
-.sidebar-closed > #chart-zoom-controls { right: 35px !important; }
+.sidebar-closed > #chart-zoom-controls { right: 30px !important; }

editor/sass/style.scss

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

editor/sass/tab-info.scss

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

editor/sass/tabs.scss

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

editor/sass/workspace.scss

@@ -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-bottom: 1px solid $primary-border-color;
-    border-left: 1px solid #999;
+    border-left: 1px solid $primary-border-color;
 }
 
 #btn-workspace-add-tab {

editor/sass/workspaceToolbar.scss

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

editor/templates/index.mst

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

nodes/core/core/58-debug.html

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