Merge branch 'fix-textarea-expansion' into 'master'
Add textarea autoresize after comment ## What does this MR do? Adds an autoresize after a comment is posted ## Are there points in the code the reviewer needs to double check? Shouldn't be ## Why was this MR needed? To keep the UI consistent (the same as if you were to refresh it) ## Screenshots (if relevant) Before: ![IyCczzXfaf](/uploads/2229bad47e3f3821f1efaa6868a52025/IyCczzXfaf.gif) After: ![E6O0kRBrJq](/uploads/4aec6b436ff172ba281c2c2a4481906d/E6O0kRBrJq.gif) ## Does this MR meet the acceptance criteria? - [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added - Tests - [x] Added for this feature/bug - [x] All builds are passing - [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html) - [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides) - [x] Branch has no merge conflicts with `master` (if you do - rebase it please) - [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits) ## What are the relevant issue numbers? Closes #21667 See merge request !6152
This commit is contained in:
commit
13a91b560e
|
@ -24,6 +24,7 @@ v 8.12.0 (unreleased)
|
||||||
- Remove suggested colors hover underline (ClemMakesApps)
|
- Remove suggested colors hover underline (ClemMakesApps)
|
||||||
- Shorten task status phrase (ClemMakesApps)
|
- Shorten task status phrase (ClemMakesApps)
|
||||||
- Add hover color to emoji icon (ClemMakesApps)
|
- Add hover color to emoji icon (ClemMakesApps)
|
||||||
|
- Add textarea autoresize after comment (ClemMakesApps)
|
||||||
- Fix branches page dropdown sort alignment (ClemMakesApps)
|
- Fix branches page dropdown sort alignment (ClemMakesApps)
|
||||||
- Add white background for no readme container (ClemMakesApps)
|
- Add white background for no readme container (ClemMakesApps)
|
||||||
- API: Expose issue confidentiality flag. (Robert Schilling)
|
- API: Expose issue confidentiality flag. (Robert Schilling)
|
||||||
|
|
|
@ -331,7 +331,12 @@
|
||||||
form.find(".js-md-write-button").click();
|
form.find(".js-md-write-button").click();
|
||||||
form.find(".js-note-text").val("").trigger("input");
|
form.find(".js-note-text").val("").trigger("input");
|
||||||
form.find(".js-note-text").data("autosave").reset();
|
form.find(".js-note-text").data("autosave").reset();
|
||||||
return this.updateTargetButtons(e);
|
|
||||||
|
var event = document.createEvent('Event');
|
||||||
|
event.initEvent('autosize:update', true, false);
|
||||||
|
form.find('.js-autosize')[0].dispatchEvent(event);
|
||||||
|
|
||||||
|
this.updateTargetButtons(e);
|
||||||
};
|
};
|
||||||
|
|
||||||
Notes.prototype.reenableTargetFormSubmitButton = function() {
|
Notes.prototype.reenableTargetFormSubmitButton = function() {
|
||||||
|
|
|
@ -0,0 +1,21 @@
|
||||||
|
.flash-container.timeline-content
|
||||||
|
.timeline-icon.hidden-xs.hidden-sm
|
||||||
|
%a.author_link
|
||||||
|
%img
|
||||||
|
.timeline-content.timeline-content-form
|
||||||
|
%form.new-note.js-quick-submit.common-note-form.gfm-form.js-main-target-form
|
||||||
|
.md-area
|
||||||
|
.md-header
|
||||||
|
.md-write-holder
|
||||||
|
.zen-backdrop.div-dropzone-wrapper
|
||||||
|
.div-dropzone-wrapper
|
||||||
|
.div-dropzone.dz-clickable
|
||||||
|
%textarea.note-textarea.js-note-text.js-gfm-input.js-autosize.markdown-area
|
||||||
|
.note-form-actions.clearfix
|
||||||
|
%input.btn.btn-nr.btn-create.append-right-10.comment-btn.js-comment-button{ type: 'submit' }
|
||||||
|
%a.btn.btn-nr.btn-reopen.btn-comment.js-note-target-reopen
|
||||||
|
Reopen issue
|
||||||
|
%a.btn.btn-nr.btn-close.btn-comment.js-note-target-close
|
||||||
|
Close issue
|
||||||
|
%a.btn.btn-cancel.js-note-discard
|
||||||
|
Discard draft
|
|
@ -1,8 +1,7 @@
|
||||||
|
|
||||||
/*= require notes */
|
/*= require notes */
|
||||||
|
/*= require autosize */
|
||||||
|
|
||||||
/*= require gl_form */
|
/*= require gl_form */
|
||||||
|
/*= require lib/utils/text_utility */
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
window.gon || (window.gon = {});
|
window.gon || (window.gon = {});
|
||||||
|
@ -12,30 +11,64 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
describe('Notes', function() {
|
describe('Notes', function() {
|
||||||
return describe('task lists', function() {
|
describe('task lists', function() {
|
||||||
fixture.preload('issue_note.html');
|
fixture.preload('issue_note.html');
|
||||||
|
|
||||||
beforeEach(function() {
|
beforeEach(function() {
|
||||||
fixture.load('issue_note.html');
|
fixture.load('issue_note.html');
|
||||||
$('form').on('submit', function(e) {
|
$('form').on('submit', function(e) {
|
||||||
return e.preventDefault();
|
e.preventDefault();
|
||||||
});
|
});
|
||||||
return this.notes = new Notes();
|
this.notes = new Notes();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('modifies the Markdown field', function() {
|
it('modifies the Markdown field', function() {
|
||||||
$('input[type=checkbox]').attr('checked', true).trigger('change');
|
$('input[type=checkbox]').attr('checked', true).trigger('change');
|
||||||
return expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
|
expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
|
||||||
});
|
});
|
||||||
return it('submits the form on tasklist:changed', function() {
|
|
||||||
var submitted;
|
it('submits the form on tasklist:changed', function() {
|
||||||
submitted = false;
|
var submitted = false;
|
||||||
$('form').on('submit', function(e) {
|
$('form').on('submit', function(e) {
|
||||||
submitted = true;
|
submitted = true;
|
||||||
return e.preventDefault();
|
e.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.js-task-list-field').trigger('tasklist:changed');
|
$('.js-task-list-field').trigger('tasklist:changed');
|
||||||
return expect(submitted).toBe(true);
|
expect(submitted).toBe(true);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('comments', function() {
|
||||||
|
var commentsTemplate = 'comments.html';
|
||||||
|
var textarea = '.js-note-text';
|
||||||
|
fixture.preload(commentsTemplate);
|
||||||
|
|
||||||
|
beforeEach(function() {
|
||||||
|
fixture.load(commentsTemplate);
|
||||||
|
this.notes = new Notes();
|
||||||
|
|
||||||
|
this.autoSizeSpy = spyOnEvent($(textarea), 'autosize:update');
|
||||||
|
spyOn(this.notes, 'renderNote').and.stub();
|
||||||
|
|
||||||
|
$(textarea).data('autosave', {
|
||||||
|
reset: function() {}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('form').on('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$('.js-main-target-form').trigger('ajax:success');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('autosizes after comment submission', function() {
|
||||||
|
$(textarea).text('This is an example comment note');
|
||||||
|
expect(this.autoSizeSpy).not.toHaveBeenTriggered();
|
||||||
|
|
||||||
|
$('.js-comment-button').click();
|
||||||
|
expect(this.autoSizeSpy).toHaveBeenTriggered();
|
||||||
|
})
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
}).call(this);
|
}).call(this);
|
||||||
|
|
Loading…
Reference in New Issue