Better node properties layout in diff table

editor/js/ui/common/editableList.js

@@ -82,13 +82,15 @@
                         that.addItem({});
                     });
             }
+            console.log(this.element.prop('id'));
             if (this.element.css("position") === "absolute") {
                 ["top","left","bottom","right"].forEach(function(s) {
                     var v = that.element.css(s);
-                    if (s!=="auto" && s!=="") {
+                    if (v!=="auto" && v!=="") {
                         that.topContainer.css(s,v);
                         that.uiContainer.css(s,"0");
                         that.element.css(s,'auto');
+                        console.log(s,v);
                     }
                 })
                 this.element.css("position","static");

editor/js/ui/diff.js

@@ -19,8 +19,8 @@ RED.diff = (function() {
 
     }
 
-    function buildDiffPanel() {
+    function buildDiffPanel(container) {
-        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 diffPanel = $('<div id="node-dialog-view-diff"><div id="node-dialog-view-diff-headers"></div><ol id="node-dialog-view-diff-diff"></ol></div>').appendTo(container);
 
         var toolbar = $('<div class="node-diff-toolbar">'+
             '<span><span id="node-diff-toolbar-resolved-conflicts"></span></span> '+
@@ -1080,7 +1080,7 @@ RED.diff = (function() {
             },
             open: function(tray) {
                 var trayBody = tray.find('.editor-tray-body');
-                var diffPanel = buildDiffPanel().appendTo(trayBody);
+                var diffPanel = buildDiffPanel(trayBody);
                 if (remoteDiff) {
                     $("#node-diff-view-diff-merge").show();
                     if (Object.keys(conflicts).length === 0) {
@@ -1120,7 +1120,7 @@ RED.diff = (function() {
                 if (remoteDiff !== undefined) {
                     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");
+                    $('<div data-i18n="diff.local"></div><div data-i18n="diff.remote"></div>').i18n().appendTo("#node-dialog-view-diff-headers");
                     el.remoteTab = {
                         n:{},
                         nodes:remoteDiff.newConfig.globals

editor/sass/diff.scss

@@ -33,7 +33,6 @@
             border: none;
             min-height: 0;
         }
-
     }
     .red-ui-editableList-item-content {
         padding: 5px;
@@ -42,19 +41,23 @@
 }
 #node-dialog-view-diff-headers {
     position: absolute;
-    left:17px;
+    left:237px;
-    right:32px;
+    right:18px;
     top: 55px;
     height: 25px;
-    .node-diff-node-entry-cell:not(:first-child) {
+    div {
+        height: 25px;
+        display: inline-block;
+        box-sizing: border-box;
+        width: 50%;
         background: #f9f9f9;
         text-align: center;
         border-top: 1px solid $secondary-border-color;
         border-color:$secondary-border-color;
+        border-left: 1px solid $secondary-border-color;
     }
-    .node-diff-node-entry-cell:last-child {
+    div:last-child {
         border-right: 1px solid $secondary-border-color;
-
     }
 }
 
@@ -104,10 +107,10 @@
     font-size: 0.9em;
 
     &:first-child {
-        border-top: 1px solid #eee;
+        border-top: 1px solid $secondary-border-color;
     }
     &:not(:last-child) {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid $secondary-border-color;
     }
 
     &.collapsed {
@@ -130,10 +133,21 @@
     table {
         border-collapse: collapse;
         table-layout:fixed;
+        width: calc(100% - 20px);
+        margin-left: 20px;
+    }
+    col:first-child {
+        width: 180px;
+    }
+    col:not(:first-child) {
         width: 100%;
     }
     td, th {
-        border: 1px solid $secondary-border-color;
+        border-top: 1px solid #f3f3f3;
+        border-left: 1px solid $secondary-border-color;
+        &:first-child {
+            border-left: none;
+        }
         padding: 0 0 0 3px;
         text-align: left;
         overflow-x: auto;
@@ -149,12 +163,7 @@
         }
 
     }
-    col:first-child {
+
-        width: 140px;
-    }
-    col:not(:first-child) {
-        width: 100%;
-    }
     td  {
         .node-diff-status {
             margin-left: 0;
@@ -308,7 +317,7 @@
     }
 }
 .node-diff-node-entry-properties {
-    margin: 5px ;
+    margin: 0;
     color: #666;
 }
 .node-diff-status {
@@ -357,7 +366,7 @@
     box-sizing: border-box;
     width: calc( (100% - 20px) / 2);
     height: 32px;
-    border-left: 1px solid #eee;
+    border-left: 1px solid $secondary-border-color;
     padding-top: 2px;
     white-space: nowrap;
     overflow: hidden;

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

@@ -167,8 +167,8 @@
         },
         "nodeCount": "__count__ node",
         "nodeCount_plural": "__count__ nodes",
-        "local":"Local",
+        "local":"Local changes",
-        "remote":"Remote"
+        "remote":"Remote changes"
 
     },
     "subflow": {