jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +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"
twoline
multiline-secondary
hasMeta
@request-selected=${this._reload}
>
<div slot="graphic" class="icon-background reload">
@ -131,7 +130,6 @@ class DialogRestart extends LitElement {
graphic="avatar"
twoline
multiline-secondary
hasMeta
@request-selected=${this._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,
} from "../../../data/config_flow";
import type { DataEntryFlowProgress } from "../../../data/data_entry_flow";
import {
DeviceRegistryEntry,
subscribeDeviceRegistry,
} from "../../../data/device_registry";
import { fetchDiagnosticHandlers } from "../../../data/diagnostics";
import {
EntityRegistryEntry,
@ -53,13 +49,13 @@ import {
domainToName,
fetchIntegrationManifest,
fetchIntegrationManifests,
IntegrationManifest,
IntegrationLogInfo,
IntegrationManifest,
subscribeLogInfo,
} from "../../../data/integration";
import {
getIntegrationDescriptions,
findIntegration,
getIntegrationDescriptions,
} from "../../../data/integrations";
import { scanUSBDevices } from "../../../data/usb";
import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
@ -139,9 +135,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
@state()
private _entityRegistryEntries: EntityRegistryEntry[] = [];
@state()
private _deviceRegistryEntries: DeviceRegistryEntry[] = [];
@state()
private _manifests: Record<string, IntegrationManifest> = {};
@ -168,9 +161,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
subscribeEntityRegistry(this.hass.connection, (entries) => {
this._entityRegistryEntries = entries;
}),
subscribeDeviceRegistry(this.hass.connection, (entries) => {
this._deviceRegistryEntries = entries;
}),
subscribeConfigFlowInProgress(this.hass, async (flowsInProgress) => {
const integrations: Set<string> = new Set();
const manifests: Set<string> = new Set();
@ -513,7 +503,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
.items=${items}
.manifest=${this._manifests[domain]}
.entityRegistryEntries=${this._entityRegistryEntries}
.deviceRegistryEntries=${this._deviceRegistryEntries}
></ha-integration-card> `
)
: ""}
@ -527,7 +516,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
.items=${items}
.manifest=${this._manifests[domain]}
.entityRegistryEntries=${this._entityRegistryEntries}
.deviceRegistryEntries=${this._deviceRegistryEntries}
.supportsDiagnostics=${this._diagnosticHandlers
? this._diagnosticHandlers[domain]
: false}

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

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