Move rename flow dialog to editor tray

editor/js/nodes.js

@@ -272,6 +272,12 @@ RED.nodes = (function() {
 
     function addWorkspace(ws) {
         workspaces[ws.id] = ws;
+        ws._def = {
+            defaults: {
+                label: {value:""}
+            }
+        };
+
         workspacesOrder.push(ws.id);
     }
     function getWorkspace(id) {

editor/js/ui/tray.js

@@ -47,7 +47,13 @@ RED.tray = (function() {
                     b.html(button.text);
                 }
                 if (button.click) {
-                    b.click(button.click);
+                    b.click((function(action) {
+                        return function(evt) {
+                            if (!$(this).hasClass('disabled')) {
+                                action(evt);
+                            }
+                        };
+                    })(button.click));
                 }
                 if (button.class) {
                     b.addClass(button.class);

editor/js/ui/workspaces.js

@@ -38,15 +38,10 @@ RED.workspaces = (function() {
             RED.nodes.dirty(true);
         }
     }
-    function deleteWorkspace(ws,force) {
+    function deleteWorkspace(ws) {
         if (workspace_tabs.count() == 1) {
             return;
         }
-        var nodes = [];
-        if (!force) {
-            nodes = RED.nodes.filterNodes({z:ws.id});
-        }
-        if (force || nodes.length === 0) {
         removeWorkspace(ws);
         var historyEvent = RED.nodes.removeWorkspace(ws.id);
         historyEvent.t = 'delete';
@@ -55,29 +50,78 @@ RED.workspaces = (function() {
         RED.history.push(historyEvent);
         RED.nodes.dirty(true);
         RED.sidebar.config.refresh();
-        } else {
-            $( "#node-dialog-delete-workspace" ).dialog('option','workspace',ws);
-            $( "#node-dialog-delete-workspace-content" ).text(RED._("workspace.delete",{label:ws.label}));
-            $( "#node-dialog-delete-workspace" ).dialog('open');
-        }
     }
+
     function showRenameWorkspaceDialog(id) {
-        var ws = RED.nodes.workspace(id);
+        var workspace = RED.nodes.workspace(id);
-        $( "#node-dialog-rename-workspace" ).dialog("option","workspace",ws);
+        RED.view.state(RED.state.EDITING);
-
+        var trayOptions = {
-        if (workspace_tabs.count() == 1) {
+            title: RED._("workspace.editFlow",{name:workspace.label}),
-            $( "#node-dialog-rename-workspace").next().find(".leftButton")
+            buttons: [
-                .prop('disabled',true)
+                {
-                .addClass("ui-state-disabled");
+                    id: "node-dialog-delete",
-        } else {
+                    class: 'leftButton'+((workspace_tabs.count() == 1)?" disabled":""),
-            $( "#node-dialog-rename-workspace").next().find(".leftButton")
+                    text: RED._("common.label.delete"), //'<i class="fa fa-trash"></i>',
-                .prop('disabled',false)
+                    click: function() {
-                .removeClass("ui-state-disabled");
+                        deleteWorkspace(workspace);
+                        RED.tray.close();
+                    }
+                },
+                {
+                    id: "node-dialog-cancel",
+                    text: RED._("common.label.cancel"),
+                    click: function() {
+                        RED.tray.close();
+                    }
+                },
+                {
+                    id: "node-dialog-ok",
+                    class: "primary",
+                    text: RED._("common.label.done"),
+                    click: function() {
+                        var label = $( "#node-input-name" ).val();
+                        if (workspace.label != label) {
+                            var changes = {
+                                label:workspace.label
+                            }
+                            var historyEvent = {
+                                t: "edit",
+                                changes:changes,
+                                node: workspace,
+                                dirty: RED.nodes.dirty()
+                            }
+                            console.log(workspace);
+                            RED.history.push(historyEvent);
+                            workspace_tabs.renameTab(workspace.id,label);
+                            RED.nodes.dirty(true);
+                            RED.sidebar.config.refresh();
+                            $("#menu-item-workspace-menu-"+workspace.id.replace(".","-")).text(label);
+                        }
+                        RED.tray.close();
+                    }
+                }
+            ],
+            open: function(tray) {
+                var trayBody = tray.find('.editor-tray-body');
+                var dialogForm = $('<form id="dialog-form" class="form-horizontal"></form>').appendTo(trayBody);
+                $('<div class="form-row">'+
+                    '<label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>'+
+                    '<input type="text" id="node-input-name">'+
+                '</div>').appendTo(dialogForm);
+                $('<input type="text" style="display: none;" />').prependTo(dialogForm);
+                dialogForm.submit(function(e) { e.preventDefault();});
+                $("#node-input-name").val(workspace.label);
+                dialogForm.i18n();
+            },
+            close: function() {
+                if (RED.view.state() != RED.state.IMPORT_DRAGGING) {
+                    RED.view.state(RED.state.DEFAULT);
+                }
+            }
+        }
+        RED.tray.show(trayOptions);
     }
 
-        $( "#node-input-workspace-name" ).val(ws.label);
-        $( "#node-dialog-rename-workspace" ).dialog("open");
-    }
 
     var workspace_tabs;
     function createWorkspaceTabs(){
@@ -120,80 +164,6 @@ RED.workspaces = (function() {
             },
             minimumActiveTabWidth: 150
         });
-
-
-        $("#node-dialog-rename-workspace form" ).submit(function(e) { e.preventDefault();});
-        $( "#node-dialog-rename-workspace" ).dialog({
-            modal: true,
-            autoOpen: false,
-            width: 500,
-            title: RED._("workspace.renameSheet"),
-            buttons: [
-                {
-                    class: 'leftButton',
-                    text: RED._("common.label.delete"),
-                    click: function() {
-                        var workspace = $(this).dialog('option','workspace');
-                        $( this ).dialog( "close" );
-                        deleteWorkspace(workspace);
-                    }
-                },
-                {
-                    text: RED._("common.label.cancel"),
-                    click: function() {
-                        $( this ).dialog( "close" );
-                    }
-                },
-                {
-                    text: RED._("common.label.done"),
-                    class: "primary",
-                    click: function() {
-                        var workspace = $(this).dialog('option','workspace');
-                        var label = $( "#node-input-workspace-name" ).val();
-                        if (workspace.label != label) {
-                            workspace_tabs.renameTab(workspace.id,label);
-                            RED.nodes.dirty(true);
-                            RED.sidebar.config.refresh();
-                            $("#menu-item-workspace-menu-"+workspace.id.replace(".","-")).text(label);
-                        }
-                        $( this ).dialog( "close" );
-                    }
-                }
-
-            ],
-            open: function(e) {
-            },
-            close: function(e) {
-            }
-        });
-        $( "#node-dialog-delete-workspace" ).dialog({
-            modal: true,
-            autoOpen: false,
-            width: 500,
-            title: RED._("workspace.confirmDelete"),
-            buttons: [
-                {
-                    text: RED._("common.label.cancel"),
-                    click: function() {
-                        $( this ).dialog( "close" );
-                    }
-                },
-                {
-                    text: RED._("common.label.ok"),
-                    class: "primary",
-                    click: function() {
-                        var workspace = $(this).dialog('option','workspace');
-                        deleteWorkspace(workspace,true);
-                        $( this ).dialog( "close" );
-                    }
-                }
-            ],
-            open: function(e) {
-            },
-            close: function(e) {
-            }
-
-        });
     }
 
     function init() {
@@ -254,6 +224,11 @@ RED.workspaces = (function() {
             workspace_tabs.activateTab(id);
         },
         refresh: function() {
+            RED.nodes.eachWorkspace(function(ws) {
+                workspace_tabs.renameTab(ws.id,ws.label);
+                $("#menu-item-workspace-menu-"+ws.id.replace(".","-")).text(ws.label);
+
+            })
             RED.nodes.eachSubflow(function(sf) {
                 if (workspace_tabs.contains(sf.id)) {
                     workspace_tabs.renameTab(sf.id,sf.name);

editor/sass/editor.scss

@@ -86,7 +86,7 @@
         }
         &:not(.primary) {
             background: none;
-            &:hover {
+            &:not(.disabled):hover {
                 color: $editor-button-color-primary;
             }
         }

editor/templates/index.mst

@@ -129,21 +129,6 @@
         </div>
     </form>
 </div>
-<div id="node-dialog-rename-workspace" class="hide">
-    <form class="form-horizontal">
-        <div class="form-row">
-            <label for="node-input-workspace-name" ><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
-            <input type="text" id="node-input-workspace-name">
-        </div>
-    </form>
-</div>
-<div id="node-dialog-delete-workspace" class="hide">
-    <form class="form-horizontal">
-        <div style="text-align: center; padding-top: 30px;" id="node-dialog-delete-workspace-content">
-        </div>
-    </form>
-</div>
-
 <script type="text/x-red" data-template-name="subflow">
     <div class="form-row">
         <label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>

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

@@ -15,7 +15,7 @@
     },
     "workspace": {
         "defaultName": "Flow __number__",
-        "renameSheet": "Rename flow",
+        "editFlow": "Edit flow: __name__",
         "confirmDelete": "Confirm delete",
         "delete": "Are you sure you want to delete '__label__'?",
         "dropFlowHere": "Drop the flow here"