Commit 9d70a4ba authored by Fatih Acet's avatar Fatih Acet

Added new UI components for Merge Conflicts UI.

parent d438230a
#= require lib/vue
class window.MergeConflictResolver extends Vue
constructor: (options = {}) ->
options.el = '#conflicts'
options.data = @getInitialData()
options.created = -> @fetchData()
options.name = 'MergeConflictResolver'
super options
window.v = this
fetchData: ->
$.ajax
url : '/emojis'
success: (response) =>
@handleResponse window.mergeConflictsData
handleResponse: (data) ->
@isLoading = no
@conflictsData = @decorateData data
handleViewTypeChange: (newType) ->
return if newType is @diffView
return unless newType in [ 'parallel', 'inline' ]
@diffView = newType
$.cookie 'diff_view', newType
@isParallel = @diffView is 'parallel'
# FIXME: Maybe even better with vue.js
$('.container-fluid').toggleClass 'container-limited'
handleSelected: (sectionId, selection) ->
console.log sectionId, selection
decorateData: (data) ->
for file in data.files
file.parallelLines = { left: [], right: [] }
file.inlineLines = []
currentLineType = 'old'
for section in file.sections
{ conflict, lines, id } = section
if conflict
header = { lineType: 'header', id }
file.parallelLines.left.push header
file.parallelLines.right.push header
header.type = 'old'
file.inlineLines.push header
for line in lines
if line.type in ['new', 'old'] and currentLineType isnt line.type
currentLineType = line.type
# FIXME: Find a better way to add a new line
file.inlineLines.push { lineType: 'emptyLine', text: '<span> </span>' }
line.conflict = conflict
file.inlineLines.push line
if conflict
if line.type is 'old'
line = { lineType: 'conflict', lineNumber: line.old_line, text: line.text }
file.parallelLines.left.push line
else if line.type is 'new'
line = { lineType: 'conflict', lineNumber: line.new_line, text: line.text }
file.parallelLines.right.push line
else
console.log 'unhandled line type...', line
else
file.parallelLines.left.push { lineType: 'context', lineNumber: line.old_line, text: line.text }
file.parallelLines.right.push { lineType: 'context', lineNumber: line.new_line, text: line.text }
if conflict
file.inlineLines.push { lineType: 'header', id, type: 'new' }
console.log data
return data
getInitialData: ->
diffViewType = $.cookie 'diff_view'
return {
isLoading : yes
diffView : diffViewType
conflictsData : {}
isParallel : diffViewType is 'parallel'
}
...@@ -20,3 +20,8 @@ ...@@ -20,3 +20,8 @@
.turn-off { display: block; } .turn-off { display: block; }
} }
} }
[v-cloak] {
display: none;
}
$head_line: #EFFDEB;
$head_header: #DAFACE;
$head_header_selected: #BAF0A8;
$origin_line: #F2F9FF;
$origin_header: #E0F0FF;
$origin_header_selected: #ADD8FF;
#conflicts {
.diff-wrap-lines .line_content {
white-space: normal;
}
.head {
.header, .diff-line-num {
background-color: $head_header;
}
td {
background-color: $head_line;
}
}
.origin {
.header, .diff-line-num {
background-color: $origin_header;
}
td {
background-color: $origin_line;
}
}
.parallel-view {
.diff-content {
overflow: hidden;
table {
width: 50%;
float: left;
}
}
}
.parallel .header {
button {
right: 10px;
}
}
.line_content.header {
position: relative;
button {
border-radius: 4px;
border: 1px solid #E1E1E1;
background: #FFF;
font-size: 10px;
position: absolute;
right: 20px;
height: 17px;
line-height: 4px; // FIXME: 4px?
top: 1px;
outline: none;
}
}
}
.loading{ "v-if" => "isLoading" }
%i.fa.fa-spinner.fa-spin
.content-block.oneline-block.files-changed{ "v-if" => "!isLoading" }
.inline-parallel-buttons
.btn-group
%a.btn{ |
":class" => "{'active': !isParallel}", |
"@click" => "handleViewTypeChange('inline')"}
Inline
%a.btn{ |
":class" => "{'active': isParallel}", |
"@click" => "handleViewTypeChange('parallel')"}
Side-by-side
.js-toggle-container
.commit-stat-summary
Showing
%strong.cred 3 conflicts
for
%strong {{conflictsData.source_branch}}
into
%strong {{conflictsData.target_branch}}
.files-wrapper{ "v-if" => "!isLoading" }
.files{{"v-if" => "isParallel"}}
.diff-file.file-holder.conflict.unresolved.parallel-view{"v-for" => "file in conflictsData.files"}
.file-title
%i.fa.fa-ban
%a
%span {{file.new_path}}
.file-actions
%a.btn.btn-sm View file @{{file.commit_sha.slice(0, 7)}}
.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" => "line.lineType != 'context' && (key == 'left' ? 'head' : 'origin')"}
%td.diff-line-num.header{"v-if" => "line.lineType == 'header'"}
%td.line_content.header{"v-if" => "line.lineType == 'header'"}
%strong {{key == 'left' ? 'HEAD//our changes' : 'origin//their changes'}}
%button.btn{"@click" => "handleSelected(line.id, line.lineType)"} Use this
%td.diff-line-num.old_line{"v-if" => "line.lineType != 'header'"}
{{line.lineNumber}}
%td.line_content{"v-if" => "line.lineType != 'header'"}
{{line.text}}
.files{{"v-if" => "!isParallel"}}
.diff-file.file-holder.conflict.unresolved.inline-view{"v-for" => "file in conflictsData.files"}
.file-title
%i.fa.fa-ban
%a
%span {{file.new_path}}
.file-actions
%a.btn.btn-sm View file @{{file.commit_sha.slice(0, 7)}}
.diff-content.diff-wrap-lines
.diff-wrap-lines.code.file-content.js-syntax-highlight.white
%table
%tr.line_holder{ |
"v-for" => "line in file.inlineLines", |
":class" => "line.type == 'old' ? 'head' : line.type == 'new' ? 'origin' : ''"}
%template{"v-if" => "line.lineType != 'header'"}
%td.diff-line-num.old_line
%a {{line.old_line}}
%td.diff-line-num.new_line
%a {{line.new_line}}
%td.line_content
{{{line.text}}}
%template{"v-if" => "line.lineType == 'header'"}
%td.diff-line-num.header
%td.diff-line-num.header
%td.line_content.header
%strong {{line.type == 'old' ? 'HEAD//our changes' : 'origin//their changes'}}
%button.btn{"@click" => "handleSelected(line.id, line.type)"} Use this
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