Basic styles for add reviewer/cc flow
https://imgur.com/a/avi9I7u
Google-Bug-Id: b/216478677
Release-Notes: skip
Change-Id: I76f71bc9b4883275d3cbd68bdd299f51afb61930
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow.ts
index 7029ad6..b504ea22 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow.ts
@@ -3,7 +3,7 @@
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
-import {html, LitElement} from 'lit';
+import {css, html, LitElement} from 'lit';
import {customElement, query, state} from 'lit/decorators';
import {ProgressStatus, ReviewerState} from '../../../constants/constants';
import {bulkActionsModelToken} from '../../../models/bulk-actions/bulk-actions-model';
@@ -53,6 +53,23 @@
private restApiService = getAppContext().restApiService;
+ static override get styles() {
+ return css`
+ gr-dialog {
+ width: 60em;
+ }
+ .grid {
+ display: grid;
+ grid-template-columns: min-content 1fr;
+ column-gap: var(--spacing-l);
+ }
+ gr-account-list {
+ display: flex;
+ flex-wrap: wrap;
+ }
+ `;
+ }
+
override connectedCallback(): void {
super.connectedCallback();
subscribe(
@@ -84,19 +101,15 @@
.disabled=${overallStatus === ProgressStatus.RUNNING}
>
<div slot="header">Add Reviewer / CC</div>
- <div slot="main">
- <div>
- <span>Reviewers</span>
- ${this.renderAccountList(
- ReviewerState.REVIEWER,
- 'reviewer-list',
- 'Add reviewer'
- )}
- </div>
- <div>
- <span>CC</span>
- ${this.renderAccountList(ReviewerState.CC, 'cc-list', 'Add CC')}
- </div>
+ <div slot="main" class="grid">
+ <span>Reviewers</span>
+ ${this.renderAccountList(
+ ReviewerState.REVIEWER,
+ 'reviewer-list',
+ 'Add reviewer'
+ )}
+ <span>CC</span>
+ ${this.renderAccountList(ReviewerState.CC, 'cc-list', 'Add CC')}
</div>
</gr-dialog>
</gr-overlay>
@@ -186,7 +199,7 @@
private getConfirmLabel(overallStatus: ProgressStatus) {
return overallStatus === ProgressStatus.NOT_STARTED
- ? 'Apply'
+ ? 'Add'
: overallStatus === ProgressStatus.RUNNING
? 'Running'
: 'Close';
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow_test.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow_test.ts
index 4e9e790..ffb21af 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow_test.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-reviewer-flow/gr-change-list-reviewer-flow_test.ts
@@ -107,15 +107,11 @@
>
<gr-dialog role="dialog">
<div slot="header">Add Reviewer / CC</div>
- <div slot="main">
- <div>
- <span>Reviewers</span>
- <gr-account-list id="reviewer-list"></gr-account-list>
- </div>
- <div>
- <span>CC</span>
- <gr-account-list id="cc-list"></gr-account-list>
- </div>
+ <div slot="main" class="grid">
+ <span>Reviewers</span>
+ <gr-account-list id="reviewer-list"></gr-account-list>
+ <span>CC</span>
+ <gr-account-list id="cc-list"></gr-account-list>
</div>
</gr-dialog>
</gr-overlay>
@@ -233,7 +229,7 @@
});
test('confirm button text updates', async () => {
- assert.equal(dialog.confirmLabel, 'Apply');
+ assert.equal(dialog.confirmLabel, 'Add');
dialog.confirmButton!.click();
await element.updateComplete;
