diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts index 317ed7f57f..3213f22a6f 100644 --- a/src/components/ha-filter-labels.ts +++ b/src/components/ha-filter-labels.ts @@ -3,10 +3,12 @@ import "@material/mwc-menu/mwc-menu-surface"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { CSSResultGroup, LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { mdiPlus } from "@mdi/js"; import { computeCssColor } from "../common/color/compute-color"; import { fireEvent } from "../common/dom/fire_event"; import { LabelRegistryEntry, + createLabelRegistryEntry, subscribeLabelRegistry, } from "../data/label_registry"; import { SubscribeMixin } from "../mixins/subscribe-mixin"; @@ -16,6 +18,7 @@ import "./ha-check-list-item"; import "./ha-expansion-panel"; import "./ha-icon"; import "./ha-label"; +import { showLabelDetailDialog } from "../panels/config/labels/show-dialog-label-detail"; @customElement("ha-filter-labels") export class HaFilterLabels extends SubscribeMixin(LitElement) { @@ -84,6 +87,12 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) { ` : nothing} + ${this.expanded + ? html` + + ${this.hass.localize("ui.panel.config.labels.add_label")} + ` + : nothing} `; } @@ -92,11 +101,17 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) { setTimeout(() => { if (!this.expanded) return; this.renderRoot.querySelector("mwc-list")!.style.height = - `${this.clientHeight - 49}px`; + `${this.clientHeight - (49 + 48)}px`; }, 300); } } + private _addLabel() { + showLabelDetailDialog(this, { + createEntry: (values) => createLabelRegistryEntry(this.hass, values), + }); + } + private _expandedWillChange(ev) { this._shouldRender = ev.detail.expanded; } diff --git a/src/translations/en.json b/src/translations/en.json index 2977e7e8f4..8e282fba9d 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -1959,7 +1959,11 @@ "labels": { "caption": "Labels", "description": "Group devices and entities", - "headers": { "name": "Name", "icon": "Icon", "color": "Color" }, + "headers": { + "name": "Name", + "icon": "Icon", + "color": "Color" + }, "add_label": "Add label", "no_labels": "You don't have any labels", "introduction": "Labels can help you organize your areas, devices and entities. They can be used to filter in the UI, or use them as a target in automations.", @@ -5388,7 +5392,6 @@ "type": "View type", "type_warning_sections": "You can not change your view to use the 'sections' view type because migration is not supported yet. Start from scratch with a new view if you want to experiment with the 'sections' view.", "type_warning_others": "You can not change your view to an other type because migration is not supported yet. Start from scratch with a new view if you want to use another view type.", - "types": { "masonry": "Masonry (default)", "sidebar": "Sidebar",