Some UI improvements to the reviewers plugin
Use plugin provided font styles.
Make sure that repo command aligns well with other repo commands.
Specifically follow change 344117 and add a description about what
the command is doing.
Screenshot https://imgur.com/a/UpigN7P
Release-Notes: skip
Bug: Issue 16115
Change-Id: I33fd9ee812a05d1790d57651cf422ad393fd91e4
diff --git a/web/rv-edit-screen.ts b/web/rv-edit-screen.ts
index c75cafb..e8f32a1 100644
--- a/web/rv-edit-screen.ts
+++ b/web/rv-edit-screen.ts
@@ -16,7 +16,8 @@
*/
import {RepoName} from '@gerritcodereview/typescript-api/rest-api';
import {RestPluginApi} from '@gerritcodereview/typescript-api/rest';
-import {css, html, LitElement} from 'lit';
+import '@gerritcodereview/typescript-api/gerrit';
+import {css, CSSResult, html, LitElement} from 'lit';
import {customElement, property, state} from 'lit/decorators';
import './rv-filter-section';
import {Section} from './rv-filter-section';
@@ -54,7 +55,12 @@
static override get styles() {
return [
+ window.Gerrit.styles.font as CSSResult,
css`
+ h3 {
+ margin: 0;
+ padding: 0 0 var(--spacing-xl) 0;
+ }
:host {
padding: var(--spacing-xl);
display: block;
@@ -64,7 +70,7 @@
justify-content: flex-end;
}
gr-button {
- margin-left: var(--spacing-m);
+ margin-left: var(--spacing-l);
}
#filterSections {
width: 100%;
@@ -89,13 +95,14 @@
</table>
<div class="bottomButtons">
<gr-button
+ link
id="addFilterBtn"
@click="${this.handleCreateSection}"
?hidden="${!this.canModifyConfig || this.editingFilter}"
>
Add New Filter
</gr-button>
- <gr-button id="closeButton" @click="${this.handleCloseTap}">
+ <gr-button link id="closeButton" @click="${this.handleCloseTap}">
Close
</gr-button>
</div>
diff --git a/web/rv-filter-section.ts b/web/rv-filter-section.ts
index 4162df2..c903f5e 100644
--- a/web/rv-filter-section.ts
+++ b/web/rv-filter-section.ts
@@ -14,10 +14,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {css, html, LitElement} from 'lit';
+import {css, CSSResult, html, LitElement, nothing} from 'lit';
import {customElement, property, query, state} from 'lit/decorators';
import {RestPluginApi} from '@gerritcodereview/typescript-api/rest';
import {RepoName} from '@gerritcodereview/typescript-api/rest-api';
+import '@gerritcodereview/typescript-api/gerrit';
import './rv-reviewer';
import {
ReviewerAddedEventDetail,
@@ -88,6 +89,7 @@
static override get styles() {
return [
+ window.Gerrit.styles.font as CSSResult,
css`
:host {
display: block;
@@ -125,49 +127,61 @@
override render() {
return html`
<div id="container">
- <div id="filter">
- <span class="heading-3">Filter</span>
- <input
- id="filterInput"
- value="${this.filter}"
- @input="${this.onFilterInput}"
- ?disabled="${!this.canModifyConfig || this.originalFilter !== ''}"
- />
- <gr-button
- @click="${() => this.remove()}"
- ?hidden="${this.originalFilter !== '' && this.filter !== ''}"
- >
- Cancel
- </gr-button>
- </div>
+ ${this.renderFilter()}
<div>
${this.reviewers.map(item =>
this.renderReviewer(item, Type.REVIEWER)
)}
${this.ccs.map(item => this.renderReviewer(item, Type.CC))}
- <div id="addReviewer">
- <gr-button
- link
- @click="${this.handleAddReviewer}"
- ?disabled="${this.filter === ''}"
- ?hidden="${!this.canModifyConfig || this.editingReviewer}"
- >
- Add Reviewer
- </gr-button>
- <gr-button
- link
- @click="${this.handleAddCc}"
- ?disabled="${this.filter === ''}"
- ?hidden="${!this.canModifyConfig || this.editingReviewer}"
- >
- Add CC
- </gr-button>
- </div>
+ ${this.renderAddReviewer()}
</div>
</div>
`;
}
+ private renderFilter() {
+ return html`
+ <div id="filter">
+ <span class="heading-3">Filter</span>
+ <input
+ id="filterInput"
+ value="${this.filter}"
+ @input="${this.onFilterInput}"
+ ?disabled="${!this.canModifyConfig || this.originalFilter !== ''}"
+ />
+ <gr-button
+ @click="${() => this.remove()}"
+ ?hidden="${this.originalFilter !== '' && this.filter !== ''}"
+ >
+ Cancel
+ </gr-button>
+ </div>
+ `;
+ }
+
+ private renderAddReviewer() {
+ if (!this.canModifyConfig) return nothing;
+ if (this.editingReviewer) return nothing;
+ return html`
+ <div id="addReviewer">
+ <gr-button
+ link
+ @click="${this.handleAddReviewer}"
+ ?disabled="${this.filter === ''}"
+ >
+ Add Reviewer
+ </gr-button>
+ <gr-button
+ link
+ @click="${this.handleAddCc}"
+ ?disabled="${this.filter === ''}"
+ >
+ Add CC
+ </gr-button>
+ </div>
+ `;
+ }
+
private renderReviewer(reviewer: string, type: Type) {
return html`
<rv-reviewer
diff --git a/web/rv-reviewer.ts b/web/rv-reviewer.ts
index 9ac7424..4f5b7b9 100644
--- a/web/rv-reviewer.ts
+++ b/web/rv-reviewer.ts
@@ -15,8 +15,9 @@
* limitations under the License.
*/
import {customElement, property, state} from 'lit/decorators';
-import {css, html, LitElement} from 'lit';
+import {css, CSSResult, html, LitElement} from 'lit';
import {RestPluginApi} from '@gerritcodereview/typescript-api/rest';
+import '@gerritcodereview/typescript-api/gerrit';
import {
AccountInfo,
GroupInfo,
@@ -118,6 +119,7 @@
static override get styles() {
return [
+ window.Gerrit.styles.font as CSSResult,
css`
:host {
display: block;
diff --git a/web/rv-reviewers.ts b/web/rv-reviewers.ts
index bf7bf08..9e77037 100644
--- a/web/rv-reviewers.ts
+++ b/web/rv-reviewers.ts
@@ -17,8 +17,9 @@
import {RepoName} from '@gerritcodereview/typescript-api/rest-api';
import {RestPluginApi} from '@gerritcodereview/typescript-api/rest';
import {PluginApi} from '@gerritcodereview/typescript-api/plugin';
+import '@gerritcodereview/typescript-api/gerrit';
import {customElement, property, query, state} from 'lit/decorators';
-import {css, html, LitElement} from 'lit';
+import {css, CSSResult, html, LitElement} from 'lit';
import './rv-edit-screen';
// TODO: This should be defined and exposed by @gerritcodereview/typescript-api
@@ -68,6 +69,7 @@
static override get styles() {
return [
+ window.Gerrit.styles.font as CSSResult,
css`
:host {
display: block;
@@ -77,16 +79,32 @@
width: 50em;
overflow: auto;
}
+ h2 {
+ margin-top: var(--spacing-xxl);
+ margin-bottom: var(--spacing-s);
+ }
+ p {
+ padding: var(--spacing-m) 0;
+ margin: 0;
+ }
`,
];
}
override render() {
return html`
- <h3 class="heading-3">Reviewers Config</h3>
- <gr-button @click="${() => this.rvScreenOverlay?.open()}">
- Reviewers Config
- </gr-button>
+ <h2 class="heading-2">Edit reviewers config</h2>
+ <div>
+ <p>
+ Allows you to define rules for when specific groups or accounts should
+ automatically be added as reviewers or CC to a change.
+ </p>
+ </div>
+ <div>
+ <gr-button @click="${() => this.rvScreenOverlay?.open()}">
+ Edit Reviewers Config
+ </gr-button>
+ </div>
<gr-overlay id="rvScreenOverlay" with-backdrop>
<rv-edit-screen
.pluginRestApi="${this.pluginRestApi}"
