mirror of
https://github.com/home-assistant/frontend.git
synced 2025-12-20 02:38:53 +00:00
Fix submenu
This commit is contained in:
Wendelin
@@ -1,7 +1,7 @@
|
||||
import "@home-assistant/webawesome/dist/components/divider/divider";
|
||||
import { ResizeController } from "@lit-labs/observers/resize-controller";
|
||||
import { consume } from "@lit/context";
|
||||
import {
|
||||
mdiChevronRight,
|
||||
mdiCog,
|
||||
mdiContentDuplicate,
|
||||
mdiDelete,
|
||||
@@ -36,7 +36,6 @@ import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import { navigate } from "../../../common/navigate";
|
||||
import { slugify } from "../../../common/string/slugify";
|
||||
import "../../../components/ha-tooltip";
|
||||
import type { LocalizeFunc } from "../../../common/translations/localize";
|
||||
import {
|
||||
hasRejectedItems,
|
||||
@@ -51,16 +50,15 @@ import type {
|
||||
} from "../../../components/data-table/ha-data-table";
|
||||
import "../../../components/data-table/ha-data-table-labels";
|
||||
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-filter-blueprints";
|
||||
import "../../../components/ha-filter-categories";
|
||||
import "../../../components/ha-filter-devices";
|
||||
import "../../../components/ha-filter-entities";
|
||||
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-icon-button";
|
||||
import "../../../components/ha-md-divider";
|
||||
@@ -69,6 +67,7 @@ import type { HaMdMenu } from "../../../components/ha-md-menu";
|
||||
import "../../../components/ha-md-menu-item";
|
||||
import type { HaMdMenuItem } from "../../../components/ha-md-menu-item";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import "../../../components/ha-tooltip";
|
||||
import { createAreaRegistryEntry } from "../../../data/area_registry";
|
||||
import type { AutomationEntity } from "../../../data/automation";
|
||||
import {
|
||||
@@ -412,27 +411,37 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
];
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
const categoryItems = html`${this._categories?.map(
|
||||
private _renderCategoryItems = (submenu = false) =>
|
||||
html`${this._categories?.map(
|
||||
(category) =>
|
||||
html`<ha-dropdown-item .value=${category.category_id}>
|
||||
html`<ha-dropdown-item
|
||||
.slot=${submenu ? "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 value="__no_category__">
|
||||
<ha-dropdown-item
|
||||
.slot=${submenu ? "submenu" : ""}
|
||||
value="__no_category__"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.bulk_actions.no_category"
|
||||
)}
|
||||
</ha-dropdown-item>
|
||||
<wa-divider></wa-divider>
|
||||
<ha-dropdown-item value="__create_category__">
|
||||
<wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
|
||||
<ha-dropdown-item
|
||||
.slot=${submenu ? "submenu" : ""}
|
||||
value="__create_category__"
|
||||
>
|
||||
${this.hass.localize("ui.panel.config.category.editor.add")}
|
||||
</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 selected = this._selected.every((entityId) =>
|
||||
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)
|
||||
);
|
||||
return html`<ha-dropdown-item
|
||||
.slot=${submenu ? "submenu" : ""}
|
||||
.value=${label.label_id}
|
||||
data-action=${selected ? "remove" : "add"}
|
||||
@click=${this._handleBulkLabel}
|
||||
keep-open
|
||||
>
|
||||
<ha-checkbox
|
||||
slot="icon"
|
||||
@@ -465,17 +474,22 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
</ha-label>
|
||||
</ha-dropdown-item>`;
|
||||
})}
|
||||
<wa-divider></wa-divider>
|
||||
<wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
|
||||
<ha-dropdown-item
|
||||
.slot=${submenu ? "submenu" : ""}
|
||||
value="__create_label__"
|
||||
@click=${this._bulkCreateLabel}
|
||||
>
|
||||
${this.hass.localize("ui.panel.config.labels.add_label")}
|
||||
</ha-dropdown-item>`;
|
||||
|
||||
const areaItems = html`${Object.values(this.hass.areas).map(
|
||||
private _renderAreaItems = (submenu = false) =>
|
||||
html`${Object.values(this.hass.areas).map(
|
||||
(area) =>
|
||||
html`<ha-dropdown-item .value=${area.area_id}>
|
||||
html`<ha-dropdown-item
|
||||
.slot=${submenu ? "submenu" : ""}
|
||||
.value=${area.area_id}
|
||||
>
|
||||
${area.icon
|
||||
? html`<ha-icon slot="icon" .icon=${area.icon}></ha-icon>`
|
||||
: html`<ha-svg-icon
|
||||
@@ -485,18 +499,22 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
${area.name}
|
||||
</ha-dropdown-item>`
|
||||
)}
|
||||
<ha-dropdown-item value="__no_area__">
|
||||
<ha-dropdown-item .slot=${submenu ? "submenu" : ""} value="__no_area__">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.devices.picker.bulk_actions.no_area"
|
||||
)}
|
||||
</ha-dropdown-item>
|
||||
<wa-divider></wa-divider>
|
||||
<ha-dropdown-item value="__create_area__">
|
||||
<wa-divider .slot=${submenu ? "submenu" : ""}></wa-divider>
|
||||
<ha-dropdown-item
|
||||
.slot=${submenu ? "submenu" : ""}
|
||||
value="__create_area__"
|
||||
>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.devices.picker.bulk_actions.add_area"
|
||||
)}
|
||||
</ha-dropdown-item>`;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
const areasInOverflow =
|
||||
(this._sizeController.value && this._sizeController.value < 900) ||
|
||||
(!this._sizeController.value && this.hass.dockedSidebar === "docked");
|
||||
@@ -647,7 +665,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
.path=${mdiMenuDown}
|
||||
></ha-svg-icon>
|
||||
</ha-assist-chip>
|
||||
${categoryItems}
|
||||
${this._renderCategoryItems()}
|
||||
</ha-dropdown>
|
||||
${labelsInOverflow
|
||||
? nothing
|
||||
@@ -663,7 +681,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
.path=${mdiMenuDown}
|
||||
></ha-svg-icon>
|
||||
</ha-assist-chip>
|
||||
${labelItems}
|
||||
${this._renderLabelItems()}
|
||||
</ha-dropdown>`}
|
||||
${areasInOverflow
|
||||
? nothing
|
||||
@@ -682,7 +700,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
.path=${mdiMenuDown}
|
||||
></ha-svg-icon>
|
||||
</ha-assist-chip>
|
||||
${areaItems}
|
||||
${this._renderAreaItems()}
|
||||
</ha-dropdown>`}`
|
||||
: nothing}
|
||||
<ha-dropdown
|
||||
@@ -714,31 +732,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.bulk_actions.move_category"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
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>
|
||||
${this._renderCategoryItems(true)}
|
||||
</ha-dropdown-item>`
|
||||
: nothing}
|
||||
${this.narrow || labelsInOverflow
|
||||
@@ -746,52 +740,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.automation.picker.bulk_actions.add_label"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
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>
|
||||
${this._renderLabelItems(true)}
|
||||
</ha-dropdown-item>`
|
||||
: nothing}
|
||||
${this.narrow || areasInOverflow
|
||||
@@ -799,33 +748,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.devices.picker.bulk_actions.move_area"
|
||||
)}
|
||||
<ha-svg-icon
|
||||
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>
|
||||
${this._renderAreaItems(true)}
|
||||
</ha-dropdown-item>`
|
||||
: nothing}
|
||||
<ha-dropdown-item value="enable">
|
||||
@@ -1338,6 +1261,7 @@ ${rejected
|
||||
}
|
||||
|
||||
private async _handleBulkLabel(ev) {
|
||||
ev.stopPropagation();
|
||||
const label = ev.currentTarget.value;
|
||||
const action = ev.currentTarget.dataset.action;
|
||||
this._bulkLabel(label, action);
|
||||
|
||||
Reference in New Issue
Block a user