Commit ad0b5ffb authored by Fatih Acet's avatar Fatih Acet

Draw side-by-side view only one table.

parent 16b13cbc
...@@ -53,14 +53,15 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider { ...@@ -53,14 +53,15 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
setParallelLines(data) { setParallelLines(data) {
data.files.forEach( (file) => { data.files.forEach( (file) => {
file.filePath = this.getFilePath(file); file.filePath = this.getFilePath(file);
file.parallelLines = { left: [], right: [] }; file.parallelLines = [];
const linesObj = { left: [], right: [] };
file.sections.forEach( (section) => { file.sections.forEach( (section) => {
const { conflict, lines, id } = section; const { conflict, lines, id } = section;
if (conflict) { if (conflict) {
file.parallelLines.left.push(this.getOriginHeaderLine(id)); linesObj.left.push(this.getOriginHeaderLine(id));
file.parallelLines.right.push(this.getHeadHeaderLine(id)); linesObj.right.push(this.getHeadHeaderLine(id));
} }
lines.forEach( (line) => { lines.forEach( (line) => {
...@@ -68,40 +69,49 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider { ...@@ -68,40 +69,49 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
if (conflict) { if (conflict) {
if (type === 'old') { if (type === 'old') {
file.parallelLines.left.push(this.getLineForParallelView(line, id, 'conflict')); linesObj.left.push(this.getLineForParallelView(line, id, 'conflict'));
} }
else if (type === 'new') { else if (type === 'new') {
file.parallelLines.right.push(this.getLineForParallelView(line, id, 'conflict', true)); linesObj.right.push(this.getLineForParallelView(line, id, 'conflict', true));
} }
} }
else { else {
const lineType = type || 'context'; const lineType = type || 'context';
file.parallelLines.left.push (this.getLineForParallelView(line, id, lineType)); linesObj.left.push (this.getLineForParallelView(line, id, lineType));
file.parallelLines.right.push(this.getLineForParallelView(line, id, lineType, true)); linesObj.right.push(this.getLineForParallelView(line, id, lineType, true));
} }
}); });
this.checkLineLengths(file); this.checkLineLengths(linesObj);
}); });
for (let i = 0, len = linesObj.left.length; i < len; i++) {
file.parallelLines.push([
linesObj.left[i],
linesObj.right[i]
]);
}
}); });
} }
checkLineLengths(file) { checkLineLengths(linesObj) {
let { left, right } = file.parallelLines; let { left, right } = linesObj;
if (left.length !== right.length) { if (left.length !== right.length) {
if (left.length > right.length) { if (left.length > right.length) {
const diff = left.length - right.length; const diff = left.length - right.length;
for (let i = 0; i < diff; i++) { for (let i = 0; i < diff; i++) {
file.parallelLines.right.push({ lineType: 'emptyLine', richText: '' }); right.push({ lineType: 'emptyLine', richText: '' });
} }
} }
else { else {
const diff = right.length - left.length; const diff = right.length - left.length;
for (let i = 0; i < diff; i++) { for (let i = 0; i < diff; i++) {
file.parallelLines.left.push({ lineType: 'emptyLine', richText: '' }); left.push({ lineType: 'emptyLine', richText: '' });
} }
} }
} }
...@@ -152,16 +162,18 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider { ...@@ -152,16 +162,18 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
} }
}); });
file.parallelLines.forEach( (lines) => {
const left = lines[0];
const right = lines[1];
const hasSameId = right.id === sectionId || left.id === sectionId;
const isLeftMatch = left.hasConflict || left.isHeader;
const isRightMatch = right.hasConflict || right.isHeader;
for (section in file.parallelLines) { if (hasSameId && (isLeftMatch || isRightMatch)) {
const lines = file.parallelLines[section]; this.markLine(left, selection);
this.markLine(right, selection);
lines.forEach( (line) => { }
if (line.id === sectionId && (line.hasConflict || line.isHeader )) { })
this.markLine(line, selection);
}
})
}
}); });
} }
......
...@@ -19,6 +19,50 @@ $unselected_line: #f8f8f8; ...@@ -19,6 +19,50 @@ $unselected_line: #f8f8f8;
min-height: 19px; min-height: 19px;
} }
.header.line_content, .diff-line-num {
&.origin {
background-color: $origin_gutter;
&.selected {
background-color: $selected_origin_gutter;
}
&.unselected {
background-color: $unselected_gutter;
}
}
&.head {
background-color: $head_gutter;
&.selected {
background-color: $selected_head_gutter;
}
&.unselected {
background-color: $unselected_gutter;
}
}
}
.line_content {
&.origin {
background-color: $origin_line;
&.selected {
background-color: $selected_origin_line;
}
&.unselected {
background-color: $unselected_line;
}
}
&.head {
background-color: $head_line;
&.selected {
background-color: $selected_head_line;
}
&.unselected {
background-color: $unselected_line;
}
}
}
.head { .head {
.header, .diff-line-num { .header, .diff-line-num {
background-color: $head_gutter; background-color: $head_gutter;
...@@ -71,17 +115,6 @@ $unselected_line: #f8f8f8; ...@@ -71,17 +115,6 @@ $unselected_line: #f8f8f8;
} }
} }
.parallel-view {
.diff-content {
overflow: hidden;
table {
width: 50%;
float: left;
}
}
}
.parallel .header { .parallel .header {
button { button {
right: 10px; right: 10px;
......
...@@ -43,30 +43,41 @@ ...@@ -43,30 +43,41 @@
.file-actions .file-actions
%a.btn.view-file.btn-file-option{":href" => "file.blobLink"} %a.btn.view-file.btn-file-option{":href" => "file.blobLink"}
View file @{{conflictsData.shortCommitSha}} View file @{{conflictsData.shortCommitSha}}
.diff-content.diff-wrap-lines .diff-content.diff-wrap-lines
.diff-wrap-lines.code.file-content.js-syntax-highlight.white .diff-wrap-lines.code.file-content.js-syntax-highlight.white
%table{"v-for" => "(key, group) in file.parallelLines"} %table
%tr.line_holder.parallel{"v-for" => "line in group", | %tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
":class" => "{ | %template{"v-for" => "line in section"}
'head': line.isHead, |
'origin': line.isOrigin, | %template{"v-if" => "line.isHeader"}
'match': line.hasMatch, | %td.diff-line-num.header{":class" => "{ |
'selected': line.isSelected, | 'head': line.isHead, |
'unselected': line.isUnselected }"} 'origin': line.isOrigin, |
'selected': line.isSelected, |
%template{"v-if" => "line.isHeader"} 'unselected': line.isUnselected}"}
%td.diff-line-num.header %td.line_content.header{":class" => "{ |
%td.line_content.header 'head': line.isHead, |
%strong {{line.richText}} 'origin': line.isOrigin, |
%button.btn{"@click" => "handleSelected(line.id, line.section)"} Use this 'selected': line.isSelected, |
'unselected': line.isUnselected}"}
%template{"v-if" => "!line.isHeader"} %strong {{line.richText}}
%td.diff-line-num.old_line %button.btn{"@click" => "handleSelected(line.id, line.section)"} Use this
{{line.lineNumber}}
%td.line_content %template{"v-if" => "!line.isHeader"}
{{{line.richText}}} %td.diff-line-num.old_line{":class" => "{ |
'head': line.isHead, |
'origin': line.isOrigin, |
'match': line.hasMatch, |
'selected': line.isSelected, |
'unselected': line.isUnselected }"}
{{line.lineNumber}}
%td.line_content.parallel{":class" => "{ |
'head': line.isHead, |
'origin': line.isOrigin, |
'match': line.hasMatch, |
'selected': line.isSelected, |
'unselected': line.isUnselected }"}
{{{line.richText}}}
.files{"v-if" => "!isParallel"} .files{"v-if" => "!isParallel"}
.diff-file.file-holder.conflict.inline-view{"v-for" => "file in conflictsData.files"} .diff-file.file-holder.conflict.inline-view{"v-for" => "file in conflictsData.files"}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment