Show reviewers next to each other
This affects only <gr-reviewer-list>, which is only used in
<gr-change-metadata>.
The goal is show more reviewers using the same amount of space. With the
new ability to show first names only two reviewers easily fit on one
row. So the metadata will consume less vertical space, or we can show
more reviewers using the same space.
Example screenshots:
Before: https://imgur.com/a/FmvUk6L
After: https://imgur.com/a/CHlM5vo
Change-Id: I23dd2080a7f0526f2d258f92c0bf8b6d356ea05b
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.html b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.html
index d97bf6b..9e51d16 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.html
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.html
@@ -40,6 +40,7 @@
setup(() => {
element = fixture('basic');
+ element.serverConfig = {};
sandbox = sinon.sandbox.create();
stub('gr-rest-api-interface', {
getConfig() { return Promise.resolve({}); },
@@ -198,9 +199,32 @@
{value: {ccsOnly: true}});
});
- test('no show all reviewers button with 6 reviewers', () => {
+ test('dont show all reviewers button with 4 reviewers', () => {
const reviewers = [];
- element.maxReviewersDisplayed = 5;
+ element.maxReviewersDisplayed = 3;
+ for (let i = 0; i < 4; i++) {
+ reviewers.push(
+ {email: i+'reviewer@google.com', name: 'reviewer-' + i});
+ }
+ element.ccsOnly = true;
+
+ element.change = {
+ owner: {
+ _account_id: 1,
+ },
+ reviewers: {
+ CC: reviewers,
+ },
+ };
+ assert.equal(element._hiddenReviewerCount, 0);
+ assert.equal(element._displayedReviewers.length, 4);
+ assert.equal(element._reviewers.length, 4);
+ assert.isTrue(element.shadowRoot
+ .querySelector('.hiddenReviewers').hidden);
+ });
+
+ test('show all reviewers button with 6 reviewers', () => {
+ const reviewers = [];
for (let i = 0; i < 6; i++) {
reviewers.push(
{email: i+'reviewer@google.com', name: 'reviewer-' + i});
@@ -215,63 +239,15 @@
CC: reviewers,
},
};
- assert.equal(element._hiddenReviewerCount, 0);
- assert.equal(element._displayedReviewers.length, 6);
- assert.equal(element._reviewers.length, 6);
- assert.isTrue(element.shadowRoot
- .querySelector('.hiddenReviewers').hidden);
- });
-
- test('show all reviewers button with 8 reviewers', () => {
- const reviewers = [];
- element.maxReviewersDisplayed = 5;
- for (let i = 0; i < 8; i++) {
- reviewers.push(
- {email: i+'reviewer@google.com', name: 'reviewer-' + i});
- }
- element.ccsOnly = true;
-
- element.change = {
- owner: {
- _account_id: 1,
- },
- reviewers: {
- CC: reviewers,
- },
- };
assert.equal(element._hiddenReviewerCount, 3);
- assert.equal(element._displayedReviewers.length, 5);
- assert.equal(element._reviewers.length, 8);
+ assert.equal(element._displayedReviewers.length, 3);
+ assert.equal(element._reviewers.length, 6);
assert.isFalse(element.shadowRoot
.querySelector('.hiddenReviewers').hidden);
});
- test('no maxReviewersDisplayed', () => {
- const reviewers = [];
- for (let i = 0; i < 7; i++) {
- reviewers.push(
- {email: i+'reviewer@google.com', name: 'reviewer-' + i});
- }
- element.ccsOnly = true;
-
- element.change = {
- owner: {
- _account_id: 1,
- },
- reviewers: {
- CC: reviewers,
- },
- };
- assert.equal(element._hiddenReviewerCount, 0);
- assert.equal(element._displayedReviewers.length, 7);
- assert.equal(element._reviewers.length, 7);
- assert.isTrue(element.shadowRoot
- .querySelector('.hiddenReviewers').hidden);
- });
-
test('show all reviewers button', () => {
const reviewers = [];
- element.maxReviewersDisplayed = 5;
for (let i = 0; i < 100; i++) {
reviewers.push(
{email: i+'reviewer@google.com', name: 'reviewer-' + i});
@@ -286,8 +262,8 @@
CC: reviewers,
},
};
- assert.equal(element._hiddenReviewerCount, 95);
- assert.equal(element._displayedReviewers.length, 5);
+ assert.equal(element._hiddenReviewerCount, 97);
+ assert.equal(element._displayedReviewers.length, 3);
assert.equal(element._reviewers.length, 100);
assert.isFalse(element.shadowRoot
.querySelector('.hiddenReviewers').hidden);
