Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-24 04:39:01 +00:00
Code Activity

Fix submenu

Browse Source
This commit is contained in:
Wendelin
2025-12-09 14:03:19 +01:00
parent 0a8c0c1c89
commit a88fcd41b5
1 changed files with 45 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/panels/config/automation/ha-automation-picker.ts
View File

@@ -1,7 +1,7 @@
import "@home-assistant/webawesome/dist/components/divider/divider";
import { ResizeController } from "@lit-labs/observers/resize-controller"; import { ResizeController } from "@lit-labs/observers/resize-controller";
import { consume } from "@lit/context"; import { consume } from "@lit/context";
import { import {
mdiChevronRight,
mdiCog, mdiCog,
mdiContentDuplicate, mdiContentDuplicate,
mdiDelete, mdiDelete,
@@ -36,7 +36,6 @@ import { fireEvent } from "../../../common/dom/fire_event";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
import { navigate } from "../../../common/navigate"; import { navigate } from "../../../common/navigate";
import { slugify } from "../../../common/string/slugify"; import { slugify } from "../../../common/string/slugify";
import "../../../components/ha-tooltip";
import type { LocalizeFunc } from "../../../common/translations/localize"; import type { LocalizeFunc } from "../../../common/translations/localize";
import { import {
hasRejectedItems, hasRejectedItems,
@@ -51,16 +50,15 @@ import type {
} from "../../../components/data-table/ha-data-table"; } from "../../../components/data-table/ha-data-table";
import "../../../components/data-table/ha-data-table-labels"; import "../../../components/data-table/ha-data-table-labels";
import "../../../components/entity/ha-entity-toggle"; import "../../../components/entity/ha-entity-toggle";
import "../../../components/ha-dropdown";
import "../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
import "../../../components/ha-fab"; import "../../../components/ha-fab";
import "../../../components/ha-filter-blueprints"; import "../../../components/ha-filter-blueprints";
import "../../../components/ha-filter-categories"; import "../../../components/ha-filter-categories";
import "../../../components/ha-filter-devices"; import "../../../components/ha-filter-devices";
import "../../../components/ha-filter-entities"; import "../../../components/ha-filter-entities";
import "../../../components/ha-filter-floor-areas"; import "../../../components/ha-filter-floor-areas";
import "@home-assistant/webawesome/dist/components/divider/divider";
import "../../../components/ha-dropdown";
import "../../../components/ha-dropdown-item";
import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
import "../../../components/ha-filter-labels"; import "../../../components/ha-filter-labels";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-md-divider"; import "../../../components/ha-md-divider";
@@ -69,6 +67,7 @@ import type { HaMdMenu } from "../../../components/ha-md-menu";
import "../../../components/ha-md-menu-item"; import "../../../components/ha-md-menu-item";
import type { HaMdMenuItem } from "../../../components/ha-md-menu-item"; import type { HaMdMenuItem } from "../../../components/ha-md-menu-item";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
import "../../../components/ha-tooltip";
import { createAreaRegistryEntry } from "../../../data/area_registry"; import { createAreaRegistryEntry } from "../../../data/area_registry";
import type { AutomationEntity } from "../../../data/automation"; import type { AutomationEntity } from "../../../data/automation";
import { import {
@@ -412,27 +411,37 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
]; ];
} }
protected render(): TemplateResult { private _renderCategoryItems = (submenu = false) =>
const categoryItems = html`${this._categories?.map( html`${this._categories?.map(
(category) => (category) =>
html`<ha-dropdown-item .value=${category.category_id}> html`<ha-dropdown-item
.slot=${submenu ? "submenu" : ""}
.value=${category.category_id}
>
${category.icon ${category.icon
? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>` ? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
: html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`} : html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
${category.name} ${category.name}
</ha-dropdown-item>` </ha-dropdown-item>`
)} )}
<ha-dropdown-item value="__no_category__"> <ha-dropdown-item
.slot=${submenu ? "submenu" : ""}
value="__no_category__"
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.no_category" "ui.panel.config.automation.picker.bulk_actions.no_category"
)} )}
</ha-dropdown-item> </ha-dropdown-item>
<wa-divider></wa-divider> <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
<ha-dropdown-item value="__create_category__"> <ha-dropdown-item
.slot=${submenu ? "submenu" : ""}
value="__create_category__"
>
${this.hass.localize("ui.panel.config.category.editor.add")} ${this.hass.localize("ui.panel.config.category.editor.add")}
</ha-dropdown-item>`; </ha-dropdown-item>`;
const labelItems = html`${this._labels?.map((label) => { private _renderLabelItems = (submenu = false) =>
html`${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined; const color = label.color ? computeCssColor(label.color) : undefined;
const selected = this._selected.every((entityId) => const selected = this._selected.every((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id) this.hass.entities[entityId]?.labels.includes(label.label_id)
@@ -443,10 +452,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
this.hass.entities[entityId]?.labels.includes(label.label_id) this.hass.entities[entityId]?.labels.includes(label.label_id)
); );
return html`<ha-dropdown-item return html`<ha-dropdown-item
.slot=${submenu ? "submenu" : ""}
.value=${label.label_id} .value=${label.label_id}
data-action=${selected ? "remove" : "add"} data-action=${selected ? "remove" : "add"}
@click=${this._handleBulkLabel} @click=${this._handleBulkLabel}
keep-open
> >
<ha-checkbox <ha-checkbox
slot="icon" slot="icon"
@@ -465,17 +474,22 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
</ha-label> </ha-label>
</ha-dropdown-item>`; </ha-dropdown-item>`;
})} })}
<wa-divider></wa-divider> <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
<ha-dropdown-item <ha-dropdown-item
.slot=${submenu ? "submenu" : ""}
value="__create_label__" value="__create_label__"
@click=${this._bulkCreateLabel} @click=${this._bulkCreateLabel}
> >
${this.hass.localize("ui.panel.config.labels.add_label")} ${this.hass.localize("ui.panel.config.labels.add_label")}
</ha-dropdown-item>`; </ha-dropdown-item>`;
const areaItems = html`${Object.values(this.hass.areas).map( private _renderAreaItems = (submenu = false) =>
html`${Object.values(this.hass.areas).map(
(area) => (area) =>
html`<ha-dropdown-item .value=${area.area_id}> html`<ha-dropdown-item
.slot=${submenu ? "submenu" : ""}
.value=${area.area_id}
>
${area.icon ${area.icon
? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>` ? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
: html`<ha-svg-icon : html`<ha-svg-icon
@@ -485,18 +499,22 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
${area.name} ${area.name}
</ha-dropdown-item>` </ha-dropdown-item>`
)} )}
<ha-dropdown-item value="__no_area__"> <ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="__no_area__">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.picker.bulk_actions.no_area" "ui.panel.config.devices.picker.bulk_actions.no_area"
)} )}
</ha-dropdown-item> </ha-dropdown-item>
<wa-divider></wa-divider> <wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
<ha-dropdown-item value="__create_area__"> <ha-dropdown-item
.slot=${submenu ? "submenu" : ""}
value="__create_area__"
>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.picker.bulk_actions.add_area" "ui.panel.config.devices.picker.bulk_actions.add_area"
)} )}
</ha-dropdown-item>`; </ha-dropdown-item>`;
protected render(): TemplateResult {
const areasInOverflow = const areasInOverflow =
(this._sizeController.value && this._sizeController.value < 900) || (this._sizeController.value && this._sizeController.value < 900) ||
(!this._sizeController.value && this.hass.dockedSidebar === "docked"); (!this._sizeController.value && this.hass.dockedSidebar === "docked");
@@ -647,7 +665,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
.path=${mdiMenuDown} .path=${mdiMenuDown}
></ha-svg-icon> ></ha-svg-icon>
</ha-assist-chip> </ha-assist-chip>
${categoryItems} ${this._renderCategoryItems()}
</ha-dropdown> </ha-dropdown>
${labelsInOverflow ${labelsInOverflow
? nothing ? nothing
@@ -663,7 +681,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
.path=${mdiMenuDown} .path=${mdiMenuDown}
></ha-svg-icon> ></ha-svg-icon>
</ha-assist-chip> </ha-assist-chip>
${labelItems} ${this._renderLabelItems()}
</ha-dropdown>`} </ha-dropdown>`}
${areasInOverflow ${areasInOverflow
? nothing ? nothing
@@ -682,7 +700,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
.path=${mdiMenuDown} .path=${mdiMenuDown}
></ha-svg-icon> ></ha-svg-icon>
</ha-assist-chip> </ha-assist-chip>
${areaItems} ${this._renderAreaItems()}
</ha-dropdown>`}` </ha-dropdown>`}`
: nothing} : nothing}
<ha-dropdown <ha-dropdown
@@ -714,31 +732,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.move_category" "ui.panel.config.automation.picker.bulk_actions.move_category"
)} )}
<ha-svg-icon ${this._renderCategoryItems(true)}
slot="details"
.path=${mdiChevronRight}
></ha-svg-icon>
${this._categories?.map(
(category) =>
html`<ha-dropdown-item
slot="submenu"
.value=${category.category_id}
>
${category.icon
? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
: html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
${category.name}
</ha-dropdown-item>`
)}
<ha-dropdown-item slot="submenu" value="__no_category__">
${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.no_category"
)}
</ha-dropdown-item>
<wa-divider slot="submenu"></wa-divider>
<ha-dropdown-item slot="submenu" value="__create_category__">
${this.hass.localize("ui.panel.config.category.editor.add")}
</ha-dropdown-item>
</ha-dropdown-item>` </ha-dropdown-item>`
: nothing} : nothing}
${this.narrow || labelsInOverflow ${this.narrow || labelsInOverflow
@@ -746,52 +740,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.add_label" "ui.panel.config.automation.picker.bulk_actions.add_label"
)} )}
<ha-svg-icon ${this._renderLabelItems(true)}
slot="details"
.path=${mdiChevronRight}
></ha-svg-icon>
${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined;
const selected = this._selected.every((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
const partial =
!selected &&
this._selected.some((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
return html`<ha-dropdown-item
slot="submenu"
.value=${label.label_id}
data-action=${selected ? "remove" : "add"}
@click=${this._handleBulkLabel}
keep-open
>
<ha-checkbox
slot="icon"
.checked=${selected}
.indeterminate=${partial}
reducedTouchTarget
></ha-checkbox>
<ha-label
style=${color ? `--color: ${color}` : ""}
.description=${label.description}
>
${label.icon
? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
: nothing}
${label.name}
</ha-label>
</ha-dropdown-item>`;
})}
<wa-divider slot="submenu"></wa-divider>
<ha-dropdown-item
slot="submenu"
value="__create_label__"
@click=${this._bulkCreateLabel}
>
${this.hass.localize("ui.panel.config.labels.add_label")}
</ha-dropdown-item>
</ha-dropdown-item>` </ha-dropdown-item>`
: nothing} : nothing}
${this.narrow || areasInOverflow ${this.narrow || areasInOverflow
@@ -799,33 +748,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.devices.picker.bulk_actions.move_area" "ui.panel.config.devices.picker.bulk_actions.move_area"
)} )}
<ha-svg-icon ${this._renderAreaItems(true)}
slot="details"
.path=${mdiChevronRight}
></ha-svg-icon>
${Object.values(this.hass.areas).map(
(area) =>
html`<ha-dropdown-item slot="submenu" .value=${area.area_id}>
${area.icon
? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
: html`<ha-svg-icon
slot="icon"
.path=${mdiTextureBox}
></ha-svg-icon>`}
${area.name}
</ha-dropdown-item>`
)}
<ha-dropdown-item slot="submenu" value="__no_area__">
${this.hass.localize(
"ui.panel.config.devices.picker.bulk_actions.no_area"
)}
</ha-dropdown-item>
<wa-divider slot="submenu"></wa-divider>
<ha-dropdown-item slot="submenu" value="__create_area__">
${this.hass.localize(
"ui.panel.config.devices.picker.bulk_actions.add_area"
)}
</ha-dropdown-item>
</ha-dropdown-item>` </ha-dropdown-item>`
: nothing} : nothing}
<ha-dropdown-item value="enable"> <ha-dropdown-item value="enable">
@@ -1338,6 +1261,7 @@ ${rejected
} }
private async _handleBulkLabel(ev) { private async _handleBulkLabel(ev) {
ev.stopPropagation();
const label = ev.currentTarget.value; const label = ev.currentTarget.value;
const action = ev.currentTarget.dataset.action; const action = ev.currentTarget.dataset.action;
this._bulkLabel(label, action); this._bulkLabel(label, action);