Commit ff15fbf1 authored by Fatih Acet's avatar Fatih Acet

Implement conflict selection with highlighting.

parent f3743111
...@@ -49,6 +49,33 @@ class window.MergeConflictResolver extends Vue ...@@ -49,6 +49,33 @@ class window.MergeConflictResolver extends Vue
@resolutionData[sectionId] = selection @resolutionData[sectionId] = selection
#FIXME: Dry!!
for file in @conflictsData.files
for line in file.inlineLines
if line.id is sectionId and (line.conflict or line.isHeader)
if selection is 'head' and line.isHead
line.isSelected = yes
line.isUnselected = no
else if selection is 'origin' and line.isOrigin
line.isSelected = yes
line.isUnselected = no
else
line.isUnselected = yes
line.isSelected = no
for section, lines of file.parallelLines
for line in lines
if line.id is sectionId and (line.lineType is 'conflict' or line.isHeader)
if selection is 'head' and line.isHead
line.isSelected = yes
line.isUnselected = no
else if selection is 'origin' and line.isOrigin
line.isSelected = yes
line.isUnselected = no
else
line.isUnselected = yes
line.isSelected = no
decorateData: (data) -> decorateData: (data) ->
...@@ -57,6 +84,7 @@ class window.MergeConflictResolver extends Vue ...@@ -57,6 +84,7 @@ class window.MergeConflictResolver extends Vue
@updateResolutionsData data @updateResolutionsData data
# FIXME: Add comments and separate parallel and inline data decoration
for file in data.files for file in data.files
file.parallelLines = { left: [], right: [] } file.parallelLines = { left: [], right: [] }
file.inlineLines = [] file.inlineLines = []
...@@ -67,10 +95,11 @@ class window.MergeConflictResolver extends Vue ...@@ -67,10 +95,11 @@ class window.MergeConflictResolver extends Vue
{ conflict, lines, id } = section { conflict, lines, id } = section
if conflict if conflict
file.parallelLines.left.push { isHeader: yes, id, text: headHeaderText, cssClass: 'head', section: 'head' } # FIXME: Make these lines better
file.parallelLines.right.push { isHeader: yes, id, text: originHeaderText, cssClass: 'origin', section: 'origin' } file.parallelLines.left.push { isHeader: yes, id, text: headHeaderText, section: 'head', isHead: yes, isSelected: no, isUnselected: no }
file.parallelLines.right.push { isHeader: yes, id, text: originHeaderText, section: 'origin', isOrigin: yes, isSelected: no, isUnselected: no }
file.inlineLines.push { isHeader: yes, id, text: headHeaderText, type: 'old', cssClass: 'head', section: 'head' } file.inlineLines.push { isHeader: yes, id, text: headHeaderText, type: 'old', section: 'head', isHead: yes, isSelected: no, isUnselected: no }
for line in lines for line in lines
if line.type in ['new', 'old'] and currentLineType isnt line.type if line.type in ['new', 'old'] and currentLineType isnt line.type
...@@ -78,16 +107,21 @@ class window.MergeConflictResolver extends Vue ...@@ -78,16 +107,21 @@ class window.MergeConflictResolver extends Vue
# FIXME: Find a better way to add a new line # FIXME: Find a better way to add a new line
file.inlineLines.push { lineType: 'emptyLine', text: '<span> </span>' } file.inlineLines.push { lineType: 'emptyLine', text: '<span> </span>' }
# FIXME: Make these lines better
line.conflict = conflict line.conflict = conflict
line.cssClass = if line.type is 'old' then 'head' else if line.type is 'new' then 'origin' else '' line.id = id
line.isHead = line.type is 'old'
line.isOrigin = line.type is 'new'
line.isSelected = no
line.isUnselected = no
file.inlineLines.push line file.inlineLines.push line
if conflict if conflict
if line.type is 'old' if line.type is 'old'
line = { lineType: 'conflict', lineNumber: line.old_line, text: line.text, cssClass: 'head' } line = { lineType: 'conflict', lineNumber: line.old_line, text: line.text, section: 'head', id, isSelected: no, isUnselected: no, isHead: yes }
file.parallelLines.left.push line file.parallelLines.left.push line
else if line.type is 'new' else if line.type is 'new'
line = { lineType: 'conflict', lineNumber: line.new_line, text: line.text, cssClass: 'origin' } line = { lineType: 'conflict', lineNumber: line.new_line, text: line.text, section: 'origin', id, isSelected: no, isUnselected: no, isOrigin: yes }
file.parallelLines.right.push line file.parallelLines.right.push line
else else
console.log 'unhandled line type...', line console.log 'unhandled line type...', line
...@@ -96,7 +130,7 @@ class window.MergeConflictResolver extends Vue ...@@ -96,7 +130,7 @@ class window.MergeConflictResolver extends Vue
file.parallelLines.right.push { lineType: 'context', lineNumber: line.new_line, text: line.text } file.parallelLines.right.push { lineType: 'context', lineNumber: line.new_line, text: line.text }
if conflict if conflict
file.inlineLines.push { isHeader: yes, id, type: 'new', text: originHeaderText, cssClass: 'origin', section: 'origin' } file.inlineLines.push { isHeader: yes, id, type: 'new', text: originHeaderText, section: 'origin', isOrigin: yes, isSelected: no, isUnselected: no }
return data return data
......
...@@ -22,13 +22,16 @@ $unselected_line: #F8F8F8; ...@@ -22,13 +22,16 @@ $unselected_line: #F8F8F8;
.header, .diff-line-num { .header, .diff-line-num {
background-color: $head_gutter; background-color: $head_gutter;
} }
td { td {
background-color: $head_line; background-color: $head_line;
} }
&.selected { &.selected {
.header, .diff-line-num { .header, .diff-line-num {
background-color: $selected_head_gutter; background-color: $selected_head_gutter;
} }
td { td {
background-color: $selected_head_line; background-color: $selected_head_line;
} }
...@@ -39,13 +42,16 @@ $unselected_line: #F8F8F8; ...@@ -39,13 +42,16 @@ $unselected_line: #F8F8F8;
.header, .diff-line-num { .header, .diff-line-num {
background-color: $origin_gutter; background-color: $origin_gutter;
} }
td { td {
background-color: $origin_line; background-color: $origin_line;
} }
&.selected { &.selected {
.header, .diff-line-num { .header, .diff-line-num {
background-color: $selected_origin_gutter; background-color: $selected_origin_gutter;
} }
td { td {
background-color: $selected_origin_line; background-color: $selected_origin_line;
} }
...@@ -57,6 +63,7 @@ $unselected_line: #F8F8F8; ...@@ -57,6 +63,7 @@ $unselected_line: #F8F8F8;
.header, .diff-line-num { .header, .diff-line-num {
background-color: $unselected_gutter; background-color: $unselected_gutter;
} }
td { td {
background-color: $unselected_line; background-color: $unselected_line;
} }
...@@ -66,6 +73,7 @@ $unselected_line: #F8F8F8; ...@@ -66,6 +73,7 @@ $unselected_line: #F8F8F8;
.parallel-view { .parallel-view {
.diff-content { .diff-content {
overflow: hidden; overflow: hidden;
table { table {
width: 50%; width: 50%;
float: left; float: left;
......
...@@ -33,14 +33,18 @@ ...@@ -33,14 +33,18 @@
.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{"v-for" => "(key, group) in file.parallelLines"}
%tr.line_holder.parallel{"v-for" => "line in group", ":class" => "line.cssClass"} %tr.line_holder.parallel{"v-for" => "line in group", |
":class" => "{ |
'head': line.isHead, |
'origin': line.isOrigin, |
'selected': line.isSelected, |
'unselected': line.isUnselected }"}
%template{"v-if" => "line.isHeader"} %template{"v-if" => "line.isHeader"}
%td.diff-line-num.header %td.diff-line-num.header
%td.line_content.header %td.line_content.header
%strong {{line.text}} %strong {{line.text}}
/ FIXME: Don't use cssClass here %button.btn{"@click" => "handleSelected(line.id, line.section)"} Use this
%button.btn{"@click" => "handleSelected(line.id, line.cssClass)"} Use this
%template{"v-if" => "!line.isHeader"} %template{"v-if" => "!line.isHeader"}
%td.diff-line-num.old_line %td.diff-line-num.old_line
...@@ -58,7 +62,12 @@ ...@@ -58,7 +62,12 @@
.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 %table
%tr.line_holder{"v-for" => "line in file.inlineLines", ":class" => "line.cssClass"} %tr.line_holder{"v-for" => "line in file.inlineLines", |
":class" => "{ |
'head': line.isHead, |
'origin': line.isOrigin, |
'selected': line.isSelected, |
'unselected': line.isUnselected }"}
%template{"v-if" => "!line.isHeader"} %template{"v-if" => "!line.isHeader"}
%td.diff-line-num.old_line %td.diff-line-num.old_line
...@@ -73,8 +82,7 @@ ...@@ -73,8 +82,7 @@
%td.diff-line-num.header %td.diff-line-num.header
%td.line_content.header %td.line_content.header
%strong {{{line.text}}} %strong {{{line.text}}}
/ FIXME: Don't use cssClass here %button.btn{"@click" => "handleSelected(line.id, line.section)"} Use this
%button.btn{"@click" => "handleSelected(line.id, line.cssClass)"} Use this
.content-block.oneline-block.files-changed .content-block.oneline-block.files-changed
%strong.resolved-count {{resolvedCount}} %strong.resolved-count {{resolvedCount}}
......
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