Skip to content

Commit a88fcd4

Browse files
wendevlinwendevlin
committed
Fix submenu
1 parent 0a8c0c1 commit a88fcd4

1 file changed

Lines changed: 45 additions & 121 deletions

File tree

‎src/panels/config/automation/ha-automation-picker.ts‎

Lines changed: 45 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import "@home-assistant/webawesome/dist/components/divider/divider";
12
import { ResizeController } from "@lit-labs/observers/resize-controller";
23
import { consume } from "@lit/context";
34
import {
4-
mdiChevronRight,
55
mdiCog,
66
mdiContentDuplicate,
77
mdiDelete,
@@ -36,7 +36,6 @@ import { fireEvent } from "../../../common/dom/fire_event";
3636
import { computeStateName } from "../../../common/entity/compute_state_name";
3737
import { navigate } from "../../../common/navigate";
3838
import { slugify } from "../../../common/string/slugify";
39-
import "../../../components/ha-tooltip";
4039
import type { LocalizeFunc } from "../../../common/translations/localize";
4140
import {
4241
hasRejectedItems,
@@ -51,16 +50,15 @@ import type {
5150
} from "../../../components/data-table/ha-data-table";
5251
import "../../../components/data-table/ha-data-table-labels";
5352
import "../../../components/entity/ha-entity-toggle";
53+
import "../../../components/ha-dropdown";
54+
import "../../../components/ha-dropdown-item";
55+
import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
5456
import "../../../components/ha-fab";
5557
import "../../../components/ha-filter-blueprints";
5658
import "../../../components/ha-filter-categories";
5759
import "../../../components/ha-filter-devices";
5860
import "../../../components/ha-filter-entities";
5961
import "../../../components/ha-filter-floor-areas";
60-
import "@home-assistant/webawesome/dist/components/divider/divider";
61-
import "../../../components/ha-dropdown";
62-
import "../../../components/ha-dropdown-item";
63-
import type { HaDropdownItem } from "../../../components/ha-dropdown-item";
6462
import "../../../components/ha-filter-labels";
6563
import "../../../components/ha-icon-button";
6664
import "../../../components/ha-md-divider";
@@ -69,6 +67,7 @@ import type { HaMdMenu } from "../../../components/ha-md-menu";
6967
import "../../../components/ha-md-menu-item";
7068
import type { HaMdMenuItem } from "../../../components/ha-md-menu-item";
7169
import "../../../components/ha-svg-icon";
70+
import "../../../components/ha-tooltip";
7271
import { createAreaRegistryEntry } from "../../../data/area_registry";
7372
import type { AutomationEntity } from "../../../data/automation";
7473
import {
@@ -412,27 +411,37 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
412411
];
413412
}
414413

415-
protected render(): TemplateResult {
416-
const categoryItems = html`${this._categories?.map(
414+
private _renderCategoryItems = (submenu = false) =>
415+
html`${this._categories?.map(
417416
(category) =>
418-
html`<ha-dropdown-item .value=${category.category_id}>
417+
html`<ha-dropdown-item
418+
.slot=${submenu ? "submenu" : ""}
419+
.value=${category.category_id}
420+
>
419421
${category.icon
420422
? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
421423
: html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
422424
${category.name}
423425
</ha-dropdown-item>`
424426
)}
425-
<ha-dropdown-item value="__no_category__">
427+
<ha-dropdown-item
428+
.slot=${submenu ? "submenu" : ""}
429+
value="__no_category__"
430+
>
426431
${this.hass.localize(
427432
"ui.panel.config.automation.picker.bulk_actions.no_category"
428433
)}
429434
</ha-dropdown-item>
430-
<wa-divider></wa-divider>
431-
<ha-dropdown-item value="__create_category__">
435+
<wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
436+
<ha-dropdown-item
437+
.slot=${submenu ? "submenu" : ""}
438+
value="__create_category__"
439+
>
432440
${this.hass.localize("ui.panel.config.category.editor.add")}
433441
</ha-dropdown-item>`;
434442

435-
const labelItems = html`${this._labels?.map((label) => {
443+
private _renderLabelItems = (submenu = false) =>
444+
html`${this._labels?.map((label) => {
436445
const color = label.color ? computeCssColor(label.color) : undefined;
437446
const selected = this._selected.every((entityId) =>
438447
this.hass.entities[entityId]?.labels.includes(label.label_id)
@@ -443,10 +452,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
443452
this.hass.entities[entityId]?.labels.includes(label.label_id)
444453
);
445454
return html`<ha-dropdown-item
455+
.slot=${submenu ? "submenu" : ""}
446456
.value=${label.label_id}
447457
data-action=${selected ? "remove" : "add"}
448458
@click=${this._handleBulkLabel}
449-
keep-open
450459
>
451460
<ha-checkbox
452461
slot="icon"
@@ -465,17 +474,22 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
465474
</ha-label>
466475
</ha-dropdown-item>`;
467476
})}
468-
<wa-divider></wa-divider>
477+
<wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
469478
<ha-dropdown-item
479+
.slot=${submenu ? "submenu" : ""}
470480
value="__create_label__"
471481
@click=${this._bulkCreateLabel}
472482
>
473483
${this.hass.localize("ui.panel.config.labels.add_label")}
474484
</ha-dropdown-item>`;
475485

476-
const areaItems = html`${Object.values(this.hass.areas).map(
486+
private _renderAreaItems = (submenu = false) =>
487+
html`${Object.values(this.hass.areas).map(
477488
(area) =>
478-
html`<ha-dropdown-item .value=${area.area_id}>
489+
html`<ha-dropdown-item
490+
.slot=${submenu ? "submenu" : ""}
491+
.value=${area.area_id}
492+
>
479493
${area.icon
480494
? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
481495
: html`<ha-svg-icon
@@ -485,18 +499,22 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
485499
${area.name}
486500
</ha-dropdown-item>`
487501
)}
488-
<ha-dropdown-item value="__no_area__">
502+
<ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="__no_area__">
489503
${this.hass.localize(
490504
"ui.panel.config.devices.picker.bulk_actions.no_area"
491505
)}
492506
</ha-dropdown-item>
493-
<wa-divider></wa-divider>
494-
<ha-dropdown-item value="__create_area__">
507+
<wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
508+
<ha-dropdown-item
509+
.slot=${submenu ? "submenu" : ""}
510+
value="__create_area__"
511+
>
495512
${this.hass.localize(
496513
"ui.panel.config.devices.picker.bulk_actions.add_area"
497514
)}
498515
</ha-dropdown-item>`;
499516

517+
protected render(): TemplateResult {
500518
const areasInOverflow =
501519
(this._sizeController.value && this._sizeController.value < 900) ||
502520
(!this._sizeController.value && this.hass.dockedSidebar === "docked");
@@ -647,7 +665,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
647665
.path=${mdiMenuDown}
648666
></ha-svg-icon>
649667
</ha-assist-chip>
650-
${categoryItems}
668+
${this._renderCategoryItems()}
651669
</ha-dropdown>
652670
${labelsInOverflow
653671
? nothing
@@ -663,7 +681,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
663681
.path=${mdiMenuDown}
664682
></ha-svg-icon>
665683
</ha-assist-chip>
666-
${labelItems}
684+
${this._renderLabelItems()}
667685
</ha-dropdown>`}
668686
${areasInOverflow
669687
? nothing
@@ -682,7 +700,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
682700
.path=${mdiMenuDown}
683701
></ha-svg-icon>
684702
</ha-assist-chip>
685-
${areaItems}
703+
${this._renderAreaItems()}
686704
</ha-dropdown>`}`
687705
: nothing}
688706
<ha-dropdown
@@ -714,118 +732,23 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
714732
${this.hass.localize(
715733
"ui.panel.config.automation.picker.bulk_actions.move_category"
716734
)}
717-
<ha-svg-icon
718-
slot="details"
719-
.path=${mdiChevronRight}
720-
></ha-svg-icon>
721-
${this._categories?.map(
722-
(category) =>
723-
html`<ha-dropdown-item
724-
slot="submenu"
725-
.value=${category.category_id}
726-
>
727-
${category.icon
728-
? html`<ha-icon slot="icon" .icon=${category.icon}></ha-icon>`
729-
: html`<ha-svg-icon slot="icon" .path=${mdiTag}></ha-svg-icon>`}
730-
${category.name}
731-
</ha-dropdown-item>`
732-
)}
733-
<ha-dropdown-item slot="submenu" value="__no_category__">
734-
${this.hass.localize(
735-
"ui.panel.config.automation.picker.bulk_actions.no_category"
736-
)}
737-
</ha-dropdown-item>
738-
<wa-divider slot="submenu"></wa-divider>
739-
<ha-dropdown-item slot="submenu" value="__create_category__">
740-
${this.hass.localize("ui.panel.config.category.editor.add")}
741-
</ha-dropdown-item>
735+
${this._renderCategoryItems(true)}
742736
</ha-dropdown-item>`
743737
: nothing}
744738
${this.narrow || labelsInOverflow
745739
? html`<ha-dropdown-item>
746740
${this.hass.localize(
747741
"ui.panel.config.automation.picker.bulk_actions.add_label"
748742
)}
749-
<ha-svg-icon
750-
slot="details"
751-
.path=${mdiChevronRight}
752-
></ha-svg-icon>
753-
${this._labels?.map((label) => {
754-
const color = label.color ? computeCssColor(label.color) : undefined;
755-
const selected = this._selected.every((entityId) =>
756-
this.hass.entities[entityId]?.labels.includes(label.label_id)
757-
);
758-
const partial =
759-
!selected &&
760-
this._selected.some((entityId) =>
761-
this.hass.entities[entityId]?.labels.includes(label.label_id)
762-
);
763-
return html`<ha-dropdown-item
764-
slot="submenu"
765-
.value=${label.label_id}
766-
data-action=${selected ? "remove" : "add"}
767-
@click=${this._handleBulkLabel}
768-
keep-open
769-
>
770-
<ha-checkbox
771-
slot="icon"
772-
.checked=${selected}
773-
.indeterminate=${partial}
774-
reducedTouchTarget
775-
></ha-checkbox>
776-
<ha-label
777-
style=${color ? `--color: ${color}` : ""}
778-
.description=${label.description}
779-
>
780-
${label.icon
781-
? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
782-
: nothing}
783-
${label.name}
784-
</ha-label>
785-
</ha-dropdown-item>`;
786-
})}
787-
<wa-divider slot="submenu"></wa-divider>
788-
<ha-dropdown-item
789-
slot="submenu"
790-
value="__create_label__"
791-
@click=${this._bulkCreateLabel}
792-
>
793-
${this.hass.localize("ui.panel.config.labels.add_label")}
794-
</ha-dropdown-item>
743+
${this._renderLabelItems(true)}
795744
</ha-dropdown-item>`
796745
: nothing}
797746
${this.narrow || areasInOverflow
798747
? html`<ha-dropdown-item>
799748
${this.hass.localize(
800749
"ui.panel.config.devices.picker.bulk_actions.move_area"
801750
)}
802-
<ha-svg-icon
803-
slot="details"
804-
.path=${mdiChevronRight}
805-
></ha-svg-icon>
806-
${Object.values(this.hass.areas).map(
807-
(area) =>
808-
html`<ha-dropdown-item slot="submenu" .value=${area.area_id}>
809-
${area.icon
810-
? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
811-
: html`<ha-svg-icon
812-
slot="icon"
813-
.path=${mdiTextureBox}
814-
></ha-svg-icon>`}
815-
${area.name}
816-
</ha-dropdown-item>`
817-
)}
818-
<ha-dropdown-item slot="submenu" value="__no_area__">
819-
${this.hass.localize(
820-
"ui.panel.config.devices.picker.bulk_actions.no_area"
821-
)}
822-
</ha-dropdown-item>
823-
<wa-divider slot="submenu"></wa-divider>
824-
<ha-dropdown-item slot="submenu" value="__create_area__">
825-
${this.hass.localize(
826-
"ui.panel.config.devices.picker.bulk_actions.add_area"
827-
)}
828-
</ha-dropdown-item>
751+
${this._renderAreaItems(true)}
829752
</ha-dropdown-item>`
830753
: nothing}
831754
<ha-dropdown-item value="enable">
@@ -1338,6 +1261,7 @@ ${rejected
13381261
}
13391262

13401263
private async _handleBulkLabel(ev) {
1264+
ev.stopPropagation();
13411265
const label = ev.currentTarget.value;
13421266
const action = ev.currentTarget.dataset.action;
13431267
this._bulkLabel(label, action);

0 commit comments

Comments
 (0)