Convert gr-account-dropdown to lit element
Change-Id: I538eda81c000984e7f7c4b2bef7c7230a0f4202d
diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.ts b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.ts
index 90eebc7..658959b 100644
--- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.ts
+++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.ts
@@ -14,14 +14,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import '../../shared/gr-button/gr-button';
import '../../shared/gr-dropdown/gr-dropdown';
-import '../../../styles/shared-styles';
import '../../shared/gr-avatar/gr-avatar';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-account-dropdown_html';
import {getUserName} from '../../../utils/display-name-util';
-import {customElement, property} from '@polymer/decorators';
import {AccountInfo, ServerInfo} from '../../../types/common';
import {appContext} from '../../../services/app-context';
import {fireEvent} from '../../../utils/event-util';
@@ -29,6 +24,9 @@
DropdownContent,
DropdownLink,
} from '../../shared/gr-dropdown/gr-dropdown';
+import {sharedStyles} from '../../../styles/shared-styles';
+import {GrLitElement} from '../../lit/gr-lit-element';
+import {css, customElement, html, property} from 'lit-element';
const INTERPOLATE_URL_PATTERN = /\${([\w]+)}/g;
@@ -39,23 +37,13 @@
}
@customElement('gr-account-dropdown')
-export class GrAccountDropdown extends PolymerElement {
- static get template() {
- return htmlTemplate;
- }
-
+export class GrAccountDropdown extends GrLitElement {
@property({type: Object})
account?: AccountInfo;
@property({type: Object})
config?: ServerInfo;
- @property({type: Array, computed: '_getLinks(_switchAccountUrl, _path)'})
- links?: DropdownLink[];
-
- @property({type: Array, computed: '_getTopContent(account)'})
- topContent?: DropdownContent[];
-
@property({type: String})
_path = '/';
@@ -90,13 +78,72 @@
super.disconnectedCallback();
}
+ static get styles() {
+ return [
+ sharedStyles,
+ css`
+ gr-dropdown {
+ padding: 0 var(--spacing-m);
+ }
+ gr-avatar {
+ height: 2em;
+ width: 2em;
+ vertical-align: middle;
+ }
+ `,
+ ];
+ }
+
+ render() {
+ // To pass CSS mixins for @apply to Polymer components, they need to appear
+ // in <style> inside the template.
+ const customStyle = html`
+ <style>
+ gr-dropdown {
+ --gr-button: {
+ color: var(--header-text-color);
+ }
+ --gr-dropdown-item: {
+ color: var(--primary-text-color);
+ }
+ }
+ </style>
+ `;
+ return html`${customStyle}
+ <gr-dropdown
+ link=""
+ .items="${this.links}"
+ .top-content="${this.topContent}"
+ @tap-item-shortcuts=${this._handleShortcutsTap}
+ .horizontal-align="right"
+ >
+ <span ?hidden=${this._hasAvatars}
+ >${this._accountName(this.account)}</span
+ >
+ <gr-avatar
+ .account="${this.account}"
+ ?hidden=${!this._hasAvatars}
+ .imageSize="56"
+ aria-label="Account avatar"
+ ></gr-avatar>
+ </gr-dropdown>`;
+ }
+
+ get links(): DropdownLink[] | undefined {
+ return this._getLinks(this._switchAccountUrl, this._path);
+ }
+
+ get topContent(): DropdownContent[] | undefined {
+ return this._getTopContent(this.account);
+ }
+
_getLinks(switchAccountUrl?: string, path?: string) {
// Polymer 2: check for undefined
if (switchAccountUrl === undefined || path === undefined) {
return undefined;
}
- const links = [];
+ const links: DropdownLink[] = [];
links.push({name: 'Settings', url: '/settings/'});
links.push({name: 'Keyboard Shortcuts', id: 'shortcuts'});
if (switchAccountUrl) {
@@ -112,7 +159,7 @@
return [
{text: this._accountName(account), bold: true},
{text: account?.email ? account.email : ''},
- ];
+ ] as DropdownContent[];
}
_handleShortcutsTap() {
diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_html.ts b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_html.ts
deleted file mode 100644
index 97f4a89..0000000
--- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_html.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * @license
- * Copyright (C) 2020 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import {html} from '@polymer/polymer/lib/utils/html-tag';
-
-export const htmlTemplate = html`
- <style include="shared-styles">
- gr-dropdown {
- padding: 0 var(--spacing-m);
- --gr-button: {
- color: var(--header-text-color);
- }
- --gr-dropdown-item: {
- color: var(--primary-text-color);
- }
- }
- gr-avatar {
- height: 2em;
- width: 2em;
- vertical-align: middle;
- }
- </style>
- <gr-dropdown
- link=""
- items="[[links]]"
- top-content="[[topContent]]"
- on-tap-item-shortcuts="_handleShortcutsTap"
- horizontal-align="right"
- >
- <span hidden$="[[_hasAvatars]]" hidden="">[[_accountName(account)]]</span>
- <gr-avatar
- account="[[account]]"
- hidden$="[[!_hasAvatars]]"
- hidden=""
- imageSize="56"
- aria-label="Account avatar"
- ></gr-avatar>
- </gr-dropdown>
-`;
