gr-avatar to lit element
lit-element is not using camelToDashcase, so image-size was changed
to imageSize.
Change-Id: I061c6d8d7e8ff05c09030035b01a6eb1e1928d5d
diff --git a/polygerrit-ui/app/elements/change-list/gr-user-header/gr-user-header_html.ts b/polygerrit-ui/app/elements/change-list/gr-user-header/gr-user-header_html.ts
index 1924a66..42a6847 100644
--- a/polygerrit-ui/app/elements/change-list/gr-user-header/gr-user-header_html.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-user-header/gr-user-header_html.ts
@@ -29,7 +29,7 @@
</style>
<gr-avatar
account="[[_accountDetails]]"
- image-size="100"
+ imageSize="100"
aria-label="Account avatar"
></gr-avatar>
<div class="info">
diff --git a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
index bd9103e..90f8a67 100644
--- a/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-summary/gr-change-summary.ts
@@ -561,7 +561,7 @@
account =>
html`<gr-avatar
.account="${account}"
- image-size="32"
+ imageSize="32"
></gr-avatar>`
)}
${countUnresolvedComments} unresolved</gr-summary-chip
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
index 0fa2f1e..97f4a89 100644
--- 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
@@ -45,7 +45,7 @@
account="[[account]]"
hidden$="[[!_hasAvatars]]"
hidden=""
- image-size="56"
+ imageSize="56"
aria-label="Account avatar"
></gr-avatar>
</gr-dropdown>
diff --git a/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info_html.ts b/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info_html.ts
index 6ca484d..e530ac8 100644
--- a/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info_html.ts
+++ b/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info_html.ts
@@ -35,7 +35,7 @@
<section>
<span class="title"></span>
<span class="value">
- <gr-avatar account="[[_account]]" image-size="120"></gr-avatar>
+ <gr-avatar account="[[_account]]" imageSize="120"></gr-avatar>
</span>
</section>
<section class$="[[_hideAvatarChangeUrl(_avatarChangeUrl)]]">
diff --git a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.ts b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.ts
index be590b1..a642337 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-account-label/gr-account-label_html.ts
@@ -128,7 +128,7 @@
class$="[[_computeHasAttentionClass(highlightAttention, account, change, forceAttention)]]"
>
<template is="dom-if" if="[[!hideAvatar]]">
- <gr-avatar account="[[account]]" image-size="32"></gr-avatar>
+ <gr-avatar account="[[account]]" imageSize="32"></gr-avatar>
</template>
<span class="text">
<span class="name">[[_computeName(account, _config, firstName)]]</span>
diff --git a/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.ts b/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.ts
index e30e995..80576a7 100644
--- a/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.ts
+++ b/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.ts
@@ -14,22 +14,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import '../../../styles/shared-styles';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-avatar_html';
import {getBaseUrl} from '../../../utils/url-util';
import {getPluginLoader} from '../gr-js-api-interface/gr-plugin-loader';
-import {customElement, property} from '@polymer/decorators';
import {AccountInfo} from '../../../types/common';
import {appContext} from '../../../services/app-context';
+import {GrLitElement} from '../../lit/gr-lit-element';
+import {css, customElement, html, property} from 'lit-element';
@customElement('gr-avatar')
-export class GrAvatar extends PolymerElement {
- static get template() {
- return htmlTemplate;
- }
-
- @property({type: Object, observer: '_accountChanged'})
+export class GrAvatar extends GrLitElement {
+ @property({type: Object})
account?: AccountInfo;
@property({type: Number})
@@ -40,6 +34,27 @@
private readonly restApiService = appContext.restApiService;
+ static get styles() {
+ return [
+ css`
+ :host {
+ display: inline-block;
+ border-radius: 50%;
+ background-size: cover;
+ background-color: var(
+ --avatar-background-color,
+ var(--gray-background)
+ );
+ }
+ `,
+ ];
+ }
+
+ render() {
+ this._updateAvatarURL();
+ return html``;
+ }
+
/** @override */
connectedCallback() {
super.connectedCallback();
@@ -57,10 +72,6 @@
return this.restApiService.getConfig();
}
- _accountChanged() {
- this._updateAvatarURL();
- }
-
_updateAvatarURL() {
if (!this._hasAvatars || !this.account) {
this.hidden = true;
@@ -80,7 +91,7 @@
);
}
- _buildAvatarURL(account: AccountInfo) {
+ _buildAvatarURL(account?: AccountInfo) {
if (!account) {
return '';
}
diff --git a/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar_html.ts b/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar_html.ts
deleted file mode 100644
index a1e51df..0000000
--- a/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar_html.ts
+++ /dev/null
@@ -1,28 +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>
- :host {
- display: inline-block;
- border-radius: 50%;
- background-size: cover;
- background-color: var(--avatar-background-color, var(--gray-background));
- }
- </style>
-`;
diff --git a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.ts b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.ts
index d0986de..dac5962 100644
--- a/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.ts
+++ b/polygerrit-ui/app/elements/shared/gr-hovercard-account/gr-hovercard-account_html.ts
@@ -75,7 +75,7 @@
<template is="dom-if" if="[[_isShowing]]">
<div class="top">
<div class="avatar">
- <gr-avatar account="[[account]]" image-size="56"></gr-avatar>
+ <gr-avatar account="[[account]]" imageSize="56"></gr-avatar>
</div>
<div class="account">
<h3 class="name heading-3">[[account.name]]</h3>
