frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Make diff tool a maximised tray rather than dialog

This commit is contained in:
Nick O'Leary 2017-08-03 09:58:25 +01:00
parent 4af43d676a
commit 7368b0cefb
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
5 changed files with 255 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

413
editor/js/ui/diff.js
View File

@ -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({
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({
diffList = diffPanel.find("#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);
$("<td>",{class:"node-diff-property-cell-label"}).html(d).appendTo(row);
row = $("<tr>").appendTo(nodePropertiesTableBody);
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,185 +1043,223 @@ 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');
if (remoteDiff) {
$("#node-diff-view-diff-merge").show();
if (Object.keys(conflicts).length === 0) {
$("#node-diff-view-diff-merge").removeClass('disabled');
} else {
$("#node-diff-view-diff-merge").addClass('disabled');
}
} else {
$("#node-diff-view-diff-merge").hide();
}
refreshConflictHeader();
$("#node-dialog-view-diff-headers").empty();
// console.log("--------------");
// console.log(localDiff);
// console.log(remoteDiff);
var currentConfig = localDiff.currentConfig;
var newConfig = localDiff.newConfig;
conflicts = conflicts || {};
var el = {
diff: localDiff,
def: {
category: 'config',
color: '#f0f0f0'
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;
},
tab: {
n: {},
nodes: currentConfig.globals
},
newTab: {
n: {},
nodes: newConfig.globals
}
};
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) {
$("#node-diff-view-diff-merge").removeClass('disabled');
} else {
$("#node-diff-view-diff-merge").addClass('disabled');
}
} else {
$("#node-diff-view-diff-merge").hide();
}
refreshConflictHeader();
if (remoteDiff !== undefined) {
$('#node-dialog-view-diff').addClass('node-diff-three-way');
$("#node-dialog-view-diff-headers").empty();
// console.log("--------------");
// console.log(localDiff);
// console.log(remoteDiff);
var currentConfig = localDiff.currentConfig;
var newConfig = localDiff.newConfig;
conflicts = conflicts || {};
$('<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 = {
n:{},
nodes:remoteDiff.newConfig.globals
};
el.remoteDiff = remoteDiff;
} else {
$('#node-dialog-view-diff').removeClass('node-diff-three-way');
}
list.editableList('addItem',el);
var seenTabs = {};
currentConfig.tabOrder.forEach(function(tabId) {
var tab = currentConfig.tabs[tabId];
var el = {
diff: localDiff,
def: RED.nodes.getType('tab'),
tab:tab
};
if (newConfig.tabs.hasOwnProperty(tabId)) {
el.newTab = newConfig.tabs[tabId];
}
if (remoteDiff !== undefined) {
el.remoteTab = remoteDiff.newConfig.tabs[tabId];
el.remoteDiff = remoteDiff;
}
seenTabs[tabId] = true;
list.editableList('addItem',el)
});
newConfig.tabOrder.forEach(function(tabId) {
if (!seenTabs[tabId]) {
seenTabs[tabId] = true;
var tab = newConfig.tabs[tabId];
var el = {
diff: localDiff,
def: RED.nodes.getType('tab'),
tab:tab,
newTab: tab
def: {
category: 'config',
color: '#f0f0f0'
},
tab: {
n: {},
nodes: currentConfig.globals
},
newTab: {
n: {},
nodes: newConfig.globals
}
};
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");
el.remoteTab = {
n:{},
nodes:remoteDiff.newConfig.globals
};
el.remoteDiff = remoteDiff;
} else {
diffPanel.removeClass('node-diff-three-way');
}
list.editableList('addItem',el)
}
});
if (remoteDiff !== undefined) {
remoteDiff.newConfig.tabOrder.forEach(function(tabId) {
if (!seenTabs[tabId]) {
var tab = remoteDiff.newConfig.tabs[tabId];
// TODO how to recognise this is a remotely added flow
diffList.editableList('addItem',el);
var seenTabs = {};
currentConfig.tabOrder.forEach(function(tabId) {
var tab = currentConfig.tabs[tabId];
var el = {
diff: localDiff,
remoteDiff: remoteDiff,
def: RED.nodes.getType('tab'),
tab:tab,
remoteTab:tab
tab:tab
};
list.editableList('addItem',el)
}
});
}
var subflowId;
for (subflowId in currentConfig.subflows) {
if (currentConfig.subflows.hasOwnProperty(subflowId)) {
seenTabs[subflowId] = true;
el = {
diff: localDiff,
def: {
defaults:{},
icon:"subflow.png",
category: "subflows",
color: "#da9"
},
tab:currentConfig.subflows[subflowId]
}
if (newConfig.subflows.hasOwnProperty(subflowId)) {
el.newTab = newConfig.subflows[subflowId];
}
if (remoteDiff !== undefined) {
el.remoteTab = remoteDiff.newConfig.subflows[subflowId];
el.remoteDiff = remoteDiff;
}
list.editableList('addItem',el)
}
}
for (subflowId in newConfig.subflows) {
if (newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
seenTabs[subflowId] = true;
el = {
diff: localDiff,
def: {
defaults:{},
icon:"subflow.png",
category: "subflows",
color: "#da9"
},
tab:newConfig.subflows[subflowId],
newTab:newConfig.subflows[subflowId]
}
if (remoteDiff !== undefined) {
el.remoteDiff = remoteDiff;
}
list.editableList('addItem',el)
}
}
if (remoteDiff !== undefined) {
for (subflowId in remoteDiff.newConfig.subflows) {
if (remoteDiff.newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
el = {
diff: localDiff,
remoteDiff: remoteDiff,
def: {
defaults:{},
icon:"subflow.png",
category: "subflows",
color: "#da9"
},
tab:remoteDiff.newConfig.subflows[subflowId],
remoteTab: remoteDiff.newConfig.subflows[subflowId]
if (newConfig.tabs.hasOwnProperty(tabId)) {
el.newTab = newConfig.tabs[tabId];
}
list.editableList('addItem',el)
if (remoteDiff !== undefined) {
el.remoteTab = remoteDiff.newConfig.tabs[tabId];
el.remoteDiff = remoteDiff;
}
seenTabs[tabId] = true;
diffList.editableList('addItem',el)
});
newConfig.tabOrder.forEach(function(tabId) {
if (!seenTabs[tabId]) {
seenTabs[tabId] = true;
var tab = newConfig.tabs[tabId];
var el = {
diff: localDiff,
def: RED.nodes.getType('tab'),
tab:tab,
newTab: tab
};
if (remoteDiff !== undefined) {
el.remoteDiff = remoteDiff;
}
diffList.editableList('addItem',el)
}
});
if (remoteDiff !== undefined) {
remoteDiff.newConfig.tabOrder.forEach(function(tabId) {
if (!seenTabs[tabId]) {
var tab = remoteDiff.newConfig.tabs[tabId];
// TODO how to recognise this is a remotely added flow
var el = {
diff: localDiff,
remoteDiff: remoteDiff,
def: RED.nodes.getType('tab'),
tab:tab,
remoteTab:tab
};
diffList.editableList('addItem',el)
}
});
}
var subflowId;
for (subflowId in currentConfig.subflows) {
if (currentConfig.subflows.hasOwnProperty(subflowId)) {
seenTabs[subflowId] = true;
el = {
diff: localDiff,
def: {
defaults:{},
icon:"subflow.png",
category: "subflows",
color: "#da9"
},
tab:currentConfig.subflows[subflowId]
}
if (newConfig.subflows.hasOwnProperty(subflowId)) {
el.newTab = newConfig.subflows[subflowId];
}
if (remoteDiff !== undefined) {
el.remoteTab = remoteDiff.newConfig.subflows[subflowId];
el.remoteDiff = remoteDiff;
}
diffList.editableList('addItem',el)
}
}
for (subflowId in newConfig.subflows) {
if (newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
seenTabs[subflowId] = true;
el = {
diff: localDiff,
def: {
defaults:{},
icon:"subflow.png",
category: "subflows",
color: "#da9"
},
tab:newConfig.subflows[subflowId],
newTab:newConfig.subflows[subflowId]
}
if (remoteDiff !== undefined) {
el.remoteDiff = remoteDiff;
}
diffList.editableList('addItem',el)
}
}
if (remoteDiff !== undefined) {
for (subflowId in remoteDiff.newConfig.subflows) {
if (remoteDiff.newConfig.subflows.hasOwnProperty(subflowId) && !seenTabs[subflowId]) {
el = {
diff: localDiff,
remoteDiff: remoteDiff,
def: {
defaults:{},
icon:"subflow.png",
category: "subflows",
color: "#da9"
},
tab:remoteDiff.newConfig.subflows[subflowId],
remoteTab: remoteDiff.newConfig.subflows[subflowId]
}
diffList.editableList('addItem',el)
}
}
}
$("#sidebar-shade").show();
},
close: function() {
diffVisible = false;
$("#sidebar-shade").hide();
},
show: function() {
}
}
$("#node-diff-filter-changed").addClass("selected");
$("#node-diff-filter-all").removeClass("selected");
$("#node-dialog-view-diff").dialog("open");
RED.tray.show(trayOptions);
}
function mergeDiff(diff) {
var currentConfig = diff.localDiff.currentConfig;
var localDiff = diff.localDiff;

10
editor/js/ui/tray.js
View File

@ -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,7 +78,8 @@ RED.tray = (function() {
};
stack.push(tray);
el.draggable({
if (!options.maximized) {
el.draggable({
handle: resizer,
axis: "x",
start:function(event,ui) {
@ -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);

6
editor/js/ui/utils.js
View File

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

31
editor/sass/diff.scss
View File

@ -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;
// Fix for table-layout: fixed on safari:
max-width: none;
width: auto;
min-width: 100%;
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) {
width: calc( 100% - 140px);
col:not(:first-child) {
width: 100%;
}
td {
.node-diff-status {
@ -179,8 +177,8 @@
width: 220px;
}
}
td:not(:first-child) {
width: calc( (100% - 140px) / 2);
col:not(:first-child) {
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 {

5
editor/sass/editor.scss
View File

@ -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;