Merge "gr-account-chip to lit"
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
index ca68926..07f9a4a 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata_html.ts
@@ -184,7 +184,7 @@
<gr-account-chip
account="[[change.owner]]"
change="[[change]]"
- highlight-attention
+ highlightAttention
></gr-account-chip>
<template is="dom-if" if="[[_pushCertificateValidation]]">
<gr-tooltip-content
@@ -213,7 +213,7 @@
<gr-account-chip
account="[[_getNonOwnerRole(change, _CHANGE_ROLE.UPLOADER)]]"
change="[[change]]"
- highlight-attention
+ highlightAttention
></gr-account-chip>
</span>
</section>
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
index 25d8517..ca8bf87 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_html.ts
@@ -66,7 +66,7 @@
account="[[reviewer]]"
change="[[change]]"
on-remove="_handleRemove"
- highlight-attention
+ highlightAttention
voteable-text="[[_computeVoteableText(reviewer, change)]]"
removable="[[_computeCanRemoveReviewer(reviewer, mutable)]]"
>
diff --git a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts
index 354d360..d3f23ad 100644
--- a/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-reviewer-list/gr-reviewer-list_test.ts
@@ -67,7 +67,7 @@
await dialogShown;
});
- test('only show remove for removable reviewers', () => {
+ test('only show remove for removable reviewers', async () => {
element.mutable = true;
element.change = {
...createChange(),
@@ -112,7 +112,7 @@
},
],
};
- flush();
+ await flush();
const chips = element.root!.querySelectorAll('gr-account-chip');
assert.equal(chips.length, 4);
diff --git a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts
index dab778b..5436128 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts
+++ b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.ts
@@ -17,19 +17,14 @@
import '../gr-account-link/gr-account-link';
import '../gr-button/gr-button';
import '../gr-icons/gr-icons';
-import '../../../styles/shared-styles';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-account-chip_html';
-import {customElement, property} from '@polymer/decorators';
import {AccountInfo, ChangeInfo} from '../../../types/common';
import {appContext} from '../../../services/app-context';
+import {GrLitElement} from '../../lit/gr-lit-element';
+import {css, customElement, html, property} from 'lit-element';
+import {classMap} from 'lit-html/directives/class-map';
@customElement('gr-account-chip')
-export class GrAccountChip extends PolymerElement {
- static get template() {
- return htmlTemplate;
- }
-
+export class GrAccountChip extends GrLitElement {
/**
* Fired to indicate a key was pressed while this chip was focused.
*
@@ -64,10 +59,10 @@
@property({type: String})
voteableText?: string;
- @property({type: Boolean, reflectToAttribute: true})
+ @property({type: Boolean, reflect: true})
disabled = false;
- @property({type: Boolean, reflectToAttribute: true})
+ @property({type: Boolean, reflect: true})
removable = false;
/**
@@ -78,7 +73,7 @@
@property({type: Boolean})
highlightAttention = false;
- @property({type: Boolean, reflectToAttribute: true})
+ @property({type: Boolean, reflect: true})
showAvatar?: boolean;
@property({type: Boolean})
@@ -86,18 +81,126 @@
private readonly restApiService = appContext.restApiService;
- /** @override */
- ready() {
- super.ready();
+ static get styles() {
+ return [
+ css`
+ :host {
+ display: block;
+ overflow: hidden;
+ }
+ .container {
+ align-items: center;
+ background-color: var(--background-color-primary);
+ /** round */
+ border-radius: var(--account-chip-border-radius, 20px);
+ border: 1px solid var(--border-color);
+ display: inline-flex;
+ padding: 0 1px;
+ }
+ :host:focus {
+ border-color: transparent;
+ box-shadow: none;
+ outline: none;
+ }
+ :host:focus .container,
+ :host:focus gr-button {
+ background: #ccc;
+ }
+ .transparentBackground,
+ gr-button.transparentBackground {
+ background-color: transparent;
+ }
+ :host([disabled]) {
+ opacity: 0.6;
+ pointer-events: none;
+ }
+ iron-icon {
+ height: 1.2rem;
+ width: 1.2rem;
+ }
+ .container gr-account-link::part(gr-account-link-text) {
+ color: var(--deemphasized-text-color);
+ }
+ `,
+ ];
+ }
+
+ render() {
+ // To pass CSS mixins for @apply to Polymer components, they need to appear
+ // in <style> inside the template.
+ const customStyle = html`
+ <style>
+ .container {
+ --account-label-padding-horizontal: 6px;
+ }
+ gr-button.remove {
+ --gr-remove-button-style: {
+ border-top-width: 0;
+ border-right-width: 0;
+ border-bottom-width: 0;
+ border-left-width: 0;
+ color: var(--deemphasized-text-color);
+ font-weight: var(--font-weight-normal);
+ height: 0.6em;
+ line-height: 10px;
+ /* This cancels most of the --account-label-padding-horizontal. */
+ margin-left: -4px;
+ padding: 0 2px 0 0;
+ text-decoration: none;
+ }
+ }
+
+ gr-button.remove:hover,
+ gr-button.remove:focus {
+ --gr-button: {
+ @apply --gr-remove-button-style;
+ }
+ }
+ gr-button.remove {
+ --gr-button: {
+ @apply --gr-remove-button-style;
+ }
+ }
+ </style>
+ `;
+ return html`${customStyle}
+ <div
+ class="${classMap({
+ container: true,
+ transparentBackground: this.transparentBackground,
+ })}"
+ >
+ <gr-account-link
+ .account="${this.account}"
+ .change="${this.change}"
+ ?force-attention=${this.forceAttention}
+ ?highlight-attention=${this.highlightAttention}
+ .voteable-text=${this.voteableText}
+ >
+ </gr-account-link>
+ <gr-button
+ id="remove"
+ link=""
+ ?hidden=${!this.removable}
+ aria-label="Remove"
+ class="${classMap({
+ remove: true,
+ transparentBackground: this.transparentBackground,
+ })}"
+ @click=${this._handleRemoveTap}
+ >
+ <iron-icon icon="gr-icons:close"></iron-icon>
+ </gr-button>
+ </div>`;
+ }
+
+ constructor() {
+ super();
this._getHasAvatars().then(hasAvatars => {
this.showAvatar = hasAvatars;
});
}
- _getBackgroundClass(transparent: boolean) {
- return transparent ? 'transparentBackground' : '';
- }
-
_handleRemoveTap(e: MouseEvent) {
e.preventDefault();
this.dispatchEvent(
diff --git a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip_html.ts b/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip_html.ts
deleted file mode 100644
index 52a5985..0000000
--- a/polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip_html.ts
+++ /dev/null
@@ -1,114 +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: block;
- overflow: hidden;
- }
- .container {
- align-items: center;
- background-color: var(--background-color-primary);
- /** round */
- border-radius: var(--account-chip-border-radius, 20px);
- border: 1px solid var(--border-color);
- display: inline-flex;
- padding: 0 1px;
-
- --account-label-padding-horizontal: 6px;
- }
- .container gr-account-link::part(gr-account-link-text) {
- color: var(--deemphasized-text-color);
- }
- :host([show-avatar]) .container {
- }
- :host([removable]) .container {
- }
- gr-button.remove {
- --gr-remove-button-style: {
- border-top-width: 0;
- border-right-width: 0;
- border-bottom-width: 0;
- border-left-width: 0;
- color: var(--deemphasized-text-color);
- font-weight: var(--font-weight-normal);
- height: 0.6em;
- line-height: 10px;
- /* This cancels most of the --account-label-padding-horizontal. */
- margin-left: -4px;
- padding: 0 2px 0 0;
- text-decoration: none;
- }
- }
-
- gr-button.remove:hover,
- gr-button.remove:focus {
- --gr-button: {
- @apply --gr-remove-button-style;
- }
- }
- gr-button.remove {
- --gr-button: {
- @apply --gr-remove-button-style;
- }
- }
- :host:focus {
- border-color: transparent;
- box-shadow: none;
- outline: none;
- }
- :host:focus .container,
- :host:focus gr-button {
- background: #ccc;
- }
- .transparentBackground,
- gr-button.transparentBackground {
- background-color: transparent;
- }
- :host([disabled]) {
- opacity: 0.6;
- pointer-events: none;
- }
- iron-icon {
- height: 1.2rem;
- width: 1.2rem;
- }
- </style>
- <div class$="container [[_getBackgroundClass(transparentBackground)]]">
- <gr-account-link
- account="[[account]]"
- change="[[change]]"
- force-attention="[[forceAttention]]"
- highlight-attention="[[highlightAttention]]"
- voteable-text="[[voteableText]]"
- >
- </gr-account-link>
- <gr-button
- id="remove"
- link=""
- hidden$="[[!removable]]"
- hidden=""
- aria-label="Remove"
- class$="remove [[_getBackgroundClass(transparentBackground)]]"
- on-click="_handleRemoveTap"
- >
- <iron-icon icon="gr-icons:close"></iron-icon>
- </gr-button>
- </div>
-`;
