Keyboard shortcuts to expand and collapse all comments
This change adds keyboard shortcuts to the "gr-diff-comment-thread"
expand all comments when 'e' is pressed and collapse all comments when
'shift + e' is pressed. Note that the keyboard event is detected on the
thread instead of the comment to minimize the number of events getting
triggered.
Feature: Issue 4738
Change-Id: Iab77349bd1527d7af5e05a827919a78a86909835
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 864712d..ebb1f87 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
@@ -170,9 +170,9 @@
<div class="show-hide">
<label class="show-hide">
<input type="checkbox" class="show-hide"
- checked$="[[_commentCollapsed]]"
+ checked$="[[collapsed]]"
on-change="_handleToggleCollapsed">
- [[_computeShowHideText(_commentCollapsed)]]
+ [[_computeShowHideText(collapsed)]]
</label>
</div>
</div>
@@ -186,7 +186,7 @@
<gr-linked-text class="message"
pre
content="[[comment.message]]"
- collapsed="[[_commentCollapsed]]"
+ collapsed="[[collapsed]]"
config="[[projectConfig.commentlinks]]"></gr-linked-text>
<div class="actions" hidden$="[[!showActions]]">
<gr-button class="action reply" on-tap="_handleReply">Reply</gr-button>
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 791f949..2abd0a8 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
@@ -81,7 +81,7 @@
},
patchNum: String,
showActions: Boolean,
- _commentCollapsed: {
+ collapsed: {
type: Boolean,
value: true,
observer: '_toggleCollapseClass',
@@ -103,7 +103,7 @@
attached: function() {
if (this.editing) {
- this._commentCollapsed = false;
+ this.collapsed = false;
}
},
@@ -226,11 +226,11 @@
},
_handleToggleCollapsed: function() {
- this._commentCollapsed = !this._commentCollapsed;
+ this.collapsed = !this.collapsed;
},
- _toggleCollapseClass: function(_commentCollapsed) {
- if (_commentCollapsed) {
+ _toggleCollapseClass: function(collapsed) {
+ if (collapsed) {
this.$.container.classList.add('collapsed');
} else {
this.$.container.classList.remove('collapsed');
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 b05746e..0a591ae 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
@@ -66,6 +66,7 @@
test('collapsible comments', function() {
// When a comment (not draft) is loaded, it should be collapsed
+ assert.isTrue(element.collapsed);
assert.isFalse(isVisible(element.$$('gr-linked-text')),
'gr-linked-text is not visible');
assert.isFalse(isVisible(element.$$('.actions')),
@@ -80,6 +81,7 @@
// When the header row is clicked, the comment should expand
MockInteractions.tap(element.$.header);
+ assert.isFalse(element.collapsed);
assert.isTrue(isVisible(element.$$('gr-linked-text')),
'gr-linked-text is visible');
assert.isTrue(isVisible(element.$$('.actions')),
@@ -124,6 +126,29 @@
'Should navigate to ' + dest + ' without triggering nav');
showStub.restore();
});
+
+ test('comment expand and collapse', function() {
+ element.collapsed = true;
+ assert.isFalse(isVisible(element.$$('gr-linked-text')),
+ 'gr-linked-text is not visible');
+ assert.isFalse(isVisible(element.$$('.actions')),
+ 'actions are not visible');
+ assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
+ 'textarea is not visible');
+ assert.isTrue(isVisible(element.$$('.collapsedContent')),
+ 'header middle content is visible');
+
+ element.collapsed = false;
+ assert.isFalse(element.collapsed);
+ assert.isTrue(isVisible(element.$$('gr-linked-text')),
+ 'gr-linked-text is visible');
+ assert.isTrue(isVisible(element.$$('.actions')),
+ 'actions are visible');
+ assert.isFalse(isVisible(element.$$('iron-autogrow-textarea')),
+ 'textarea is not visible');
+ assert.isFalse(isVisible(element.$$('.collapsedContent')),
+ 'header middle content is is not visible');
+ });
});
suite('gr-diff-comment draft tests', function() {
@@ -213,6 +238,7 @@
assert.ok(e.detail.comment);
done();
});
+ assert.isTrue(element.collapsed);
assert.isFalse(isVisible(element.$$('gr-linked-text')),
'gr-linked-text is not visible');
assert.isFalse(isVisible(element.$$('.actions')),
@@ -223,6 +249,7 @@
'header middle content is visible');
MockInteractions.tap(element.$.header);
+ assert.isFalse(element.collapsed);
assert.isTrue(isVisible(element.$$('gr-linked-text')),
'gr-linked-text is visible');
assert.isTrue(isVisible(element.$$('.actions')),
@@ -235,6 +262,7 @@
// When the edit button is pressed, should still see the actions
// and also textarea
MockInteractions.tap(element.$$('.edit'));
+ assert.isFalse(element.collapsed);
assert.isFalse(isVisible(element.$$('gr-linked-text')),
'gr-linked-text is not visible');
assert.isTrue(isVisible(element.$$('.actions')),
@@ -247,6 +275,7 @@
// When toggle again, everything should be hidden except for textarea
// and header middle content should be visible
MockInteractions.tap(element.$.header);
+ assert.isTrue(element.collapsed);
assert.isFalse(isVisible(element.$$('gr-linked-text')),
'gr-linked-text is not visible');
assert.isFalse(isVisible(element.$$('.actions')),
