summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAlfredo Sumaran <alfredo@gitlab.com>2016-09-16 19:41:15 -0500
committerAlfredo Sumaran <alfredo@gitlab.com>2016-10-13 14:16:34 -0500
commita3eb39a1068df93d732585272c5eaff380801430 (patch)
tree7ec0263041316dbf37e8638ecd9fd79ec2dbe1c7
parent26f658decd3943bbc66c567ea91e7b859b32e0e6 (diff)
downloadgitlab-ce-a3eb39a1068df93d732585272c5eaff380801430.tar.gz
Replace textarea with Ace editor
-rw-r--r--app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es627
-rw-r--r--app/assets/stylesheets/pages/merge_conflicts.scss7
-rw-r--r--app/views/projects/merge_requests/conflicts.html.haml2
-rw-r--r--app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml2
4 files changed, 30 insertions, 8 deletions
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6 b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
index 570d9ff877c..abdf73febb4 100644
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
@@ -4,7 +4,7 @@
template: '#diff-file-editor',
data() {
return {
- originalState: '',
+ originalContent: '',
saved: false,
loading: false,
fileLoaded: false
@@ -23,6 +23,8 @@
loadFile(val) {
const self = this;
+ this.resetEditorContent();
+
if (!val || this.fileLoaded || this.loading) {
return
}
@@ -31,10 +33,19 @@
$.get(this.file.content_path)
.done((file) => {
- $(self.$el).find('textarea').val(file.content);
- self.originalState = file.content;
+ let content = self.$el.querySelector('pre');
+ let fileContent = document.createTextNode(file.content);
+
+ content.textContent = fileContent.textContent;
+
+ self.originalContent = file.content;
self.fileLoaded = true;
+ self.editor = ace.edit(content);
+ self.editor.$blockScrolling = Infinity; // Turn off annoying warning
+ self.editor.on('change', () => {
+ self.saveDiffResolution();
+ });
self.saveDiffResolution();
})
.fail(() => {
@@ -50,12 +61,14 @@
this.saved = true;
// This probably be better placed in the data provider
- this.file.content = this.$el.querySelector('textarea').value;
- this.file.resolveEditChanged = this.file.content !== this.originalState;
+ this.file.content = this.editor.getValue();
+ this.file.resolveEditChanged = this.file.content !== this.originalContent;
this.file.promptDiscardConfirmation = false;
},
- onInput() {
- this.saveDiffResolution();
+ resetEditorContent() {
+ if (this.fileLoaded) {
+ this.editor.setValue(this.originalContent, -1);
+ }
}
}
});
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 577a97e8c0e..2a8c693b2a8 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -255,6 +255,13 @@ $colors: (
.editor {
border-top: solid 1px yellow;
+
+ pre {
+ height: 350px;
+ border: none;
+ border-radius: 0;
+ margin-bottom: 0;
+ }
}
.loading-text {
diff --git a/app/views/projects/merge_requests/conflicts.html.haml b/app/views/projects/merge_requests/conflicts.html.haml
index e3add1f799f..ff641b90b86 100644
--- a/app/views/projects/merge_requests/conflicts.html.haml
+++ b/app/views/projects/merge_requests/conflicts.html.haml
@@ -6,6 +6,8 @@
'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('lib/ace.js')
= render "projects/merge_requests/show/mr_title"
.merge-request-details.issuable-details
diff --git a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
index 0556341fd64..940558e02e0 100644
--- a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
+++ b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
@@ -3,4 +3,4 @@
.editor-wrap{ ":class" => "classObject" }
%p.loading-text Loading...
.editor
- %textarea{ "@input" => "onInput", cols: '80', rows: '20' }
+ %pre{ "style" => "height: 350px" }