github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Replace more paper-items (#19707) 

Remove leftover paper items
This commit is contained in:
Simon Lamon 2024-02-28 11:52:45 +01:00 committed by GitHub
parent 220da51606
commit 32c403d069
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 93 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
View File

@ -1,7 +1,5 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import { mdiDelete, mdiDeleteOff } from "@mdi/js"; import { mdiDelete, mdiDeleteOff } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
@ -27,6 +25,8 @@ import type { HomeAssistant } from "../../../../src/types";
import { HassioRepositoryDialogParams } from "./show-dialog-repositories"; import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
import type { HaTextField } from "../../../../src/components/ha-textfield"; import type { HaTextField } from "../../../../src/components/ha-textfield";
import "../../../../src/components/ha-textfield"; import "../../../../src/components/ha-textfield";
import "../../../../src/components/ha-list-new";
import "../../../../src/components/ha-list-item-new";
@customElement("dialog-hassio-repositories") @customElement("dialog-hassio-repositories")
class HassioRepositoriesDialog extends LitElement { class HassioRepositoriesDialog extends LitElement {
@ -106,44 +106,46 @@ class HassioRepositoriesDialog extends LitElement {
? html`<ha-alert alert-type="error">${this._error}</ha-alert>` ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: ""} : ""}
<div class="form"> <div class="form">
${repositories.length <ha-list-new>
? repositories.map( ${repositories.length
(repo) => html` ? repositories.map(
<paper-item class="option"> (repo) => html`
<paper-item-body three-line> <ha-list-item-new class="option">
<div>${repo.name}</div> ${repo.name}
<div secondary>${repo.maintainer}</div> <div slot="supporting-text">
<div secondary>${repo.url}</div> <div>${repo.maintainer}</div>
</paper-item-body> <div>${repo.url}</div>
<div class="delete"> </div>
<ha-icon-button <div class="delete" slot="end">
.label=${this._dialogParams!.supervisor.localize( <ha-icon-button
"dialog.repositories.remove" .label=${this._dialogParams!.supervisor.localize(
)} "dialog.repositories.remove"
.disabled=${usedRepositories.includes(repo.slug)} )}
.slug=${repo.slug} .disabled=${usedRepositories.includes(repo.slug)}
.path=${usedRepositories.includes(repo.slug) .slug=${repo.slug}
? mdiDeleteOff .path=${usedRepositories.includes(repo.slug)
: mdiDelete} ? mdiDeleteOff
@click=${this._removeRepository} : mdiDelete}
> @click=${this._removeRepository}
</ha-icon-button> >
<simple-tooltip </ha-icon-button>
animation-delay="0" <simple-tooltip
position="bottom" animation-delay="0"
offset="1" position="bottom"
> offset="1"
${this._dialogParams!.supervisor.localize( >
usedRepositories.includes(repo.slug) ${this._dialogParams!.supervisor.localize(
? "dialog.repositories.used" usedRepositories.includes(repo.slug)
: "dialog.repositories.remove" ? "dialog.repositories.used"
)} : "dialog.repositories.remove"
</simple-tooltip> )}
</div> </simple-tooltip>
</paper-item> </div>
` </ha-list-item-new>
) `
: html`<paper-item> No repositories </paper-item>`} )
: html`<ha-list-item-new> No repositories </ha-list-item-new>`}
</ha-list-new>
<div class="layout horizontal bottom"> <div class="layout horizontal bottom">
<ha-textfield <ha-textfield
class="flex-auto" class="flex-auto"
@ -206,6 +208,9 @@ class HassioRepositoriesDialog extends LitElement {
div.delete ha-icon-button { div.delete ha-icon-button {
color: var(--error-color); color: var(--error-color);
} }
ha-list-item-new {
position: relative;
}
`, `,
]; ];
} }

37
src/panels/config/devices/ha-config-device-page.ts
View File

