Move gr-overlay to dialog element for rv-reviewers plugin
Release-Notes: skip
Google-Bug-Id: b/268160926
Change-Id: I76adcad53493d3e0dc81d0d64eccdb8c1806edb5
diff --git a/web/rv-reviewers.ts b/web/rv-reviewers.ts
index 9e77037..847812d 100644
--- a/web/rv-reviewers.ts
+++ b/web/rv-reviewers.ts
@@ -22,13 +22,6 @@
import {css, CSSResult, html, LitElement} from 'lit';
import './rv-edit-screen';
-// TODO: This should be defined and exposed by @gerritcodereview/typescript-api
-type GrOverlay = Element & {
- open(): void;
- close(): void;
- fit(): void;
-};
-
declare global {
interface HTMLElementTagNameMap {
'rv-reviewers': RvReviewers;
@@ -47,8 +40,8 @@
@customElement('rv-reviewers')
export class RvReviewers extends LitElement {
- @query('#rvScreenOverlay')
- rvScreenOverlay?: GrOverlay;
+ @query('#rvScreenModal')
+ rvScreenModal?: HTMLDialogElement;
/** Guaranteed to be set by the `repo-command` endpoint. */
@property({type: Object})
@@ -70,12 +63,13 @@
static override get styles() {
return [
window.Gerrit.styles.font as CSSResult,
+ window.Gerrit.styles.modal as CSSResult,
css`
:host {
display: block;
margin-bottom: var(--spacing-xxl);
}
- #rvScreenOverlay {
+ #rvScreenModal {
width: 50em;
overflow: auto;
}
@@ -97,25 +91,24 @@
<div>
<p>
Allows you to define rules for when specific groups or accounts should
- automatically be added as reviewers or CC to a change.
+ automatically be added as reviewers or CCs to a change.
</p>
</div>
<div>
- <gr-button @click="${() => this.rvScreenOverlay?.open()}">
+ <gr-button @click="${() => this.rvScreenModal?.showModal()}">
Edit Reviewers Config
</gr-button>
</div>
- <gr-overlay id="rvScreenOverlay" with-backdrop>
+ <dialog id="rvScreenModal">
<rv-edit-screen
.pluginRestApi="${this.pluginRestApi}"
.repoName="${this.repoName}"
.loading="${this.loading}"
.canModifyConfig="${this.canModifyConfig}"
- @close="${() => this.rvScreenOverlay?.close()}"
- @fit="${() => this.rvScreenOverlay?.fit()}"
+ @close="${() => this.rvScreenModal?.close()}"
>
</rv-edit-screen>
- </gr-overlay>
+ </dialog>
`;
}
