Namespace diff CSS

This commit is contained in:
Nick O'Leary 2019-05-03 20:22:46 +01:00
parent ad77565508
commit d8d37a66e4
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
5 changed files with 316 additions and 336 deletions

View File

@ -176,13 +176,13 @@ RED.deploy = (function() {
function resolveConflict(currentNodes, activeDeploy) { function resolveConflict(currentNodes, activeDeploy) {
var message = $('<div>'); var message = $('<div>');
$('<p data-i18n="deploy.confirm.conflict"></p>').appendTo(message); $('<p data-i18n="deploy.confirm.conflict"></p>').appendTo(message);
var conflictCheck = $('<div id="node-dialog-confirm-deploy-conflict-checking" class="node-dialog-confirm-conflict-row">'+ var conflictCheck = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
'<img src="red/images/spin.svg"/><div data-i18n="deploy.confirm.conflictChecking"></div>'+ '<img src="red/images/spin.svg"/><div data-i18n="deploy.confirm.conflictChecking"></div>'+
'</div>').appendTo(message); '</div>').appendTo(message);
var conflictAutoMerge = $('<div class="node-dialog-confirm-conflict-row">'+ var conflictAutoMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
'<i style="color: #3a3;" class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>'+ '<i style="color: #3a3;" class="fa fa-check"></i><div data-i18n="deploy.confirm.conflictAutoMerge"></div>'+
'</div>').hide().appendTo(message); '</div>').hide().appendTo(message);
var conflictManualMerge = $('<div id="node-dialog-confirm-deploy-conflict-manual-merge" class="node-dialog-confirm-conflict-row">'+ var conflictManualMerge = $('<div class="red-ui-deploy-dialog-confirm-conflict-row">'+
'<i style="color: #999;" class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>'+ '<i style="color: #999;" class="fa fa-exclamation"></i><div data-i18n="deploy.confirm.conflictManualMerge"></div>'+
'</div>').hide().appendTo(message); '</div>').hide().appendTo(message);
@ -196,22 +196,22 @@ RED.deploy = (function() {
} }
}, },
{ {
id: "node-dialog-confirm-deploy-review", id: "red-ui-deploy-dialog-confirm-deploy-review",
text: RED._("deploy.confirm.button.review"), text: RED._("deploy.confirm.button.review"),
class: "primary disabled", class: "primary disabled",
click: function() { click: function() {
if (!$("#node-dialog-confirm-deploy-review").hasClass('disabled')) { if (!$("#red-ui-deploy-dialog-confirm-deploy-review").hasClass('disabled')) {
RED.diff.showRemoteDiff(); RED.diff.showRemoteDiff();
conflictNotification.close(); conflictNotification.close();
} }
} }
}, },
{ {
id: "node-dialog-confirm-deploy-merge", id: "red-ui-deploy-dialog-confirm-deploy-merge",
text: RED._("deploy.confirm.button.merge"), text: RED._("deploy.confirm.button.merge"),
class: "primary disabled", class: "primary disabled",
click: function() { click: function() {
if (!$("#node-dialog-confirm-deploy-merge").hasClass('disabled')) { if (!$("#red-ui-deploy-dialog-confirm-deploy-merge").hasClass('disabled')) {
RED.diff.mergeDiff(currentDiff); RED.diff.mergeDiff(currentDiff);
conflictNotification.close(); conflictNotification.close();
} }
@ -220,7 +220,7 @@ RED.deploy = (function() {
]; ];
if (activeDeploy) { if (activeDeploy) {
buttons.push({ buttons.push({
id: "node-dialog-confirm-deploy-overwrite", id: "red-ui-deploy-dialog-confirm-deploy-overwrite",
text: RED._("deploy.confirm.button.overwrite"), text: RED._("deploy.confirm.button.overwrite"),
class: "primary", class: "primary",
click: function() { click: function() {
@ -245,11 +245,11 @@ RED.deploy = (function() {
var d = Object.keys(diff.conflicts); var d = Object.keys(diff.conflicts);
if (d.length === 0) { if (d.length === 0) {
conflictAutoMerge.show(); conflictAutoMerge.show();
$("#node-dialog-confirm-deploy-merge").removeClass('disabled') $("#red-ui-deploy-dialog-confirm-deploy-merge").removeClass('disabled')
} else { } else {
conflictManualMerge.show(); conflictManualMerge.show();
} }
$("#node-dialog-confirm-deploy-review").removeClass('disabled') $("#red-ui-deploy-dialog-confirm-deploy-review").removeClass('disabled')
},ellapsed); },ellapsed);
}) })
} }
@ -355,13 +355,13 @@ RED.deploy = (function() {
if (hasUnknown && !ignoreDeployWarnings.unknown) { if (hasUnknown && !ignoreDeployWarnings.unknown) {
showWarning = true; showWarning = true;
notificationMessage = "<p>"+RED._('deploy.confirm.unknown')+"</p>"+ notificationMessage = "<p>"+RED._('deploy.confirm.unknown')+"</p>"+
'<ul class="node-dialog-configm-deploy-list"><li>'+cropList(unknownNodes).map(function(n) { return sanitize(n) }).join("</li><li>")+"</li></ul><p>"+ '<ul class="red-ui-deploy-dialog-confirm-list"><li>'+cropList(unknownNodes).map(function(n) { return sanitize(n) }).join("</li><li>")+"</li></ul><p>"+
RED._('deploy.confirm.confirm')+ RED._('deploy.confirm.confirm')+
"</p>"; "</p>";
notificationButtons= [ notificationButtons= [
{ {
id: "node-dialog-confirm-deploy-deploy", id: "red-ui-deploy-dialog-confirm-deploy-deploy",
text: RED._("deploy.confirm.button.confirm"), text: RED._("deploy.confirm.button.confirm"),
class: "primary", class: "primary",
click: function() { click: function() {
@ -375,12 +375,12 @@ RED.deploy = (function() {
invalidNodes.sort(sortNodeInfo); invalidNodes.sort(sortNodeInfo);
notificationMessage = "<p>"+RED._('deploy.confirm.improperlyConfigured')+"</p>"+ notificationMessage = "<p>"+RED._('deploy.confirm.improperlyConfigured')+"</p>"+
'<ul class="node-dialog-configm-deploy-list"><li>'+cropList(invalidNodes.map(function(A) { return sanitize( (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")")})).join("</li><li>")+"</li></ul><p>"+ '<ul class="red-ui-deploy-dialog-confirm-list"><li>'+cropList(invalidNodes.map(function(A) { return sanitize( (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")")})).join("</li><li>")+"</li></ul><p>"+
RED._('deploy.confirm.confirm')+ RED._('deploy.confirm.confirm')+
"</p>"; "</p>";
notificationButtons= [ notificationButtons= [
{ {
id: "node-dialog-confirm-deploy-deploy", id: "red-ui-deploy-dialog-confirm-deploy-deploy",
text: RED._("deploy.confirm.button.confirm"), text: RED._("deploy.confirm.button.confirm"),
class: "primary", class: "primary",
click: function() { click: function() {

View File

@ -22,7 +22,7 @@ RED.diff = (function() {
} }
function createDiffTable(container,CurrentDiff) { function createDiffTable(container,CurrentDiff) {
var diffList = $('<ol class="node-dialog-view-diff-diff"></ol>').appendTo(container); var diffList = $('<ol class="red-ui-diff-list"></ol>').appendTo(container);
diffList.editableList({ diffList.editableList({
addButton: false, addButton: false,
height: "auto", height: "auto",
@ -34,22 +34,22 @@ RED.diff = (function() {
var def = object.def; var def = object.def;
var conflicts = CurrentDiff.conflicts; var conflicts = CurrentDiff.conflicts;
var tabDiv = $('<div>',{class:"node-diff-tab"}).appendTo(container); var tabDiv = $('<div>',{class:"red-ui-diff-list-flow"}).appendTo(container);
tabDiv.addClass('collapsed'); tabDiv.addClass('collapsed');
var titleRow = $('<div>',{class:"node-diff-tab-title"}).appendTo(tabDiv); var titleRow = $('<div>',{class:"red-ui-diff-list-flow-title"}).appendTo(tabDiv);
var nodesDiv = $('<div>').appendTo(tabDiv); var nodesDiv = $('<div>').appendTo(tabDiv);
var originalCell = $('<div>',{class:"node-diff-node-entry-cell"}).appendTo(titleRow); var originalCell = $('<div>',{class:"red-ui-diff-list-node-cell"}).appendTo(titleRow);
var localCell = $('<div>',{class:"node-diff-node-entry-cell node-diff-node-local"}).appendTo(titleRow); var localCell = $('<div>',{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-local"}).appendTo(titleRow);
var remoteCell; var remoteCell;
var selectState; var selectState;
if (remoteDiff) { if (remoteDiff) {
remoteCell = $('<div>',{class:"node-diff-node-entry-cell node-diff-node-remote"}).appendTo(titleRow); remoteCell = $('<div>',{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-remote"}).appendTo(titleRow);
} }
$('<span class="node-diff-chevron"><i class="fa fa-angle-down"></i></span>').appendTo(originalCell); $('<span class="red-ui-diff-list-chevron"><i class="fa fa-angle-down"></i></span>').appendTo(originalCell);
createNodeIcon(tab,def).appendTo(originalCell); createNodeIcon(tab,def).appendTo(originalCell);
var tabForLabel = (object.newTab || object.tab).n; var tabForLabel = (object.newTab || object.tab).n;
var titleSpan = $('<span>',{class:"node-diff-tab-title-meta"}).appendTo(originalCell); var titleSpan = $('<span>',{class:"red-ui-diff-list-flow-title-meta"}).appendTo(originalCell);
if (tabForLabel.type === 'tab') { if (tabForLabel.type === 'tab') {
titleSpan.text(tabForLabel.label||tabForLabel.id); titleSpan.text(tabForLabel.label||tabForLabel.id);
} else if (tab.type === 'subflow') { } else if (tab.type === 'subflow') {
@ -87,50 +87,50 @@ RED.diff = (function() {
} }
} }
if (tab.type !== undefined) { if (tab.type !== undefined) {
var div = $("<div>",{class:"node-diff-node-entry node-diff-node-props collapsed"}).appendTo(nodesDiv); var div = $("<div>",{class:"red-ui-diff-list-node red-ui-diff-list-node-props collapsed"}).appendTo(nodesDiv);
var row = $("<div>",{class:"node-diff-node-entry-header"}).appendTo(div); var row = $("<div>",{class:"red-ui-diff-list-node-header"}).appendTo(div);
var originalNodeDiv = $("<div>",{class:"node-diff-node-entry-cell"}).appendTo(row); var originalNodeDiv = $("<div>",{class:"red-ui-diff-list-node-cell"}).appendTo(row);
var localNodeDiv = $("<div>",{class:"node-diff-node-entry-cell node-diff-node-local"}).appendTo(row); var localNodeDiv = $("<div>",{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-local"}).appendTo(row);
var localChanged = false; var localChanged = false;
var remoteChanged = false; var remoteChanged = false;
if (!localDiff.newConfig.all[tab.id]) { if (!localDiff.newConfig.all[tab.id]) {
localNodeDiv.addClass("node-diff-empty"); localNodeDiv.addClass("red-ui-diff-empty");
} else if (localDiff.added[tab.id]) { } else if (localDiff.added[tab.id]) {
localNodeDiv.addClass("node-diff-node-added"); localNodeDiv.addClass("red-ui-diff-status-added");
localChanged = true; localChanged = true;
$('<span class="node-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.added"></span></span>').appendTo(localNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.added"></span></span>').appendTo(localNodeDiv);
} else if (localDiff.changed[tab.id]) { } else if (localDiff.changed[tab.id]) {
localNodeDiv.addClass("node-diff-node-changed"); localNodeDiv.addClass("red-ui-diff-status-changed");
localChanged = true; localChanged = true;
$('<span class="node-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(localNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(localNodeDiv);
} else { } else {
localNodeDiv.addClass("node-diff-node-unchanged"); localNodeDiv.addClass("red-ui-diff-status-unchanged");
$('<span class="node-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(localNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(localNodeDiv);
} }
var remoteNodeDiv; var remoteNodeDiv;
if (remoteDiff) { if (remoteDiff) {
remoteNodeDiv = $("<div>",{class:"node-diff-node-entry-cell node-diff-node-remote"}).appendTo(row); remoteNodeDiv = $("<div>",{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-remote"}).appendTo(row);
if (!remoteDiff.newConfig.all[tab.id]) { if (!remoteDiff.newConfig.all[tab.id]) {
remoteNodeDiv.addClass("node-diff-empty"); remoteNodeDiv.addClass("red-ui-diff-empty");
if (remoteDiff.deleted[tab.id]) { if (remoteDiff.deleted[tab.id]) {
remoteChanged = true; remoteChanged = true;
} }
} else if (remoteDiff.added[tab.id]) { } else if (remoteDiff.added[tab.id]) {
remoteNodeDiv.addClass("node-diff-node-added"); remoteNodeDiv.addClass("red-ui-diff-status-added");
remoteChanged = true; remoteChanged = true;
$('<span class="node-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.added"></span></span>').appendTo(remoteNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.added"></span></span>').appendTo(remoteNodeDiv);
} else if (remoteDiff.changed[tab.id]) { } else if (remoteDiff.changed[tab.id]) {
remoteNodeDiv.addClass("node-diff-node-changed"); remoteNodeDiv.addClass("red-ui-diff-status-changed");
remoteChanged = true; remoteChanged = true;
$('<span class="node-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(remoteNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(remoteNodeDiv);
} else { } else {
remoteNodeDiv.addClass("node-diff-node-unchanged"); remoteNodeDiv.addClass("red-ui-diff-status-unchanged");
$('<span class="node-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(remoteNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(remoteNodeDiv);
} }
} }
$('<span class="node-diff-chevron"><i class="fa fa-angle-down"></i></span>').appendTo(originalNodeDiv); $('<span class="red-ui-diff-list-chevron"><i class="fa fa-angle-down"></i></span>').appendTo(originalNodeDiv);
$('<span>').text(RED._("diff.flowProperties")).appendTo(originalNodeDiv); $('<span>').text(RED._("diff.flowProperties")).appendTo(originalNodeDiv);
row.on("click", function(evt) { row.on("click", function(evt) {
@ -143,13 +143,13 @@ RED.diff = (function() {
if (conflicts[tab.id]) { if (conflicts[tab.id]) {
flowStats.conflicts++; flowStats.conflicts++;
if (!localNodeDiv.hasClass("node-diff-empty")) { if (!localNodeDiv.hasClass("red-ui-diff-empty")) {
$('<span class="node-diff-node-conflict"><span class="node-diff-status"><i class="fa fa-exclamation"></i></span></span>').prependTo(localNodeDiv); $('<span class="red-ui-diff-status-conflict"><span class="red-ui-diff-status"><i class="fa fa-exclamation"></i></span></span>').prependTo(localNodeDiv);
} }
if (!remoteNodeDiv.hasClass("node-diff-empty")) { if (!remoteNodeDiv.hasClass("red-ui-diff-empty")) {
$('<span class="node-diff-node-conflict"><span class="node-diff-status"><i class="fa fa-exclamation"></i></span></span>').prependTo(remoteNodeDiv); $('<span class="red-ui-diff-status-conflict"><span class="red-ui-diff-status"><i class="fa fa-exclamation"></i></span></span>').prependTo(remoteNodeDiv);
} }
div.addClass("node-diff-node-entry-conflict"); div.addClass("red-ui-diff-list-node-conflict");
} else { } else {
selectState = CurrentDiff.resolutions[tab.id]; selectState = CurrentDiff.resolutions[tab.id];
} }
@ -157,7 +157,7 @@ RED.diff = (function() {
createNodeConflictRadioBoxes(tab,div,localNodeDiv,remoteNodeDiv,true,!conflicts[tab.id],selectState,CurrentDiff); createNodeConflictRadioBoxes(tab,div,localNodeDiv,remoteNodeDiv,true,!conflicts[tab.id],selectState,CurrentDiff);
} }
} }
// var stats = $('<span>',{class:"node-diff-tab-stats"}).appendTo(titleRow); // var stats = $('<span>',{class:"red-ui-diff-list-flow-stats"}).appendTo(titleRow);
var localNodeCount = 0; var localNodeCount = 0;
var remoteNodeCount = 0; var remoteNodeCount = 0;
var seen = {}; var seen = {};
@ -183,20 +183,20 @@ RED.diff = (function() {
}); });
} }
titleRow.on("click", function(evt) { titleRow.on("click", function(evt) {
// if (titleRow.parent().find(".node-diff-node-entry:not(.hide)").length > 0) { // if (titleRow.parent().find(".red-ui-diff-list-node:not(.hide)").length > 0) {
titleRow.parent().toggleClass('collapsed'); titleRow.parent().toggleClass('collapsed');
if ($(this).parent().hasClass('collapsed')) { if ($(this).parent().hasClass('collapsed')) {
$(this).parent().find('.node-diff-node-entry').addClass('collapsed'); $(this).parent().find('.red-ui-diff-list-node').addClass('collapsed');
$(this).parent().find('.red-ui-debug-msg-element').addClass('collapsed'); $(this).parent().find('.red-ui-debug-msg-element').addClass('collapsed');
} }
// } // }
}) })
if (localDiff.deleted[tab.id]) { if (localDiff.deleted[tab.id]) {
$('<span class="node-diff-node-deleted"><span class="node-diff-status"><i class="fa fa-minus-square"></i> <span data-i18n="diff.type.flowDeleted"></span></span></span>').appendTo(localCell); $('<span class="red-ui-diff-status-deleted"><span class="red-ui-diff-status"><i class="fa fa-minus-square"></i> <span data-i18n="diff.type.flowDeleted"></span></span></span>').appendTo(localCell);
} else if (object.newTab) { } else if (object.newTab) {
if (localDiff.added[tab.id]) { if (localDiff.added[tab.id]) {
$('<span class="node-diff-node-added"><span class="node-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.flowAdded"></span></span></span>').appendTo(localCell); $('<span class="red-ui-diff-status-added"><span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.flowAdded"></span></span></span>').appendTo(localCell);
} else { } else {
if (tab.id) { if (tab.id) {
if (localDiff.changed[tab.id]) { if (localDiff.changed[tab.id]) {
@ -205,37 +205,37 @@ RED.diff = (function() {
flowStats.local.unchangedCount++; flowStats.local.unchangedCount++;
} }
} }
var localStats = $('<span>',{class:"node-diff-tab-stats"}).appendTo(localCell); var localStats = $('<span>',{class:"red-ui-diff-list-flow-stats"}).appendTo(localCell);
$('<span class="node-diff-status"></span>').text(RED._('diff.nodeCount',{count:localNodeCount})).appendTo(localStats); $('<span class="red-ui-diff-status"></span>').text(RED._('diff.nodeCount',{count:localNodeCount})).appendTo(localStats);
if (flowStats.conflicts + flowStats.local.addedCount + flowStats.local.changedCount + flowStats.local.deletedCount > 0) { if (flowStats.conflicts + flowStats.local.addedCount + flowStats.local.changedCount + flowStats.local.deletedCount > 0) {
$('<span class="node-diff-status"> [ </span>').appendTo(localStats); $('<span class="red-ui-diff-status"> [ </span>').appendTo(localStats);
if (flowStats.conflicts > 0) { if (flowStats.conflicts > 0) {
$('<span class="node-diff-node-conflict"><span class="node-diff-status"><i class="fa fa-exclamation"></i> '+flowStats.conflicts+'</span></span>').appendTo(localStats); $('<span class="red-ui-diff-status-conflict"><span class="red-ui-diff-status"><i class="fa fa-exclamation"></i> '+flowStats.conflicts+'</span></span>').appendTo(localStats);
} }
if (flowStats.local.addedCount > 0) { if (flowStats.local.addedCount > 0) {
$('<span class="node-diff-node-added"><span class="node-diff-status"><i class="fa fa-plus-square"></i> '+flowStats.local.addedCount+'</span></span>').appendTo(localStats); $('<span class="red-ui-diff-status-added"><span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> '+flowStats.local.addedCount+'</span></span>').appendTo(localStats);
} }
if (flowStats.local.changedCount > 0) { if (flowStats.local.changedCount > 0) {
$('<span class="node-diff-node-changed"><span class="node-diff-status"><i class="fa fa-square"></i> '+flowStats.local.changedCount+'</span></span>').appendTo(localStats); $('<span class="red-ui-diff-status-changed"><span class="red-ui-diff-status"><i class="fa fa-square"></i> '+flowStats.local.changedCount+'</span></span>').appendTo(localStats);
} }
if (flowStats.local.deletedCount > 0) { if (flowStats.local.deletedCount > 0) {
$('<span class="node-diff-node-deleted"><span class="node-diff-status"><i class="fa fa-minus-square"></i> '+flowStats.local.deletedCount+'</span></span>').appendTo(localStats); $('<span class="red-ui-diff-status-deleted"><span class="red-ui-diff-status"><i class="fa fa-minus-square"></i> '+flowStats.local.deletedCount+'</span></span>').appendTo(localStats);
} }
$('<span class="node-diff-status"> ] </span>').appendTo(localStats); $('<span class="red-ui-diff-status"> ] </span>').appendTo(localStats);
} }
} }
} else { } else {
localCell.addClass("node-diff-empty"); localCell.addClass("red-ui-diff-empty");
} }
if (remoteDiff) { if (remoteDiff) {
if (remoteDiff.deleted[tab.id]) { if (remoteDiff.deleted[tab.id]) {
$('<span class="node-diff-node-deleted"><span class="node-diff-status"><i class="fa fa-minus-square"></i> <span data-i18n="diff.type.flowDeleted"></span></span></span>').appendTo(remoteCell); $('<span class="red-ui-diff-status-deleted"><span class="red-ui-diff-status"><i class="fa fa-minus-square"></i> <span data-i18n="diff.type.flowDeleted"></span></span></span>').appendTo(remoteCell);
} else if (object.remoteTab) { } else if (object.remoteTab) {
if (remoteDiff.added[tab.id]) { if (remoteDiff.added[tab.id]) {
$('<span class="node-diff-node-added"><span class="node-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.flowAdded"></span></span></span>').appendTo(remoteCell); $('<span class="red-ui-diff-status-added"><span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.flowAdded"></span></span></span>').appendTo(remoteCell);
} else { } else {
if (tab.id) { if (tab.id) {
if (remoteDiff.changed[tab.id]) { if (remoteDiff.changed[tab.id]) {
@ -244,31 +244,31 @@ RED.diff = (function() {
flowStats.remote.unchangedCount++; flowStats.remote.unchangedCount++;
} }
} }
var remoteStats = $('<span>',{class:"node-diff-tab-stats"}).appendTo(remoteCell); var remoteStats = $('<span>',{class:"red-ui-diff-list-flow-stats"}).appendTo(remoteCell);
$('<span class="node-diff-status"></span>').text(RED._('diff.nodeCount',{count:remoteNodeCount})).appendTo(remoteStats); $('<span class="red-ui-diff-status"></span>').text(RED._('diff.nodeCount',{count:remoteNodeCount})).appendTo(remoteStats);
if (flowStats.conflicts + flowStats.remote.addedCount + flowStats.remote.changedCount + flowStats.remote.deletedCount > 0) { if (flowStats.conflicts + flowStats.remote.addedCount + flowStats.remote.changedCount + flowStats.remote.deletedCount > 0) {
$('<span class="node-diff-status"> [ </span>').appendTo(remoteStats); $('<span class="red-ui-diff-status"> [ </span>').appendTo(remoteStats);
if (flowStats.conflicts > 0) { if (flowStats.conflicts > 0) {
$('<span class="node-diff-node-conflict"><span class="node-diff-status"><i class="fa fa-exclamation"></i> '+flowStats.conflicts+'</span></span>').appendTo(remoteStats); $('<span class="red-ui-diff-status-conflict"><span class="red-ui-diff-status"><i class="fa fa-exclamation"></i> '+flowStats.conflicts+'</span></span>').appendTo(remoteStats);
} }
if (flowStats.remote.addedCount > 0) { if (flowStats.remote.addedCount > 0) {
$('<span class="node-diff-node-added"><span class="node-diff-status"><i class="fa fa-plus-square"></i> '+flowStats.remote.addedCount+'</span></span>').appendTo(remoteStats); $('<span class="red-ui-diff-status-added"><span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> '+flowStats.remote.addedCount+'</span></span>').appendTo(remoteStats);
} }
if (flowStats.remote.changedCount > 0) { if (flowStats.remote.changedCount > 0) {
$('<span class="node-diff-node-changed"><span class="node-diff-status"><i class="fa fa-square"></i> '+flowStats.remote.changedCount+'</span></span>').appendTo(remoteStats); $('<span class="red-ui-diff-status-changed"><span class="red-ui-diff-status"><i class="fa fa-square"></i> '+flowStats.remote.changedCount+'</span></span>').appendTo(remoteStats);
} }
if (flowStats.remote.deletedCount > 0) { if (flowStats.remote.deletedCount > 0) {
$('<span class="node-diff-node-deleted"><span class="node-diff-status"><i class="fa fa-minus-square"></i> '+flowStats.remote.deletedCount+'</span></span>').appendTo(remoteStats); $('<span class="red-ui-diff-status-deleted"><span class="red-ui-diff-status"><i class="fa fa-minus-square"></i> '+flowStats.remote.deletedCount+'</span></span>').appendTo(remoteStats);
} }
$('<span class="node-diff-status"> ] </span>').appendTo(remoteStats); $('<span class="red-ui-diff-status"> ] </span>').appendTo(remoteStats);
} }
} }
} else { } else {
remoteCell.addClass("node-diff-empty"); remoteCell.addClass("red-ui-diff-empty");
} }
selectState = ""; selectState = "";
if (flowStats.conflicts > 0) { if (flowStats.conflicts > 0) {
titleRow.addClass("node-diff-node-entry-conflict"); titleRow.addClass("red-ui-diff-list-node-conflict");
} else { } else {
selectState = CurrentDiff.resolutions[tab.id]; selectState = CurrentDiff.resolutions[tab.id];
} }
@ -279,8 +279,8 @@ RED.diff = (function() {
} }
} }
if (tabDiv.find(".node-diff-node-entry").length === 0) { if (tabDiv.find(".red-ui-diff-list-node").length === 0) {
tabDiv.addClass("node-diff-tab-empty"); tabDiv.addClass("red-ui-diff-list-flow-empty");
} }
container.i18n(); container.i18n();
} }
@ -288,10 +288,10 @@ RED.diff = (function() {
return diffList; return diffList;
} }
function buildDiffPanel(container,diff,options) { function buildDiffPanel(container,diff,options) {
var diffPanel = $('<div class="node-dialog-view-diff-panel"></div>').appendTo(container); var diffPanel = $('<div class="red-ui-diff-panel"></div>').appendTo(container);
var diffHeaders = $('<div class="node-dialog-view-diff-headers"></div>').appendTo(diffPanel); var diffHeaders = $('<div class="red-ui-diff-panel-headers"></div>').appendTo(diffPanel);
if (options.mode === "merge") { if (options.mode === "merge") {
diffPanel.addClass("node-dialog-view-diff-panel-merge"); diffPanel.addClass("red-ui-diff-panel-merge");
} }
var diffList = createDiffTable(diffPanel, diff); var diffList = createDiffTable(diffPanel, diff);
@ -304,13 +304,13 @@ RED.diff = (function() {
if (remoteDiff !== undefined) { if (remoteDiff !== undefined) {
diffPanel.addClass('node-diff-three-way'); diffPanel.addClass('red-ui-diff-three-way');
var localTitle = options.oldRevTitle || RED._('diff.local'); var localTitle = options.oldRevTitle || RED._('diff.local');
var remoteTitle = options.newRevTitle || RED._('diff.remote'); var remoteTitle = options.newRevTitle || RED._('diff.remote');
$('<div></div>').text(localTitle).appendTo(diffHeaders); $('<div></div>').text(localTitle).appendTo(diffHeaders);
$('<div></div>').text(remoteTitle).appendTo(diffHeaders); $('<div></div>').text(remoteTitle).appendTo(diffHeaders);
} else { } else {
diffPanel.removeClass('node-diff-three-way'); diffPanel.removeClass('red-ui-diff-three-way');
} }
return { return {
@ -458,7 +458,7 @@ RED.diff = (function() {
}; };
} }
function formatWireProperty(wires,allNodes) { function formatWireProperty(wires,allNodes) {
var result = $("<div>",{class:"node-diff-property-wires"}) var result = $("<div>",{class:"red-ui-diff-list-wires"})
var list = $("<ol></ol>"); var list = $("<ol></ol>");
var c = 0; var c = 0;
wires.forEach(function(p,i) { wires.forEach(function(p,i) {
@ -489,7 +489,7 @@ RED.diff = (function() {
return result; return result;
} }
function createNodeIcon(node,def) { function createNodeIcon(node,def) {
var nodeDiv = $("<div>",{class:"node-diff-node-entry-node"}); var nodeDiv = $("<div>",{class:"red-ui-diff-list-node-icon"});
var colour = RED.utils.getNodeColor(node.type,def); var colour = RED.utils.getNodeColor(node.type,def);
var icon_url = RED.utils.getNodeIcon(def,node); var icon_url = RED.utils.getNodeIcon(def,node);
if (node.type === 'tab') { if (node.type === 'tab') {
@ -503,11 +503,10 @@ RED.diff = (function() {
return nodeDiv; return nodeDiv;
} }
function createNode(node,def) { function createNode(node,def) {
var nodeTitleDiv = $("<div>",{class:"node-diff-node-entry-title"}) var nodeTitleDiv = $("<div>",{class:"red-ui-diff-list-node-title"})
createNodeIcon(node,def).appendTo(nodeTitleDiv); createNodeIcon(node,def).appendTo(nodeTitleDiv);
var contentDiv = $('<div>',{class:"node-diff-node-description"}).appendTo(nodeTitleDiv);
var nodeLabel = node.label || node.name || node.id; var nodeLabel = node.label || node.name || node.id;
$('<span>',{class:"node-diff-node-label"}).text(nodeLabel).appendTo(contentDiv); $('<div>',{class:"red-ui-diff-list-node-description"}).text(nodeLabel).appendTo(nodeTitleDiv);
return nodeTitleDiv; return nodeTitleDiv;
} }
function createNodeDiffRow(node,stats,CurrentDiff) { function createNodeDiffRow(node,stats,CurrentDiff) {
@ -559,80 +558,80 @@ RED.diff = (function() {
def = {}; def = {};
} }
} }
var div = $("<div>",{class:"node-diff-node-entry collapsed"}); var div = $("<div>",{class:"red-ui-diff-list-node collapsed"});
var row = $("<div>",{class:"node-diff-node-entry-header"}).appendTo(div); var row = $("<div>",{class:"red-ui-diff-list-node-header"}).appendTo(div);
var originalNodeDiv = $("<div>",{class:"node-diff-node-entry-cell"}).appendTo(row); var originalNodeDiv = $("<div>",{class:"red-ui-diff-list-node-cell"}).appendTo(row);
var localNodeDiv = $("<div>",{class:"node-diff-node-entry-cell node-diff-node-local"}).appendTo(row); var localNodeDiv = $("<div>",{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-local"}).appendTo(row);
var remoteNodeDiv; var remoteNodeDiv;
var chevron; var chevron;
if (remoteDiff) { if (remoteDiff) {
remoteNodeDiv = $("<div>",{class:"node-diff-node-entry-cell node-diff-node-remote"}).appendTo(row); remoteNodeDiv = $("<div>",{class:"red-ui-diff-list-node-cell red-ui-diff-list-node-remote"}).appendTo(row);
} }
$('<span class="node-diff-chevron"><i class="fa fa-angle-down"></i></span>').appendTo(originalNodeDiv); $('<span class="red-ui-diff-list-chevron"><i class="fa fa-angle-down"></i></span>').appendTo(originalNodeDiv);
if (unChanged) { if (unChanged) {
stats.local.unchangedCount++; stats.local.unchangedCount++;
createNode(node,def).appendTo(originalNodeDiv); createNode(node,def).appendTo(originalNodeDiv);
localNodeDiv.addClass("node-diff-node-unchanged"); localNodeDiv.addClass("red-ui-diff-status-unchanged");
$('<span class="node-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(localNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(localNodeDiv);
if (remoteDiff) { if (remoteDiff) {
stats.remote.unchangedCount++; stats.remote.unchangedCount++;
remoteNodeDiv.addClass("node-diff-node-unchanged"); remoteNodeDiv.addClass("red-ui-diff-status-unchanged");
$('<span class="node-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(remoteNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(remoteNodeDiv);
} }
div.addClass("node-diff-node-unchanged"); div.addClass("red-ui-diff-status-unchanged");
} else if (localDiff.added[node.id]) { } else if (localDiff.added[node.id]) {
localNodeDiv.addClass("node-diff-node-added"); localNodeDiv.addClass("red-ui-diff-status-added");
if (remoteNodeDiv) { if (remoteNodeDiv) {
remoteNodeDiv.addClass("node-diff-empty"); remoteNodeDiv.addClass("red-ui-diff-empty");
} }
$('<span class="node-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.added"></span></span>').appendTo(localNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.added"></span></span>').appendTo(localNodeDiv);
createNode(node,def).appendTo(originalNodeDiv); createNode(node,def).appendTo(originalNodeDiv);
} else if (remoteDiff && remoteDiff.added[node.id]) { } else if (remoteDiff && remoteDiff.added[node.id]) {
localNodeDiv.addClass("node-diff-empty"); localNodeDiv.addClass("red-ui-diff-empty");
remoteNodeDiv.addClass("node-diff-node-added"); remoteNodeDiv.addClass("red-ui-diff-status-added");
$('<span class="node-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.added"></span></span>').appendTo(remoteNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-plus-square"></i> <span data-i18n="diff.type.added"></span></span>').appendTo(remoteNodeDiv);
createNode(node,def).appendTo(originalNodeDiv); createNode(node,def).appendTo(originalNodeDiv);
} else { } else {
createNode(node,def).appendTo(originalNodeDiv); createNode(node,def).appendTo(originalNodeDiv);
if (localDiff.moved[node.id]) { if (localDiff.moved[node.id]) {
var localN = localDiff.newConfig.all[node.id]; var localN = localDiff.newConfig.all[node.id];
if (!localDiff.deleted[node.z] && node.z !== localN.z && node.z !== "" && !localDiff.newConfig.all[node.z]) { if (!localDiff.deleted[node.z] && node.z !== localN.z && node.z !== "" && !localDiff.newConfig.all[node.z]) {
localNodeDiv.addClass("node-diff-empty"); localNodeDiv.addClass("red-ui-diff-empty");
} else { } else {
localNodeDiv.addClass("node-diff-node-moved"); localNodeDiv.addClass("red-ui-diff-status-moved");
var localMovedMessage = ""; var localMovedMessage = "";
if (node.z === localN.z) { if (node.z === localN.z) {
localMovedMessage = RED._("diff.type.movedFrom",{id:(localDiff.currentConfig.all[node.id].z||'global')}); localMovedMessage = RED._("diff.type.movedFrom",{id:(localDiff.currentConfig.all[node.id].z||'global')});
} else { } else {
localMovedMessage = RED._("diff.type.movedTo",{id:(localN.z||'global')}); localMovedMessage = RED._("diff.type.movedTo",{id:(localN.z||'global')});
} }
$('<span class="node-diff-status"><i class="fa fa-caret-square-o-right"></i> '+localMovedMessage+'</span>').appendTo(localNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-caret-square-o-right"></i> '+localMovedMessage+'</span>').appendTo(localNodeDiv);
} }
localChanged = true; localChanged = true;
} else if (localDiff.deleted[node.z]) { } else if (localDiff.deleted[node.z]) {
localNodeDiv.addClass("node-diff-empty"); localNodeDiv.addClass("red-ui-diff-empty");
localChanged = true; localChanged = true;
} else if (localDiff.deleted[node.id]) { } else if (localDiff.deleted[node.id]) {
localNodeDiv.addClass("node-diff-node-deleted"); localNodeDiv.addClass("red-ui-diff-status-deleted");
$('<span class="node-diff-status"><i class="fa fa-minus-square"></i> <span data-i18n="diff.type.deleted"></span></span>').appendTo(localNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-minus-square"></i> <span data-i18n="diff.type.deleted"></span></span>').appendTo(localNodeDiv);
localChanged = true; localChanged = true;
} else if (localDiff.changed[node.id]) { } else if (localDiff.changed[node.id]) {
if (localDiff.newConfig.all[node.id].z !== node.z) { if (localDiff.newConfig.all[node.id].z !== node.z) {
localNodeDiv.addClass("node-diff-empty"); localNodeDiv.addClass("red-ui-diff-empty");
} else { } else {
localNodeDiv.addClass("node-diff-node-changed"); localNodeDiv.addClass("red-ui-diff-status-changed");
$('<span class="node-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(localNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(localNodeDiv);
localChanged = true; localChanged = true;
} }
} else { } else {
if (localDiff.newConfig.all[node.id].z !== node.z) { if (localDiff.newConfig.all[node.id].z !== node.z) {
localNodeDiv.addClass("node-diff-empty"); localNodeDiv.addClass("red-ui-diff-empty");
} else { } else {
stats.local.unchangedCount++; stats.local.unchangedCount++;
localNodeDiv.addClass("node-diff-node-unchanged"); localNodeDiv.addClass("red-ui-diff-status-unchanged");
$('<span class="node-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(localNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(localNodeDiv);
} }
} }
@ -640,36 +639,36 @@ RED.diff = (function() {
if (remoteDiff.moved[node.id]) { if (remoteDiff.moved[node.id]) {
var remoteN = remoteDiff.newConfig.all[node.id]; var remoteN = remoteDiff.newConfig.all[node.id];
if (!remoteDiff.deleted[node.z] && node.z !== remoteN.z && node.z !== "" && !remoteDiff.newConfig.all[node.z]) { if (!remoteDiff.deleted[node.z] && node.z !== remoteN.z && node.z !== "" && !remoteDiff.newConfig.all[node.z]) {
remoteNodeDiv.addClass("node-diff-empty"); remoteNodeDiv.addClass("red-ui-diff-empty");
} else { } else {
remoteNodeDiv.addClass("node-diff-node-moved"); remoteNodeDiv.addClass("red-ui-diff-status-moved");
var remoteMovedMessage = ""; var remoteMovedMessage = "";
if (node.z === remoteN.z) { if (node.z === remoteN.z) {
remoteMovedMessage = RED._("diff.type.movedFrom",{id:(remoteDiff.currentConfig.all[node.id].z||'global')}); remoteMovedMessage = RED._("diff.type.movedFrom",{id:(remoteDiff.currentConfig.all[node.id].z||'global')});
} else { } else {
remoteMovedMessage = RED._("diff.type.movedTo",{id:(remoteN.z||'global')}); remoteMovedMessage = RED._("diff.type.movedTo",{id:(remoteN.z||'global')});
} }
$('<span class="node-diff-status"><i class="fa fa-caret-square-o-right"></i> '+remoteMovedMessage+'</span>').appendTo(remoteNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-caret-square-o-right"></i> '+remoteMovedMessage+'</span>').appendTo(remoteNodeDiv);
} }
} else if (remoteDiff.deleted[node.z]) { } else if (remoteDiff.deleted[node.z]) {
remoteNodeDiv.addClass("node-diff-empty"); remoteNodeDiv.addClass("red-ui-diff-empty");
} else if (remoteDiff.deleted[node.id]) { } else if (remoteDiff.deleted[node.id]) {
remoteNodeDiv.addClass("node-diff-node-deleted"); remoteNodeDiv.addClass("red-ui-diff-status-deleted");
$('<span class="node-diff-status"><i class="fa fa-minus-square"></i> <span data-i18n="diff.type.deleted"></span></span>').appendTo(remoteNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-minus-square"></i> <span data-i18n="diff.type.deleted"></span></span>').appendTo(remoteNodeDiv);
} else if (remoteDiff.changed[node.id]) { } else if (remoteDiff.changed[node.id]) {
if (remoteDiff.newConfig.all[node.id].z !== node.z) { if (remoteDiff.newConfig.all[node.id].z !== node.z) {
remoteNodeDiv.addClass("node-diff-empty"); remoteNodeDiv.addClass("red-ui-diff-empty");
} else { } else {
remoteNodeDiv.addClass("node-diff-node-changed"); remoteNodeDiv.addClass("red-ui-diff-status-changed");
$('<span class="node-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(remoteNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-square"></i> <span data-i18n="diff.type.changed"></span></span>').appendTo(remoteNodeDiv);
} }
} else { } else {
if (remoteDiff.newConfig.all[node.id].z !== node.z) { if (remoteDiff.newConfig.all[node.id].z !== node.z) {
remoteNodeDiv.addClass("node-diff-empty"); remoteNodeDiv.addClass("red-ui-diff-empty");
} else { } else {
stats.remote.unchangedCount++; stats.remote.unchangedCount++;
remoteNodeDiv.addClass("node-diff-node-unchanged"); remoteNodeDiv.addClass("red-ui-diff-status-unchanged");
$('<span class="node-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(remoteNodeDiv); $('<span class="red-ui-diff-status"><i class="fa fa-square-o"></i> <span data-i18n="diff.type.unchanged"></span></span>').appendTo(remoteNodeDiv);
} }
} }
} }
@ -692,13 +691,13 @@ RED.diff = (function() {
if (conflicted) { if (conflicted) {
stats.conflicts++; stats.conflicts++;
if (!localNodeDiv.hasClass("node-diff-empty")) { if (!localNodeDiv.hasClass("red-ui-diff-empty")) {
$('<span class="node-diff-node-conflict"><span class="node-diff-status"><i class="fa fa-exclamation"></i></span></span>').prependTo(localNodeDiv); $('<span class="red-ui-diff-status-conflict"><span class="red-ui-diff-status"><i class="fa fa-exclamation"></i></span></span>').prependTo(localNodeDiv);
} }
if (!remoteNodeDiv.hasClass("node-diff-empty")) { if (!remoteNodeDiv.hasClass("red-ui-diff-empty")) {
$('<span class="node-diff-node-conflict"><span class="node-diff-status"><i class="fa fa-exclamation"></i></span></span>').prependTo(remoteNodeDiv); $('<span class="red-ui-diff-status-conflict"><span class="red-ui-diff-status"><i class="fa fa-exclamation"></i></span></span>').prependTo(remoteNodeDiv);
} }
div.addClass("node-diff-node-entry-conflict"); div.addClass("red-ui-diff-list-node-conflict");
} else { } else {
selectState = CurrentDiff.resolutions[node.id]; selectState = CurrentDiff.resolutions[node.id];
} }
@ -707,7 +706,7 @@ RED.diff = (function() {
row.on("click", function(evt) { row.on("click", function(evt) {
$(this).parent().toggleClass('collapsed'); $(this).parent().toggleClass('collapsed');
if($(this).siblings('.node-diff-node-entry-properties').length === 0) { if($(this).siblings('.red-ui-diff-list-node-properties').length === 0) {
createNodePropertiesTable(def,node,localNode,remoteNode).appendTo(div); createNodePropertiesTable(def,node,localNode,remoteNode).appendTo(div);
} }
}); });
@ -722,7 +721,7 @@ RED.diff = (function() {
remoteNode = remoteNodeObj.node; remoteNode = remoteNodeObj.node;
} }
var nodePropertiesDiv = $("<div>",{class:"node-diff-node-entry-properties"}); var nodePropertiesDiv = $("<div>",{class:"red-ui-diff-list-node-properties"});
var nodePropertiesTable = $("<table>").appendTo(nodePropertiesDiv); var nodePropertiesTable = $("<table>").appendTo(nodePropertiesDiv);
var nodePropertiesTableCols = $('<colgroup><col/><col/></colgroup>').appendTo(nodePropertiesTable); var nodePropertiesTableCols = $('<colgroup><col/><col/></colgroup>').appendTo(nodePropertiesTable);
if (remoteNode !== undefined) { if (remoteNode !== undefined) {
@ -742,25 +741,25 @@ RED.diff = (function() {
var status; var status;
row = $("<tr>").appendTo(nodePropertiesTableBody); row = $("<tr>").appendTo(nodePropertiesTableBody);
$("<td>",{class:"node-diff-property-cell-label"}).text("id").appendTo(row); $("<td>",{class:"red-ui-diff-list-cell-label"}).text("id").appendTo(row);
localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row); localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
if (localNode) { if (localNode) {
localCell.addClass("node-diff-node-unchanged"); localCell.addClass("red-ui-diff-status-unchanged");
$('<span class="node-diff-status"></span>').appendTo(localCell); $('<span class="red-ui-diff-status"></span>').appendTo(localCell);
element = $('<span class="node-diff-element"></span>').appendTo(localCell); element = $('<span class="red-ui-diff-list-element"></span>').appendTo(localCell);
propertyElements['local.id'] = RED.utils.createObjectElement(localNode.id).appendTo(element); propertyElements['local.id'] = RED.utils.createObjectElement(localNode.id).appendTo(element);
} else { } else {
localCell.addClass("node-diff-empty"); localCell.addClass("red-ui-diff-empty");
} }
if (remoteNode !== undefined) { if (remoteNode !== undefined) {
remoteCell = $("<td>",{class:"node-diff-property-cell node-diff-node-remote"}).appendTo(row); remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
remoteCell.addClass("node-diff-node-unchanged"); remoteCell.addClass("red-ui-diff-status-unchanged");
if (remoteNode) { if (remoteNode) {
$('<span class="node-diff-status"></span>').appendTo(remoteCell); $('<span class="red-ui-diff-status"></span>').appendTo(remoteCell);
element = $('<span class="node-diff-element"></span>').appendTo(remoteCell); element = $('<span class="red-ui-diff-list-element"></span>').appendTo(remoteCell);
propertyElements['remote.id'] = RED.utils.createObjectElement(remoteNode.id).appendTo(element); propertyElements['remote.id'] = RED.utils.createObjectElement(remoteNode.id).appendTo(element);
} else { } else {
remoteCell.addClass("node-diff-empty"); remoteCell.addClass("red-ui-diff-empty");
} }
} }
@ -785,12 +784,12 @@ RED.diff = (function() {
conflict = true; conflict = true;
} }
row = $("<tr>").appendTo(nodePropertiesTableBody); row = $("<tr>").appendTo(nodePropertiesTableBody);
$("<td>",{class:"node-diff-property-cell-label"}).text("position").appendTo(row); $("<td>",{class:"red-ui-diff-list-cell-label"}).text("position").appendTo(row);
localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row); localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
if (localNode) { if (localNode) {
localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged")); localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged"));
$('<span class="node-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell); $('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
element = $('<span class="node-diff-element"></span>').appendTo(localCell); element = $('<span class="red-ui-diff-list-element"></span>').appendTo(localCell);
propertyElements['local.position'] = RED.utils.createObjectElement({x:localNode.x,y:localNode.y}, propertyElements['local.position'] = RED.utils.createObjectElement({x:localNode.x,y:localNode.y},
{ {
path: "position", path: "position",
@ -803,15 +802,15 @@ RED.diff = (function() {
} }
).appendTo(element); ).appendTo(element);
} else { } else {
localCell.addClass("node-diff-empty"); localCell.addClass("red-ui-diff-empty");
} }
if (remoteNode !== undefined) { if (remoteNode !== undefined) {
remoteCell = $("<td>",{class:"node-diff-property-cell node-diff-node-remote"}).appendTo(row); remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged")); remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged"));
if (remoteNode) { if (remoteNode) {
$('<span class="node-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell); $('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
element = $('<span class="node-diff-element"></span>').appendTo(remoteCell); element = $('<span class="red-ui-diff-list-element"></span>').appendTo(remoteCell);
propertyElements['remote.position'] = RED.utils.createObjectElement({x:remoteNode.x,y:remoteNode.y}, propertyElements['remote.position'] = RED.utils.createObjectElement({x:remoteNode.x,y:remoteNode.y},
{ {
path: "position", path: "position",
@ -824,7 +823,7 @@ RED.diff = (function() {
} }
).appendTo(element); ).appendTo(element);
} else { } else {
remoteCell.addClass("node-diff-empty"); remoteCell.addClass("red-ui-diff-empty");
} }
} }
} }
@ -853,34 +852,34 @@ RED.diff = (function() {
conflict = true; conflict = true;
} }
row = $("<tr>").appendTo(nodePropertiesTableBody); row = $("<tr>").appendTo(nodePropertiesTableBody);
$("<td>",{class:"node-diff-property-cell-label"}).text("wires").appendTo(row); $("<td>",{class:"red-ui-diff-list-cell-label"}).text("wires").appendTo(row);
localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row); localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
if (localNode) { if (localNode) {
if (!conflict) { if (!conflict) {
localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged")); localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged"));
$('<span class="node-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell); $('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
} else { } else {
localCell.addClass("node-diff-node-conflict"); localCell.addClass("red-ui-diff-status-conflict");
$('<span class="node-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(localCell); $('<span class="red-ui-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(localCell);
} }
formatWireProperty(localNode.wires,localNodeObj.all).appendTo(localCell); formatWireProperty(localNode.wires,localNodeObj.all).appendTo(localCell);
} else { } else {
localCell.addClass("node-diff-empty"); localCell.addClass("red-ui-diff-empty");
} }
if (remoteNode !== undefined) { if (remoteNode !== undefined) {
remoteCell = $("<td>",{class:"node-diff-property-cell node-diff-node-remote"}).appendTo(row); remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
if (remoteNode) { if (remoteNode) {
if (!conflict) { if (!conflict) {
remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged")); remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged"));
$('<span class="node-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell); $('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
} else { } else {
remoteCell.addClass("node-diff-node-conflict"); remoteCell.addClass("red-ui-diff-status-conflict");
$('<span class="node-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(remoteCell); $('<span class="red-ui-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(remoteCell);
} }
formatWireProperty(remoteNode.wires,remoteNodeObj.all).appendTo(remoteCell); formatWireProperty(remoteNode.wires,remoteNodeObj.all).appendTo(remoteCell);
} else { } else {
remoteCell.addClass("node-diff-empty"); remoteCell.addClass("red-ui-diff-empty");
} }
} }
} }
@ -926,17 +925,17 @@ RED.diff = (function() {
} }
row = $("<tr>").appendTo(nodePropertiesTableBody); row = $("<tr>").appendTo(nodePropertiesTableBody);
var propertyNameCell = $("<td>",{class:"node-diff-property-cell-label"}).text(d).appendTo(row); var propertyNameCell = $("<td>",{class:"red-ui-diff-list-cell-label"}).text(d).appendTo(row);
localCell = $("<td>",{class:"node-diff-property-cell node-diff-node-local"}).appendTo(row); localCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-local"}).appendTo(row);
if (localNode) { if (localNode) {
if (!conflict) { if (!conflict) {
localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged")); localCell.addClass("node-diff-node-"+(localChanged?"changed":"unchanged"));
$('<span class="node-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell); $('<span class="red-ui-diff-status">'+(localChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(localCell);
} else { } else {
localCell.addClass("node-diff-node-conflict"); localCell.addClass("red-ui-diff-status-conflict");
$('<span class="node-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(localCell); $('<span class="red-ui-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(localCell);
} }
element = $('<span class="node-diff-element"></span>').appendTo(localCell); element = $('<span class="red-ui-diff-list-element"></span>').appendTo(localCell);
propertyElements['local.'+d] = RED.utils.createObjectElement(localNode[d], propertyElements['local.'+d] = RED.utils.createObjectElement(localNode[d],
{ {
path: d, path: d,
@ -949,19 +948,19 @@ RED.diff = (function() {
} }
).appendTo(element); ).appendTo(element);
} else { } else {
localCell.addClass("node-diff-empty"); localCell.addClass("red-ui-diff-empty");
} }
if (remoteNode !== undefined) { if (remoteNode !== undefined) {
remoteCell = $("<td>",{class:"node-diff-property-cell node-diff-node-remote"}).appendTo(row); remoteCell = $("<td>",{class:"red-ui-diff-list-cell red-ui-diff-list-node-remote"}).appendTo(row);
if (remoteNode) { if (remoteNode) {
if (!conflict) { if (!conflict) {
remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged")); remoteCell.addClass("node-diff-node-"+(remoteChanged?"changed":"unchanged"));
$('<span class="node-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell); $('<span class="red-ui-diff-status">'+(remoteChanged?'<i class="fa fa-square"></i>':'')+'</span>').appendTo(remoteCell);
} else { } else {
remoteCell.addClass("node-diff-node-conflict"); remoteCell.addClass("red-ui-diff-status-conflict");
$('<span class="node-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(remoteCell); $('<span class="red-ui-diff-status"><i class="fa fa-exclamation"></i></span>').appendTo(remoteCell);
} }
element = $('<span class="node-diff-element"></span>').appendTo(remoteCell); element = $('<span class="red-ui-diff-list-element"></span>').appendTo(remoteCell);
propertyElements['remote.'+d] = RED.utils.createObjectElement(remoteNode[d], propertyElements['remote.'+d] = RED.utils.createObjectElement(remoteNode[d],
{ {
path: d, path: d,
@ -974,12 +973,12 @@ RED.diff = (function() {
} }
).appendTo(element); ).appendTo(element);
} else { } else {
remoteCell.addClass("node-diff-empty"); remoteCell.addClass("red-ui-diff-empty");
} }
} }
if (localNode && remoteNode && typeof localNode[d] === "string") { if (localNode && remoteNode && typeof localNode[d] === "string") {
if (/\n/.test(localNode[d]) || /\n/.test(remoteNode[d])) { if (/\n/.test(localNode[d]) || /\n/.test(remoteNode[d])) {
$('<button class="editor-button editor-button-small node-diff-text-diff-button"><i class="fa fa-file-o"> <i class="fa fa-caret-left"></i> <i class="fa fa-caret-right"></i> <i class="fa fa-file-o"></i></button>').on("click", function() { $('<button class="editor-button editor-button-small red-ui-diff-text-diff-button"><i class="fa fa-file-o"> <i class="fa fa-caret-left"></i> <i class="fa fa-caret-right"></i> <i class="fa fa-file-o"></i></button>').on("click", function() {
showTextDiff(localNode[d],remoteNode[d]); showTextDiff(localNode[d],remoteNode[d]);
}).appendTo(propertyNameCell); }).appendTo(propertyNameCell);
} }
@ -990,10 +989,10 @@ RED.diff = (function() {
return nodePropertiesDiv; return nodePropertiesDiv;
} }
function createNodeConflictRadioBoxes(node,row,localDiv,remoteDiv,propertiesTable,hide,state,diff) { function createNodeConflictRadioBoxes(node,row,localDiv,remoteDiv,propertiesTable,hide,state,diff) {
var safeNodeId = "node-diff-selectbox-"+node.id.replace(/\./g,'-')+(propertiesTable?"-props":""); var safeNodeId = "red-ui-diff-selectbox-"+node.id.replace(/\./g,'-')+(propertiesTable?"-props":"");
var className = ""; var className = "";
if (node.z||propertiesTable) { if (node.z||propertiesTable) {
className = "node-diff-selectbox-tab-"+(propertiesTable?node.id:node.z).replace(/\./g,'-'); className = "red-ui-diff-selectbox-tab-"+(propertiesTable?node.id:node.z).replace(/\./g,'-');
} }
var titleRow = !propertiesTable && (node.type === 'tab' || node.type === 'subflow'); var titleRow = !propertiesTable && (node.type === 'tab' || node.type === 'subflow');
var changeHandler = function(evt) { var changeHandler = function(evt) {
@ -1001,21 +1000,21 @@ RED.diff = (function() {
if (node.type === undefined) { if (node.type === undefined) {
// TODO: handle globals // TODO: handle globals
} else if (titleRow) { } else if (titleRow) {
className = "node-diff-selectbox-tab-"+node.id.replace(/\./g,'-'); className = "red-ui-diff-selectbox-tab-"+node.id.replace(/\./g,'-');
$("."+className+"-"+this.value).prop('checked',true); $("."+className+"-"+this.value).prop('checked',true);
if (this.value === 'local') { if (this.value === 'local') {
$("."+className+"-"+this.value).closest(".node-diff-node-entry").addClass("node-diff-select-local"); $("."+className+"-"+this.value).closest(".red-ui-diff-list-node").addClass("node-diff-select-local");
$("."+className+"-"+this.value).closest(".node-diff-node-entry").removeClass("node-diff-select-remote"); $("."+className+"-"+this.value).closest(".red-ui-diff-list-node").removeClass("node-diff-select-remote");
} else { } else {
$("."+className+"-"+this.value).closest(".node-diff-node-entry").removeClass("node-diff-select-local"); $("."+className+"-"+this.value).closest(".red-ui-diff-list-node").removeClass("node-diff-select-local");
$("."+className+"-"+this.value).closest(".node-diff-node-entry").addClass("node-diff-select-remote"); $("."+className+"-"+this.value).closest(".red-ui-diff-list-node").addClass("node-diff-select-remote");
} }
} else { } else {
// Individual node or properties table // Individual node or properties table
var parentId = "node-diff-selectbox-"+(propertiesTable?node.id:node.z).replace(/\./g,'-'); var parentId = "red-ui-diff-selectbox-"+(propertiesTable?node.id:node.z).replace(/\./g,'-');
$('#'+parentId+"-local").prop('checked',false); $('#'+parentId+"-local").prop('checked',false);
$('#'+parentId+"-remote").prop('checked',false); $('#'+parentId+"-remote").prop('checked',false);
var titleRowDiv = $('#'+parentId+"-local").closest(".node-diff-tab").find(".node-diff-tab-title"); var titleRowDiv = $('#'+parentId+"-local").closest(".red-ui-diff-list-flow").find(".red-ui-diff-list-flow-title");
titleRowDiv.removeClass("node-diff-select-local"); titleRowDiv.removeClass("node-diff-select-local");
titleRowDiv.removeClass("node-diff-select-remote"); titleRowDiv.removeClass("node-diff-select-remote");
} }
@ -1029,16 +1028,16 @@ RED.diff = (function() {
refreshConflictHeader(diff); refreshConflictHeader(diff);
} }
var localSelectDiv = $('<label>',{class:"node-diff-selectbox",for:safeNodeId+"-local"}).on("click", function(e) { e.stopPropagation();}).appendTo(localDiv); var localSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-local"}).on("click", function(e) { e.stopPropagation();}).appendTo(localDiv);
var localRadio = $('<input>',{id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv); var localRadio = $('<input>',{id:safeNodeId+"-local",type:'radio',value:"local",name:safeNodeId,class:className+"-local"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(localSelectDiv);
var remoteSelectDiv = $('<label>',{class:"node-diff-selectbox",for:safeNodeId+"-remote"}).on("click", function(e) { e.stopPropagation();}).appendTo(remoteDiv); var remoteSelectDiv = $('<label>',{class:"red-ui-diff-selectbox",for:safeNodeId+"-remote"}).on("click", function(e) { e.stopPropagation();}).appendTo(remoteDiv);
var remoteRadio = $('<input>',{id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv); var remoteRadio = $('<input>',{id:safeNodeId+"-remote",type:'radio',value:"remote",name:safeNodeId,class:className+"-remote"+(titleRow?"":" node-diff-select-node")}).data('node-id',node.id).on("change", changeHandler).appendTo(remoteSelectDiv);
if (state === 'local') { if (state === 'local') {
localRadio.prop('checked',true); localRadio.prop('checked',true);
} else if (state === 'remote') { } else if (state === 'remote') {
remoteRadio.prop('checked',true); remoteRadio.prop('checked',true);
} }
if (hide||localDiv.hasClass("node-diff-empty") || remoteDiv.hasClass("node-diff-empty")) { if (hide||localDiv.hasClass("red-ui-diff-empty") || remoteDiv.hasClass("red-ui-diff-empty")) {
localSelectDiv.hide(); localSelectDiv.hide();
remoteSelectDiv.hide(); remoteSelectDiv.hide();
} }
@ -1046,7 +1045,7 @@ RED.diff = (function() {
} }
function refreshConflictHeader(currentDiff) { function refreshConflictHeader(currentDiff) {
var resolutionCount = 0; var resolutionCount = 0;
$(".node-diff-selectbox>input:checked").each(function() { $(".red-ui-diff-selectbox>input:checked").each(function() {
if (currentDiff.conflicts[$(this).data('node-id')]) { if (currentDiff.conflicts[$(this).data('node-id')]) {
resolutionCount++; resolutionCount++;
} }
@ -1054,9 +1053,9 @@ RED.diff = (function() {
}) })
var conflictCount = Object.keys(currentDiff.conflicts).length; var conflictCount = Object.keys(currentDiff.conflicts).length;
if (conflictCount - resolutionCount === 0) { if (conflictCount - resolutionCount === 0) {
$("#node-diff-toolbar-resolved-conflicts").html('<span class="node-diff-node-added"><span class="node-diff-status"><i class="fa fa-check"></i></span></span> '+RED._("diff.unresolvedCount",{count:conflictCount - resolutionCount})); $("#red-ui-diff-dialog-toolbar-resolved-conflicts").html('<span class="red-ui-diff-status-added"><span class="red-ui-diff-status"><i class="fa fa-check"></i></span></span> '+RED._("diff.unresolvedCount",{count:conflictCount - resolutionCount}));
} else { } else {
$("#node-diff-toolbar-resolved-conflicts").html('<span class="node-diff-node-conflict"><span class="node-diff-status"><i class="fa fa-exclamation"></i></span></span> '+RED._("diff.unresolvedCount",{count:conflictCount - resolutionCount})); $("#red-ui-diff-dialog-toolbar-resolved-conflicts").html('<span class="red-ui-diff-status-conflict"><span class="red-ui-diff-status"><i class="fa fa-exclamation"></i></span></span> '+RED._("diff.unresolvedCount",{count:conflictCount - resolutionCount}));
} }
if (conflictCount === resolutionCount) { if (conflictCount === resolutionCount) {
$("#node-diff-view-diff-merge").removeClass('disabled'); $("#node-diff-view-diff-merge").removeClass('disabled');
@ -1258,10 +1257,10 @@ RED.diff = (function() {
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.red-ui-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var toolbar = $('<div class="node-diff-toolbar">'+ var toolbar = $('<div class="red-ui-diff-dialog-toolbar">'+
'<span><span id="node-diff-toolbar-resolved-conflicts"></span></span> '+ '<span><span id="red-ui-diff-dialog-toolbar-resolved-conflicts"></span></span> '+
'</div>').prependTo(trayBody); '</div>').prependTo(trayBody);
var diffContainer = $('<div class="node-diff-container"></div>').appendTo(trayBody); var diffContainer = $('<div class="red-ui-diff-container"></div>').appendTo(trayBody);
var diffTable = buildDiffPanel(diffContainer,diff,options); var diffTable = buildDiffPanel(diffContainer,diff,options);
diffTable.list.hide(); diffTable.list.hide();
if (remoteDiff) { if (remoteDiff) {
@ -1464,9 +1463,9 @@ RED.diff = (function() {
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.red-ui-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var diffPanel = $('<div class="node-text-diff"></div>').appendTo(trayBody); var diffPanel = $('<div class="red-ui-diff-text"></div>').appendTo(trayBody);
var codeTable = $("<table>",{class:"node-text-diff-content"}).appendTo(diffPanel); var codeTable = $("<table>",{class:"red-ui-diff-text-content"}).appendTo(diffPanel);
$('<colgroup><col width="50"><col width="50%"><col width="50"><col width="50%"></colgroup>').appendTo(codeTable); $('<colgroup><col width="50"><col width="50%"><col width="50"><col width="50%"></colgroup>').appendTo(codeTable);
var codeBody = $('<tbody>').appendTo(codeTable); var codeBody = $('<tbody>').appendTo(codeTable);
var diffSummary = diffText(textA||"",textB||""); var diffSummary = diffText(textA||"",textB||"");
@ -1581,7 +1580,7 @@ RED.diff = (function() {
} }
function createExpandLine(start,end,diffLines) { function createExpandLine(start,end,diffLines) {
diffRow = $('<tr class="node-text-diff-header node-text-diff-expand">'); diffRow = $('<tr class="red-ui-diff-text-header red-ui-diff-text-expand">');
var content = $('<td colspan="4"> <i class="fa fa-arrows-v"></i> </td>').appendTo(diffRow); var content = $('<td colspan="4"> <i class="fa fa-arrows-v"></i> </td>').appendTo(diffRow);
var label = $('<span></span>').appendTo(content); var label = $('<span></span>').appendTo(content);
if (end < diffLines.length-1) { if (end < diffLines.length-1) {
@ -1609,7 +1608,7 @@ RED.diff = (function() {
} }
var endPos = $(this).offset(); var endPos = $(this).offset();
var delta = endPos.top - startPos.top; var delta = endPos.top - startPos.top;
$(".node-text-diff").scrollTop($(".node-text-diff").scrollTop() + delta); $(".red-ui-diff-text").scrollTop($(".red-ui-diff-text").scrollTop() + delta);
} else { } else {
for (var i=start;i<end;i++) { for (var i=start;i<end;i++) {
createDiffLine(diffLines[i]).addClass("unchanged").insertBefore($(this)); createDiffLine(diffLines[i]).addClass("unchanged").insertBefore($(this));
@ -1730,18 +1729,18 @@ RED.diff = (function() {
files.forEach(function(file) { files.forEach(function(file) {
var hunks = file.hunks; var hunks = file.hunks;
var isBinary = file.binary; var isBinary = file.binary;
var codeTable = $("<table>",{class:"node-text-diff-content"}).appendTo(diffPanel); var codeTable = $("<table>",{class:"red-ui-diff-text-content"}).appendTo(diffPanel);
$('<colgroup><col width="50"><col width="50"><col width="100%"></colgroup>').appendTo(codeTable); $('<colgroup><col width="50"><col width="50"><col width="100%"></colgroup>').appendTo(codeTable);
var codeBody = $('<tbody>').appendTo(codeTable); var codeBody = $('<tbody>').appendTo(codeTable);
var diffFileRow = $('<tr class="node-text-diff-file-header">').appendTo(codeBody); var diffFileRow = $('<tr class="red-ui-diff-text-file-header">').appendTo(codeBody);
var content = $('<td colspan="3"></td>').appendTo(diffFileRow); var content = $('<td colspan="3"></td>').appendTo(diffFileRow);
var chevron = $('<i class="node-diff-chevron fa fa-angle-down"></i>').appendTo(content); var chevron = $('<i class="red-ui-diff-list-chevron fa fa-angle-down"></i>').appendTo(content);
diffFileRow.on("click", function(e) { diffFileRow.on("click", function(e) {
diffFileRow.toggleClass("collapsed"); diffFileRow.toggleClass("collapsed");
var isCollapsed = diffFileRow.hasClass("collapsed"); var isCollapsed = diffFileRow.hasClass("collapsed");
diffFileRow.nextUntil(".node-text-diff-file-header").toggle(!isCollapsed); diffFileRow.nextUntil(".red-ui-diff-text-file-header").toggle(!isCollapsed);
}) })
var label = $('<span class="filename"></span>').text(file.file).appendTo(content); var label = $('<span class="filename"></span>').text(file.file).appendTo(content);
@ -1751,9 +1750,9 @@ RED.diff = (function() {
var conflictResolutions = {}; var conflictResolutions = {};
if (commitOptions.project.files && commitOptions.project.files.flow === file.file) { if (commitOptions.project.files && commitOptions.project.files.flow === file.file) {
if (commitOptions.unmerged) { if (commitOptions.unmerged) {
$('<span style="float: right;"><span id="node-diff-toolbar-resolved-conflicts"></span></span>').appendTo(content); $('<span style="float: right;"><span id="red-ui-diff-dialog-toolbar-resolved-conflicts"></span></span>').appendTo(content);
} }
var diffRow = $('<tr class="node-text-diff-header">').appendTo(codeBody); var diffRow = $('<tr class="red-ui-diff-text-header">').appendTo(codeBody);
var flowDiffContent = $('<td class="flow-diff" colspan="3"></td>').appendTo(diffRow); var flowDiffContent = $('<td class="flow-diff" colspan="3"></td>').appendTo(diffRow);
var projectName = commitOptions.project.name; var projectName = commitOptions.project.name;
@ -1827,7 +1826,7 @@ RED.diff = (function() {
} else } else
if (isBinary) { if (isBinary) {
var diffBinaryRow = $('<tr class="node-text-diff-header">').appendTo(codeBody); var diffBinaryRow = $('<tr class="red-ui-diff-text-header">').appendTo(codeBody);
var binaryContent = $('<td colspan="3"></td>').appendTo(diffBinaryRow); var binaryContent = $('<td colspan="3"></td>').appendTo(diffBinaryRow);
$('<span></span>').text(RED._("diff.noBinaryFileShowed")).appendTo(binaryContent); $('<span></span>').text(RED._("diff.noBinaryFileShowed")).appendTo(binaryContent);
@ -1836,7 +1835,7 @@ RED.diff = (function() {
conflictHeader = $('<span style="float: right;">'+RED._("diff.conflictHeader",{resolved:resolvedConflicts, unresolved:unresolvedConflicts})+'</span>').appendTo(content); conflictHeader = $('<span style="float: right;">'+RED._("diff.conflictHeader",{resolved:resolvedConflicts, unresolved:unresolvedConflicts})+'</span>').appendTo(content);
} }
hunks.forEach(function(hunk) { hunks.forEach(function(hunk) {
var diffRow = $('<tr class="node-text-diff-header">').appendTo(codeBody); var diffRow = $('<tr class="red-ui-diff-text-header">').appendTo(codeBody);
var content = $('<td colspan="3"></td>').appendTo(diffRow); var content = $('<td colspan="3"></td>').appendTo(diffRow);
var label = $('<span></span>').text(hunk.header).appendTo(content); var label = $('<span></span>').text(hunk.header).appendTo(content);
var isConflict = hunk.conflict; var isConflict = hunk.conflict;
@ -1994,13 +1993,13 @@ RED.diff = (function() {
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.red-ui-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var diffPanel = $('<div class="node-text-diff"></div>').appendTo(trayBody); var diffPanel = $('<div class="red-ui-diff-text"></div>').appendTo(trayBody);
var codeTable = $("<table>",{class:"node-text-diff-content"}).appendTo(diffPanel); var codeTable = $("<table>",{class:"red-ui-diff-text-content"}).appendTo(diffPanel);
$('<colgroup><col width="50"><col width="50"><col width="100%"></colgroup>').appendTo(codeTable); $('<colgroup><col width="50"><col width="50"><col width="100%"></colgroup>').appendTo(codeTable);
var codeBody = $('<tbody>').appendTo(codeTable); var codeBody = $('<tbody>').appendTo(codeTable);
var diffRow = $('<tr class="node-text-diff-commit-header">').appendTo(codeBody); var diffRow = $('<tr class="red-ui-diff-text-commit-header">').appendTo(codeBody);
var content = $('<td colspan="3"></td>').appendTo(diffRow); var content = $('<td colspan="3"></td>').appendTo(diffRow);
$("<h3>").text(commit.title).appendTo(content); $("<h3>").text(commit.title).appendTo(content);
@ -2059,7 +2058,7 @@ RED.diff = (function() {
}, },
open: function(tray) { open: function(tray) {
var trayBody = tray.find('.red-ui-tray-body'); var trayBody = tray.find('.red-ui-tray-body');
var diffPanel = $('<div class="node-text-diff"></div>').appendTo(trayBody); var diffPanel = $('<div class="red-ui-diff-text"></div>').appendTo(trayBody);
createUnifiedDiffTable(files,options).appendTo(diffPanel); createUnifiedDiffTable(files,options).appendTo(diffPanel);
}, },
close: function() { close: function() {

View File

@ -237,22 +237,22 @@ RED.sidebar.versionControl = (function() {
container.removeClass(); container.removeClass();
var iconClass = ""; var iconClass = "";
if (status === 'A') { if (status === 'A') {
container.addClass("node-diff-added"); container.addClass("red-ui-diff-state-added");
iconClass = "fa-plus-square"; iconClass = "fa-plus-square";
} else if (status === '?') { } else if (status === '?') {
container.addClass("node-diff-unchanged"); container.addClass("red-ui-diff-state-unchanged");
iconClass = "fa-question-circle-o"; iconClass = "fa-question-circle-o";
} else if (status === 'D') { } else if (status === 'D') {
container.addClass("node-diff-deleted"); container.addClass("red-ui-diff-state-deleted");
iconClass = "fa-minus-square"; iconClass = "fa-minus-square";
} else if (status === 'M') { } else if (status === 'M') {
container.addClass("node-diff-changed"); container.addClass("red-ui-diff-state-changed");
iconClass = "fa-square"; iconClass = "fa-square";
} else if (status === 'R') { } else if (status === 'R') {
container.addClass("node-diff-changed"); container.addClass("red-ui-diff-state-changed");
iconClass = "fa-toggle-right"; iconClass = "fa-toggle-right";
} else if (status === 'U') { } else if (status === 'U') {
container.addClass("node-diff-conflicted"); container.addClass("red-ui-diff-state-conflicted");
iconClass = "fa-exclamation-triangle"; iconClass = "fa-exclamation-triangle";
} else { } else {
iconClass = "fa-exclamation-triangle" iconClass = "fa-exclamation-triangle"

View File

@ -75,3 +75,11 @@ $shade-color: rgba(160,160,160,0.5);
$popover-background: #333; $popover-background: #333;
$popover-color: #eee; $popover-color: #eee;
$diff-state-added: #009900;
$diff-state-deleted: #f80000;
$diff-state-changed: #f89406;
$diff-state-unchanged: #bbb;
$diff-state-conflicted: purple;
$diff-state-moved: #3f81b3;
$diff-state-conflict: #9b45ce;

View File

@ -15,7 +15,7 @@
**/ **/
.node-dialog-view-diff-panel { .red-ui-diff-panel {
padding: 5px; padding: 5px;
padding-top: 30px; padding-top: 30px;
position: relative; position: relative;
@ -25,7 +25,7 @@
padding:0; padding:0;
background: #f9f9f9; background: #f9f9f9;
} }
.node-dialog-view-diff-diff { .red-ui-diff-list {
li { li {
background: #f9f9f9; background: #f9f9f9;
padding: 0px; padding: 0px;
@ -38,7 +38,7 @@
// padding-bottom: 5px; // padding-bottom: 5px;
} }
} }
.node-diff-container { .red-ui-diff-container {
position: absolute; position: absolute;
top: 40px; top: 40px;
right:0; right:0;
@ -47,7 +47,7 @@
overflow-y: scroll; overflow-y: scroll;
} }
.node-dialog-view-diff-headers { .red-ui-diff-panel-headers {
position: absolute; position: absolute;
left:232px; left:232px;
right:12px; right:12px;
@ -73,7 +73,7 @@
} }
} }
.node-diff-toolbar { .red-ui-diff-dialog-toolbar {
box-sizing: border-box; box-sizing: border-box;
color: #666; color: #666;
text-align: right; text-align: right;
@ -82,26 +82,26 @@
border-bottom: 1px solid $secondary-border-color; border-bottom: 1px solid $secondary-border-color;
white-space: nowrap; white-space: nowrap;
} }
.node-diff-tab { .red-ui-diff-list-flow {
background: #fff; background: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 1px; border-radius: 1px;
overflow: hidden; overflow: hidden;
&.collapsed { &.collapsed {
.node-diff-tab-title .node-diff-chevron { .red-ui-diff-list-flow-title .red-ui-diff-list-chevron {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.node-diff-node-entry { .red-ui-diff-list-node {
display: none; display: none;
} }
} }
} }
.node-diff-tab-stats { .red-ui-diff-list-flow-stats {
font-size: 0.9em; font-size: 0.9em;
} }
.node-diff-chevron { .red-ui-diff-list-chevron {
display: inline-block; display: inline-block;
width: 15px; width: 15px;
text-align: center; text-align: center;
@ -109,7 +109,7 @@
transition: transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out;
} }
.node-diff-node-entry { .red-ui-diff-list-node {
margin-left: 20px; margin-left: 20px;
font-size: 0.9em; font-size: 0.9em;
@ -121,18 +121,18 @@
} }
&.collapsed { &.collapsed {
.node-diff-chevron { .red-ui-diff-list-chevron {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
.node-diff-node-entry-properties { .red-ui-diff-list-node-properties {
display: none; display: none;
} }
} }
&:not(.collapsed) { &:not(.collapsed) {
.node-diff-node-entry-cell:not(:first-child) { .red-ui-diff-list-node-cell:not(:first-child) {
//display: none; //display: none;
} }
.node-diff-node-entry-cell:first-child { .red-ui-diff-list-node-cell:first-child {
//width: 100% //width: 100%
} }
} }
@ -172,12 +172,12 @@
} }
td { td {
.node-diff-status { .red-ui-diff-status {
margin-left: 0; margin-left: 0;
} }
} }
tr:not(.node-diff-property-header) { tr:not(.red-ui-diff-list-header) {
.node-diff-status { .red-ui-diff-status {
width: 12px; width: 12px;
margin-left: 0; margin-left: 0;
margin-top: 0; margin-top: 0;
@ -186,8 +186,8 @@
} }
} }
} }
.node-diff-three-way { .red-ui-diff-three-way {
.node-diff-node-entry-cell { .red-ui-diff-list-node-cell {
width: calc((100% - 220px) / 2); width: calc((100% - 220px) / 2);
&:first-child { &:first-child {
width: 220px; width: 220px;
@ -197,8 +197,8 @@
width:50%; width:50%;
} }
.node-diff-node-entry { .red-ui-diff-list-node {
.node-diff-node-entry-cell { .red-ui-diff-list-node-cell {
width: calc((100% + 20px - 220px) / 2); width: calc((100% + 20px - 220px) / 2);
&:first-child { &:first-child {
width: 200px; width: 200px;
@ -208,19 +208,7 @@
} }
} }
.node-diff-column { .red-ui-diff-list-flow-title {
display:inline-block;
height:100%;
width:50%;
box-sizing: border-box;
white-space:nowrap;
overflow: hidden;
&:first-child {
border-right: 1px solid $secondary-border-color
}
}
.node-diff-tab-title {
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
// background: #f6f6f6; // background: #f6f6f6;
@ -228,18 +216,18 @@
background: #f9f9f9; background: #f9f9f9;
} }
} }
.node-diff-tab-title-meta { .red-ui-diff-list-flow-title-meta {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
padding-top: 2px; padding-top: 2px;
} }
.node-diff-node-entry-header { .red-ui-diff-list-node-header {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #f9f9f9; background: #f9f9f9;
} }
} }
.node-diff-node-entry-node { .red-ui-diff-list-node-icon {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
margin: 5px; margin: 5px;
@ -266,73 +254,73 @@
width: 18px; width: 18px;
} }
} }
.node-diff-tab-empty { .red-ui-diff-list-flow-empty {
.node-diff-chevron i { .red-ui-diff-list-chevron i {
display: none; display: none;
} }
.node-diff-tab-title { .red-ui-diff-list-flow-title {
cursor: default; cursor: default;
&:hover { &:hover {
background: none; background: none;
} }
} }
} }
.node-diff-node-deleted { .red-ui-diff-status-deleted {
//background: #fadddd; //background: #fadddd;
cursor: default !important; cursor: default !important;
.node-diff-status { .red-ui-diff-status {
color: #f80000; color: $diff-state-deleted;
} }
.node-diff-node-entry-node { .red-ui-diff-list-node-node {
opacity: 0.5; opacity: 0.5;
} }
.node-diff-node-description { .red-ui-diff-list-node-description {
opacity: 0.5; opacity: 0.5;
text-decoration: line-through; text-decoration: line-through;
} }
} }
.node-diff-node-added { .red-ui-diff-status-added {
//background: #eefaee; //background: #eefaee;
cursor: default !important; cursor: default !important;
.node-diff-status { .red-ui-diff-status {
color: #009900; color: $diff-state-added;
} }
} }
.node-diff-node-moved { .red-ui-diff-status-moved {
//background: #eefaee; //background: #eefaee;
.node-diff-status { .red-ui-diff-status {
color: #3f81b3; color: $diff-state-moved;
} }
} }
.node-diff-node-changed { .red-ui-diff-status-changed {
//background: #fff2ca; //background: #fff2ca;
.node-diff-status { .red-ui-diff-status {
color: #f89406; color: $diff-state-changed;
} }
} }
.node-diff-node-unchanged { .red-ui-diff-status-unchanged {
//background: #fff2ca; //background: #fff2ca;
.node-diff-status { .red-ui-diff-status {
color: #bbb; color: $diff-state-unchanged;
} }
} }
.node-diff-node-conflict { .red-ui-diff-status-conflict {
.node-diff-status { .red-ui-diff-status {
color: #9b45ce; color: $diff-state-conflict;
} }
} }
.node-diff-node-entry-title { .red-ui-diff-list-node-title {
display: inline-block; display: inline-block;
.node-diff-status { .red-ui-diff-status {
margin-left: 15px; margin-left: 15px;
} }
} }
.node-diff-node-entry-properties { .red-ui-diff-list-node-properties {
margin: 0; margin: 0;
color: #666; color: #666;
} }
.node-diff-status { .red-ui-diff-status {
display: inline-block; display: inline-block;
height: 20px; height: 20px;
margin-left: 5px; margin-left: 5px;
@ -341,12 +329,12 @@
margin-bottom: 6px; margin-bottom: 6px;
text-align: center; text-align: center;
} }
.node-diff-element { .red-ui-diff-list-element {
display: inline-block; display: inline-block;
width: calc(100% - 20px); width: calc(100% - 20px);
} }
.node-diff-node-description { .red-ui-diff-list-node-description {
color: $form-text-color; color: $form-text-color;
margin-right: 5px; margin-right: 5px;
padding-top: 5px; padding-top: 5px;
@ -357,23 +345,15 @@
clear: both; clear: both;
} }
} }
.node-diff-node-meta {
float: right;
//font-size: 0.9em;
color: #999;
margin-top: 7px;
margin-right: 10px;
}
.node-diff-count { color: #999} .red-ui-diff-state-added { color: $diff-state-added; }
.node-diff-added { color: #009900} .red-ui-diff-state-deleted { color: $diff-state-deleted; }
.node-diff-deleted { color: #f80000} .red-ui-diff-state-changed { color: $diff-state-changed; }
.node-diff-changed { color: #f89406} .red-ui-diff-state-unchanged { color: $diff-state-unchanged; }
.node-diff-unchanged { color: #bbb} .red-ui-diff-state-conflicted { color: $diff-state-conflicted; }
.node-diff-conflicted { color: purple}
.node-diff-node-entry-cell { .red-ui-diff-list-node-cell {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
box-sizing: border-box; box-sizing: border-box;
@ -385,7 +365,7 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.node-diff-empty { .red-ui-diff-empty {
background: #f3f3f3; background: #f3f3f3;
background: repeating-linear-gradient( background: repeating-linear-gradient(
20deg, 20deg,
@ -394,19 +374,19 @@
#f6f6f6 10px #f6f6f6 10px
); );
} }
.node-diff-node-entry-cell:first-child { .red-ui-diff-list-node-cell:first-child {
border-left: none; border-left: none;
} }
.node-diff-property-cell-label { .red-ui-diff-list-cell-label {
margin-left: 20px; margin-left: 20px;
vertical-align: top; vertical-align: top;
box-sizing: border-box; box-sizing: border-box;
padding-left: 8px; padding-left: 8px;
width: 120px; width: 120px;
} }
.node-diff-property-wires { .red-ui-diff-list-wires {
display: inline-block; display: inline-block;
.node-diff-node-entry-node { .red-ui-diff-list-node-node {
width: 18px; width: 18px;
height: 15px; height: 15px;
} }
@ -442,30 +422,23 @@
} }
} }
.node-diff-node-props .node-diff-node-entry-cell:first-child { .red-ui-diff-list-node-props .red-ui-diff-list-node-cell:first-child {
padding: 6px 0px; padding: 6px 0px;
span:not(.node-diff-chevron) { span:not(.red-ui-diff-list-chevron) {
margin-left: 5px; margin-left: 5px;
} }
} }
.node-diff-property-cell { .red-ui-diff-list-cell {
// vertical-align: top; &.red-ui-diff-status-changed {
// display:inline-block;
//
// box-sizing: border-box;
// padding: 1px 5px;
//min-height: 30px;
&.node-diff-node-changed {
background: #fff2e1 !important; background: #fff2e1 !important;
} }
&.node-diff-node-conflict { &.red-ui-diff-status-conflict {
background: #ffdad4 !important; background: #ffdad4 !important;
} }
} }
.node-diff-selectbox { .red-ui-diff-selectbox {
position: absolute; position: absolute;
top:0; top:0;
right:0; right:0;
@ -483,28 +456,28 @@
} }
} }
.node-diff-node-entry-conflict.node-diff-select-remote { .red-ui-diff-list-node-conflict.node-diff-select-remote {
.node-diff-node-remote { .red-ui-diff-list-node-remote {
background: #e7ffe3; background: #e7ffe3;
label { label {
border-left-color: #b8daad; border-left-color: #b8daad;
} }
} }
.node-diff-node-local { .red-ui-diff-list-node-local {
background: #ffe1e1; background: #ffe1e1;
label { label {
border-left-color: #e4bcbc; border-left-color: #e4bcbc;
} }
} }
} }
.node-diff-node-entry-conflict.node-diff-select-local { .red-ui-diff-list-node-conflict.node-diff-select-local {
.node-diff-node-local { .red-ui-diff-list-node-local {
background: #e7ffe3; background: #e7ffe3;
label { label {
border-left-color: #b8daad; border-left-color: #b8daad;
} }
} }
.node-diff-node-remote { .red-ui-diff-list-node-remote {
background: #ffe1e1; background: #ffe1e1;
label { label {
border-left-color: #e4bcbc; border-left-color: #e4bcbc;
@ -513,14 +486,14 @@
} }
ul.node-dialog-configm-deploy-list { ul.red-ui-deploy-dialog-confirm-list {
font-size: 0.9em; font-size: 0.9em;
width: 400px; width: 400px;
margin: 10px auto; margin: 10px auto;
text-align: left; text-align: left;
} }
.node-dialog-confirm-conflict-row { .red-ui-deploy-dialog-confirm-conflict-row {
img { img {
vertical-align:middle; vertical-align:middle;
height: 30px; height: 30px;
@ -540,21 +513,21 @@ ul.node-dialog-configm-deploy-list {
} }
} }
#node-diff-toolbar-resolved-conflicts .node-diff-status { #red-ui-diff-dialog-toolbar-resolved-conflicts .red-ui-diff-status {
margin:0; margin:0;
} }
.node-diff-text-diff-button { .red-ui-diff-text-diff-button {
float: right; float: right;
margin: 2px 3px; margin: 2px 3px;
line-height: 14px; line-height: 14px;
height: 16px; height: 16px;
} }
.node-text-diff { .red-ui-diff-text {
height: 100%; height: 100%;
overflow-y:auto; overflow-y:auto;
table.node-text-diff-content { table.red-ui-diff-text-content {
margin: 10px; margin: 10px;
border: 1px solid $secondary-border-color; border: 1px solid $secondary-border-color;
border-radius: 3px; border-radius: 3px;
@ -637,7 +610,7 @@ ul.node-dialog-configm-deploy-list {
tr.end-block { tr.end-block {
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
} }
tr.node-text-diff-file-header td { tr.red-ui-diff-text-file-header td {
.filename { .filename {
font-family: monospace; font-family: monospace;
} }
@ -645,16 +618,16 @@ ul.node-dialog-configm-deploy-list {
padding: 5px 10px 5px 0; padding: 5px 10px 5px 0;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
i.node-diff-chevron { i.red-ui-diff-list-chevron {
width: 30px; width: 30px;
} }
} }
tr.node-text-diff-file-header.collapsed { tr.red-ui-diff-text-file-header.collapsed {
td i.node-diff-chevron { td i.red-ui-diff-list-chevron {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
} }
tr.node-text-diff-commit-header td { tr.red-ui-diff-text-commit-header td {
background: #f3f3f3; background: #f3f3f3;
padding: 5px 10px; padding: 5px 10px;
color: #333; color: #333;
@ -674,7 +647,7 @@ ul.node-dialog-configm-deploy-list {
} }
} }
tr.node-text-diff-header > td:not(.flow-diff) { tr.red-ui-diff-text-header > td:not(.flow-diff) {
font-family: monospace; font-family: monospace;
padding: 5px 10px; padding: 5px 10px;
text-align: left; text-align: left;
@ -685,7 +658,7 @@ ul.node-dialog-configm-deploy-list {
border-top: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
} }
tr.node-text-diff-expand td { tr.red-ui-diff-text-expand td {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #ffc; background: #ffc;