@ -435,15 +435,14 @@ export class HaConfigDevicePage extends LitElement {
: undefined : undefined
)} )}
> >
<paper-item <ha-list-item
hasMeta
.automation=${entityState} .automation=${entityState}
.disabled=${!entityState.attributes.id} .disabled=${!entityState.attributes.id}
> >
<paper-item-body> ${computeStateName(entityState)}
${computeStateName(entityState)} <ha-icon-next slot="meta"></ha-icon-next>
</paper-item-body> </ha-list-item>
<ha-icon-next></ha-icon-next>
</paper-item>
</a> </a>
${!entityState.attributes.id ${!entityState.attributes.id
? html` ? html`
@ -528,15 +527,14 @@ export class HaConfigDevicePage extends LitElement {
: undefined : undefined
)} )}
> >
<paper-item <ha-list-item
hasMeta
.scene=${entityState} .scene=${entityState}
.disabled=${!entityState.attributes.id} .disabled=${!entityState.attributes.id}
> >
<paper-item-body> ${computeStateName(entityState)}
${computeStateName(entityState)} <ha-icon-next slot="meta"></ha-icon-next>
</paper-item-body> </ha-list-item>
<ha-icon-next></ha-icon-next>
</paper-item>
</a> </a>
${!entityState.attributes.id ${!entityState.attributes.id
? html` ? html`
@ -623,12 +621,10 @@ export class HaConfigDevicePage extends LitElement {
return entityState return entityState
? html` ? html`
<a href=${url}> <a href=${url}>
<paper-item .script=${script}> <ha-list-item hasMeta .script=${script}>
<paper-item-body> ${computeStateName(entityState)}
${computeStateName(entityState)} <ha-icon-next slot="meta"></ha-icon-next>
</paper-item-body> </ha-list-item>
<ha-icon-next></ha-icon-next>
</paper-item>
</a> </a>
` `
: ""; : "";
@ -1518,11 +1514,6 @@ export class HaConfigDevicePage extends LitElement {
margin-top: 0; margin-top: 0;
} }
paper-item {
cursor: pointer;
font-size: var(--paper-font-body1_-_font-size);
}
a { a {
text-decoration: none; text-decoration: none;
color: var(--primary-color); color: var(--primary-color);

33
src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
View File

@ -1,6 +1,5 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { mdiDelete } from "@mdi/js"; import { mdiDelete } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import { import {
CSSResultGroup, CSSResultGroup,
LitElement, LitElement,
@ -32,6 +31,8 @@ import "../../../ha-config-section";
import { formatAsPaddedHex } from "./functions"; import { formatAsPaddedHex } from "./functions";
import "./zha-device-endpoint-data-table"; import "./zha-device-endpoint-data-table";
import type { ZHADeviceEndpointDataTable } from "./zha-device-endpoint-data-table"; import type { ZHADeviceEndpointDataTable } from "./zha-device-endpoint-data-table";
import "@material/mwc-list/mwc-list";
import "../../../../../components/ha-list-item";
@customElement("zha-group-page") @customElement("zha-group-page")
export class ZHAGroupPage extends LitElement { export class ZHAGroupPage extends LitElement {
@ -131,20 +132,24 @@ export class ZHAGroupPage extends LitElement {
${this.hass.localize("ui.panel.config.zha.groups.members")} ${this.hass.localize("ui.panel.config.zha.groups.members")}
</div> </div>
<ha-card> <ha-card>
${this.group.members.length <mwc-list>
? this.group.members.map( ${this.group.members.length
(member) => ? this.group.members.map(
html`<a (member) =>
href="/config/devices/device/${member.device html`<a
.device_reg_id}" href="/config/devices/device/${member.device
> .device_reg_id}"
<paper-item
>${member.device.user_given_name ||
member.device.name}</paper-item
> >
</a>` <ha-list-item
) >${member.device.user_given_name ||
: html` <paper-item> This group has no members </paper-item> `} member.device.name}</ha-list-item
>
</a>`
)
: html`
<ha-list-item> This group has no members </ha-list-item>
`}
</mwc-list>
</ha-card> </ha-card>
${this.group.members.length ${this.group.members.length
? html` ? html`

37
src/panels/mailbox/ha-panel-mailbox.ts
View File

@ -12,8 +12,6 @@ import { formatDateTime } from "../../common/datetime/format_date_time";
import "../../components/ha-card"; import "../../components/ha-card";
import "../../components/ha-menu-button"; import "../../components/ha-menu-button";
import "../../components/ha-tabs"; import "../../components/ha-tabs";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tab";
import { HomeAssistant } from "../../types"; import { HomeAssistant } from "../../types";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
@ -82,25 +80,24 @@ class HaPanelMailbox extends LitElement {
: nothing} : nothing}
${this._messages?.map( ${this._messages?.map(
(message) => (message) =>
html` <paper-item html` <ha-list-item
.message=${message} .message=${message}
@click=${this._openMP3Dialog} @click=${this._openMP3Dialog}
twoline
> >
<paper-item-body style="width:100%" two-line> <span>
<div class="row"> <span>${message.caller}</span>
<div>${message.caller}</div> <span class="tip">
<div class="tip"> ${formatDuration(this.hass.locale, {
${formatDuration(this.hass.locale, { seconds: message.duration,
seconds: message.duration, })}
})} </span>
</div> </span>
</div> <span slot="secondary">
<div secondary> <span class="date">${message.timestamp}</span> -
<span class="date">${message.timestamp}</span> - ${message.message}
${message.message} </span>
</div> </ha-list-item>`
</paper-item-body>
</paper-item>`
)} )}
</ha-card> </ha-card>
</div> </div>
@ -219,10 +216,6 @@ class HaPanelMailbox extends LitElement {
overflow: hidden; overflow: hidden;
} }
paper-item {
cursor: pointer;
}
ha-tabs { ha-tabs {
margin-left: max(env(safe-area-inset-left), 24px); margin-left: max(env(safe-area-inset-left), 24px);
margin-right: max(env(safe-area-inset-right), 24px); margin-right: max(env(safe-area-inset-right), 24px);