Merge pull request #702 from node-red/ui-refresh

UI Refresh

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/editor.js

@@ -362,7 +362,7 @@ RED.editor = (function() {
         input.replaceWith('<select style="width: 60%;" id="node-input-'+property+'"></select>');
         updateConfigNodeSelect(property,type,node[property]);
         var select = $("#node-input-"+property);
-        select.after(' <a id="node-input-lookup-'+property+'" class="btn"><i class="fa fa-pencil"></i></a>');
+        select.after(' <a id="node-input-lookup-'+property+'" class="editor-button"><i class="fa fa-pencil"></i></a>');
         $('#node-input-lookup-'+property).click(function(e) {
             showEditConfigNodeDialog(property,type,select.find(":selected").val());
             e.preventDefault();
@@ -390,7 +390,7 @@ RED.editor = (function() {
         input.val(node[property]);
         input.attr("type","hidden");
 
-        var button = $("<a>",{id:"node-input-edit-"+property, class:"btn"});
+        var button = $("<a>",{id:"node-input-edit-"+property, class:"editor-button"});
         input.after(button);
 
         if (node[property]) {

editor/js/ui/library.js

@@ -142,9 +142,9 @@ RED.library = (function() {
             return ul;
         }
 
-        $('#node-input-name').addClass('input-append-left').css("width","65%").after(
+        $('#node-input-name').css("width","60%").after(
-            '<div class="btn-group" style="margin-left: 0px;">'+
+            '<div class="btn-group" style="margin-left: 5px;">'+
-            '<button id="node-input-'+options.type+'-lookup" class="btn input-append-right" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></button>'+
+            '<a id="node-input-'+options.type+'-lookup" class="editor-button" data-toggle="dropdown"><i class="fa fa-book"></i> <i class="fa fa-caret-down"></i></a>'+
             '<ul class="dropdown-menu pull-right" role="menu">'+
             '<li><a id="node-input-'+options.type+'-menu-open-library" tabindex="-1" href="#">'+RED._("library.openLibrary")+'</a></li>'+
             '<li><a id="node-input-'+options.type+'-menu-save-library" tabindex="-1" href="#">'+RED._("library.saveToLibrary")+'</a></li>'+

editor/js/ui/notifications.js

@@ -30,10 +30,10 @@ RED.notify = (function() {
         }
         var n = document.createElement("div");
         n.id="red-notification-"+c;
-        n.className = "alert";
+        n.className = "notification";
         n.fixed = fixed;
         if (type) {
-            n.className = "alert alert-"+type;
+            n.className = "notification notification-"+type;
         }
         n.style.display = "none";
         n.innerHTML = msg;
@@ -56,4 +56,3 @@ RED.notify = (function() {
         return n;
     }
 })();
-

editor/js/ui/palette.js

@@ -19,20 +19,44 @@ RED.palette = (function() {
     var exclusion = ['config','unknown','deprecated'];
     var core = ['subflows', 'input', 'output', 'function', 'social', 'storage', 'analysis', 'advanced'];
 
+    var categoryContainers = {};
+
     function createCategoryContainer(category, label){
         label = label || category.replace("_", " ");
-        var catDiv = $("#palette-container").append('<div id="palette-container-'+category+'" class="palette-category hide">'+
+        var catDiv = $('<div id="palette-container-'+category+'" class="palette-category palette-close 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>'+
             '<div id="palette-'+category+'-function"></div>'+
             '</div>'+
-            '</div>');
+            '</div>').appendTo("#palette-container");
+
+        categoryContainers[category] = {
+            container: catDiv,
+            close: function() {
+                catDiv.removeClass("palette-open");
+                catDiv.addClass("palette-closed");
+                $("#palette-base-category-"+category).slideUp();
+                $("#palette-header-"+category+" i").removeClass("expanded");
+            },
+            open: function() {
+                catDiv.addClass("palette-open");
+                catDiv.removeClass("palette-closed");
+                $("#palette-base-category-"+category).slideDown();
+                $("#palette-header-"+category+" i").addClass("expanded");
+            },
+            toggle: function() {
+                if (catDiv.hasClass("palette-open")) {
+                    categoryContainers[category].close();
+                } else {
+                    categoryContainers[category].open();
+                }
+            }
+        };
 
         $("#palette-header-"+category).on('click', function(e) {
-            $(this).next().slideToggle();
+            categoryContainers[category].toggle();
-            $(this).children("i").toggleClass("expanded");
         });
     }
 
@@ -196,10 +220,7 @@ RED.palette = (function() {
 
             var categoryNode = $("#palette-container-"+category);
             if (categoryNode.find(".palette_node").length === 1) {
-                if (!categoryNode.find("i").hasClass("expanded")) {
+                categoryContainers[category].open();
-                    categoryNode.find(".palette-content").slideToggle();
-                    categoryNode.find("i").toggleClass("expanded");
-                }
             }
 
         }
@@ -269,6 +290,18 @@ RED.palette = (function() {
                 $(this).hide();
             }
         });
+
+        for (var category in categoryContainers) {
+            if (categoryContainers.hasOwnProperty(category)) {
+                if (categoryContainers[category].container
+                        .find(".palette_node")
+                        .filter(function() { return $(this).css('display') !== 'none'}).length === 0) {
+                    categoryContainers[category].close();
+                } else {
+                    categoryContainers[category].open();
+                }
+            }
+        }
     }
 
     function init() {
@@ -307,6 +340,23 @@ RED.palette = (function() {
                 $("#palette-search-input").blur();
             });
         });
+
+        $("#palette-collapse-all").on("click", function(e) {
+            e.preventDefault();
+            for (var cat in categoryContainers) {
+                if (categoryContainers.hasOwnProperty(cat)) {
+                    categoryContainers[cat].close();
+                }
+            }
+        });
+        $("#palette-expand-all").on("click", function(e) {
+            e.preventDefault();
+            for (var cat in categoryContainers) {
+                if (categoryContainers.hasOwnProperty(cat)) {
+                    categoryContainers[cat].open();
+                }
+            }
+        });
     }
 
     return {

editor/js/ui/sidebar.js

@@ -30,7 +30,8 @@ RED.sidebar = (function() {
             if (tab.onremove) {
                 tab.onremove.call(tab);
             }
-        }
+        },
+        minimumActiveTabWidth: 110
     });
 
     var knownTabs = {
@@ -96,10 +97,9 @@ RED.sidebar = (function() {
 
                 if (!RED.menu.isSelected("menu-item-sidebar")) {
                     sidebarSeparator.opening = true;
-                    var newChartRight = 15;
+                    var newChartRight = 7;
                     $("#sidebar").addClass("closing");
                     $("#workspace").css("right",newChartRight);
-                    $("#chart-zoom-controls").css("right",newChartRight+20);
                     $("#sidebar").width(0);
                     RED.menu.setSelected("menu-item-sidebar",true);
                     RED.events.emit("sidebar:resize");
@@ -110,7 +110,7 @@ RED.sidebar = (function() {
                 var d = ui.position.left-sidebarSeparator.start;
                 var newSidebarWidth = sidebarSeparator.width-d;
                 if (sidebarSeparator.opening) {
-                    newSidebarWidth -= 13;
+                    newSidebarWidth -= 3;
                 }
 
                 if (newSidebarWidth > 150) {
@@ -138,7 +138,6 @@ RED.sidebar = (function() {
 
                 var newChartRight = sidebarSeparator.chartRight-d;
                 $("#workspace").css("right",newChartRight);
-                $("#chart-zoom-controls").css("right",newChartRight+20);
                 $("#sidebar").width(newSidebarWidth);
 
                 sidebar_tabs.resize();
@@ -150,12 +149,11 @@ RED.sidebar = (function() {
                     RED.menu.setSelected("menu-item-sidebar",false);
                     if ($("#sidebar").width() < 180) {
                         $("#sidebar").width(180);
-                        $("#workspace").css("right",208);
+                        $("#workspace").css("right",187);
-                        $("#chart-zoom-controls").css("right",228);
                     }
                 }
                 $("#sidebar-separator").css("left","auto");
-                $("#sidebar-separator").css("right",($("#sidebar").width()+13)+"px");
+                $("#sidebar-separator").css("right",($("#sidebar").width()+2)+"px");
                 RED.events.emit("sidebar:resize");
             }
     });

editor/js/ui/tab-info.js

@@ -30,6 +30,7 @@ RED.sidebar.info = (function() {
     content.style.paddingTop = "4px";
     content.style.paddingLeft = "4px";
     content.style.paddingRight = "4px";
+    content.className = "sidebar-node-info"
 
     var propertiesExpanded = false;
 

editor/js/ui/tabs.js

@@ -52,12 +52,7 @@ RED.tabs = (function() {
                 if (options.onchange) {
                     options.onchange(tabs[link.attr('href').slice(1)]);
                 }
-                if (options.hasOwnProperty("minimumActiveTabWidth")) {
+                updateTabWidths();
-                    ul.children().css({"width":currentTabWidth+"%"});
-                    if (currentActiveTabWidth !== 0) {
-                        link.parent().css({"width":currentActiveTabWidth});
-                    }
-                }
                 setTimeout(function() {
                     ul.children().css({"transition": ""});
                 },100);
@@ -68,14 +63,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-12-(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-12-options.minimumActiveTabWidth-(tabCount*6))/tabCount;
                     currentTabWidth = 100*tabWidth/width;
                     currentActiveTabWidth = options.minimumActiveTabWidth+"px";
                 } else {
@@ -83,9 +78,16 @@ RED.tabs = (function() {
                 }
             }
             tabs.css({width:currentTabWidth+"%"});
+            if (tabWidth < 50) {
+                ul.find(".red-ui-tab-close").hide();
+            } else {
+                ul.find(".red-ui-tab-close").show();
+            }
             if (currentActiveTabWidth !== 0) {
                 ul.find("li.red-ui-tab.active").css({"width":options.minimumActiveTabWidth});
+                ul.find("li.red-ui-tab.active .red-ui-tab-close").show();
             }
+
         }
 
         ul.find("li.red-ui-tab a").on("click",onTabClick).on("dblclick",onTabDblClick);

editor/js/ui/view.js

@@ -1224,8 +1224,8 @@ RED.view = (function() {
                             .attr("transform",function(d) { return "translate("+((d._def.align == "right") ? 94 : -25)+",2)"; })
                             .attr("class",function(d) { return "node_button "+((d._def.align == "right") ? "node_right_button" : "node_left_button"); });
                         nodeButtonGroup.append('rect')
-                            .attr("rx",8)
+                            .attr("rx",5)
-                            .attr("ry",8)
+                            .attr("ry",5)
                             .attr("width",32)
                             .attr("height",node_height-4)
                             .attr("fill","#eee");//function(d) { return d._def.color;})
@@ -1233,8 +1233,8 @@ RED.view = (function() {
                             .attr("class","node_button_button")
                             .attr("x",function(d) { return d._def.align == "right"? 10:5})
                             .attr("y",4)
-                            .attr("rx",5)
+                            .attr("rx",4)
-                            .attr("ry",5)
+                            .attr("ry",4)
                             .attr("width",16)
                             .attr("height",node_height-12)
                             .attr("fill",function(d) { return d._def.color;})
@@ -1256,8 +1256,8 @@ RED.view = (function() {
                     var mainRect = node.append("rect")
                         .attr("class", "node")
                         .classed("node_unknown",function(d) { return d.type == "unknown"; })
-                        .attr("rx", 6)
+                        .attr("rx", 5)
-                        .attr("ry", 6)
+                        .attr("ry", 5)
                         .attr("fill",function(d) { return d._def.color;})
                         .on("mouseup",nodeMouseUp)
                         .on("mousedown",nodeMouseDown)
@@ -1322,7 +1322,7 @@ RED.view = (function() {
                             .attr("class","node_icon_shade_border")
                             .attr("stroke-opacity","0.1")
                             .attr("stroke","#000")
-                            .attr("stroke-width","2");
+                            .attr("stroke-width","1");
 
                         if ("right" == d._def.align) {
                             icon_group.attr('class','node_icon_group node_icon_group_'+d._def.align);
@@ -1767,9 +1767,9 @@ RED.view = (function() {
         } catch(error) {
             if (error.code != "NODE_RED") {
                 console.log(error.stack);
-                RED.notify(RED._("notification.error")+error,"error");
+                RED.notify(RED._("notification.error",{message:error.toString()}),"error");
             } else {
-                RED.notify(RED._("notification.error")+error.message,"error");
+                RED.notify(RED._("notification.error",{message:error.message}),"error");
             }
         }
     }

editor/js/ui/workspaces.js

@@ -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
@@ -204,6 +206,10 @@ RED.workspaces = (function() {
         RED.menu.setAction('menu-item-workspace-delete',function() {
             deleteWorkspace(RED.nodes.workspace(activeWorkspace));
         });
+
+        $(window).resize(function() {
+            workspace_tabs.resize();
+        });
     }
 
     function removeWorkspace(ws) {

editor/sass/colors.scss

@@ -0,0 +1,45 @@
+/**
+ * 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: #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: #ddd;
+$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;

editor/sass/editor.scss

@@ -29,7 +29,8 @@
 
 .form-row {
     clear: both;
-    margin-bottom:10px;
+    color: $form-text-color;
+    margin-bottom:12px;
 }
 .form-row label {
     display: inline-block;
@@ -39,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-radius: 2px;
-    border: 1px solid #999;
+    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 +64,18 @@ button.input-append-right {
     font-family: monospace !important;
 }
 
+.editor-button {
+    @include workspace-button;
+    height: 34px;
+    line-height: 30px;
+    font-size: 13px;
+    border-radius: 4px;
+    padding: 0 10px;
+}
+.editor-button-small {
+    height: 20px;
+    line-height: 18px;
+    font-size: 10px;
+    border-radius: 2px;
+    padding: 0 5px;
+}

editor/sass/flow.scss

@@ -49,10 +49,6 @@
     margin-left: 20px;
 }
 
-#workspace  {
-    @include component-border;
-}
-
 .node_label_italic {
     font-style: italic;
 }
@@ -90,7 +86,7 @@
 .node {
     stroke: #999;
     cursor: move;
-    stroke-width: 2;
+    stroke-width: 1;
 }
 .node_unknown {
     stroke-dasharray:10,4;
@@ -120,7 +116,7 @@
 }
 .port {
     stroke: #999;
-    stroke-width: 2;
+    stroke-width: 1;
     fill: #ddd;
     cursor: crosshair;
 }
@@ -158,19 +154,20 @@
     stroke: #ff0000;
 }
 .node_selected {
-    stroke: #ff7f0e !important;
+    stroke-width: 2;
+    stroke: $node-selected-color !important;
 }
 .node_highlighted {
     stroke: #dd1616;
-    stroke-width: 3;
+    stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
 .node_hovered {
 }
 
 .port_hovered {
-    stroke: #ff7f0e;
+    stroke: $port-selected-color;
-    fill:  #ff7f0e;
+    fill:  $port-selected-color;
 }
 .subflowport {
     stroke-dasharray: 5,5;
@@ -179,35 +176,35 @@
 }
 
 .drag_line {
-    stroke: #ff7f0e;
+    stroke: $node-selected-color;
-    stroke-width: 5;
+    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;
 }
 
 .link_line {
-    stroke: #7f7f7f;
+    stroke: $link-color;
-    stroke-width: 4;
+    stroke-width: 3;
     fill: none;
     pointer-events: none;
 }
 
 .link_subflow {
-    stroke: #bbb;
+    stroke: $link-subflow-color;
     stroke-dasharray: 10,5;
-    stroke-width: 3;
+    stroke-width: 2;
 }
 
 .link_outline {
     stroke: #fff;
-    stroke-width: 6;
+    stroke-width: 4;
     cursor: crosshair;
     fill: none;
     pointer-events: none;
@@ -215,17 +212,16 @@
 .link_background {
     stroke: #fff;
     opacity: 0;
-    stroke-width: 25;
+    stroke-width: 20;
     cursor: crosshair;
     fill: none;
 }
 
 g.link_selected path.link_line {
-    stroke: #ff7f0e;
+    stroke: $node-selected-color;
 }
 g.link_unknown path.link_line {
-    stroke: #f00;
+    stroke: $link-unknown-color;
     stroke-width: 2;
     stroke-dasharray: 10, 4;
 }
-

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,7 +23,56 @@
 }
 
 @mixin component-border {
-   border: 1px solid #000;
+   border: 1px solid $primary-border-color;
-   border-radius: 3px;
+   box-sizing: border-box;
+
 }
 
+@mixin workspace-button {
+    @include disable-selection;
+    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;
+    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;
+    }
+    &:not(.disabled):focus {
+        color: $workspace-button-color-focus;
+    }
+    &:not(.disabled):active {
+        color: $workspace-button-color-active;
+        background: $workspace-button-background-active;
+    }
+}
+@mixin component-footer {
+    border-top: 1px solid $primary-border-color;
+    background: #f3f3f3;
+    text-align: right;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 25px;
+    line-height: 23px;
+    padding: 0 10px;
+}
+
+@mixin component-footer-button {
+    @include workspace-button;
+    font-size: 11px;
+    line-height: 17px;
+    width: 18px;
+    height: 18px;
+}

editor/sass/notifications.scss

@@ -14,10 +14,6 @@
  * limitations under the License.
  **/
 
-
-.notification {
-    position: absolute;
-}
 #notifications {
     z-index: 10000;
     width: 500px;
@@ -26,7 +22,24 @@
     position: absolute;
     top: 1px;
 }
-#notifications .alert {
+.notification {
-    box-shadow: 0 0 1px 1px;
+    box-sizing: border-box;
-    margin-bottom: 5px;
+    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;
 }

editor/sass/palette.scss

@@ -17,11 +17,11 @@
 
 #palette {
     position: absolute;
-    top: 5px; 
+    top: 0px;
-    bottom: 10px;
+    bottom: 0px;
-    left:10px; 
+    left:0px;
     background: #f3f3f3;
-    width: 170px;
+    width: 180px;
     text-align: center;
     @include disable-selection;
     @include component-border;
@@ -30,11 +30,11 @@
 .palette-scroll {
     display: none;
     position: absolute;
-    top: 0;
+    top: 35px;
     right: 0;
-    bottom: 35px;
+    bottom: 25px;
     left:0;
-    padding: 5px;
+    padding: 0;
     overflow-y: auto;
     box-sizing:border-box;
 }
@@ -44,32 +44,40 @@
 #palette-search {
     position: absolute;
     display: none;
-    bottom: 0;
+    top: 0;
     left:0;
     right:0;
     overflow: hidden;
-    background: #f3f3f3;
+    background: #ffffff;
     text-align: center;
     height: 35px;
     padding: 3px;
-    border-top: 1px solid #999;
+    border-bottom: 1px solid $primary-border-color;
     box-sizing:border-box;
 }
+#palette-search i {
+    font-size: 10px;
+    color: #666;
+}
 #palette-search i.fa-search {
     position: absolute;
     pointer-events: none;
-    left: 4px;
+    left: 12px;
-    top: 10px;
+    top: 12px;
 }
 #palette-search i.fa-times {
     position: absolute;
-    right: 6px;
+    right: 7px;
-    top: 10px;
+    top: 12px;
 }
 
 #palette-search-clear {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 20px;
     display: none;
-    color: #000;
 }
 
 #palette-search input {
@@ -78,7 +86,7 @@
     width: 100%;
     box-shadow: none;
     -webkit-box-shadow: none;
-    padding: 3px 17px;
+    padding: 3px 17px 3px 22px;
     margin: 0px;
     height: 30px;
     box-sizing:border-box;
@@ -89,27 +97,31 @@
     box-shadow: none;
     -webkit-box-shadow: none;
 }
+#palette-footer {
+    @include component-footer;
+}
+.palette-button {
+    @include component-footer-button;
+}
+
 
 .palette-category {
-    border: 1px solid #999;
+    border-bottom: 1px solid #ccc;
-    border-radius: 3px;
-    margin-bottom: 5px;
 }
 .palette-content {
     background: #fff;
-    border-top: 1px solid #aaa;
+    padding: 3px;
-    padding-bottom: 3px;
 }
 
 .palette-header {
-    background: #f3f3f3;
+    background: $palette-header-background;
-    border-radius: 3px;
     cursor: pointer;
     text-align: left;
-    padding: 1px;
+    padding: 9px;
+    font-weight: bold;
 }
 .palette-header i {
-    margin: 3px 4px 3px 3px;
+    margin: 3px 10px 3px 3px;
     -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
     -o-transition: all 0.2s ease-in-out;
@@ -126,6 +138,7 @@
     clear: both;
 }
 .palette_label {
+    font-size: 13px;
     margin: 4px 0 4px 28px;
     line-height: 20px;
     overflow: hidden;
@@ -137,12 +150,11 @@
 
 .palette_node {
     cursor:move;
-    font-size:13px;
     background: #ddd;
     margin: 10px auto;
     height: 25px;
-    border-radius: 6px;
+    border-radius: 5px;
-    border: 2px solid #999;
+    border: 1px solid #999;
     background-position: 5% 50%;
     background-repeat: no-repeat;
     width: 120px;
@@ -150,7 +162,7 @@
     position: relative;
 }
 .palette_node:hover {
-    border-color: #ff7f0e;
+    border-color: $node-selected-color;
     background-color: #eee;
 }
 .palette_port {
@@ -181,7 +193,7 @@
     bottom:0;
     left:0;
     width: 30px;
-    border-right: 2px solid rgba(0,0,0,0.1);
+    border-right: 1px solid rgba(0,0,0,0.1);
     background-color: rgba(0,0,0,0.05);
 }
 .palette_icon_container_right {

editor/sass/sidebar.scss

@@ -14,14 +14,12 @@
  * limitations under the License.
  **/
 
- 
- 
 #sidebar {
     position: absolute;
-    top: 5px;
+    top: 0px;
-    right: 10px;
+    right: 0px;
-    bottom: 10px;
+    bottom: 0px;
-    width: 305px;
+    width: 315px;
     background: #fff;
     box-sizing: border-box;
     @include component-border;
@@ -35,26 +33,36 @@
 
 #sidebar-content {
     position: absolute;
-    top: 30px;
+    top: 35px;
     right: 0;
-    bottom: 1px;
+    bottom: 25px;
     left: 0px;
-    font-size: 1.2em;
+    padding-top: 10px;
     overflow-y: auto;
 }
 
 #sidebar-separator {
     position: absolute;
     top: 5px;
-    right: 316px;
+    right: 315px;
     bottom:10px;
-    width: 15px;
+    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: 15px !important; }
+.sidebar-closed > #workspace { right: 7px !important; }
-.sidebar-closed > #chart-zoom-controls { right: 35px !important; }
 
+#sidebar .button {
+    @include workspace-button;
+    line-height: 18px;
+    font-size: 12px;
+    margin-right: 5px;
+    padding: 2px 8px;
+}
+
+#sidebar-footer {
+    @include component-footer;
+}

editor/sass/style.scss

@@ -14,8 +14,11 @@
  * limitations under the License.
  **/
 
+@import "colors";
 @import "mixins";
 
+@import "forms";
+
 @import "jquery";
 @import "bootstrap";
 
@@ -44,14 +47,14 @@
 
 
 body {
-  font: 13px "Helvetica" !important;
+  font: 14px "Helvetica" !important;
   padding-top: 100px;
-  background: url("images/pw_maze_white.png");
+  background: #f3f3f3;
 }
 
 #main-container {
     position: absolute;
-    top:50px; left:0; bottom: 0; right:0;
+    top:40px; left:0; bottom: 0; right:0;
     overflow:hidden;
 }
 
@@ -66,5 +69,42 @@ i.spinner {
     background-size: contain
 }
 
+code, pre {
+  padding: 0 3px 2px;
+  font-family: monospace;
+  font-size: 14px;
+  color: #333333;
+  border-radius: 1px;
+}
 
+code {
+  padding: 0px 4px;
+  color: #AD1625;
+  white-space: nowrap;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
 
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  line-height: 20px;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 2px;
+}
+
+pre code {
+  padding: 0;
+  color: inherit;
+  white-space: pre;
+  white-space: pre-wrap;
+  background-color: transparent;
+  border: 0;
+}

editor/sass/tab-info.scss

@@ -14,6 +14,10 @@
  * limitations under the License.
  **/
 
+.sidebar-node-info  hr {
+    margin: 10px 0;
+}
+
 table.node-info {
     font-size: 14px;
     margin: 5px;
@@ -56,22 +60,27 @@ 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: 18px;
+        margin: 8px auto;
+    }
+    h3 {
+        font-weight: normal;
+        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

@@ -16,12 +16,13 @@
 
 ul.red-ui-tabs {
     list-style-type: none;
-    padding:5px 2px 0px 5px;
+    padding:0;
     margin: 0;
     display: block;
-    height: 24px;
+    height: 35px;
-    border-bottom: 1px solid #999;
+    box-sizing:border-box;
-    background: #e3e3e3;
+    border-bottom: 1px solid $primary-border-color;
+    background: #fff;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
@@ -30,17 +31,16 @@ ul.red-ui-tabs {
 }
 
 ul.red-ui-tabs li {
-    border-top-left-radius: 5px;
+    box-sizing: border-box;
-    border-top-right-radius: 5px;
     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: #e3e3e3;
+    background: $tab-background-inactive;
-    margin: 0 5px 0 0;
+    margin: 3px 3px 0 3px;
-    height: 23px;
+    height: 32px;
-    line-height: 17px;
+    line-height: 29px;
     max-width: 200px;
     width: 14%;
     overflow: hidden;
@@ -49,53 +49,64 @@ ul.red-ui-tabs li {
 
 ul.red-ui-tabs li a.red-ui-tab-label {
     display: block;
-    padding: 3px 16px;
+    padding-left: 12px;
+    width: 100%;
+    height: 100%;
     color: #666;
 }
 ul.red-ui-tabs li {
     position: relative;
 }
 
-ul.red-ui-tabs li a.red-ui-tab-close {
+.red-ui-tab-close {
-    background: rgba(227,227,227,0.8);
+    background: $tab-background-inactive;
+    opacity: 0.8;
     position: absolute;
-    right: 2px;
+    right: 0px;
-    top: 2px;
+    top: 0px;
     display: block;
     width: 20px;
-    height: 20px;
+    height: 30px;
-    line-height: 20px;
+    line-height: 28px;
     text-align: center;
     padding: 0px;
-    border-radius: 5px;
+    color: #aaa;
-    color: #666;
+    &:hover {
+        background: $workspace-button-background-hover !important;
+        opacity: 1;
     }
-ul.red-ui-tabs li a.red-ui-tab-close:hover {
-    background: #bbb !important;
 }
+ul.red-ui-tabs li:not(.active) a:hover+a.red-ui-tab-close {
+    background: $tab-background-hover;
+}
+
+ul.red-ui-tabs li.active a.red-ui-tab-close {
+    color: #aaa;
+    background: $tab-background-active;
+    &:hover {
+        background: $workspace-button-background-hover !important;
+        color: $workspace-button-color-hover;
+    }
+}
+
 ul.red-ui-tabs li a:hover {
     text-decoration: none;
-    background: #f0f0f0;
+}
+
+ul.red-ui-tabs li:not(.active) a:hover {
+    color: $workspace-button-color-hover;
+    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;
 }
 ul.red-ui-tabs li.active a {
     color: #333;
 }
-ul.red-ui-tabs li.active a.red-ui-tab-close {
-    background: rgba(255,255,255,0.8);
-}
-ul.red-ui-tabs li.active a.red-ui-tab-label:hover {
-    background: #fff;
-}
-ul.red-ui-tabs li.red-ui-add-tab {
-    width: 25px;
-    border-top-right-radius: 15px;
-    line-height: 22px;
-}
-ul.red-ui-tabs li.red-ui-add-tab a {
-    padding: 2px 4px;
-}

editor/sass/workspace.scss

@@ -19,10 +19,11 @@
    overflow: auto;
    background: #e3e3e3;
    position: absolute;
-   bottom:0px;
+   bottom:25px;
-   top: 30px;
+   top: 35px;
    left:0px;
    right:0px;
+   box-sizing:border-box;
 }
 #chart svg:focus {
     outline: none;
@@ -31,46 +32,43 @@
 #workspace {
     position: absolute;
     margin: 0;
-    top:5px;
+    top:0px;
-    left:190px;
+    left:179px;
-    bottom: 10px;
+    bottom: 0px;
-    right: 330px;
+    right: 322px;
     overflow: hidden;
+    @include component-border;
 }
 
-#chart-zoom-controls {
+.workspace-footer-button {
-    position: absolute;
+    @include component-footer-button;
-    bottom:30px; right: 350px;
-}
-
-#chart-zoom-controls {
-    padding-top: 3px;
-    text-align: right;
-    float: right;
 }
 
 #workspace-tabs {
-    margin-right: 28px;
+    margin-right: 40px;
 }
+
 #workspace-add-tab {
     position: absolute;
+    box-sizing: border-box;
     top: 0;
     right: 0;
-    height: 29px;
+    height: 35px;
-    width: 28px;
+    width: 40px;
-    border-bottom: 1px solid #999;
+    background: #fff;
+    border-bottom: 1px solid $primary-border-color;
 }
 
 #btn-workspace-add-tab {
-    display: inline-block;
+    @include workspace-button;
-    width: 100%;
+    line-height: 32px;
-    background: #e3e3e3;
+    height: 32px;
-    height: 100%;
+    width: 32px;
-    line-height: 30px;
+    margin-top: 3px;
-    text-align: center;
+    margin-right:8px;
-    color: #000;
+    border: 1px solid $primary-border-color;
-}
-#btn-workspace-add-tab:hover {
-    background: #efefef;
 }
 
+#workspace-footer {
+    @include component-footer;
+}

editor/sass/workspaceToolbar.scss

@@ -18,37 +18,20 @@
 #workspace-toolbar {
     display: none;
     position: absolute;
-    top: 30px;
+    top: 35px;
     left:0;
-    right: 20px;
+    width: 100%;
     padding: 7px;
-    border-bottom-right-radius: 5px;
+    height: 40px;
-    background: #f3f3f3;
+    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;
-}
+    padding: 2px 8px;
-#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;
 }

editor/templates/index.mst

@@ -43,11 +43,15 @@
 <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 id="palette-footer">
+            <a class="palette-button" id="palette-collapse-all" href="#"><i class="fa fa-angle-double-up"></i></a>
+            <a class="palette-button" id="palette-expand-all" href="#"><i class="fa fa-angle-double-down"></i></a>
+        </div>
+
     </div><!-- /palette -->
 
     <div id="workspace">
@@ -60,19 +64,16 @@
             <a class="button" id="workspace-subflow-add-output" href="#" data-i18n="[append]subflow.output"><i class="fa fa-plus"></i> </a>
             <a class="button" id="workspace-subflow-delete" href="#" data-i18n="[append]subflow.deleteSubflow"><i class="fa fa-trash"></i> </a>
         </div>
-    </div>
+        <div id="workspace-footer">
-
+            <a class="workspace-footer-button" id="btn-zoom-out" href="#"><i class="fa fa-minus"></i></a>
-    <div id="chart-zoom-controls">
+            <a class="workspace-footer-button" id="btn-zoom-zero" href="#"><i class="fa fa-circle-o"></i></a>
-        <div class="btn-group">
+            <a class="workspace-footer-button" id="btn-zoom-in" href="#"><i class="fa fa-plus"></i></a>
-            <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>
     </div>
-
     <div id="sidebar">
         <ul id="sidebar-tabs"></ul>
         <div id="sidebar-content"></div>
+        <div id="sidebar-footer"></div>
     </div>
 
     <div id="sidebar-separator"></div>
@@ -129,7 +130,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">

locales/en-US/editor.json

@@ -154,7 +154,7 @@
     },
     "palette": {
         "noInfo": "no information available",
-        "filter": "filter",
+        "filter": "filter nodes",
         "label": {
             "subflows": "subflows",
             "input": "input",

nodes/core/core/58-debug.html

@@ -128,12 +128,12 @@
         },
         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);
 
-            toolbar.innerHTML = '<div class="btn-group pull-right"><a id="debug-tab-clear" title="clear log" class="btn btn-mini" href="#"><i class="fa fa-trash"></i></a></div> ';
+            toolbar.innerHTML = '<div class="pull-right"><a id="debug-tab-clear" title="clear log" class="button" href="#"><i class="fa fa-trash"></i></a></div> ';
 
             var messages = document.createElement("div");
             messages.id = "debug-content";

nodes/core/core/90-comment.html

@@ -51,9 +51,7 @@
             return this.name?"node_label_italic":"";
         },
         info: function() {
-            var t = this.name || this._("comment.defaulttitle");
+            return (this.name?"# "+this.name+"\n":"")+(this.info||"");
-            var b = this.info || this._("comment.defaultinfo");
-            return "### "+t+"\n"+b;
         },
         oneditprepare: function() {
             var that = this;

nodes/core/io/21-httpin.html

@@ -33,7 +33,7 @@
         <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
     </div>
     <div class="form-row row-swagger-doc">
-        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="httpin.label.doc"></span></label>
+        <label for="node-input-swaggerDoc"><i class="fa fa-tag"></i> <span data-i18n="httpin.label.doc"></span></label>
         <input type="text" id="node-input-swaggerDoc">
     </div>
     <div id="node-input-tip" class="form-tips"><span data-i18n="httpin.tip.in"></span><code><span id="node-input-path"></span></code>.</div>

nodes/core/locales/en-US/messages.json

@@ -172,9 +172,7 @@
             "title": "Title",
             "body": "Body"
         },
-        "tip": "Tip: The text can be styled as <a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_new\">Github flavoured Markdown</a>",
+        "tip": "Tip: The text can be styled as <a href=\"https://help.github.com/articles/markdown-basics/\" target=\"_new\">Github flavoured Markdown</a>"
-        "defaulttitle": "Comment node",
-        "defaultinfo": "Use this node to add simple documentation.\n\nAnything you add will be rendered in this info panel.\n\nYou may use Markdown syntax to **enhance** the *presentation*."
     },
     "unknown": {
         "label": {

nodes/core/logic/10-switch.html

@@ -28,7 +28,7 @@
         </div>
     </div>
     <div class="form-row">
-        <a href="#" class="btn btn-mini" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="switch.label.rule"></span></a>
+        <a href="#" class="editor-button editor-button-small" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="switch.label.rule"></span></a>
     </div>
     <div class="form-row">
         <select id="node-input-checkall" style="width:100%; margin-right:5px;">
@@ -99,10 +99,10 @@
                 btwnField.append(" and ");
                 var btwnValue2Field = $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"width: 50px;margin-left:2px;"}).appendTo(btwnField);
 
-                var finalspan = $('<span/>',{style:"float: right; margin-top: 3px;margin-right: 10px;"}).appendTo(row);
+                var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
                 finalspan.append(' &#8594; <span class="node-input-rule-index">'+i+'</span> ');
 
-                var deleteButton = $('<a/>',{href:"#",class:"btn btn-mini", style:"margin-left: 5px;"}).appendTo(finalspan);
+                var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top: 7px; margin-left: 5px;"}).appendTo(finalspan);
                 $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
 
                 selectField.change(function() {

nodes/core/logic/15-change.html

@@ -28,7 +28,7 @@
         </div>
     </div>
     <div class="form-row">
-        <a href="#" class="btn btn-mini" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="change.label.rule"></span></a>
+        <a href="#" class="editor-button editor-button-small" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="change.label.rule"></span></a>
     </div>
 </script>
 
@@ -120,8 +120,8 @@
                 var propertyName = $('<input/>',{style:"width: 220px",class:"node-input-rule-property-name",type:"text"}).appendTo(row1);
 
 
-                var finalspan = $('<span/>',{style:"float: right; margin-top: 3px;margin-right: 10px;"}).appendTo(row1);
+                var finalspan = $('<span/>',{style:"float: right; margin-right: 10px;"}).appendTo(row1);
-                var deleteButton = $('<a/>',{href:"#",class:"btn btn-mini", style:"margin-left: 5px;"}).appendTo(finalspan);
+                var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"margin-top: 7px; margin-left: 5px;"}).appendTo(finalspan);
                 $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);