Commit c4142cf9 authored by Alfredo Sumaran's avatar Alfredo Sumaran

Improve components for PhantomJs compatibility

parent 4f76ff0e
...@@ -3,8 +3,11 @@ ...@@ -3,8 +3,11 @@
global.mergeConflicts = global.mergeConflicts || {}; global.mergeConflicts = global.mergeConflicts || {};
global.mergeConflicts.diffFileEditor = Vue.extend({ global.mergeConflicts.diffFileEditor = Vue.extend({
props: ['file', 'loadFile'], props: {
template: '#diff-file-editor', file: Object,
onCancelDiscardConfirmation: Function,
onAcceptDiscardConfirmation: Function
},
data() { data() {
return { return {
saved: false, saved: false,
...@@ -16,7 +19,6 @@ ...@@ -16,7 +19,6 @@
computed: { computed: {
classObject() { classObject() {
return { return {
'load-file': this.loadFile,
'saved': this.saved, 'saved': this.saved,
'is-loading': this.loading 'is-loading': this.loading
}; };
...@@ -77,6 +79,12 @@ ...@@ -77,6 +79,12 @@
if (this.fileLoaded) { if (this.fileLoaded) {
this.editor.setValue(this.originalContent, -1); this.editor.setValue(this.originalContent, -1);
} }
},
cancelDiscardConfirmation(file) {
this.onCancelDiscardConfirmation(file);
},
acceptDiscardConfirmation(file) {
this.onAcceptDiscardConfirmation(file);
} }
} }
}); });
......
((global) => {
global.mergeConflicts = global.mergeConflicts || {};
global.mergeConflicts.inlineConflictLines = Vue.extend({
props: {
file: Object
},
mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
});
})(window.gl || (window.gl = {}));
((global) => {
global.mergeConflicts = global.mergeConflicts || {};
global.mergeConflicts.parallelConflictLine = Vue.extend({
props: {
file: Object,
line: Object
},
mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
template: '#parallel-conflict-line'
});
})(window.gl || (window.gl = {}));
((global) => {
global.mergeConflicts = global.mergeConflicts || {};
global.mergeConflicts.parallelConflictLines = Vue.extend({
props: {
file: Object
},
mixins: [global.mergeConflicts.utils],
components: {
'parallel-conflict-line': gl.mergeConflicts.parallelConflictLine
}
});
})(window.gl || (window.gl = {}));
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
isHead: true, isHead: true,
isSelected: false, isSelected: false,
isUnselected: false isUnselected: false
} };
}, },
decorateLineForInlineView(line, id, conflict) { decorateLineForInlineView(line, id, conflict) {
...@@ -227,7 +227,7 @@ ...@@ -227,7 +227,7 @@
richText: rich_text, richText: rich_text,
isSelected: false, isSelected: false,
isUnselected: false isUnselected: false
} };
}, },
getOriginHeaderLine(id) { getOriginHeaderLine(id) {
...@@ -241,7 +241,7 @@ ...@@ -241,7 +241,7 @@
isOrigin: true, isOrigin: true,
isSelected: false, isSelected: false,
isUnselected: false isUnselected: false
} };
}, },
getFilePath(file) { getFilePath(file) {
......
//= require vue //= require vue
//= require ./merge_conflict_store //= require ./merge_conflict_store
//= require ./merge_conflict_service //= require ./merge_conflict_service
//= require ./mixins/line_conflict_utils
//= require ./mixins/line_conflict_actions
//= require ./components/diff_file_editor //= require ./components/diff_file_editor
//= require ./components/inline_conflict_lines
//= require ./components/parallel_conflict_line
//= require ./components/parallel_conflict_lines
$(() => { $(() => {
const INTERACTIVE_RESOLVE_MODE = 'interactive'; const INTERACTIVE_RESOLVE_MODE = 'interactive';
...@@ -16,7 +21,9 @@ $(() => { ...@@ -16,7 +21,9 @@ $(() => {
el: '#conflicts', el: '#conflicts',
data: mergeConflictsStore.state, data: mergeConflictsStore.state,
components: { components: {
'diff-file-editor': gl.mergeConflicts.diffFileEditor 'diff-file-editor': gl.mergeConflicts.diffFileEditor,
'inline-conflict-lines': gl.mergeConflicts.inlineConflictLines,
'parallel-conflict-lines': gl.mergeConflicts.parallelConflictLines
}, },
computed: { computed: {
conflictsCountText() { return mergeConflictsStore.getConflictsCountText() }, conflictsCountText() { return mergeConflictsStore.getConflictsCountText() },
...@@ -46,9 +53,6 @@ $(() => { ...@@ -46,9 +53,6 @@ $(() => {
}); });
}, },
methods: { methods: {
handleSelected(file, sectionId, selection) {
mergeConflictsStore.handleSelected(file, sectionId, selection);
},
handleViewTypeChange(viewType) { handleViewTypeChange(viewType) {
mergeConflictsStore.setViewType(viewType); mergeConflictsStore.setViewType(viewType);
}, },
......
((global) => {
global.mergeConflicts = global.mergeConflicts || {};
global.mergeConflicts.actions = {
methods: {
handleSelected(file, sectionId, selection) {
gl.mergeConflicts.mergeConflictsStore.handleSelected(file, sectionId, selection);
}
}
};
})(window.gl || (window.gl = {}));
((global) => {
global.mergeConflicts = global.mergeConflicts || {};
global.mergeConflicts.utils = {
methods: {
lineCssClass(line) {
return {
'head': line.isHead,
'origin': line.isOrigin,
'match': line.hasMatch,
'selected': line.isSelected,
'unselected': line.isUnselected
};
}
}
};
})(window.gl || (window.gl = {}));
- class_bindings = "{ |
'head': line.isHead, |
'origin': line.isOrigin, |
'match': line.hasMatch, |
'selected': line.isSelected, |
'unselected': line.isUnselected }"
- page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests" - page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
- content_for :page_specific_javascripts do - content_for :page_specific_javascripts do
= page_specific_javascript_tag('merge_conflicts/merge_conflicts_bundle.js') = page_specific_javascript_tag('merge_conflicts/merge_conflicts_bundle.js')
...@@ -34,15 +27,14 @@ ...@@ -34,15 +27,14 @@
%strong {{file.filePath}} %strong {{file.filePath}}
= render partial: 'projects/merge_requests/conflicts/file_actions' = render partial: 'projects/merge_requests/conflicts/file_actions'
.diff-content.diff-wrap-lines .diff-content.diff-wrap-lines
%div{"v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" } .diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
= render partial: "projects/merge_requests/conflicts/resolve_mode_interactive_inline", locals: { class_bindings: class_bindings } = render partial: "projects/merge_requests/conflicts/components/inline_conflict_lines"
%div{"v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" } .diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
= render partial: "projects/merge_requests/conflicts/resolve_mode_interactive_parallel", locals: { class_bindings: class_bindings } = render partial: "projects/merge_requests/conflicts/components/parallel_conflict_lines"
%div{"v-show" => " file.resolveMode === 'edit' || file.type === 'text-editor'"} %div{"v-show" => "file.resolveMode === 'edit' || file.type === 'text-editor'"}
= render partial: 'projects/merge_requests/conflicts/diff_file_editor', locals: { if_condition: "file.loadFile && isParallel" } = render partial: "projects/merge_requests/conflicts/components/diff_file_editor"
= render partial: "projects/merge_requests/conflicts/submit_form" = render partial: "projects/merge_requests/conflicts/submit_form"
-# Components -# Components
= render partial: 'projects/merge_requests/conflicts/components/diff_file_editor' = render partial: 'projects/merge_requests/conflicts/components/parallel_conflict_line'
\ No newline at end of file
.content-block.oneline-block.files-changed{"v-if" => "!isLoading && !hasError"} .content-block.oneline-block.files-changed{"v-if" => "!isLoading && !hasError"}
.inline-parallel-buttons{"v-if" => "showDiffViewTypeSwitcher"} .inline-parallel-buttons{"v-if" => "showDiffViewTypeSwitcher"}
.btn-group .btn-group
%a.btn{ | %button.btn{":class" => "{'active': !isParallel}", "@click" => "handleViewTypeChange('inline')"}
":class" => "{'active': !isParallel}", |
"@click" => "handleViewTypeChange('inline')"}
Inline Inline
%a.btn{ | %button.btn{":class" => "{'active': isParallel}", "@click" => "handleViewTypeChange('parallel')"}
":class" => "{'active': isParallel}", |
"@click" => "handleViewTypeChange('parallel')"}
Side-by-side Side-by-side
.js-toggle-container .js-toggle-container
......
.diff-editor-wrap{ "v-show" => "file.showEditor" }
.discard-changes-alert-wrap{ "v-if" => "file.promptDiscardConfirmation" }
.discard-changes-alert
Are you sure to discard your changes?
.discard-actions
%button.btn.btn-sm.btn-close{ "@click" => "acceptDiscardConfirmation(file)" } Discard changes
%button.btn.btn-sm{ "@click" => "cancelDiscardConfirmation(file)" } Cancel
%diff-file-editor{":file" => "file"}
.diff-wrap-lines.code.file-content.js-syntax-highlight
%table
%tr.line_holder.diff-inline{"v-for" => "line in file.inlineLines"}
%template{"v-if" => "!line.isHeader"}
%td.diff-line-num.new_line{":class" => class_bindings}
%a {{line.new_line}}
%td.diff-line-num.old_line{":class" => class_bindings}
%a {{line.old_line}}
%td.line_content{":class" => class_bindings}
{{{line.richText}}}
%template{"v-if" => "line.isHeader"}
%td.diff-line-num.header{":class" => class_bindings}
%td.diff-line-num.header{":class" => class_bindings}
%td.line_content.header{":class" => class_bindings}
%strong {{{line.richText}}}
%button.btn{ "@click" => "handleSelected(file, line.id, line.section)" }
{{line.buttonTitle}}
.diff-wrap-lines.code.file-content.js-syntax-highlight
%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{":class" => class_bindings}
%td.line_content.header{":class" => class_bindings}
%strong {{line.richText}}
%button.btn{"@click" => "handleSelected(file, line.id, line.section)"}
{{line.buttonTitle}}
%template{"v-if" => "!line.isHeader"}
%td.diff-line-num.old_line{":class" => class_bindings}
{{line.lineNumber}}
%td.line_content.parallel{":class" => class_bindings}
{{{line.richText}}}
%template{ id: "diff-file-editor" } %diff-file-editor{"inline-template" => "true", ":file" => "file", ":on-cancel-discard-confirmation" => "cancelDiscardConfirmation", ":on-accept-discard-confirmation" => "acceptDiscardConfirmation"}
%div .diff-editor-wrap{ "v-show" => "file.showEditor" }
.discard-changes-alert-wrap{ "v-if" => "file.promptDiscardConfirmation" }
.discard-changes-alert
Are you sure to discard your changes?
.discard-actions
%button.btn.btn-sm.btn-close{ "@click" => "acceptDiscardConfirmation(file)" } Discard changes
%button.btn.btn-sm{ "@click" => "cancelDiscardConfirmation(file)" } Cancel
.editor-wrap{ ":class" => "classObject" } .editor-wrap{ ":class" => "classObject" }
.loading .loading
%i.fa.fa-spinner.fa-spin %i.fa.fa-spinner.fa-spin
......
%inline-conflict-lines{ "inline-template" => "true", ":file" => "file"}
%table
%tr.line_holder.diff-inline{"v-for" => "line in file.inlineLines"}
%td.diff-line-num.new_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
%a {{line.new_line}}
%td.diff-line-num.old_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
%a {{line.old_line}}
%td.line_content{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
{{{line.richText}}}
%td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
%td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
%td.line_content.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
%strong {{{line.richText}}}
%button.btn{ "@click" => "handleSelected(file, line.id, line.section)" }
{{line.buttonTitle}}
%script{"id" => 'parallel-conflict-line', "type" => "text/x-template"}
%td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
%td.line_content.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
%strong {{line.richText}}
%button.btn{"@click" => "handleSelected(file, line.id, line.section)"}
{{line.buttonTitle}}
%td.diff-line-num.old_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
{{line.lineNumber}}
%td.line_content.parallel{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
{{{line.richText}}}
%parallel-conflict-lines{"inline-template" => "true", ":file" => "file"}
%table
%tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
%td{"is"=>"parallel-conflict-line", "v-for" => "line in section", ":line" => "line", ":file" => "file"}
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