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 paper-item in integration card (#16317)

Browse Source
This commit is contained in:
Bram Kragten 2023-04-26 16:11:54 +02:00 committed by GitHub
parent addb66f21d
commit ff4c01e15c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 53 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/dialogs/restart/dialog-restart.ts
View File

@ -108,7 +108,6 @@ class DialogRestart extends LitElement {
graphic="avatar" graphic="avatar"
twoline twoline
multiline-secondary multiline-secondary
hasMeta
@request-selected=${this._reload} @request-selected=${this._reload}
> >
<div slot="graphic" class="icon-background reload"> <div slot="graphic" class="icon-background reload">
@ -131,7 +130,6 @@ class DialogRestart extends LitElement {
graphic="avatar" graphic="avatar"
twoline twoline
multiline-secondary multiline-secondary
hasMeta
@request-selected=${this._restart} @request-selected=${this._restart}
> >
<div slot="graphic" class="icon-background restart"> <div slot="graphic" class="icon-background restart">

16
src/panels/config/integrations/ha-config-integrations.ts
View File

@ -40,10 +40,6 @@ import {
subscribeConfigFlowInProgress, subscribeConfigFlowInProgress,
} from "../../../data/config_flow"; } from "../../../data/config_flow";
import type { DataEntryFlowProgress } from "../../../data/data_entry_flow"; import type { DataEntryFlowProgress } from "../../../data/data_entry_flow";
import {
DeviceRegistryEntry,
subscribeDeviceRegistry,
} from "../../../data/device_registry";
import { fetchDiagnosticHandlers } from "../../../data/diagnostics"; import { fetchDiagnosticHandlers } from "../../../data/diagnostics";
import { import {
EntityRegistryEntry, EntityRegistryEntry,
@ -53,13 +49,13 @@ import {
domainToName, domainToName,
fetchIntegrationManifest, fetchIntegrationManifest,
fetchIntegrationManifests, fetchIntegrationManifests,
IntegrationManifest,
IntegrationLogInfo, IntegrationLogInfo,
IntegrationManifest,
subscribeLogInfo, subscribeLogInfo,
} from "../../../data/integration"; } from "../../../data/integration";
import { import {
getIntegrationDescriptions,
findIntegration, findIntegration,
getIntegrationDescriptions,
} from "../../../data/integrations"; } from "../../../data/integrations";
import { scanUSBDevices } from "../../../data/usb"; import { scanUSBDevices } from "../../../data/usb";
import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow"; import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
@ -139,9 +135,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
@state() @state()
private _entityRegistryEntries: EntityRegistryEntry[] = []; private _entityRegistryEntries: EntityRegistryEntry[] = [];
@state()
private _deviceRegistryEntries: DeviceRegistryEntry[] = [];
@state() @state()
private _manifests: Record<string, IntegrationManifest> = {}; private _manifests: Record<string, IntegrationManifest> = {};
@ -168,9 +161,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
subscribeEntityRegistry(this.hass.connection, (entries) => { subscribeEntityRegistry(this.hass.connection, (entries) => {
this._entityRegistryEntries = entries; this._entityRegistryEntries = entries;
}), }),
subscribeDeviceRegistry(this.hass.connection, (entries) => {
this._deviceRegistryEntries = entries;
}),
subscribeConfigFlowInProgress(this.hass, async (flowsInProgress) => { subscribeConfigFlowInProgress(this.hass, async (flowsInProgress) => {
const integrations: Set<string> = new Set(); const integrations: Set<string> = new Set();
const manifests: Set<string> = new Set(); const manifests: Set<string> = new Set();
@ -513,7 +503,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
.items=${items} .items=${items}
.manifest=${this._manifests[domain]} .manifest=${this._manifests[domain]}
.entityRegistryEntries=${this._entityRegistryEntries} .entityRegistryEntries=${this._entityRegistryEntries}
.deviceRegistryEntries=${this._deviceRegistryEntries}
></ha-integration-card> ` ></ha-integration-card> `
) )
: ""} : ""}
@ -527,7 +516,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
.items=${items} .items=${items}
.manifest=${this._manifests[domain]} .manifest=${this._manifests[domain]}
.entityRegistryEntries=${this._entityRegistryEntries} .entityRegistryEntries=${this._entityRegistryEntries}
.deviceRegistryEntries=${this._deviceRegistryEntries}
.supportsDiagnostics=${this._diagnosticHandlers .supportsDiagnostics=${this._diagnosticHandlers
? this._diagnosticHandlers[domain] ? this._diagnosticHandlers[domain]
: false} : false}

110
src/panels/config/integrations/ha-integration-card.ts
View File

@ -1,5 +1,5 @@
import "@material/mwc-button"; import "@material/mwc-button";
import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list";
import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
import { import {
mdiAlertCircle, mdiAlertCircle,
@ -20,8 +20,6 @@ import {
mdiRenameBox, mdiRenameBox,
mdiStopCircleOutline, mdiStopCircleOutline,
} from "@mdi/js"; } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
@ -30,6 +28,7 @@ import memoizeOne from "memoize-one";
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event"; import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
import "../../../components/ha-button-menu"; import "../../../components/ha-button-menu";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-list-item";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-icon-next"; import "../../../components/ha-icon-next";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
@ -96,9 +95,6 @@ export class HaIntegrationCard extends LitElement {
@property({ attribute: false }) @property({ attribute: false })
public entityRegistryEntries!: EntityRegistryEntry[]; public entityRegistryEntries!: EntityRegistryEntry[];
@property({ attribute: false })
public deviceRegistryEntries!: DeviceRegistryEntry[];
@property() public selectedConfigEntryId?: string; @property() public selectedConfigEntryId?: string;
@property({ type: Boolean }) public entryDisabled = false; @property({ type: Boolean }) public entryDisabled = false;
@ -174,20 +170,19 @@ export class HaIntegrationCard extends LitElement {
private _renderGroupedIntegration(): TemplateResult { private _renderGroupedIntegration(): TemplateResult {
return html` return html`
<paper-listbox class="ha-scrollbar"> <mwc-list class="ha-scrollbar">
${this.items.map( ${this.items.map(
(item) => (item) =>
html`<paper-item html`<ha-list-item
hasMeta
.entryId=${item.entry_id} .entryId=${item.entry_id}
@click=${this._selectConfigEntry} @click=${this._selectConfigEntry}
><paper-item-body >${item.title ||
>${item.title || this.hass.localize(
this.hass.localize( "ui.panel.config.integrations.config_entry.unnamed_entry"
"ui.panel.config.integrations.config_entry.unnamed_entry" )}
)}</paper-item-body
>
${item.state === "setup_in_progress" ${item.state === "setup_in_progress"
? html`<span> ? html`<span slot="meta">
<ha-svg-icon <ha-svg-icon
class="info" class="info"
.path=${mdiProgressHelper} .path=${mdiProgressHelper}
@ -198,9 +193,8 @@ export class HaIntegrationCard extends LitElement {
)} )}
</simple-tooltip> </simple-tooltip>
</span>` </span>`
: ""} : ERROR_STATES.includes(item.state)
${ERROR_STATES.includes(item.state) ? html`<span slot="meta">
? html`<span>
<ha-svg-icon <ha-svg-icon
class="error" class="error"
.path=${item.state === "setup_retry" .path=${item.state === "setup_retry"
@ -213,17 +207,16 @@ export class HaIntegrationCard extends LitElement {
)} )}
</simple-tooltip> </simple-tooltip>
</span>` </span>`
: ""} : html`<ha-icon-next slot="meta"></ha-icon-next>`}
<ha-icon-next></ha-icon-next> </ha-list-item>`
</paper-item>`
)} )}
</paper-listbox> </mwc-list>
`; `;
} }
private _renderSingleEntry(item: ConfigEntryExtended): TemplateResult { private _renderSingleEntry(item: ConfigEntryExtended): TemplateResult {
const devices = this._getDevices(item, this.deviceRegistryEntries); const devices = this._getDevices(item, this.hass.devices);
const services = this._getServices(item, this.deviceRegistryEntries); const services = this._getServices(item, this.hass.devices);
const entities = this._getEntities(item, this.entityRegistryEntries); const entities = this._getEntities(item, this.entityRegistryEntries);
let stateText: Parameters<typeof this.hass.localize> | undefined; let stateText: Parameters<typeof this.hass.localize> | undefined;
@ -380,7 +373,7 @@ export class HaIntegrationCard extends LitElement {
RECOVERABLE_STATES.includes(item.state) && RECOVERABLE_STATES.includes(item.state) &&
item.supports_unload && item.supports_unload &&
item.source !== "system" item.source !== "system"
? html`<mwc-list-item ? html`<ha-list-item
@request-selected=${this._handleReload} @request-selected=${this._handleReload}
graphic="icon" graphic="icon"
> >
@ -388,22 +381,22 @@ export class HaIntegrationCard extends LitElement {
"ui.panel.config.integrations.config_entry.reload" "ui.panel.config.integrations.config_entry.reload"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiReload}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiReload}></ha-svg-icon>
</mwc-list-item>` </ha-list-item>`
: ""} : ""}
<mwc-list-item @request-selected=${this._handleRename} graphic="icon"> <ha-list-item @request-selected=${this._handleRename} graphic="icon">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.rename" "ui.panel.config.integrations.config_entry.rename"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
</mwc-list-item> </ha-list-item>
${this.supportsDiagnostics && item.state === "loaded" ${this.supportsDiagnostics && item.state === "loaded"
? html`<a ? html`<a
href=${getConfigEntryDiagnosticsDownloadUrl(item.entry_id)} href=${getConfigEntryDiagnosticsDownloadUrl(item.entry_id)}
target="_blank" target="_blank"
@click=${this._signUrl} @click=${this._signUrl}
> >
<mwc-list-item graphic="icon"> <ha-list-item graphic="icon">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.download_diagnostics" "ui.panel.config.integrations.config_entry.download_diagnostics"
)} )}
@ -411,11 +404,11 @@ export class HaIntegrationCard extends LitElement {
slot="graphic" slot="graphic"
.path=${mdiDownload} .path=${mdiDownload}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item> </ha-list-item>
</a>` </a>`
: ""} : ""}
${this.logInfo ${this.logInfo
? html`<mwc-list-item ? html`<ha-list-item
@request-selected=${this.logInfo.level === LogSeverity.DEBUG @request-selected=${this.logInfo.level === LogSeverity.DEBUG
? this._handleDisableDebugLogging ? this._handleDisableDebugLogging
: this._handleEnableDebugLogging} : this._handleEnableDebugLogging}
@ -434,7 +427,7 @@ export class HaIntegrationCard extends LitElement {
? mdiBugStop ? mdiBugStop
: mdiBugPlay} : mdiBugPlay}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item>` </ha-list-item>`
: ""} : ""}
${this.manifest && ${this.manifest &&
(this.manifest.is_built_in || (this.manifest.is_built_in ||
@ -453,7 +446,7 @@ export class HaIntegrationCard extends LitElement {
rel="noreferrer" rel="noreferrer"
target="_blank" target="_blank"
> >
<mwc-list-item graphic="icon" hasMeta> <ha-list-item graphic="icon" hasMeta>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.documentation" "ui.panel.config.integrations.config_entry.documentation"
)} )}
@ -462,7 +455,7 @@ export class HaIntegrationCard extends LitElement {
.path=${mdiBookshelf} .path=${mdiBookshelf}
></ha-svg-icon> ></ha-svg-icon>
<ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon> <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
</mwc-list-item> </ha-list-item>
</a>` </a>`
: ""} : ""}
${this.manifest && ${this.manifest &&
@ -472,19 +465,19 @@ export class HaIntegrationCard extends LitElement {
rel="noreferrer" rel="noreferrer"
target="_blank" target="_blank"
> >
<mwc-list-item graphic="icon" hasMeta> <ha-list-item graphic="icon" hasMeta>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.known_issues" "ui.panel.config.integrations.config_entry.known_issues"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiBug}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiBug}></ha-svg-icon>
<ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon> <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
</mwc-list-item> </ha-list-item>
</a>` </a>`
: ""} : ""}
<li divider role="separator"></li> <li divider role="separator"></li>
<mwc-list-item <ha-list-item
@request-selected=${this._handleSystemOptions} @request-selected=${this._handleSystemOptions}
graphic="icon" graphic="icon"
> >
@ -492,9 +485,9 @@ export class HaIntegrationCard extends LitElement {
"ui.panel.config.integrations.config_entry.system_options" "ui.panel.config.integrations.config_entry.system_options"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
</mwc-list-item> </ha-list-item>
${item.disabled_by === "user" ${item.disabled_by === "user"
? html`<mwc-list-item ? html`<ha-list-item
@request-selected=${this._handleEnable} @request-selected=${this._handleEnable}
graphic="icon" graphic="icon"
> >
@ -503,9 +496,9 @@ export class HaIntegrationCard extends LitElement {
slot="graphic" slot="graphic"
.path=${mdiPlayCircleOutline} .path=${mdiPlayCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item>` </ha-list-item>`
: item.source !== "system" : item.source !== "system"
? html`<mwc-list-item ? html`<ha-list-item
class="warning" class="warning"
@request-selected=${this._handleDisable} @request-selected=${this._handleDisable}
graphic="icon" graphic="icon"
@ -516,10 +509,10 @@ export class HaIntegrationCard extends LitElement {
class="warning" class="warning"
.path=${mdiStopCircleOutline} .path=${mdiStopCircleOutline}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item>` </ha-list-item>`
: ""} : ""}
${item.source !== "system" ${item.source !== "system"
? html`<mwc-list-item ? html`<ha-list-item
class="warning" class="warning"
@request-selected=${this._handleDelete} @request-selected=${this._handleDelete}
graphic="icon" graphic="icon"
@ -532,7 +525,7 @@ export class HaIntegrationCard extends LitElement {
class="warning" class="warning"
.path=${mdiDelete} .path=${mdiDelete}
></ha-svg-icon> ></ha-svg-icon>
</mwc-list-item>` </ha-list-item>`
: ""} : ""}
</ha-button-menu> </ha-button-menu>
</div> </div>
@ -606,12 +599,12 @@ export class HaIntegrationCard extends LitElement {
private _getDevices = memoizeOne( private _getDevices = memoizeOne(
( (
configEntry: ConfigEntry, configEntry: ConfigEntry,
deviceRegistryEntries: DeviceRegistryEntry[] deviceRegistryEntries: HomeAssistant["devices"]
): DeviceRegistryEntry[] => { ): DeviceRegistryEntry[] => {
if (!deviceRegistryEntries) { if (!deviceRegistryEntries) {
return []; return [];
} }
return deviceRegistryEntries.filter( return Object.values(deviceRegistryEntries).filter(
(device) => (device) =>
device.config_entries.includes(configEntry.entry_id) && device.config_entries.includes(configEntry.entry_id) &&
device.entry_type !== "service" device.entry_type !== "service"
@ -622,12 +615,12 @@ export class HaIntegrationCard extends LitElement {
private _getServices = memoizeOne( private _getServices = memoizeOne(
( (
configEntry: ConfigEntry, configEntry: ConfigEntry,
deviceRegistryEntries: DeviceRegistryEntry[] deviceRegistryEntries: HomeAssistant["devices"]
): DeviceRegistryEntry[] => { ): DeviceRegistryEntry[] => {
if (!deviceRegistryEntries) { if (!deviceRegistryEntries) {
return []; return [];
} }
return deviceRegistryEntries.filter( return Object.values(deviceRegistryEntries).filter(
(device) => (device) =>
device.config_entries.includes(configEntry.entry_id) && device.config_entries.includes(configEntry.entry_id) &&
device.entry_type === "service" device.entry_type === "service"
@ -1001,16 +994,16 @@ export class HaIntegrationCard extends LitElement {
color: var(--secondary-text-color); color: var(--secondary-text-color);
--mdc-menu-min-width: 200px; --mdc-menu-min-width: 200px;
} }
paper-listbox { mwc-list {
border-radius: 0 0 var(--ha-card-border-radius, 16px) border-radius: 0 0 var(--ha-card-border-radius, 16px)
var(--ha-card-border-radius, 16px); var(--ha-card-border-radius, 16px);
} }
@media (min-width: 563px) { @media (min-width: 563px) {
ha-card.group { ha-card.group {
position: relative; position: relative;
min-height: 164px; min-height: 195px;
} }
paper-listbox { mwc-list {
position: absolute; position: absolute;
top: 64px; top: 64px;
left: 0; left: 0;
@ -1018,25 +1011,24 @@ export class HaIntegrationCard extends LitElement {
bottom: 0; bottom: 0;
overflow: auto; overflow: auto;
} }
.disabled paper-listbox { .disabled mwc-list {
top: 88px; top: 88px;
} }
} }
paper-item { ha-list-item {
cursor: pointer;
min-height: 35px;
}
paper-item-body {
word-wrap: break-word; word-wrap: break-word;
display: -webkit-box; display: -webkit-flex;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
mwc-list-item ha-svg-icon { ha-list-item ha-svg-icon {
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
ha-icon-next {
width: 24px;
}
ha-svg-icon[slot="meta"] { ha-svg-icon[slot="meta"] {
width: 18px; width: 18px;
height: 18px; height: 18px;