Move edit tray buttons to top

editor/js/ui/editor.js

@@ -15,6 +15,8 @@
  **/
 RED.editor = (function() {
 
+
+    var editStack = [];
     var editing_node = null;
     var editing_config_node = null;
     var subflowEditor;
@@ -417,19 +419,86 @@ RED.editor = (function() {
         }
     }
 
+    function getEditStackTitle() {
+
+        var title = '<ul class="editor-tray-breadcrumbs">';
+        for (var i=0;i<editStack.length;i++) {
+            var node = editStack[i];
+            var label = node.type;
+            if (node.type === 'subflow') {
+                label = RED._("subflow.editSubflow",{name:node.name})
+            } else if (node.type.indexOf("subflow:")===0) {
+                var subflow = RED.nodes.subflow(node.type.substring(8));
+                label = RED._("subflow.editSubflow",{name:subflow.name})
+            } else {
+                if (typeof node._def.paletteLabel !== "undefined") {
+                    try {
+                        label = (typeof node._def.paletteLabel === "function" ? node._def.paletteLabel.call(node._def) : node._def.paletteLabel)||"";
+                    } catch(err) {
+                        console.log("Definition error: "+node.type+".paletteLabel",err);
+                    }
+                }
+                if (i === editStack.length-1) {
+                    if (RED.nodes.node(node.id)) {
+                        label = RED._("editor.editNode",{type:label});
+                    } else {
+                        label = RED._("editor.addNewConfig",{type:label});
+                    }
+                }
+            }
+            title += '<li>'+label+'</li>';
+        }
+        title += '</ul>';
+        return title;
+    }
+
     function showEditDialog(node) {
         var editing_node = node;
+        editStack.push(node);
         RED.view.state(RED.state.EDITING);
         var type = node.type;
         if (node.type.substring(0,8) == "subflow:") {
             type = "subflow";
         }
         var trayOptions = {
-            title: "Edit "+type+" node",
+            title: getEditStackTitle(),
             buttons: [
+                {
+                    id: "node-dialog-cancel",
+                    text: RED._("common.label.cancel"),
+                    click: function() {
+                        if (editing_node._def) {
+                            if (editing_node._def.oneditcancel) {
+                                editing_node._def.oneditcancel.call(editing_node);
+                            }
+
+                            for (var d in editing_node._def.defaults) {
+                                if (editing_node._def.defaults.hasOwnProperty(d)) {
+                                    var def = editing_node._def.defaults[d];
+                                    if (def.type) {
+                                        var configTypeDef = RED.nodes.getType(def.type);
+                                        if (configTypeDef && configTypeDef.exclusive) {
+                                            var input = $("#node-input-"+d).val()||"";
+                                            if (input !== "" && !editing_node[d]) {
+                                                // This node has an exclusive config node that
+                                                // has just been added. As the user is cancelling
+                                                // the edit, need to delete the just-added config
+                                                // node so that it doesn't get orphaned.
+                                                RED.nodes.remove(input);
+                                            }
+                                        }
+                                    }
+                                }
+
+                            }
+                        }
+                        RED.tray.close();
+                    }
+                },
                 {
                     id: "node-dialog-ok",
-                    text: RED._("common.label.ok"),
+                    text: RED._("common.label.done"),
+                    class: "primary",
                     click: function() {
                         var changes = {};
                         var changed = false;
@@ -556,38 +625,6 @@ RED.editor = (function() {
                         RED.view.redraw(true);
                         RED.tray.close();
                     }
-                },
-                {
-                    id: "node-dialog-cancel",
-                    text: RED._("common.label.cancel"),
-                    click: function() {
-                        if (editing_node._def) {
-                            if (editing_node._def.oneditcancel) {
-                                editing_node._def.oneditcancel.call(editing_node);
-                            }
-
-                            for (var d in editing_node._def.defaults) {
-                                if (editing_node._def.defaults.hasOwnProperty(d)) {
-                                    var def = editing_node._def.defaults[d];
-                                    if (def.type) {
-                                        var configTypeDef = RED.nodes.getType(def.type);
-                                        if (configTypeDef && configTypeDef.exclusive) {
-                                            var input = $("#node-input-"+d).val()||"";
-                                            if (input !== "" && !editing_node[d]) {
-                                                // This node has an exclusive config node that
-                                                // has just been added. As the user is cancelling
-                                                // the edit, need to delete the just-added config
-                                                // node so that it doesn't get orphaned.
-                                                RED.nodes.remove(input);
-                                            }
-                                        }
-                                    }
-                                }
-
-                            }
-                        }
-                        RED.tray.close();
-                    }
                 }
             ],
             resize: function(dimensions) {
@@ -631,26 +668,6 @@ RED.editor = (function() {
                 $('<input type="text" style="display: none;" />').prependTo(dialogForm);
                 prepareEditDialog(node,node._def,"node-input");
                 dialogForm.i18n();
-
-                // var minWidth = $(this).dialog('option','minWidth');
-                // if ($(this).outerWidth() < minWidth) {
-                //     $(this).dialog('option','width',minWidth);
-                // } else {
-                //     $(this).dialog('option','width',$(this).outerWidth());
-                // }
-                // if (editing_node) {
-                //     var size = $(this).dialog('option','sizeCache-'+editing_node.type);
-                //     if (size) {
-                //         $(this).dialog('option','width',size.width);
-                //         $(this).dialog('option','height',size.height);
-                //     }
-                //     if (editing_node._def.oneditresize) {
-                //         setTimeout(function() {
-                //             var form = $("#dialog-form");
-                //             editing_node._def.oneditresize.call(editing_node,{width:form.width(),height:form.height()});
-                //         },0);
-                //     }
-                // }
             },
             close: function() {
                 RED.keyboard.enable();
@@ -661,6 +678,7 @@ RED.editor = (function() {
                     RED.sidebar.info.refresh(editing_node);
                 }
                 RED.workspaces.refresh();
+                editStack.pop();
             },
             show: function() {
                 if (editing_node) {
@@ -668,14 +686,6 @@ RED.editor = (function() {
                 }
             }
         }
-        /*).parent().on('keydown', function(evt) {
-            if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
-                $("#node-dialog-cancel").click();
-            } else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
-                $("#node-dialog-ok").click();
-            }
-        });
-        */
         if (editTrayWidthCache[type]) {
             trayOptions.width = editTrayWidthCache[type];
         }
@@ -683,7 +693,7 @@ RED.editor = (function() {
         if (type === 'subflow') {
             var id = editing_node.type.substring(8);
             trayOptions.buttons.unshift({
-                class: 'leftButton',
+                class: 'leftButton primary',
                 text: RED._("subflow.edit"),
                 click: function() {
                     RED.workspaces.show(id);
@@ -730,9 +740,11 @@ RED.editor = (function() {
             }
             editing_config_node["_"] = node_def._;
         }
+        editStack.push(editing_config_node);
+
         RED.view.state(RED.state.EDITING);
         var trayOptions = {
-            title: (adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
+            title: getEditStackTitle(), //(adding?RED._("editor.addNewConfig", {type:type}):RED._("editor.editConfig", {type:type})),
             resize: function() {
                 if (editing_config_node && editing_config_node._def.oneditresize) {
                     var form = $("#node-config-dialog-edit-form");
@@ -745,7 +757,7 @@ RED.editor = (function() {
                 var trayFooter = tray.find(".editor-tray-footer");
 
                 trayFooter.prepend('<div id="node-config-dialog-user-count"><i class="fa fa-info-circle"></i> <span></span></div>');
-                trayHeader.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
+                trayFooter.append('<span id="node-config-dialog-scope-container"><span id="node-config-dialog-scope-warning" data-i18n="[title]editor.errors.scopeChange"><i class="fa fa-warning"></i></span><select id="node-config-dialog-scope"></select></span>');
 
                 RED.keyboard.disable();
 
@@ -822,6 +834,7 @@ RED.editor = (function() {
                     RED.keyboard.enable();
                 }
                 RED.workspaces.refresh();
+                editStack.pop();
             },
             show: function() {
                 if (editing_config_node) {
@@ -830,9 +843,33 @@ RED.editor = (function() {
             }
         }
         trayOptions.buttons = [
+            {
+                id: "node-config-dialog-cancel",
+                text: RED._("common.label.cancel"),
+                click: function() {
+                    var configType = type;
+                    var configId = editing_config_node.id;
+                    var configAdding = adding;
+                    var configTypeDef = RED.nodes.getType(configType);
+
+                    if (configTypeDef.oneditcancel) {
+                        // TODO: what to pass as this to call
+                        if (configTypeDef.oneditcancel) {
+                            var cn = RED.nodes.node(configId);
+                            if (cn) {
+                                configTypeDef.oneditcancel.call(cn,false);
+                            } else {
+                                configTypeDef.oneditcancel.call({id:configId},true);
+                            }
+                        }
+                    }
+                    RED.tray.close();
+                }
+            },
             {
                 id: "node-config-dialog-ok",
                 text: adding?RED._("editor.configAdd"):RED._("editor.configUpdate"),
+                class: "primary",
                 click: function() {
                     var configProperty = name;
                     var configId = editing_config_node.id;
@@ -931,36 +968,13 @@ RED.editor = (function() {
                         updateConfigNodeSelect(configProperty,configType,editing_config_node.id,prefix);
                     });
                 }
-            },
-            {
-                id: "node-config-dialog-cancel",
-                text: RED._("common.label.cancel"),
-                click: function() {
-                    var configType = type;
-                    var configId = editing_config_node.id;
-                    var configAdding = adding;
-                    var configTypeDef = RED.nodes.getType(configType);
-
-                    if (configTypeDef.oneditcancel) {
-                        // TODO: what to pass as this to call
-                        if (configTypeDef.oneditcancel) {
-                            var cn = RED.nodes.node(configId);
-                            if (cn) {
-                                configTypeDef.oneditcancel.call(cn,false);
-                            } else {
-                                configTypeDef.oneditcancel.call({id:configId},true);
-                            }
-                        }
-                    }
-                    RED.tray.close();
-                }
             }
         ];
 
         if (!adding) {
             trayOptions.buttons.unshift({
                 class: 'leftButton',
-                text: RED._("editor.configDelete"),
+                text: RED._("editor.configDelete"), //'<i class="fa fa-trash"></i>',
                 click: function() {
                     var configProperty = name;
                     var configId = editing_config_node.id;
@@ -1067,15 +1081,24 @@ RED.editor = (function() {
 
     function showEditSubflowDialog(subflow) {
         var editing_node = subflow;
+        editStack.push(subflow);
         RED.view.state(RED.state.EDITING);
         var subflowEditor;
 
         var trayOptions = {
-            title: RED._("subflow.editSubflow",{name:subflow.name}),
+            title: getEditStackTitle(),
             buttons: [
+                {
+                    id: "node-dialog-cancel",
+                    text: RED._("common.label.cancel"),
+                    click: function() {
+                        RED.tray.close();
+                    }
+                },
                 {
                     id: "node-dialog-ok",
-                    text: RED._("common.label.ok"),
+                    class: "primary",
+                    text: RED._("common.label.done"),
                     click: function() {
                         var i;
                         var changes = {};
@@ -1133,13 +1156,6 @@ RED.editor = (function() {
                         editing_node.dirty = true;
                         RED.tray.close();
                     }
-                },
-                {
-                    id: "node-dialog-cancel",
-                    text: RED._("common.label.cancel"),
-                    click: function() {
-                        RED.tray.close();
-                    }
                 }
             ],
             resize: function() {
@@ -1189,7 +1205,7 @@ RED.editor = (function() {
                 });
 
                 $("#subflow-input-name").val(subflow.name);
-                subflowEditor.getSession().setValue(subflow.info,-1);
+                subflowEditor.getSession().setValue(subflow.info||"",-1);
                 var userCount = 0;
                 var subflowType = "subflow:"+editing_node.id;
 
@@ -1209,6 +1225,7 @@ RED.editor = (function() {
                 }
                 RED.sidebar.info.refresh(editing_node);
                 RED.workspaces.refresh();
+                editStack.pop();
                 editing_node = null;
             },
             show: function() {
@@ -1222,6 +1239,15 @@ RED.editor = (function() {
     return {
         init: function() {
             RED.tray.init();
+            $(window).on('keydown', function(evt) {
+                if (evt.keyCode === $.ui.keyCode.ESCAPE && (evt.metaKey || evt.ctrlKey)) {
+                    $("#node-dialog-cancel").click();
+                    $("#node-config-dialog-cancel").click();
+                } else if (evt.keyCode === $.ui.keyCode.ENTER && (evt.metaKey || evt.ctrlKey)) {
+                    $("#node-dialog-ok").click();
+                    $("#node-config-dialog-ok").click();
+                }
+            });
         },
         edit: showEditDialog,
         editConfig: showEditConfigNodeDialog,

editor/js/ui/tab-config.js

@@ -17,7 +17,7 @@ RED.sidebar.config = (function() {
 
 
     var content = document.createElement("div");
-    content.className = "sidebar-node-config"
+    content.className = "sidebar-node-config";
 
     $('<div class="button-group sidebar-header">'+
       '<a class="sidebar-header-button-toggle selected" id="workspace-config-node-filter-all" href="#"><span data-i18n="sidebar.config.filterAll"></span></a>'+
@@ -35,6 +35,9 @@ RED.sidebar.config = (function() {
     var flowCategories = $("<div>").appendTo(content);
     var subflowCategories = $("<div>").appendTo(content);
 
+
+    var shade = $('<div class="sidebar-node-config-shade hide"></div>').appendTo(content);
+
     var showUnusedOnly = false;
 
     var categories = {};
@@ -288,6 +291,12 @@ RED.sidebar.config = (function() {
     return {
         init:init,
         show:show,
-        refresh:refreshConfigNodeList
+        refresh:refreshConfigNodeList,
+        disable: function() {
+            shade.show();
+        },
+        enable: function() {
+            shade.hide();
+        }
     }
 })();

editor/js/ui/tray.js

@@ -22,23 +22,26 @@ RED.tray = (function() {
     }
     function showTray(options) {
         var el = $('<div class="editor-tray"></div>');
-        var header = $('<div class="editor-tray-header">'+(options.title||"")+'</div>').appendTo(el);
+        var header = $('<div class="editor-tray-header"></div>').appendTo(el);
         var body = $('<div class="editor-tray-body"></div>').appendTo(el);
         var footer = $('<div class="editor-tray-footer"></div>').appendTo(el);
         var resizer = $('<div class="editor-tray-resize-handle"></div>').appendTo(el);
-        var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
+        // var growButton = $('<a class="editor-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
-        var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
+        // var shrinkButton = $('<a class="editor-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
-
+        if (options.title) {
+            $('<div class="editor-tray-titlebar">'+options.title+'</div>').appendTo(header);
+        }
+        var buttonBar = $('<div class="editor-tray-toolbar"></div>').appendTo(header);
         if (options.buttons) {
             for (var i=0;i<options.buttons.length;i++) {
                 var button = options.buttons[i];
 
-                var b = $('<button>').appendTo(footer);
+                var b = $('<button>').appendTo(buttonBar);
                 if (button.id) {
                     b.attr('id',button.id);
                 }
                 if (button.text) {
-                    b.text(button.text);
+                    b.html(button.text);
                 }
                 if (button.click) {
                     b.click(button.click);
@@ -56,6 +59,8 @@ RED.tray = (function() {
             footer: footer,
             options: options
         };
+        stack.push(tray);
+
         el.draggable({
                 handle: resizer,
                 axis: "x",
@@ -88,6 +93,7 @@ RED.tray = (function() {
 
         $("#header-shade").show();
         $("#editor-shade").show();
+        RED.sidebar.config.disable();
 
         tray.preferredWidth = el.width();
         if (options.width) {
@@ -103,8 +109,6 @@ RED.tray = (function() {
         });
         $("#workspace").scrollLeft(0);
 
-        stack.push(tray);
-
         var trayHeight = el.height()-header.outerHeight()-footer.outerHeight();
         body.height(trayHeight-40);
 
@@ -123,27 +127,27 @@ RED.tray = (function() {
             el.css({right:0});
         },0);
 
-        growButton.click(function(e) {
+        // growButton.click(function(e) {
-            e.preventDefault();
+        //     e.preventDefault();
-            tray.lastWidth = tray.width;
+        //     tray.lastWidth = tray.width;
-            tray.width = $("#editor-stack").position().left-8;
+        //     tray.width = $("#editor-stack").position().left-8;
-            el.width(tray.width);
+        //     el.width(tray.width);
-            if (options.resize) {
+        //     if (options.resize) {
-                options.resize({width:tray.width});
+        //         options.resize({width:tray.width});
-            }
+        //     }
-        });
+        // });
-        shrinkButton.click(function(e) {
+        // shrinkButton.click(function(e) {
-            e.preventDefault();
+        //     e.preventDefault();
-            if (tray.lastWidth && tray.width > tray.lastWidth) {
+        //     if (tray.lastWidth && tray.width > tray.lastWidth) {
-                tray.width = tray.lastWidth;
+        //         tray.width = tray.lastWidth;
-            } else if (tray.width > tray.preferredWidth) {
+        //     } else if (tray.width > tray.preferredWidth) {
-                tray.width = tray.preferredWidth;
+        //         tray.width = tray.preferredWidth;
-            }
+        //     }
-            el.width(tray.width);
+        //     el.width(tray.width);
-            if (options.resize) {
+        //     if (options.resize) {
-                options.resize({width:tray.width});
+        //         options.resize({width:tray.width});
-            }
+        //     }
-        });
+        // });
 
     }
 
@@ -212,6 +216,8 @@ RED.tray = (function() {
                 if (stack.length === 0) {
                     $("#header-shade").hide();
                     $("#editor-shade").hide();
+                    RED.sidebar.config.enable();
+
                 }
             }
         }

editor/sass/colors.scss

@@ -52,3 +52,8 @@ $workspace-button-color-focus-outline: rgba(85,150,230,0.2);
 $typedInput-button-background: #efefef;
 $typedInput-button-background-hover: #ddd;
 $typedInput-button-background-active: #e3e3e3;
+
+$editor-button-color-primary: #666;
+$editor-button-color-secondary: #999;
+
+$shade-color: rgba(220,220,220,0.5);

editor/sass/editor.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright 2015 IBM Corp.
+ * Copyright 2015, 2016 IBM Corp.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -15,15 +15,15 @@
  **/
 
 
- #editor-stack {
+#editor-stack {
     position: absolute;
     margin: 0;
     top: 0;
     bottom: 0px;
     right: 323px;
     width: 0;
- }
+}
- .editor-tray {
+.editor-tray {
     position:absolute;
     margin: 0;
     top: 0;
@@ -35,40 +35,90 @@
     border-left: 1px solid $secondary-border-color;
     border-bottom: 1px solid $primary-border-color;
     box-sizing: content-box;
- }
+}
- .editor-tray.open {
+.editor-tray.open {
     right: 0;
- }
+}
- .editor-tray-body {
+.editor-tray-body {
     width: auto;
     padding: 20px;
     min-width: 500px;
     box-sizing: border-box;
     overflow-y: scroll;
- }
+}
- .editor-tray-header {
+.editor-tray-header {
-     padding: 10px;
+    @include disable-selection;
+    position: relative;
     box-sizing: border-box;
     font-weight: bold;
-     height: 40px;
+    border-bottom: 1px solid $secondary-border-color;
-     border-bottom: 1px solid $primary-border-color;
     background: $palette-header-background;
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
     }
- .editor-tray-footer {
+}
+
+.editor-tray-footer {
     @include component-footer;
-     height: auto;
+    height: 35px;
+}
+
+.editor-tray-toolbar {
+    text-align: right;
     padding: 8px;
+
     button {
         @include workspace-button;
         padding: 0.4em 1em;
         margin-right: 8px;
-
+        color: $editor-button-color-primary;
         &.leftButton {
-             margin-right: 40px;
+            float: left;
+            margin-top: 1px;
+        }
+        &:not(.leftButton):not(:last-child) {
+            margin-right: 16px;
+        }
+        &:not(.primary) {
+            background: none;
+
+            &:hover {
+                color: $editor-button-color-primary;
             }
         }
     }
- .editor-tray-resize-handle {
+}
+
+.editor-tray-titlebar {
+    border-bottom: 1px solid $secondary-border-color;
+    padding: 8px;
+}
+.editor-tray-breadcrumbs {
+    list-style-type: none;
+    margin: 0;
+    padding:0;
+
+    li {
+        display: inline-block;
+        padding:0;
+        margin:0;
+
+        &:not(:last-child) {
+            color: $editor-button-color-secondary;
+            font-weight: normal;
+
+            &:after {
+                display: inline-block;
+                content: '>';
+                margin: 0 5px;
+            }
+
+        }
+    }
+}
+.editor-tray-resize-handle {
     position: absolute;
     top: 0px;
     bottom: 0px;
@@ -78,25 +128,26 @@
     cursor: col-resize;
     border-left: 1px solid $primary-border-color;
     box-shadow: -1px 0 6px rgba(0,0,0,0.1);
- }
+}
 .editor-tray-resize-button {
     @include workspace-button;
     display: block;
-    height: 20px;
+    height: 37px;
+    line-height: 35px;
     border: none;
     border-bottom: 1px solid $secondary-border-color;
     margin: 0;
     background: $background-color;
-    color: $workspace-button-color-disabled;
+    color: $workspace-button-color;
 }
- #editor-shade, #header-shade  {
+#editor-shade, #header-shade  {
     position: absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
-     background: rgba(220,220,220,0.5);
+    background: $shade-color;
- }
+}
 
 
 .dialog-form,#dialog-form, #dialog-config-form {
@@ -164,6 +215,7 @@
     cursor: auto;
     float: right;
     font-size: 12px !important;
+    line-height: 35px;
 }
 #node-config-dialog-scope-warning {
     display: inline-block;
@@ -175,13 +227,14 @@
     margin: 1px 0 0 0;
     padding: 0;
     height: 22px;
-    width: 110px;
+    width: 150px;
+
 }
 #node-config-dialog-user-count {
     vertical-align: middle;
     display:inline-block;
-    margin-top: 10px;
     margin-right: 20px;
     float:left;
     font-size: 12px;
+    line-height: 35px;
 }

editor/sass/tab-config.scss

@@ -15,11 +15,21 @@
  **/
 
 .sidebar-node-config {
+    position: relative;
     background: #f3f3f3;
     height: 100%;
     overflow-y:auto;
     @include disable-selection;
 }
+.sidebar-node-config-shade {
+    position: absolute;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    background: $shade-color;
+}
+
 
  .config-node-list {
      margin: 0;

red/api/locales/en-US/editor.json

@@ -3,6 +3,7 @@
         "label": {
             "name": "Name",
             "ok": "Ok",
+            "done":"Done",
             "cancel": "Cancel",
             "delete": "Delete",
             "close": "Close"
@@ -128,6 +129,7 @@
         "nodesUse": "__count__ node uses this config",
         "nodesUse_plural": "__count__ nodes use this config",
         "addNewConfig": "Add new __type__ config node",
+        "editNode": "Edit __type__ node",
         "editConfig": "Edit __type__ config node",
         "addNewType": "Add new __type__...",
         "errors": {