mirror of
https://github.com/home-assistant/frontend.git
synced 2026-09-16 15:18:16 +00:00
Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Wendelin
|
7c80ea10d1 | ||
|
Wendelin
|
ea55ceebfe | ||
|
Wendelin
|
51ded992dd |
@@ -11,7 +11,10 @@ import { css, html, LitElement, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { stopPropagation } from "../../../common/dom/stop_propagation";
|
||||
import {
|
||||
stopKeydownEnterSpacePropagation,
|
||||
stopPropagation,
|
||||
} from "../../../common/dom/stop_propagation";
|
||||
import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name";
|
||||
import { getDeviceArea } from "../../../common/entity/context/get_device_context";
|
||||
import { navigate } from "../../../common/navigate";
|
||||
@@ -37,7 +40,6 @@ import {
|
||||
showConfirmationDialog,
|
||||
} from "../../lovelace/custom-card-helpers";
|
||||
import { showDeviceRegistryDetailDialog } from "../devices/device-registry-detail/show-dialog-device-registry-detail";
|
||||
import "./ha-config-sub-entry-row";
|
||||
|
||||
@customElement("ha-config-entry-device-row")
|
||||
class HaConfigEntryDeviceRow extends LitElement {
|
||||
@@ -75,8 +77,7 @@ class HaConfigEntryDeviceRow extends LitElement {
|
||||
area ? area.name : undefined,
|
||||
].filter(Boolean);
|
||||
|
||||
return html`<ha-md-list-item
|
||||
type="button"
|
||||
return html`<ha-list-item-button
|
||||
@click=${this._handleNavigateToDevice}
|
||||
class=${classMap({ disabled: Boolean(device.disabled_by) })}
|
||||
>
|
||||
@@ -126,15 +127,14 @@ class HaConfigEntryDeviceRow extends LitElement {
|
||||
: nothing
|
||||
}</span
|
||||
>
|
||||
${
|
||||
!this.narrow ? html`<ha-icon-next slot="end"> </ha-icon-next>` : nothing
|
||||
}
|
||||
${!this.narrow ? html`<ha-icon-next slot="end"></ha-icon-next>` : nothing}
|
||||
<div class="vertical-divider" slot="end" @click=${stopPropagation}></div>
|
||||
${
|
||||
!this.narrow
|
||||
? html`<ha-icon-button
|
||||
slot="end"
|
||||
@click=${this._handleEditDeviceButton}
|
||||
@keydown=${stopKeydownEnterSpacePropagation}
|
||||
.path=${mdiPencil}
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.device.edit"
|
||||
@@ -146,6 +146,7 @@ class HaConfigEntryDeviceRow extends LitElement {
|
||||
<ha-dropdown
|
||||
slot="end"
|
||||
@click=${stopPropagation}
|
||||
@keydown=${stopKeydownEnterSpacePropagation}
|
||||
@wa-select=${this._handleMenuAction}
|
||||
>
|
||||
<ha-icon-button
|
||||
@@ -222,7 +223,7 @@ class HaConfigEntryDeviceRow extends LitElement {
|
||||
: nothing
|
||||
}
|
||||
</ha-dropdown>
|
||||
</ha-md-list-item> `;
|
||||
</ha-list-item-button>`;
|
||||
}
|
||||
|
||||
private _getEntities = (): EntityRegistryEntry[] =>
|
||||
@@ -377,25 +378,26 @@ class HaConfigEntryDeviceRow extends LitElement {
|
||||
static styles = [
|
||||
haStyle,
|
||||
css`
|
||||
:host {
|
||||
ha-list-item-button {
|
||||
border-top: 1px solid var(--divider-color);
|
||||
--ha-row-item-padding-inline: 56px 16px;
|
||||
}
|
||||
ha-md-list-item {
|
||||
--md-list-item-leading-space: 56px;
|
||||
--md-ripple-hover-color: transparent;
|
||||
--md-ripple-pressed-color: transparent;
|
||||
ha-icon-button,
|
||||
ha-icon-next,
|
||||
ha-svg-icon {
|
||||
color: var(--ha-color-fill-neutral-loud-resting);
|
||||
}
|
||||
:host([is-child]) ha-md-list-item {
|
||||
--md-list-item-leading-space: 88px;
|
||||
:host([is-child]) ha-list-item-button {
|
||||
--ha-row-item-padding-inline: 88px 16px;
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
:host([narrow]) ha-md-list-item {
|
||||
--md-list-item-leading-space: 16px;
|
||||
:host([narrow]) ha-list-item-button {
|
||||
--ha-row-item-padding-inline: 16px;
|
||||
}
|
||||
:host([narrow][is-child]) ha-md-list-item {
|
||||
--md-list-item-leading-space: 48px;
|
||||
:host([narrow][is-child]) ha-list-item-button {
|
||||
--ha-row-item-padding-inline: 48px 16px;
|
||||
}
|
||||
ha-tree-indicator {
|
||||
width: 48px;
|
||||
@@ -406,8 +408,9 @@ class HaConfigEntryDeviceRow extends LitElement {
|
||||
width: 1px;
|
||||
background: var(--divider-color);
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
ha-list-item-button::part(end) {
|
||||
align-self: stretch;
|
||||
gap: var(--ha-space-4);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
@@ -28,6 +28,9 @@ import { copyToClipboard } from "../../../common/util/copy-clipboard";
|
||||
import "../../../components/ha-dropdown";
|
||||
import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
|
||||
import "../../../components/ha-dropdown-item";
|
||||
import "../../../components/item/ha-list-item-button";
|
||||
import "../../../components/item/ha-row-item";
|
||||
import "../../../components/list/ha-list-base";
|
||||
import {
|
||||
deleteApplicationCredential,
|
||||
fetchApplicationCredentialsConfigEntry,
|
||||
@@ -43,9 +46,9 @@ import {
|
||||
reloadConfigEntry,
|
||||
updateConfigEntry,
|
||||
} from "../../../data/config_entries";
|
||||
import { groupDevicesByParent } from "../../../data/device/device_registry";
|
||||
import type { DiagnosticInfo } from "../../../data/diagnostics";
|
||||
import { getConfigEntryDiagnosticsDownloadUrl } from "../../../data/diagnostics";
|
||||
import { groupDevicesByParent } from "../../../data/device/device_registry";
|
||||
import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
|
||||
import type { IntegrationManifest } from "../../../data/integration";
|
||||
import {
|
||||
@@ -164,8 +167,8 @@ export class HaConfigEntryRow extends LitElement {
|
||||
|
||||
const subEntries = this.data.subEntries;
|
||||
|
||||
return html`<ha-md-list>
|
||||
<ha-md-list-item
|
||||
return html` <div class="config-entry-wrapper">
|
||||
<ha-row-item
|
||||
class=${classMap({
|
||||
config_entry: true,
|
||||
"state-not-loaded": item!.state === "not_loaded",
|
||||
@@ -245,89 +248,82 @@ export class HaConfigEntryRow extends LitElement {
|
||||
${
|
||||
allDevices.length
|
||||
? html`
|
||||
<a
|
||||
<ha-dropdown-item
|
||||
href=${
|
||||
allDevices.length === 1
|
||||
? `/config/devices/device/${allDevices[0].id}`
|
||||
: `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`
|
||||
}
|
||||
value="devices"
|
||||
>
|
||||
<ha-dropdown-item value="devices">
|
||||
<ha-svg-icon
|
||||
.path=${mdiDevices}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.devices`,
|
||||
{ count: allDevices.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
</a>
|
||||
<ha-svg-icon .path=${mdiDevices} slot="icon"></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.devices`,
|
||||
{ count: allDevices.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
${
|
||||
allServices.length
|
||||
? html`
|
||||
<a
|
||||
<ha-dropdown-item
|
||||
href=${
|
||||
allServices.length === 1
|
||||
? `/config/devices/device/${allServices[0].id}`
|
||||
: `/config/devices/dashboard?historyBack=1&config_entry=${item.entry_id}`
|
||||
}
|
||||
value="services"
|
||||
>
|
||||
<ha-dropdown-item value="services">
|
||||
<ha-svg-icon
|
||||
.path=${mdiHandExtendedOutline}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.services`,
|
||||
{ count: allServices.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
</a>
|
||||
<ha-svg-icon
|
||||
.path=${mdiHandExtendedOutline}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.services`,
|
||||
{ count: allServices.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
${
|
||||
entities.length
|
||||
? html`
|
||||
<a
|
||||
<ha-dropdown-item
|
||||
href=${`/config/entities?historyBack=1&config_entry=${item.entry_id}`}
|
||||
value="entities"
|
||||
>
|
||||
<ha-dropdown-item value="entities">
|
||||
<ha-svg-icon
|
||||
.path=${mdiShapeOutline}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.entities`,
|
||||
{ count: entities.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
</a>
|
||||
<ha-svg-icon
|
||||
.path=${mdiShapeOutline}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.entities`,
|
||||
{ count: entities.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
${
|
||||
ERROR_STATES.includes(item.state)
|
||||
? html`
|
||||
<a
|
||||
<ha-dropdown-item
|
||||
href=${`/config/logs?filter=${encodeURIComponent(item.domain)}`}
|
||||
value="logs"
|
||||
>
|
||||
<ha-dropdown-item value="logs">
|
||||
<ha-svg-icon
|
||||
slot="icon"
|
||||
.path=${mdiTextBoxOutline}
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize("ui.panel.config.logs.caption")}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
</a>
|
||||
<ha-svg-icon
|
||||
slot="icon"
|
||||
.path=${mdiTextBoxOutline}
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize("ui.panel.config.logs.caption")}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
@@ -376,22 +372,18 @@ export class HaConfigEntryRow extends LitElement {
|
||||
${
|
||||
this.diagnosticHandler && item.state === "loaded"
|
||||
? html`
|
||||
<a
|
||||
<ha-dropdown-item
|
||||
href=${getConfigEntryDiagnosticsDownloadUrl(item.entry_id)}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
@click=${this._signUrl}
|
||||
value="diagnostics"
|
||||
>
|
||||
<ha-dropdown-item value="diagnostics">
|
||||
<ha-svg-icon
|
||||
slot="icon"
|
||||
.path=${mdiDownload}
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.download_diagnostics"
|
||||
)}
|
||||
</ha-dropdown-item>
|
||||
</a>
|
||||
<ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.download_diagnostics"
|
||||
)}
|
||||
</ha-dropdown-item>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
@@ -452,82 +444,85 @@ export class HaConfigEntryRow extends LitElement {
|
||||
: nothing
|
||||
}
|
||||
</ha-dropdown>
|
||||
</ha-md-list-item>
|
||||
${
|
||||
this._expanded
|
||||
? subEntries.length
|
||||
? html`${
|
||||
ownDevices.length
|
||||
? html`<ha-md-list class="devices">
|
||||
<ha-md-list-item
|
||||
@click=${this._toggleOwnDevices}
|
||||
type="button"
|
||||
class="toggle-devices-row ${classMap({
|
||||
expanded: this._devicesExpanded,
|
||||
})}"
|
||||
>
|
||||
<ha-icon-button
|
||||
class="expand-button ${classMap({
|
||||
</ha-row-item>
|
||||
<ha-list-base>
|
||||
${
|
||||
this._expanded
|
||||
? subEntries.length
|
||||
? html`${
|
||||
ownDevices.length
|
||||
? html`<div class="devices">
|
||||
<ha-list-item-button
|
||||
@click=${this._toggleOwnDevices}
|
||||
class="toggle-devices-row ${classMap({
|
||||
expanded: this._devicesExpanded,
|
||||
})}"
|
||||
.path=${mdiChevronDown}
|
||||
slot="start"
|
||||
>
|
||||
</ha-icon-button>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.devices_without_subentry"
|
||||
)}
|
||||
</ha-md-list-item>
|
||||
${
|
||||
this._devicesExpanded
|
||||
? groupDevicesByParent(ownDevices).map(
|
||||
({ device, isChild, isLastChild }) =>
|
||||
html`<ha-config-entry-device-row
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.entry=${item}
|
||||
.device=${device}
|
||||
.entities=${entities}
|
||||
.isChild=${isChild}
|
||||
.isLastChild=${isLastChild}
|
||||
></ha-config-entry-device-row>`
|
||||
)
|
||||
: nothing
|
||||
}
|
||||
</ha-md-list>`
|
||||
: nothing
|
||||
}
|
||||
${subEntries.map(
|
||||
(subEntryData) => html`
|
||||
<ha-config-sub-entry-row
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.manifest=${this.manifest}
|
||||
.diagnosticHandler=${this.diagnosticHandler}
|
||||
.entities=${this.entities}
|
||||
.entry=${item}
|
||||
.data=${subEntryData}
|
||||
data-entry-id=${item.entry_id}
|
||||
></ha-config-sub-entry-row>
|
||||
`
|
||||
)}`
|
||||
: html`
|
||||
${groupDevicesByParent(ownDevices).map(
|
||||
({ device, isChild, isLastChild }) =>
|
||||
html`<ha-config-entry-device-row
|
||||
<ha-icon-button
|
||||
class="expand-button ${classMap({
|
||||
expanded: this._devicesExpanded,
|
||||
})}"
|
||||
.path=${mdiChevronDown}
|
||||
slot="start"
|
||||
>
|
||||
</ha-icon-button>
|
||||
<span slot="headline"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.config.integrations.config_entry.devices_without_subentry"
|
||||
)}</span
|
||||
>
|
||||
</ha-list-item-button>
|
||||
${
|
||||
this._devicesExpanded
|
||||
? groupDevicesByParent(ownDevices).map(
|
||||
({ device, isChild, isLastChild }) =>
|
||||
html`<ha-config-entry-device-row
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.entry=${item}
|
||||
.device=${device}
|
||||
.entities=${entities}
|
||||
.isChild=${isChild}
|
||||
.isLastChild=${isLastChild}
|
||||
></ha-config-entry-device-row>`
|
||||
)
|
||||
: nothing
|
||||
}
|
||||
</div>`
|
||||
: nothing
|
||||
}
|
||||
${subEntries.map(
|
||||
(subEntryData) => html`
|
||||
<ha-config-sub-entry-row
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.manifest=${this.manifest}
|
||||
.diagnosticHandler=${this.diagnosticHandler}
|
||||
.entities=${this.entities}
|
||||
.entry=${item}
|
||||
.device=${device}
|
||||
.entities=${entities}
|
||||
.isChild=${isChild}
|
||||
.isLastChild=${isLastChild}
|
||||
></ha-config-entry-device-row>`
|
||||
)}
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
</ha-md-list>`;
|
||||
.data=${subEntryData}
|
||||
data-entry-id=${item.entry_id}
|
||||
></ha-config-sub-entry-row>
|
||||
`
|
||||
)}`
|
||||
: html`
|
||||
${groupDevicesByParent(ownDevices).map(
|
||||
({ device, isChild, isLastChild }) =>
|
||||
html`<ha-config-entry-device-row
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.entry=${item}
|
||||
.device=${device}
|
||||
.entities=${entities}
|
||||
.isChild=${isChild}
|
||||
.isLastChild=${isLastChild}
|
||||
></ha-config-entry-device-row>`
|
||||
)}
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
</ha-list-base>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
private _configPanel = memoizeOne(getConfigPanelPath);
|
||||
@@ -849,18 +844,22 @@ export class HaConfigEntryRow extends LitElement {
|
||||
.expand-button.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
ha-md-list {
|
||||
.config-entry-wrapper {
|
||||
border: 1px solid var(--divider-color);
|
||||
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
|
||||
padding: 0;
|
||||
background-color: var(--card-background-color);
|
||||
}
|
||||
:host([narrow]) {
|
||||
margin-left: -12px;
|
||||
margin-right: -12px;
|
||||
}
|
||||
ha-md-list.devices {
|
||||
.devices {
|
||||
margin: 16px;
|
||||
margin-top: 0;
|
||||
background-color: var(--card-background-color);
|
||||
}
|
||||
ha-icon-button {
|
||||
color: var(--ha-color-fill-neutral-loud-resting);
|
||||
}
|
||||
ha-icon-button.link {
|
||||
color: var(
|
||||
@@ -879,6 +878,11 @@ export class HaConfigEntryRow extends LitElement {
|
||||
ha-dropdown a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@@ -30,10 +30,10 @@ import { nextRender } from "../../../common/util/render-status";
|
||||
import "../../../components/ha-button";
|
||||
import "../../../components/ha-dropdown";
|
||||
import "../../../components/ha-dropdown-item";
|
||||
import "../../../components/ha-md-list";
|
||||
import "../../../components/ha-md-list-item";
|
||||
import "../../../components/input/ha-input-search";
|
||||
import type { HaInputSearch } from "../../../components/input/ha-input-search";
|
||||
import "../../../components/item/ha-list-item-base";
|
||||
import "../../../components/list/ha-list-base";
|
||||
import { getSignedPath } from "../../../data/auth";
|
||||
import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
|
||||
import {
|
||||
@@ -755,11 +755,11 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
||||
"ui.panel.config.integrations.discovered"
|
||||
)}
|
||||
</h3>
|
||||
<ha-md-list class="discovered">
|
||||
<ha-list-base class="discovered">
|
||||
${filteredDiscoveryData.map(
|
||||
(flow) =>
|
||||
html`<ha-md-list-item class="discovered">
|
||||
${flow.localized_title}
|
||||
html`<ha-list-item-base class="discovered">
|
||||
<span slot="headline">${flow.localized_title}</span>
|
||||
<ha-button
|
||||
slot="end"
|
||||
variant="success"
|
||||
@@ -769,9 +769,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
||||
>
|
||||
${this.hass.localize("ui.common.add")}
|
||||
</ha-button>
|
||||
</ha-md-list-item>`
|
||||
</ha-list-item-base>`
|
||||
)}
|
||||
</ha-md-list>
|
||||
</ha-list-base>
|
||||
</div>
|
||||
`
|
||||
: nothing
|
||||
@@ -787,15 +787,17 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
||||
</h3>
|
||||
${
|
||||
filteredAttentionFlows.length
|
||||
? html`<ha-md-list class="attention">
|
||||
? html`<ha-list-base class="attention">
|
||||
${filteredAttentionFlows.map((flow) => {
|
||||
const attention = ATTENTION_SOURCES.includes(
|
||||
flow.context.source
|
||||
);
|
||||
return html`<ha-md-list-item
|
||||
return html`<ha-list-item-base
|
||||
class="config_entry ${attention ? "attention" : ""}"
|
||||
>
|
||||
${flow.localized_title}
|
||||
<span slot="headline"
|
||||
>${flow.localized_title}</span
|
||||
>
|
||||
<span slot="supporting-text"
|
||||
>${this.hass.localize(
|
||||
`ui.panel.config.integrations.${
|
||||
@@ -814,9 +816,9 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
||||
}`
|
||||
)}</ha-button
|
||||
>
|
||||
</ha-md-list-item>`;
|
||||
</ha-list-item-base>`;
|
||||
})}
|
||||
</ha-md-list>`
|
||||
</ha-list-base>`
|
||||
: nothing
|
||||
}
|
||||
${filteredAttentionData.map(
|
||||
@@ -1516,26 +1518,21 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
||||
color: var(--mdc-theme-text-icon-on-background, rgba(0, 0, 0, 0.38));
|
||||
animation: unset;
|
||||
}
|
||||
ha-md-list {
|
||||
ha-list-base {
|
||||
border: 1px solid var(--divider-color);
|
||||
border-radius: var(--ha-border-radius-md);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.discovered {
|
||||
--md-list-container-color: rgba(var(--rgb-success-color), 0.2);
|
||||
ha-list-base.discovered {
|
||||
background-color: rgba(var(--rgb-success-color), 0.2);
|
||||
}
|
||||
.attention {
|
||||
--md-list-container-color: rgba(var(--rgb-warning-color), 0.2);
|
||||
ha-list-base.attention {
|
||||
background-color: rgba(var(--rgb-warning-color), 0.2);
|
||||
}
|
||||
ha-md-list-item {
|
||||
--md-list-item-top-space: 4px;
|
||||
--md-list-item-bottom-space: 4px;
|
||||
position: relative;
|
||||
ha-list-item-base.discovered {
|
||||
--ha-row-item-min-height: 72px;
|
||||
}
|
||||
ha-md-list-item.discovered {
|
||||
height: 72px;
|
||||
}
|
||||
ha-md-list-item.config_entry::after {
|
||||
ha-list-item-base.config_entry::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -1597,7 +1594,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
|
||||
.state-disabled [slot="supporting-text"] {
|
||||
opacity: var(--md-list-item-disabled-opacity, 0.3);
|
||||
}
|
||||
ha-md-list {
|
||||
ha-list-base {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@@ -13,13 +13,14 @@ import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import "../../../components/ha-dropdown";
|
||||
import "../../../components/ha-dropdown-item";
|
||||
import "../../../components/item/ha-row-item";
|
||||
import "../../../components/list/ha-list-base";
|
||||
import type { ConfigEntry } from "../../../data/config_entries";
|
||||
import { deleteSubEntry, updateSubEntry } from "../../../data/config_entries";
|
||||
import { groupDevicesByParent } from "../../../data/device/device_registry";
|
||||
import type { DiagnosticInfo } from "../../../data/diagnostics";
|
||||
import type { EntityRegistryEntry } from "../../../data/entity/entity_registry";
|
||||
import type { IntegrationManifest } from "../../../data/integration";
|
||||
import type { SubEntryData } from "./ha-config-integration-page";
|
||||
import { showSubConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-sub-config-flow";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import {
|
||||
@@ -27,6 +28,7 @@ import {
|
||||
showPromptDialog,
|
||||
} from "../../lovelace/custom-card-helpers";
|
||||
import "./ha-config-entry-device-row";
|
||||
import type { SubEntryData } from "./ha-config-integration-page";
|
||||
|
||||
@customElement("ha-config-sub-entry-row")
|
||||
class HaConfigSubEntryRow extends LitElement {
|
||||
@@ -54,8 +56,8 @@ class HaConfigSubEntryRow extends LitElement {
|
||||
const services = this.data.services;
|
||||
const entities = this._getEntities();
|
||||
|
||||
return html`<ha-md-list>
|
||||
<ha-md-list-item
|
||||
return html`<div class="sub-entry-card">
|
||||
<ha-row-item
|
||||
class="sub-entry"
|
||||
data-entry-id=${configEntry.entry_id}
|
||||
.configEntry=${configEntry}
|
||||
@@ -107,71 +109,65 @@ class HaConfigSubEntryRow extends LitElement {
|
||||
${
|
||||
devices.length || services.length
|
||||
? html`
|
||||
<a
|
||||
<ha-dropdown-item
|
||||
href=${
|
||||
devices.length === 1
|
||||
? `/config/devices/device/${devices[0].id}`
|
||||
: `/config/devices/dashboard?historyBack=1&config_entry=${configEntry.entry_id}&sub_entry=${subEntry.subentry_id}`
|
||||
}
|
||||
value="devices"
|
||||
>
|
||||
<ha-dropdown-item value="devices">
|
||||
<ha-svg-icon
|
||||
.path=${mdiDevices}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.devices`,
|
||||
{ count: devices.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
</a>
|
||||
<ha-svg-icon .path=${mdiDevices} slot="icon"></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.devices`,
|
||||
{ count: devices.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
${
|
||||
services.length
|
||||
? html`
|
||||
<a
|
||||
<ha-dropdown-item
|
||||
href=${
|
||||
services.length === 1
|
||||
? `/config/devices/device/${services[0].id}`
|
||||
: `/config/devices/dashboard?historyBack=1&config_entry=${configEntry.entry_id}&sub_entry=${subEntry.subentry_id}`
|
||||
}
|
||||
value="services"
|
||||
>
|
||||
<ha-dropdown-item value="services">
|
||||
<ha-svg-icon
|
||||
.path=${mdiHandExtendedOutline}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.services`,
|
||||
{ count: services.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
</a>
|
||||
<ha-svg-icon
|
||||
.path=${mdiHandExtendedOutline}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.services`,
|
||||
{ count: services.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
${
|
||||
entities.length
|
||||
? html`
|
||||
<a
|
||||
<ha-dropdown-item
|
||||
href=${`/config/entities?historyBack=1&config_entry=${configEntry.entry_id}&sub_entry=${subEntry.subentry_id}`}
|
||||
value="entities"
|
||||
>
|
||||
<ha-dropdown-item value="entities">
|
||||
<ha-svg-icon
|
||||
.path=${mdiShapeOutline}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.entities`,
|
||||
{ count: entities.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
</a>
|
||||
<ha-svg-icon
|
||||
.path=${mdiShapeOutline}
|
||||
slot="icon"
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.panel.config.integrations.config_entry.entities`,
|
||||
{ count: entities.length }
|
||||
)}
|
||||
<ha-icon-next slot="details"></ha-icon-next>
|
||||
</ha-dropdown-item>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
@@ -188,36 +184,38 @@ class HaConfigSubEntryRow extends LitElement {
|
||||
)}
|
||||
</ha-dropdown-item>
|
||||
</ha-dropdown>
|
||||
</ha-md-list-item>
|
||||
${
|
||||
this._expanded
|
||||
? html`
|
||||
${groupDevicesByParent(devices).map(
|
||||
({ device, isChild, isLastChild }) =>
|
||||
html`<ha-config-entry-device-row
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.entry=${this.entry}
|
||||
.device=${device}
|
||||
.entities=${this.entities}
|
||||
.isChild=${isChild}
|
||||
.isLastChild=${isLastChild}
|
||||
></ha-config-entry-device-row>`
|
||||
)}
|
||||
${services.map(
|
||||
(service) =>
|
||||
html`<ha-config-entry-device-row
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.entry=${this.entry}
|
||||
.device=${service}
|
||||
.entities=${this.entities}
|
||||
></ha-config-entry-device-row>`
|
||||
)}
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
</ha-md-list>`;
|
||||
</ha-row-item>
|
||||
<ha-list-base>
|
||||
${
|
||||
this._expanded
|
||||
? html`
|
||||
${groupDevicesByParent(devices).map(
|
||||
({ device, isChild, isLastChild }) =>
|
||||
html`<ha-config-entry-device-row
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.entry=${this.entry}
|
||||
.device=${device}
|
||||
.entities=${this.entities}
|
||||
.isChild=${isChild}
|
||||
.isLastChild=${isLastChild}
|
||||
></ha-config-entry-device-row>`
|
||||
)}
|
||||
${services.map(
|
||||
(service) =>
|
||||
html`<ha-config-entry-device-row
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
.entry=${this.entry}
|
||||
.device=${service}
|
||||
.entities=${this.entities}
|
||||
></ha-config-entry-device-row>`
|
||||
)}
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
</ha-list-base>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
private _toggleExpand() {
|
||||
@@ -305,18 +303,19 @@ class HaConfigSubEntryRow extends LitElement {
|
||||
.expand-button.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
ha-md-list {
|
||||
.sub-entry-card {
|
||||
border: 1px solid var(--divider-color);
|
||||
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
|
||||
padding: 0;
|
||||
margin: 16px;
|
||||
margin-top: 0;
|
||||
}
|
||||
ha-md-list-item.has-subentries {
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
ha-icon-button,
|
||||
ha-icon-next,
|
||||
ha-svg-icon {
|
||||
color: var(--ha-color-fill-neutral-loud-resting);
|
||||
}
|
||||
ha-dropdown a {
|
||||
text-decoration: none;
|
||||
ha-row-item.has-subentries {
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -174,6 +174,11 @@ class ZHANetworkInfoPage extends LitElement {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
ha-list-item-base::part(supporting-text) {
|
||||
font-size: var(--ha-font-size-m);
|
||||
white-space: normal;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
+5
@@ -111,6 +111,11 @@ class ZWaveJSNetworkInfoPage extends LitElement {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
ha-list-item-base::part(supporting-text) {
|
||||
font-size: var(--ha-font-size-m);
|
||||
white-space: normal;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { css, html, LitElement } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { isComponentLoaded } from "../../common/config/is_component_loaded";
|
||||
import "../../components/ha-card";
|
||||
import "../../components/ha-md-list";
|
||||
import { isExternal } from "../../data/external";
|
||||
import "../../layouts/hass-subpage";
|
||||
import { haStyle } from "../../resources/styles";
|
||||
@@ -46,47 +45,42 @@ class HaProfileSectionBrowser extends LitElement {
|
||||
<div class="card-content">
|
||||
${this.hass.localize("ui.panel.profile.client_settings_detail")}
|
||||
</div>
|
||||
<ha-md-list>
|
||||
${
|
||||
this.hass.dockedSidebar !== "auto" || !this.narrow
|
||||
? html`
|
||||
<ha-force-narrow-row
|
||||
.hass=${this.hass}
|
||||
></ha-force-narrow-row>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
"vibrate" in navigator
|
||||
? html`
|
||||
<ha-set-vibrate-row
|
||||
.hass=${this.hass}
|
||||
></ha-set-vibrate-row>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
!isExternal &&
|
||||
isComponentLoaded(this.hass.config, "html5.notify")
|
||||
? html`
|
||||
<ha-push-notifications-row
|
||||
.hass=${this.hass}
|
||||
></ha-push-notifications-row>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
<ha-set-suspend-row .hass=${this.hass}></ha-set-suspend-row>
|
||||
${
|
||||
!isMobileClient
|
||||
? html`
|
||||
<ha-enable-shortcuts-row
|
||||
id="shortcuts"
|
||||
.hass=${this.hass}
|
||||
></ha-enable-shortcuts-row>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</ha-md-list>
|
||||
${
|
||||
this.hass.dockedSidebar !== "auto" || !this.narrow
|
||||
? html`
|
||||
<ha-force-narrow-row
|
||||
.hass=${this.hass}
|
||||
></ha-force-narrow-row>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
"vibrate" in navigator
|
||||
? html`
|
||||
<ha-set-vibrate-row .hass=${this.hass}></ha-set-vibrate-row>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
${
|
||||
!isExternal && isComponentLoaded(this.hass.config, "html5.notify")
|
||||
? html`
|
||||
<ha-push-notifications-row
|
||||
.hass=${this.hass}
|
||||
></ha-push-notifications-row>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
<ha-set-suspend-row .hass=${this.hass}></ha-set-suspend-row>
|
||||
${
|
||||
!isMobileClient
|
||||
? html`
|
||||
<ha-enable-shortcuts-row
|
||||
id="shortcuts"
|
||||
.hass=${this.hass}
|
||||
></ha-enable-shortcuts-row>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</ha-card>
|
||||
</div>
|
||||
</hass-subpage>
|
||||
@@ -110,12 +104,6 @@ class HaProfileSectionBrowser extends LitElement {
|
||||
margin: 0 auto var(--ha-space-4);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
ha-md-list {
|
||||
background: none;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
@@ -4,8 +4,7 @@ import { css, html, LitElement } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import "../../components/ha-button";
|
||||
import "../../components/ha-card";
|
||||
import "../../components/ha-md-list";
|
||||
import "../../components/ha-md-list-item";
|
||||
import "../../components/item/ha-row-item";
|
||||
import type { CoreFrontendUserData } from "../../data/frontend";
|
||||
import { subscribeFrontendUserData } from "../../data/frontend";
|
||||
import { showEditSidebarDialog } from "../../dialogs/sidebar/show-dialog-edit-sidebar";
|
||||
@@ -81,40 +80,38 @@ class HaProfileSectionPreferences extends LitElement {
|
||||
.narrow=${this.narrow}
|
||||
.hass=${this.hass}
|
||||
></ha-pick-dashboard-row>
|
||||
<ha-md-list>
|
||||
<ha-md-list-item>
|
||||
<span slot="headline"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.profile.customize_sidebar.header"
|
||||
)}</span
|
||||
>
|
||||
<span slot="supporting-text"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.profile.customize_sidebar.description"
|
||||
)}</span
|
||||
>
|
||||
<ha-button
|
||||
slot="end"
|
||||
appearance="plain"
|
||||
size="s"
|
||||
@click=${this._customizeSidebar}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.profile.customize_sidebar.button"
|
||||
)}
|
||||
</ha-button>
|
||||
</ha-md-list-item>
|
||||
${
|
||||
this.hass.user!.is_admin
|
||||
? html`
|
||||
<ha-entity-id-picker-row
|
||||
.hass=${this.hass}
|
||||
.coreUserData=${this._coreUserData}
|
||||
></ha-entity-id-picker-row>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</ha-md-list>
|
||||
<ha-row-item>
|
||||
<span slot="headline"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.profile.customize_sidebar.header"
|
||||
)}</span
|
||||
>
|
||||
<span slot="supporting-text"
|
||||
>${this.hass.localize(
|
||||
"ui.panel.profile.customize_sidebar.description"
|
||||
)}</span
|
||||
>
|
||||
<ha-button
|
||||
slot="end"
|
||||
appearance="plain"
|
||||
size="s"
|
||||
@click=${this._customizeSidebar}
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.profile.customize_sidebar.button"
|
||||
)}
|
||||
</ha-button>
|
||||
</ha-row-item>
|
||||
${
|
||||
this.hass.user!.is_admin
|
||||
? html`
|
||||
<ha-entity-id-picker-row
|
||||
.hass=${this.hass}
|
||||
.coreUserData=${this._coreUserData}
|
||||
></ha-entity-id-picker-row>
|
||||
`
|
||||
: ""
|
||||
}
|
||||
</ha-card>
|
||||
</div>
|
||||
</hass-subpage>
|
||||
@@ -142,12 +139,6 @@ class HaProfileSectionPreferences extends LitElement {
|
||||
margin: 0 auto var(--ha-space-4);
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
ha-md-list {
|
||||
background: none;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user