jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace some paper-items by list-item (#19314)

Browse Source 
* system log card

* cloud login

* cloud account

* ha config voice assistants assistants

* ha config person

* ha-device-entities-card

* cloud login

* change --paper-item-icon-color into --state-icon-color

* Apply code review

* Revert "change --paper-item-icon-color into --state-icon-color"

This reverts commit b91ef0017ea9a6faf67aac9448706efed4f2c025.

* Remove unneeded mwc-lists
This commit is contained in:
Simon Lamon 2024-01-15 15:41:05 +01:00 committed by GitHub
parent b801441201
commit 2053cf23c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 91 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/panels/config/cloud/account/cloud-account.ts
View File

@ -1,6 +1,4 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-item/paper-item-body";
import { css, html, LitElement, PropertyValues } from "lit"; import { css, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { formatDateTime } from "../../../../common/datetime/format_date_time"; import { formatDateTime } from "../../../../common/datetime/format_date_time";
@ -10,6 +8,7 @@ import { debounce } from "../../../../common/util/debounce";
import "../../../../components/ha-alert"; import "../../../../components/ha-alert";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-tip"; import "../../../../components/ha-tip";
import "../../../../components/ha-list-item";
import { import {
cloudLogout, cloudLogout,
CloudStatusLoggedIn, CloudStatusLoggedIn,
@ -65,12 +64,12 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
)} )}
> >
<div class="account-row"> <div class="account-row">
<paper-item-body two-line> <ha-list-item twoline>
${this.cloudStatus.email.replace( ${this.cloudStatus.email.replace(
/(\w{3})[\w.-]+@([\w.]+\w)/, /(\w{3})[\w.-]+@([\w.]+\w)/,
"$1***@$2" "$1***@$2"
)} )}
<div secondary class="wrap"> <span slot="secondary" class="wrap">
${this._subscription ${this._subscription
? this._subscription.human_description.replace( ? this._subscription.human_description.replace(
"{periodEnd}", "{periodEnd}",
@ -87,8 +86,8 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
: this.hass.localize( : this.hass.localize(
"ui.panel.config.cloud.account.fetching_subscription" "ui.panel.config.cloud.account.fetching_subscription"
)} )}
</div> </span>
</paper-item-body> </ha-list-item>
</div> </div>
${this.cloudStatus.cloud === "connecting" && ${this.cloudStatus.cloud === "connecting" &&
@ -103,12 +102,10 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
: ""} : ""}
<div class="account-row"> <div class="account-row">
<paper-item-body> <ha-list-item>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.cloud.account.connection_status" "ui.panel.config.cloud.account.connection_status"
)} )}:
</paper-item-body>
<div class="status">
${this.cloudStatus.cloud === "connected" ${this.cloudStatus.cloud === "connected"
? this.hass.localize( ? this.hass.localize(
"ui.panel.config.cloud.account.connected" "ui.panel.config.cloud.account.connected"
@ -120,7 +117,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
: this.hass.localize( : this.hass.localize(
"ui.panel.config.cloud.account.connecting" "ui.panel.config.cloud.account.connecting"
)} )}
</div> </ha-list-item>
</div> </div>
<div class="card-actions"> <div class="card-actions">

21
src/panels/config/cloud/login/cloud-login.ts
View File

@ -1,6 +1,5 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@polymer/paper-item/paper-item"; import "@material/mwc-list/mwc-list";
import "@polymer/paper-item/paper-item-body";
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
@ -9,6 +8,7 @@ import "../../../../components/buttons/ha-progress-button";
import "../../../../components/ha-alert"; import "../../../../components/ha-alert";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-icon-next"; import "../../../../components/ha-icon-next";
import "../../../../components/ha-list-item";
import type { HaTextField } from "../../../../components/ha-textfield"; import type { HaTextField } from "../../../../components/ha-textfield";
import "../../../../components/ha-textfield"; import "../../../../components/ha-textfield";
import { cloudLogin } from "../../../../data/cloud"; import { cloudLogin } from "../../../../data/cloud";
@ -166,19 +166,19 @@ export class CloudLogin extends LitElement {
</ha-card> </ha-card>
<ha-card outlined> <ha-card outlined>
<paper-item @click=${this._handleRegister}> <mwc-list>
<paper-item-body two-line> <ha-list-item @click=${this._handleRegister} twoline hasMeta>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.cloud.login.start_trial" "ui.panel.config.cloud.login.start_trial"
)} )}
<div secondary> <span slot="secondary">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.cloud.login.trial_info" "ui.panel.config.cloud.login.trial_info"
)} )}
</div> </span>
</paper-item-body> <ha-icon-next slot="meta"></ha-icon-next>
<ha-icon-next></ha-icon-next> </ha-list-item>
</paper-item> </mwc-list>
</ha-card> </ha-card>
</ha-config-section> </ha-config-section>
</div> </div>
@ -293,9 +293,6 @@ export class CloudLogin extends LitElement {
[slot="introduction"] a { [slot="introduction"] a {
color: var(--primary-color); color: var(--primary-color);
} }
paper-item {
cursor: pointer;
}
ha-card { ha-card {
overflow: hidden; overflow: hidden;
} }

44
src/panels/config/devices/device-detail/ha-device-entities-card.ts
View File

@ -1,6 +1,4 @@
import "@polymer/paper-item/paper-icon-item"; import "@material/mwc-list/mwc-list";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { import {
css, css,
CSSResultGroup, CSSResultGroup,
@ -17,6 +15,7 @@ import { stripPrefixFromEntityName } from "../../../../common/entity/strip_prefi
import "../../../../components/entity/state-badge"; import "../../../../components/entity/state-badge";
import "../../../../components/ha-card"; import "../../../../components/ha-card";
import "../../../../components/ha-icon"; import "../../../../components/ha-icon";
import "../../../../components/ha-list-item";
import { import {
ExtEntityRegistryEntry, ExtEntityRegistryEntry,
getExtendedEntityRegistryEntry, getExtendedEntityRegistryEntry,
@ -91,11 +90,13 @@ export class HaDeviceEntitiesCard extends LitElement {
return html` return html`
<ha-card outlined .header=${this.header}> <ha-card outlined .header=${this.header}>
<div id="entities"> <div id="entities">
${shownEntities.map((entry) => <mwc-list>
this.hass.states[entry.entity_id] ${shownEntities.map((entry) =>
? this._renderEntity(entry) this.hass.states[entry.entity_id]
: this._renderEntry(entry) ? this._renderEntity(entry)
)} : this._renderEntry(entry)
)}
</mwc-list>
</div> </div>
${hiddenEntities.length ${hiddenEntities.length
? !this.showHidden ? !this.showHidden
@ -108,7 +109,9 @@ export class HaDeviceEntitiesCard extends LitElement {
</button> </button>
` `
: html` : html`
${hiddenEntities.map((entry) => this._renderEntry(entry))} <mwc-list>
${hiddenEntities.map((entry) => this._renderEntry(entry))}
</mwc-list>
<button class="show-more" @click=${this._toggleShowHidden}> <button class="show-more" @click=${this._toggleShowHidden}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.entities.show_less" "ui.panel.config.devices.entities.show_less"
@ -197,26 +200,23 @@ export class HaDeviceEntitiesCard extends LitElement {
(entry as ExtEntityRegistryEntry).original_name; (entry as ExtEntityRegistryEntry).original_name;
return html` return html`
<paper-icon-item <ha-list-item
graphic="icon"
class="disabled-entry" class="disabled-entry"
.entry=${entry} .entry=${entry}
@click=${this._openEditEntry} @click=${this._openEditEntry}
> >
<ha-svg-icon <ha-svg-icon
slot="item-icon" slot="graphic"
.path=${domainIcon(computeDomain(entry.entity_id))} .path=${domainIcon(computeDomain(entry.entity_id))}
></ha-svg-icon> ></ha-svg-icon>
<paper-item-body> <div class="name">
<div class="name"> ${name
${name ? stripPrefixFromEntityName(name, this.deviceName.toLowerCase()) ||
? stripPrefixFromEntityName( name
name, : entry.entity_id}
this.deviceName.toLowerCase() </div>
) || name </ha-list-item>
: entry.entity_id}
</div>
</paper-item-body>
</paper-icon-item>
`; `;
} }

34
src/panels/config/logs/system-log-card.ts
View File

@ -1,6 +1,5 @@
import { mdiRefresh } from "@mdi/js"; import { mdiRefresh } from "@mdi/js";
import "@polymer/paper-item/paper-item"; import "@material/mwc-list/mwc-list";
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -10,6 +9,7 @@ import "../../../components/buttons/ha-progress-button";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-circular-progress"; import "../../../components/ha-circular-progress";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-list-item";
import { domainToName } from "../../../data/integration"; import { domainToName } from "../../../data/integration";
import { import {
fetchSystemLog, fetchSystemLog,
@ -122,12 +122,16 @@ export class SystemLogCard extends LitElement {
{ term: this.filter } { term: this.filter }
)} )}
</div>` </div>`
: filteredItems.map( : html`<mwc-list
(item, idx) => html` >${filteredItems.map(
<paper-item @click=${this._openLog} .logItem=${item}> (item, idx) => html`
<paper-item-body two-line> <ha-list-item
<div class="row">${item.message[0]}</div> @click=${this._openLog}
<div class="row-secondary" secondary> .logItem=${item}
twoline
>
${item.message[0]}
<span slot="secondary" class="secondary">
${this._timestamp(item)} – ${this._timestamp(item)} –
${html`(<span class=${item.level} ${html`(<span class=${item.level}
>${this.hass.localize( >${this.hass.localize(
@ -149,11 +153,11 @@ export class SystemLogCard extends LitElement {
${item.count > 1 ${item.count > 1
? html` - ${this._multipleMessages(item)} ` ? html` - ${this._multipleMessages(item)} `
: nothing} : nothing}
</div> </span>
</paper-item-body> </ha-list-item>
</paper-item> `
` )}</mwc-list
)} >`}
<div class="card-actions"> <div class="card-actions">
<ha-call-service-button <ha-call-service-button
@ -219,10 +223,6 @@ export class SystemLogCard extends LitElement {
font-weight: normal; font-weight: normal;
} }
paper-item {
cursor: pointer;
}
.system-log-intro { .system-log-intro {
margin: 16px; margin: 16px;
} }

67
src/panels/config/person/ha-config-person.ts
View File

@ -1,12 +1,12 @@
import { mdiPlus } from "@mdi/js"; import { mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item"; import "@material/mwc-list/mwc-list";
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { stringCompare } from "../../../common/string/compare"; import { stringCompare } from "../../../common/string/compare";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-fab"; import "../../../components/ha-fab";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-list-item";
import "../../../components/user/ha-person-badge"; import "../../../components/user/ha-person-badge";
import { import {
createPerson, createPerson,
@ -90,17 +90,24 @@ export class HaConfigPerson extends LitElement {
</span> </span>
<ha-card outlined class="storage"> <ha-card outlined class="storage">
${this._storageItems.map( <mwc-list>
(entry) => html` ${this._storageItems.map(
<paper-icon-item @click=${this._openEditEntry} .entry=${entry}> (entry) => html`
<ha-person-badge <ha-list-item
slot="item-icon" graphic="avatar"
.person=${entry} @click=${this._openEditEntry}
></ha-person-badge> .entry=${entry}
<paper-item-body> ${entry.name} </paper-item-body> >
</paper-icon-item> <ha-person-badge
` .hass=${this.hass}
)} .person=${entry}
slot="graphic"
></ha-person-badge>
<span>${entry.name}</span>
</ha-list-item>
`
)}
</mwc-list>
${this._storageItems.length === 0 ${this._storageItems.length === 0
? html` ? html`
<div class="empty"> <div class="empty">
@ -119,20 +126,23 @@ export class HaConfigPerson extends LitElement {
${this._configItems.length > 0 ${this._configItems.length > 0
? html` ? html`
<ha-card outlined header="Configuration.yaml persons"> <ha-card outlined header="Configuration.yaml persons">
${this._configItems.map( <mwc-list>
(entry) => html` ${this._configItems.map(
<paper-icon-item> (entry) => html`
<ha-person-badge <ha-list-item graphic="avatar">
slot="item-icon" <ha-person-badge
.person=${entry} .hass=${this.hass}
></ha-person-badge> .person=${entry}
<paper-item-body> ${entry.name} </paper-item-body> slot="graphic"
</paper-icon-item> ></ha-person-badge>
` <span>${entry.name}</span>
)} </ha-list-item>
`
)}
</mwc-list>
</ha-card> </ha-card>
` `
: ""} : nothing}
</ha-config-section> </ha-config-section>
<ha-fab <ha-fab
slot="fab" slot="fab"
@ -282,13 +292,6 @@ export class HaConfigPerson extends LitElement {
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
} }
paper-icon-item {
padding-top: 4px;
padding-bottom: 4px;
}
ha-card.storage paper-icon-item {
cursor: pointer;
}
`; `;
} }
} }

2
src/panels/config/voice-assistants/ha-config-voice-assistants-assistants.ts
View File

@ -1,5 +1,3 @@
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../common/config/is_component_loaded";