Improve components for PhantomJs compatibility
This commit is contained in:
parent
4f76ff0ecd
commit
c4142cf9c0
17 changed files with 140 additions and 76 deletions
|
@ -3,8 +3,11 @@
|
|||
global.mergeConflicts = global.mergeConflicts || {};
|
||||
|
||||
global.mergeConflicts.diffFileEditor = Vue.extend({
|
||||
props: ['file', 'loadFile'],
|
||||
template: '#diff-file-editor',
|
||||
props: {
|
||||
file: Object,
|
||||
onCancelDiscardConfirmation: Function,
|
||||
onAcceptDiscardConfirmation: Function
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
saved: false,
|
||||
|
@ -16,7 +19,6 @@
|
|||
computed: {
|
||||
classObject() {
|
||||
return {
|
||||
'load-file': this.loadFile,
|
||||
'saved': this.saved,
|
||||
'is-loading': this.loading
|
||||
};
|
||||
|
@ -77,6 +79,12 @@
|
|||
if (this.fileLoaded) {
|
||||
this.editor.setValue(this.originalContent, -1);
|
||||
}
|
||||
},
|
||||
cancelDiscardConfirmation(file) {
|
||||
this.onCancelDiscardConfirmation(file);
|
||||
},
|
||||
acceptDiscardConfirmation(file) {
|
||||
this.onAcceptDiscardConfirmation(file);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
((global) => {
|
||||
|
||||
global.mergeConflicts = global.mergeConflicts || {};
|
||||
|
||||
global.mergeConflicts.inlineConflictLines = Vue.extend({
|
||||
props: {
|
||||
file: Object
|
||||
},
|
||||
mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
|
||||
});
|
||||
|
||||
})(window.gl || (window.gl = {}));
|
|
@ -0,0 +1,14 @@
|
|||
((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 = {}));
|
|
@ -0,0 +1,15 @@
|
|||
((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 @@
|
|||
isHead: true,
|
||||
isSelected: false,
|
||||
isUnselected: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
decorateLineForInlineView(line, id, conflict) {
|
||||
|
@ -227,7 +227,7 @@
|
|||
richText: rich_text,
|
||||
isSelected: false,
|
||||
isUnselected: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
getOriginHeaderLine(id) {
|
||||
|
@ -241,7 +241,7 @@
|
|||
isOrigin: true,
|
||||
isSelected: false,
|
||||
isUnselected: false
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
getFilePath(file) {
|
||||
|
|
|
@ -1,7 +1,12 @@
|
|||
//= require vue
|
||||
//= require ./merge_conflict_store
|
||||
//= require ./merge_conflict_service
|
||||
//= require ./mixins/line_conflict_utils
|
||||
//= require ./mixins/line_conflict_actions
|
||||
//= 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';
|
||||
|
@ -16,7 +21,9 @@ $(() => {
|
|||
el: '#conflicts',
|
||||
data: mergeConflictsStore.state,
|
||||
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: {
|
||||
conflictsCountText() { return mergeConflictsStore.getConflictsCountText() },
|
||||
|
@ -46,9 +53,6 @@ $(() => {
|
|||
});
|
||||
},
|
||||
methods: {
|
||||
handleSelected(file, sectionId, selection) {
|
||||
mergeConflictsStore.handleSelected(file, sectionId, selection);
|
||||
},
|
||||
handleViewTypeChange(viewType) {
|
||||
mergeConflictsStore.setViewType(viewType);
|
||||
},
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
((global) => {
|
||||
global.mergeConflicts = global.mergeConflicts || {};
|
||||
|
||||
global.mergeConflicts.actions = {
|
||||
methods: {
|
||||
handleSelected(file, sectionId, selection) {
|
||||
gl.mergeConflicts.mergeConflictsStore.handleSelected(file, sectionId, selection);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
})(window.gl || (window.gl = {}));
|
|
@ -0,0 +1,18 @@
|
|||
((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 = {}));
|
|
@ -1,10 +1,3 @@
|
|||
- 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"
|
||||
- content_for :page_specific_javascripts do
|
||||
= page_specific_javascript_tag('merge_conflicts/merge_conflicts_bundle.js')
|
||||
|
@ -34,15 +27,14 @@
|
|||
%strong {{file.filePath}}
|
||||
= render partial: 'projects/merge_requests/conflicts/file_actions'
|
||||
.diff-content.diff-wrap-lines
|
||||
%div{"v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
|
||||
= render partial: "projects/merge_requests/conflicts/resolve_mode_interactive_inline", locals: { class_bindings: class_bindings }
|
||||
%div{"v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
|
||||
= render partial: "projects/merge_requests/conflicts/resolve_mode_interactive_parallel", locals: { class_bindings: class_bindings }
|
||||
%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" }
|
||||
.diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
|
||||
= render partial: "projects/merge_requests/conflicts/components/inline_conflict_lines"
|
||||
.diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
|
||||
= render partial: "projects/merge_requests/conflicts/components/parallel_conflict_lines"
|
||||
%div{"v-show" => "file.resolveMode === 'edit' || file.type === 'text-editor'"}
|
||||
= render partial: "projects/merge_requests/conflicts/components/diff_file_editor"
|
||||
|
||||
= render partial: "projects/merge_requests/conflicts/submit_form"
|
||||
|
||||
-# Components
|
||||
= render partial: 'projects/merge_requests/conflicts/components/diff_file_editor'
|
||||
|
||||
-# Components
|
||||
= render partial: 'projects/merge_requests/conflicts/components/parallel_conflict_line'
|
||||
|
|
|
@ -1,13 +1,9 @@
|
|||
.content-block.oneline-block.files-changed{"v-if" => "!isLoading && !hasError"}
|
||||
.inline-parallel-buttons{"v-if" => "showDiffViewTypeSwitcher"}
|
||||
.btn-group
|
||||
%a.btn{ |
|
||||
":class" => "{'active': !isParallel}", |
|
||||
"@click" => "handleViewTypeChange('inline')"}
|
||||
%button.btn{":class" => "{'active': !isParallel}", "@click" => "handleViewTypeChange('inline')"}
|
||||
Inline
|
||||
%a.btn{ |
|
||||
":class" => "{'active': isParallel}", |
|
||||
"@click" => "handleViewTypeChange('parallel')"}
|
||||
%button.btn{":class" => "{'active': isParallel}", "@click" => "handleViewTypeChange('parallel')"}
|
||||
Side-by-side
|
||||
|
||||
.js-toggle-container
|
||||
|
|
|
@ -1,8 +0,0 @@
|
|||
.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"}
|
|
@ -1,17 +0,0 @@
|
|||
.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}}
|
|
@ -1,17 +0,0 @@
|
|||
.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}}}
|
|
@ -1,5 +1,11 @@
|
|||
%template{ id: "diff-file-editor" }
|
||||
%div
|
||||
%diff-file-editor{"inline-template" => "true", ":file" => "file", ":on-cancel-discard-confirmation" => "cancelDiscardConfirmation", ":on-accept-discard-confirmation" => "acceptDiscardConfirmation"}
|
||||
.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" }
|
||||
.loading
|
||||
%i.fa.fa-spinner.fa-spin
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
%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}}
|
|
@ -0,0 +1,10 @@
|
|||
%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}}}
|
|
@ -0,0 +1,4 @@
|
|||
%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"}
|
Loading…
Reference in a new issue