kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Draw side-by-side view only one table.

Browse source
This commit is contained in:
Fatih Acet 2016-08-03 18:04:00 +03:00
parent 16b13cbc2c
commit ad0b5ffbb5
3 changed files with 108 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/assets/javascripts/merge_conflict_data_provider.js.es6
View file

@ -53,14 +53,15 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
setParallelLines(data) {
data.files.forEach( (file) => {
file.filePath = this.getFilePath(file);
file.parallelLines = { left: [], right: [] };
file.parallelLines = [];
const linesObj = { left: [], right: [] };
file.sections.forEach( (section) => {
const { conflict, lines, id } = section;
if (conflict) {
file.parallelLines.left.push(this.getOriginHeaderLine(id));
file.parallelLines.right.push(this.getHeadHeaderLine(id));
linesObj.left.push(this.getOriginHeaderLine(id));
linesObj.right.push(this.getHeadHeaderLine(id));
}
lines.forEach( (line) => {
@ -68,40 +69,49 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
if (conflict) {
if (type === 'old') {
file.parallelLines.left.push(this.getLineForParallelView(line, id, 'conflict'));
linesObj.left.push(this.getLineForParallelView(line, id, 'conflict'));
}
else if (type === 'new') {
file.parallelLines.right.push(this.getLineForParallelView(line, id, 'conflict', true));
linesObj.right.push(this.getLineForParallelView(line, id, 'conflict', true));
}
}
else {
const lineType = type || 'context';
file.parallelLines.left.push (this.getLineForParallelView(line, id, lineType));
file.parallelLines.right.push(this.getLineForParallelView(line, id, lineType, true));
linesObj.left.push (this.getLineForParallelView(line, id, lineType));
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) {
let { left, right } = file.parallelLines;
checkLineLengths(linesObj) {
let { left, right } = linesObj;
if (left.length !== right.length) {
if (left.length > right.length) {
const diff = left.length - right.length;
for (let i = 0; i < diff; i++) {
file.parallelLines.right.push({ lineType: 'emptyLine', richText: '' });
right.push({ lineType: 'emptyLine', richText: '' });
}
}
else {
const diff = right.length - left.length;
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 {
}
});
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) {
const lines = file.parallelLines[section];
lines.forEach( (line) => {
if (line.id === sectionId && (line.hasConflict || line.isHeader )) {
this.markLine(line, selection);
}
})
}
if (hasSameId && (isLeftMatch || isRightMatch)) {
this.markLine(left, selection);
this.markLine(right, selection);
}
})
});
}

55
app/assets/stylesheets/pages/merge_conflicts.scss
View file

@ -19,6 +19,50 @@ $unselected_line: #f8f8f8;
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 {
.header, .diff-line-num {
background-color: $head_gutter;
@ -71,17 +115,6 @@ $unselected_line: #f8f8f8;
}
}
.parallel-view {
.diff-content {
overflow: hidden;
table {
width: 50%;
float: left;
}
}
}
.parallel .header {
button {
right: 10px;

51
app/views/projects/merge_requests/conflicts.html.haml
View file

@ -43,30 +43,41 @@
.file-actions
%a.btn.view-file.btn-file-option{":href" => "file.blobLink"}
View file @{{conflictsData.shortCommitSha}}
.diff-content.diff-wrap-lines
.diff-wrap-lines.code.file-content.js-syntax-highlight.white
%table{"v-for" => "(key, group) in file.parallelLines"}
%tr.line_holder.parallel{"v-for" => "line in group", |
":class" => "{ |
'head': line.isHead, |
'origin': line.isOrigin, |
'match': line.hasMatch, |
'selected': line.isSelected, |
'unselected': line.isUnselected }"}
%table
%tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
%template{"v-for" => "line in section"}
%template{"v-if" => "line.isHeader"}
%td.diff-line-num.header
%td.line_content.header
%strong {{line.richText}}
%button.btn{"@click" => "handleSelected(line.id, line.section)"} Use this
%template{"v-if" => "!line.isHeader"}
%td.diff-line-num.old_line
{{line.lineNumber}}
%td.line_content
{{{line.richText}}}
%template{"v-if" => "line.isHeader"}
%td.diff-line-num.header{":class" => "{ |
'head': line.isHead, |
'origin': line.isOrigin, |
'selected': line.isSelected, |
'unselected': line.isUnselected}"}
%td.line_content.header{":class" => "{ |
'head': line.isHead, |
'origin': line.isOrigin, |
'selected': line.isSelected, |
'unselected': line.isUnselected}"}
%strong {{line.richText}}
%button.btn{"@click" => "handleSelected(line.id, line.section)"} Use this
%template{"v-if" => "!line.isHeader"}
%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"}
.diff-file.file-holder.conflict.inline-view{"v-for" => "file in conflictsData.files"}