jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-08 10:29:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve labels picker

Browse Source
This commit is contained in:
Wendelin
2025-10-23 13:07:09 +02:00
parent 589645e70e
commit 1ba43a2fbb
4 changed files with 101 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ha-generic-picker.ts
View File

@@ -96,19 +96,22 @@ export class HaGenericPicker extends LitElement {
? html`<label ?disabled=${this.disabled}>${this.label}</label>`
: nothing}
<div class="container">
<div id="picker">
<slot name="field">
${this.addButtonLabel && !this.value
? html`<ha-button
id="picker"
size="small"
appearance="filled"
@click=${this.open}
.disabled=${this.disabled}
>
<ha-svg-icon .path=${mdiPlaylistPlus} slot="start"></ha-svg-icon>
<ha-svg-icon
.path=${mdiPlaylistPlus}
slot="start"
></ha-svg-icon>
${this.addButtonLabel}
</ha-button>`
: html`<ha-picker-field
id="picker"
type="button"
class=${this._opened ? "opened" : ""}
compact
@@ -123,6 +126,8 @@ export class HaGenericPicker extends LitElement {
.valueRenderer=${this.valueRenderer}
>
</ha-picker-field>`}
</slot>
</div>
${!this._openedNarrow && (this._pickerWrapperOpen || this._opened)
? html`
<wa-popover
@@ -234,7 +239,8 @@ export class HaGenericPicker extends LitElement {
fireEvent(this, "value-changed", { value });
}
public async open() {
public async open(ev?: Event) {
ev?.stopPropagation();
if (this.disabled) {
return;
}

12
src/components/ha-label-picker.ts
View File

@@ -2,7 +2,13 @@ import { mdiLabel, mdiPlus } from "@mdi/js";
import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import type { TemplateResult } from "lit";
import { LitElement, html } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import {
customElement,
property,
query,
queryAssignedElements,
state,
} from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import type { LabelRegistryEntry } from "../data/label_registry";
@@ -84,6 +90,9 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
@state() private _labels?: LabelRegistryEntry[];
@queryAssignedElements({ flatten: true })
private _slotNodes?: NodeListOf<HTMLElement>;
@query("ha-generic-picker") private _picker?: HaGenericPicker;
public async open() {
@@ -226,6 +235,7 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
.valueRenderer=${valueRenderer}
@value-changed=${this._valueChanged}
>
<slot .slot=${this._slotNodes?.length ? "field" : undefined}></slot>
</ha-generic-picker>
`;
}

44
src/components/ha-labels-picker.ts
View File

@@ -1,3 +1,4 @@
import { mdiPlaylistPlus } from "@mdi/js";
import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import type { TemplateResult } from "lit";
import { LitElement, css, html, nothing } from "lit";
@@ -123,10 +124,16 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
);
return html`
${this.label ? html`<label>${this.label}</label>` : nothing}
<ha-chip-set
@click=${this._openPicker}
class=${!labels?.length ? "clickable" : ""}
<ha-label-picker
.hass=${this.hass}
.helper=${this.helper}
.disabled=${this.disabled}
.required=${this.required}
.placeholder=${this.placeholder}
.excludeLabels=${this.value}
@value-changed=${this._labelChanged}
>
<ha-chip-set>
${labels?.length
? repeat(
labels,
@@ -155,19 +162,18 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
`;
}
)
: html`<div class="placeholder">
${this.hass.localize("ui.components.label-picker.labels")}
</div>`}
</ha-chip-set>
<ha-label-picker
.hass=${this.hass}
.helper=${this.helper}
: nothing}
<ha-button
id="picker"
size="small"
appearance="filled"
@click=${this._openPicker}
.disabled=${this.disabled}
.required=${this.required}
.placeholder=${this.placeholder}
.excludeLabels=${this.value}
@value-changed=${this._labelChanged}
>
<ha-svg-icon .path=${mdiPlaylistPlus} slot="start"></ha-svg-icon>
${this.hass.localize("ui.components.label-picker.add")}
</ha-button>
</ha-chip-set>
</ha-label-picker>
`;
}
@@ -210,16 +216,9 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
}
private _openPicker(ev: Event) {
const labels = this._sortedLabels(
this.value,
this._labels,
this.hass.locale.language
);
if (!labels?.length) {
ev.stopPropagation();
this.labelPicker.open();
}
}
static styles = css`
ha-chip-set {
@@ -230,9 +229,6 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
border-top-left-radius: var(--ha-border-radius-sm);
padding: var(--ha-space-3);
}
ha-chip-set.clickable {
cursor: pointer;
}
.placeholder {
color: var(--mdc-text-field-label-ink-color);
display: flex;

23
src/panels/config/areas/dialog-area-registry-detail.ts
View File

@@ -1,34 +1,34 @@
import type { HassEntity } from "home-assistant-js-websocket";
import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators";
import type { HassEntity } from "home-assistant-js-websocket";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/entity/ha-entity-picker";
import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
import "../../../components/ha-alert";
import "../../../components/ha-aliases-editor";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-floor-picker";
import "../../../components/ha-icon-picker";
import "../../../components/ha-labels-picker";
import "../../../components/ha-picture-upload";
import type { HaPictureUpload } from "../../../components/ha-picture-upload";
import "../../../components/ha-settings-row";
import "../../../components/ha-icon-picker";
import "../../../components/ha-floor-picker";
import "../../../components/entity/ha-entity-picker";
import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
import "../../../components/ha-textfield";
import "../../../components/ha-labels-picker";
import type {
AreaRegistryEntry,
AreaRegistryEntryMutableParams,
} from "../../../data/area_registry";
import { deleteAreaRegistryEntry } from "../../../data/area_registry";
import type { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant, ValueChangedEvent } from "../../../types";
import type { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";
import {
SENSOR_DEVICE_CLASS_HUMIDITY,
SENSOR_DEVICE_CLASS_TEMPERATURE,
} from "../../../data/sensor";
import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
import { createCloseHeading } from "../../../components/ha-dialog";
import type { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
import { haStyleDialog } from "../../../resources/styles";
import type { HomeAssistant, ValueChangedEvent } from "../../../types";
import type { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";
const cropOptions: CropOptions = {
round: false,
@@ -139,6 +139,7 @@ class DialogAreaDetail extends LitElement {
></ha-floor-picker>
<ha-labels-picker
.label=${this.hass.localize("ui.components.label-picker.labels")}
.hass=${this.hass}
.value=${this._labels}
@value-changed=${this._labelsChanged}