Make diff tool a maximised tray rather than dialog

editor/js/ui/diff.js

@@ -1,52 +1,32 @@
 RED.diff = (function() {
 
     var currentDiff = {};
+    var diffVisible = false;
+    var diffList;
 
     function init() {
 
         // RED.actions.add("core:show-current-diff",showLocalDiff);
         RED.actions.add("core:show-remote-diff",showRemoteDiff);
-
         // RED.keyboard.add("*","ctrl-shift-l","core:show-current-diff");
         RED.keyboard.add("*","ctrl-shift-r","core:show-remote-diff");
 
 
-        var dialog = $('<div id="node-dialog-view-diff" class="hide"><div id="node-dialog-view-diff-headers"></div><ol id="node-dialog-view-diff-diff"></ol></div>').appendTo(document.body);
+        // RED.actions.add("core:show-current-diff",showLocalDiff);
+        RED.actions.add("core:show-test-flow-diff",showTestFlowDiff);
+        // RED.keyboard.add("*","ctrl-shift-l","core:show-current-diff");
+        RED.keyboard.add("*","ctrl-shift-f","core:show-test-flow-diff");
+
+    }
+
+    function buildDiffPanel() {
+        var diffPanel = $('<div id="node-dialog-view-diff"><div id="node-dialog-view-diff-headers"></div><ol id="node-dialog-view-diff-diff"></ol></div>');
 
         var toolbar = $('<div class="node-diff-toolbar">'+
             '<span><span id="node-diff-toolbar-resolved-conflicts"></span></span> '+
-            '</div>').prependTo(dialog);
+            '</div>').prependTo(diffPanel);
 
-        $("#node-dialog-view-diff").dialog({
+        diffList = diffPanel.find("#node-dialog-view-diff-diff").editableList({
-            title: RED._('deploy.confirm.button.review'),
-            modal: true,
-            autoOpen: false,
-            buttons: [
-                {
-                    text: RED._("common.label.cancel"),
-                    click: function() {
-                        $( this ).dialog( "close" );
-                    }
-                },
-                {
-                    id: "node-diff-view-diff-merge",
-                    text: RED._("deploy.confirm.button.merge"),
-                    class: "primary disabled",
-                    click: function() {
-                        if (!$("#node-diff-view-diff-merge").hasClass('disabled')) {
-                            refreshConflictHeader();
-                            mergeDiff(currentDiff);
-                            $( this ).dialog( "close" );
-                        }
-                    }
-                }
-            ],
-            open: function() {
-                $(this).dialog({width:Math.min($(window).width(),900),height:Math.min($(window).height(),600)});
-            }
-        });
-
-        var diffList = $("#node-dialog-view-diff-diff").editableList({
             addButton: false,
             scrollOnAdd: false,
             addItem: function(container,i,object) {
@@ -307,6 +287,7 @@ RED.diff = (function() {
                 container.i18n();
             }
         });
+        return diffPanel;
     }
     function formatWireProperty(wires,allNodes) {
         var result = $("<div>",{class:"node-diff-property-wires"})
@@ -572,6 +553,12 @@ RED.diff = (function() {
 
         var nodePropertiesDiv = $("<div>",{class:"node-diff-node-entry-properties"});
         var nodePropertiesTable = $("<table>").appendTo(nodePropertiesDiv);
+        var nodePropertiesTableCols = $('<colgroup><col/><col/></colgroup>').appendTo(nodePropertiesTable);
+        if (remoteNode !== undefined) {
+            $("<col/>").appendTo(nodePropertiesTableCols);
+        }
+        var nodePropertiesTableBody = $("<tbody>").appendTo(nodePropertiesTable);
+
         var row;
         var localCell, remoteCell;
         var element;
@@ -583,7 +570,7 @@ RED.diff = (function() {
         var conflict = false;
         var status;
 
-        row = $("<tr>").appendTo(nodePropertiesTable);
+        row = $("<tr>").appendTo(nodePropertiesTableBody);
         $("<td>",{class:"node-diff-property-cell-label"}).html("id").appendTo(row);
         localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
         if (localNode) {
@@ -626,7 +613,7 @@ RED.diff = (function() {
             ) {
                 conflict = true;
             }
-            row = $("<tr>").appendTo(nodePropertiesTable);
+            row = $("<tr>").appendTo(nodePropertiesTableBody);
             $("<td>",{class:"node-diff-property-cell-label"}).html("position").appendTo(row);
             localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
             if (localNode) {
@@ -694,7 +681,7 @@ RED.diff = (function() {
             ){
                 conflict = true;
             }
-            row = $("<tr>").appendTo(nodePropertiesTable);
+            row = $("<tr>").appendTo(nodePropertiesTableBody);
             $("<td>",{class:"node-diff-property-cell-label"}).html("wires").appendTo(row);
             localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
             if (localNode) {
@@ -761,8 +748,8 @@ RED.diff = (function() {
                 conflict = true;
             }
 
-            row = $("<tr>").appendTo(nodePropertiesTable);
+            row = $("<tr>").appendTo(nodePropertiesTableBody);
-            $("<td>",{class:"node-diff-property-cell-label"}).html(d).appendTo(row);
+            var propertyNameCell = $("<td>",{class:"node-diff-property-cell-label"}).html(d).appendTo(row);
             localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row);
             if (localNode) {
                 if (!conflict) {
@@ -1056,13 +1043,44 @@ RED.diff = (function() {
     }
 
     function showDiff(diff) {
+        if (diffVisible) {
+            return;
+        }
+
         var localDiff = diff.localDiff;
         var remoteDiff = diff.remoteDiff;
         var conflicts = diff.conflicts;
         currentDiff = diff;
-        var list = $("#node-dialog-view-diff-diff");
-        list.editableList('empty');
 
+        var trayOptions = {
+            title: "Review Changes", //TODO: nls
+            width: Infinity,
+            buttons: [
+                {
+                    text: RED._("common.label.cancel"),
+                    click: function() {
+                        RED.tray.close();
+                    }
+                },
+                {
+                    id: "node-diff-view-diff-merge",
+                    text: RED._("deploy.confirm.button.merge"),
+                    class: "primary disabled",
+                    click: function() {
+                        if (!$("#node-diff-view-diff-merge").hasClass('disabled')) {
+                            refreshConflictHeader();
+                            mergeDiff(currentDiff);
+                            RED.tray.close();
+                        }
+                    }
+                }
+            ],
+            resize: function(dimensions) {
+                // trayWidth = dimensions.width;
+            },
+            open: function(tray) {
+                var trayBody = tray.find('.editor-tray-body');
+                var diffPanel = buildDiffPanel().appendTo(trayBody);
                 if (remoteDiff) {
                     $("#node-diff-view-diff-merge").show();
                     if (Object.keys(conflicts).length === 0) {
@@ -1100,7 +1118,7 @@ RED.diff = (function() {
                 };
 
                 if (remoteDiff !== undefined) {
-            $('#node-dialog-view-diff').addClass('node-diff-three-way');
+                    diffPanel.addClass('node-diff-three-way');
 
                     $('<div class="node-diff-node-entry-cell"></div><div class="node-diff-node-entry-cell" data-i18n="diff.local"></div><div class="node-diff-node-entry-cell" data-i18n="diff.remote"></div>').i18n().appendTo("#node-dialog-view-diff-headers");
                     el.remoteTab = {
@@ -1109,10 +1127,10 @@ RED.diff = (function() {
                     };
                     el.remoteDiff = remoteDiff;
                 } else {
-            $('#node-dialog-view-diff').removeClass('node-diff-three-way');
+                    diffPanel.removeClass('node-diff-three-way');
                 }
 
-        list.editableList('addItem',el);
+                diffList.editableList('addItem',el);
 
                 var seenTabs = {};
 
@@ -1131,7 +1149,7 @@ RED.diff = (function() {
                         el.remoteDiff = remoteDiff;
                     }
                     seenTabs[tabId] = true;
-            list.editableList('addItem',el)
+                    diffList.editableList('addItem',el)
                 });
                 newConfig.tabOrder.forEach(function(tabId) {
                     if (!seenTabs[tabId]) {
@@ -1146,7 +1164,7 @@ RED.diff = (function() {
                         if (remoteDiff !== undefined) {
                             el.remoteDiff = remoteDiff;
                         }
-                list.editableList('addItem',el)
+                        diffList.editableList('addItem',el)
                     }
                 });
                 if (remoteDiff !== undefined) {
@@ -1161,7 +1179,7 @@ RED.diff = (function() {
                                 tab:tab,
                                 remoteTab:tab
                             };
-                    list.editableList('addItem',el)
+                            diffList.editableList('addItem',el)
                         }
                     });
                 }
@@ -1186,7 +1204,7 @@ RED.diff = (function() {
                             el.remoteTab = remoteDiff.newConfig.subflows[subflowId];
                             el.remoteDiff = remoteDiff;
                         }
-                list.editableList('addItem',el)
+                        diffList.editableList('addItem',el)
                     }
                 }
                 for (subflowId in newConfig.subflows) {
@@ -1206,7 +1224,7 @@ RED.diff = (function() {
                         if (remoteDiff !== undefined) {
                             el.remoteDiff = remoteDiff;
                         }
-                list.editableList('addItem',el)
+                        diffList.editableList('addItem',el)
                     }
                 }
                 if (remoteDiff !== undefined) {
@@ -1224,17 +1242,24 @@ RED.diff = (function() {
                                 tab:remoteDiff.newConfig.subflows[subflowId],
                                 remoteTab: remoteDiff.newConfig.subflows[subflowId]
                             }
-                    list.editableList('addItem',el)
+                            diffList.editableList('addItem',el)
                         }
                     }
                 }
+                $("#sidebar-shade").show();
+            },
+            close: function() {
+                diffVisible = false;
+                $("#sidebar-shade").hide();
+
+            },
+            show: function() {
+
+            }
+        }
+        RED.tray.show(trayOptions);
+    }
 
-
-        $("#node-diff-filter-changed").addClass("selected");
-        $("#node-diff-filter-all").removeClass("selected");
-
-        $("#node-dialog-view-diff").dialog("open");
-    }
     function mergeDiff(diff) {
         var currentConfig = diff.localDiff.currentConfig;
         var localDiff = diff.localDiff;

editor/js/ui/tray.js

@@ -34,6 +34,10 @@ RED.tray = (function() {
         if (options.title) {
             $('<div class="editor-tray-titlebar">'+options.title+'</div>').appendTo(header);
         }
+        if (options.width === Infinity) {
+            options.maximized = true;
+            resizer.addClass('editor-tray-resize-maximised');
+        }
         var buttonBar = $('<div class="editor-tray-toolbar"></div>').appendTo(header);
         var primaryButton;
         if (options.buttons) {
@@ -74,6 +78,7 @@ RED.tray = (function() {
         };
         stack.push(tray);
 
+        if (!options.maximized) {
             el.draggable({
                 handle: resizer,
                 axis: "x",
@@ -103,6 +108,7 @@ RED.tray = (function() {
                     tray.width = -ui.position.left;
                 }
             });
+        }
 
         function finishBuild() {
             $("#header-shade").show();
@@ -175,7 +181,7 @@ RED.tray = (function() {
             var tray = stack[stack.length-1];
             var trayHeight = tray.tray.height()-tray.header.outerHeight()-tray.footer.outerHeight();
             tray.body.height(trayHeight);
-            if (tray.width > $("#editor-stack").position().left-8) {
+            if (tray.options.maximized || tray.width > $("#editor-stack").position().left-8) {
                 tray.width = $("#editor-stack").position().left-8;
                 tray.tray.width(tray.width);
                 // tray.body.parent().width(tray.width);

editor/js/ui/utils.js

@@ -531,8 +531,10 @@ RED.utils = (function() {
         if (exposeApi) {
             element.prop('expand', function() { return function(targetPath, state) {
                 if (path === targetPath) {
+                    if (header.prop('toggle')) {
                         header.prop('toggle')(state);
-                } else if (subElements[targetPath]) {
+                    }
+                } else if (subElements[targetPath] && subElements[targetPath].prop('expand') ) {
                     subElements[targetPath].prop('expand')(targetPath,state);
                 }
             }});

editor/sass/diff.scss

@@ -16,8 +16,6 @@
 
 
 #node-dialog-view-diff {
-    height: 600px;
-
     .red-ui-editableList-container {
         border-radius:1px;
         padding:0;
@@ -132,11 +130,7 @@
     table {
         border-collapse: collapse;
         table-layout:fixed;
-
+        width: 100%;
-        // Fix for table-layout: fixed on safari:
-        max-width: none;
-        width: auto;
-        min-width: 100%;
     }
     td, th {
         border: 1px solid $secondary-border-color;
@@ -150,12 +144,16 @@
             white-space:nowrap;
             overflow:hidden;
         }
+        &:hover {
+            background: #f9f9f9;
         }
-    td:first-child {
+
+    }
+    col:first-child {
         width: 140px;
     }
-    td:not(:first-child) {
+    col:not(:first-child) {
-        width: calc( 100% - 140px);
+        width: 100%;
     }
     td  {
         .node-diff-status {
@@ -179,8 +177,8 @@
             width: 220px;
         }
     }
-    td:not(:first-child) {
+    col:not(:first-child) {
-        width: calc( (100% - 140px) / 2);
+        width:50%;
     }
 
     .node-diff-node-entry {
@@ -210,6 +208,9 @@
     cursor: pointer;
     padding: 0;
     // background: #f6f6f6;
+    &:hover {
+        background: #f9f9f9;
+    }
 }
 .node-diff-tab-title-meta {
     vertical-align: middle;
@@ -218,6 +219,9 @@
 }
 .node-diff-node-entry-header {
     cursor: pointer;
+    &:hover {
+        background: #f9f9f9;
+    }
 }
 .node-diff-node-entry-node {
     vertical-align: middle;
@@ -247,6 +251,9 @@
     }
     .node-diff-tab-title {
         cursor: default;
+        &:hover {
+            background: none;
+        }
     }
 }
 .node-diff-node-deleted {

editor/sass/editor.scss

@@ -132,6 +132,11 @@
     cursor: col-resize;
     border-left: 1px solid $primary-border-color;
     box-shadow: -1px 0 6px rgba(0,0,0,0.1);
+
+    &.editor-tray-resize-maximised {
+        background: $background-color;
+        cursor: default;
+    }
 }
 .editor-tray-resize-button {
     @include workspace-button;