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}"