Merge "Add gr-autogrow-textarea to gr-diff-comment"
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
index ef00f55..e90dc41d 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.html
@@ -16,6 +16,7 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
+<link rel="import" href="../../shared/gr-textarea/gr-textarea.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
<link rel="import" href="../../shared/gr-formatted-text/gr-formatted-text.html">
@@ -122,7 +123,6 @@
display: none;
}
.editing .editMessage {
- background-color: #fff;
display: block;
}
.show-hide {
@@ -168,7 +168,7 @@
}
#container.collapsed .actions,
#container.collapsed gr-formatted-text,
- #container.collapsed iron-autogrow-textarea {
+ #container.collapsed gr-textarea {
display: none;
}
.resolve,
@@ -233,14 +233,14 @@
[[comment.robot_id]]
</div>
</template>
- <iron-autogrow-textarea
+ <gr-textarea
id="editTextarea"
class="editMessage"
autocomplete="on"
disabled="{{disabled}}"
rows="4"
- bind-value="{{_messageText}}"
- on-keydown="_handleTextareaKeydown"></iron-autogrow-textarea>
+ text="{{_messageText}}"
+ on-keydown="_handleTextareaKeydown"></gr-textarea>
<gr-formatted-text class="message"
content="[[comment.message]]"
no-trailing-margin="[[!comment.__draft]]"
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.js b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.js
index ac8e299..82ebfbb 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment.js
@@ -129,6 +129,7 @@
detached() {
this.cancelDebouncer('fire-update');
+ this.$.editTextarea.closeDropdown();
},
_computeShowHideText(collapsed) {
@@ -229,13 +230,7 @@
_editingChanged(editing, previousValue) {
this.$.container.classList.toggle('editing', editing);
if (editing) {
- const textarea = this.$.editTextarea.textarea;
- // Put the cursor at the end always.
- textarea.selectionStart = textarea.value.length;
- textarea.selectionEnd = textarea.selectionStart;
- this.async(() => {
- textarea.focus();
- });
+ this.$.editTextarea.putCursorAtEnd();
}
if (this.comment && this.comment.id) {
this.$$('.cancel').hidden = !editing;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment_test.html b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment_test.html
index ce3b233..4a1df77 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-comment/gr-diff-comment_test.html
@@ -79,7 +79,7 @@
'gr-formatted-text is not visible');
assert.isFalse(isVisible(element.$$('.actions')),
'actions are not visible');
- assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
+ assert.isFalse(isVisible(element.$$('gr-textarea')),
'textarea is not visible');
// The header middle content is only visible when comments are collapsed.
@@ -94,7 +94,7 @@
'gr-formatted-text is visible');
assert.isTrue(isVisible(element.$$('.actions')),
'actions are visible');
- assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
+ assert.isFalse(isVisible(element.$$('gr-textarea')),
'textarea is not visible');
assert.isFalse(isVisible(element.$$('.collapsedContent')),
'header middle content is not visible');
@@ -166,7 +166,7 @@
'gr-formatted-text is not visible');
assert.isFalse(isVisible(element.$$('.actions')),
'actions are not visible');
- assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
+ assert.isFalse(isVisible(element.$$('gr-textarea')),
'textarea is not visible');
assert.isTrue(isVisible(element.$$('.collapsedContent')),
'header middle content is visible');
@@ -177,7 +177,7 @@
'gr-formatted-text is visible');
assert.isTrue(isVisible(element.$$('.actions')),
'actions are visible');
- assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
+ assert.isFalse(isVisible(element.$$('gr-textarea')),
'textarea is not visible');
assert.isFalse(isVisible(element.$$('.collapsedContent')),
'header middle content is is not visible');
@@ -261,7 +261,7 @@
test('delete comment', done => {
sandbox.stub(
- element.$.restAPI, 'deleteComment').returns(Promise.resolve());
+ element.$.restAPI, 'deleteComment').returns(Promise.resolve({}));
sandbox.spy(element.$.overlay, 'open');
element.changeNum = 42;
element.patchNum = 0xDEADBEEF;
@@ -393,7 +393,7 @@
'gr-formatted-text is not visible');
assert.isFalse(isVisible(element.$$('.actions')),
'actions are not visible');
- assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
+ assert.isFalse(isVisible(element.$$('gr-textarea')),
'textarea is not visible');
assert.isTrue(isVisible(element.$$('.collapsedContent')),
'header middle content is visible');
@@ -404,7 +404,7 @@
'gr-formatted-text is visible');
assert.isTrue(isVisible(element.$$('.actions')),
'actions are visible');
- assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
+ assert.isFalse(isVisible(element.$$('gr-textarea')),
'textarea is not visible');
assert.isFalse(isVisible(element.$$('.collapsedContent')),
'header middle content is is not visible');
@@ -417,7 +417,7 @@
'gr-formatted-text is not visible');
assert.isTrue(isVisible(element.$$('.actions')),
'actions are visible');
- assert.isTrue(isVisible(element.$$('iron-autogrow-textarea')),
+ assert.isTrue(isVisible(element.$$('gr-textarea')),
'textarea is visible');
assert.isFalse(isVisible(element.$$('.collapsedContent')),
'header middle content is not visible');
@@ -430,7 +430,7 @@
'gr-formatted-text is not visible');
assert.isFalse(isVisible(element.$$('.actions')),
'actions are not visible');
- assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
+ assert.isFalse(isVisible(element.$$('gr-textarea')),
'textarea is not visible');
assert.isTrue(isVisible(element.$$('.collapsedContent')),
'header middle content is visible');
@@ -442,7 +442,7 @@
'gr-formatted-text is not visible');
assert.isTrue(isVisible(element.$$('.actions')),
'actions are visible');
- assert.isTrue(isVisible(element.$$('iron-autogrow-textarea')),
+ assert.isTrue(isVisible(element.$$('gr-textarea')),
'textarea is visible');
assert.isFalse(isVisible(element.$$('.collapsedContent')),
'header middle content is not visible');
@@ -500,7 +500,7 @@
});
element._messageText = 'is that the horse from horsing around??';
MockInteractions.pressAndReleaseKeyOn(
- element.$.editTextarea.textarea,
+ element.$.editTextarea.$.textarea.textarea,
83, 'ctrl'); // 'ctrl + s'
});
diff --git a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.js b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.js
index 6dbe47e..955f75d 100644
--- a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.js
+++ b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.js
@@ -133,6 +133,20 @@
}
},
+ getNativeTextarea() {
+ return this.$.textarea.textarea;
+ },
+
+ putCursorAtEnd() {
+ const textarea = this.getNativeTextarea();
+ // Put the cursor at the end always.
+ textarea.selectionStart = textarea.value.length;
+ textarea.selectionEnd = textarea.selectionStart;
+ this.async(() => {
+ textarea.focus();
+ });
+ },
+
_handleEscKey(e) {
if (this._hideAutocomplete) { return; }
e.preventDefault();
