PolyGerrit diff comment tweaks
+ Use buttons instead of links so that the space bar can be used
to activate them as well as enter.
+ Allow 'esc' as a shortcut to cancel.
+ Add 2px padding to the textarea so that it matches the mirror
it uses internally and resizes correctly.
Bug: Issue 3780
Change-Id: Iad9dc96274af6946f3632be53b106ef80f7ba6ca
diff --git a/polygerrit-ui/app/elements/gr-diff-comment.html b/polygerrit-ui/app/elements/gr-diff-comment.html
index c152654..10a3ba5 100644
--- a/polygerrit-ui/app/elements/gr-diff-comment.html
+++ b/polygerrit-ui/app/elements/gr-diff-comment.html
@@ -25,6 +25,9 @@
:host {
background-color: #ffd;
display: block;
+ --iron-autogrow-textarea: {
+ padding: 2px;
+ };
}
:host([disabled]) {
pointer-events: none;
@@ -74,11 +77,9 @@
padding-top: 0;
}
.action {
- margin-right: 1em;
- }
- .action[disabled] {
- opacity: .5;
- pointer-events: none;
+ cursor: pointer;
+ margin-right: .5em;
+ padding: .2em .6em .3em;
}
.danger {
display: flex;
@@ -134,18 +135,18 @@
disabled="{{disabled}}"
rows="4"
bind-value="{{_editDraft}}"
- on-keyup="_handleTextareaKeyup"></iron-autogrow-textarea>
+ on-keyup="_handleTextareaKeyup"
+ on-keydown="_handleTextareaKeydown"></iron-autogrow-textarea>
<div class="message">[[comment.message]]</div>
<div class="actions" hidden$="[[!showActions]]">
- <a class="action reply" href="#" on-tap="_handleReply">Reply</a>
- <a class="action done" href="#" on-tap="_handleDone">Done</a>
- <a class="action edit" href="#" on-tap="_handleEdit">Edit</a>
- <a class="action save" href="#"
- disabled$="[[_computeSaveDisabled(_editDraft)]]"
- on-tap="_handleSave">Save</a>
- <a class="action cancel" href="#" on-tap="_handleCancel">Cancel</a>
+ <button class="action reply" on-tap="_handleReply">Reply</button>
+ <button class="action done" on-tap="_handleDone">Done</button>
+ <button class="action edit" on-tap="_handleEdit">Edit</button>
+ <button class="action save" on-tap="_handleSave"
+ disabled$="[[_computeSaveDisabled(_editDraft)]]">Save</button>
+ <button class="action cancel" on-tap="_handleCancel">Cancel</button>
<div class="danger">
- <a class="action discard" href="#" on-tap="_handleDiscard">Discard</a>
+ <button class="action discard" on-tap="_handleDiscard">Discard</button>
</div>
</div>
</div>
@@ -274,6 +275,12 @@
this._heightChanged();
},
+ _handleTextareaKeydown: function(e) {
+ if (e.keyCode == 27) { // 'esc'
+ this._handleCancel(e);
+ }
+ },
+
_handleLinkTap: function(e) {
e.preventDefault();
var hash = this._computeLinkToComment(this.comment);
diff --git a/polygerrit-ui/app/test/gr-diff-comment-test.html b/polygerrit-ui/app/test/gr-diff-comment-test.html
index 050a1a0..d6e46bd 100644
--- a/polygerrit-ui/app/test/gr-diff-comment-test.html
+++ b/polygerrit-ui/app/test/gr-diff-comment-test.html
@@ -190,12 +190,14 @@
var numDiscardEvents = 0;
element.addEventListener('discard', function(e) {
numDiscardEvents++;
- if (numDiscardEvents == 2) {
+ if (numDiscardEvents == 3) {
done();
}
});
MockInteractions.tap(element.$$('.cancel'));
MockInteractions.tap(element.$$('.discard'));
+ MockInteractions.pressAndReleaseKeyOn(
+ element.$.editTextarea.textarea, 27); // 'esc'
});
test('draft saving/editing', function(done) {
