jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-30 12:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve icon picker

Browse Source
This commit is contained in:
Paul Bottein 2024-09-10 14:41:22 +02:00
parent bfa21b5380
commit 82a7d8ea06
No known key found for this signature in database
3 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ha-icon-picker.ts
View File

@ -96,6 +96,9 @@ export class HaIconPicker extends LitElement {
@property({ type: Boolean }) public invalid = false; @property({ type: Boolean }) public invalid = false;
@property({ type: Boolean, attribute: "force-fallback-icon" })
public forceFallbackIcon = false;
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<ha-combo-box <ha-combo-box
@ -117,7 +120,7 @@ export class HaIconPicker extends LitElement {
@opened-changed=${this._openedChanged} @opened-changed=${this._openedChanged}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
> >
${this._value || this.placeholder ${(this._value || this.placeholder) && !this.forceFallbackIcon
? html` ? html`
<ha-icon .icon=${this._value || this.placeholder} slot="icon"> <ha-icon .icon=${this._value || this.placeholder} slot="icon">
</ha-icon> </ha-icon>

15
src/panels/config/entities/dialogs/dialog-entity-state-icon.ts
View File

@ -29,15 +29,20 @@ class DialogEntityStateIcon extends LitElement {
const icon = this._params.icon; const icon = this._params.icon;
this._config = icon ?? { this._config =
default: icon || (await entryIcon(this.hass, this._params.entry)) || "", typeof icon === "object"
}; ? icon
: {
default:
icon || (await entryIcon(this.hass, this._params.entry)) || "",
};
await this.updateComplete; await this.updateComplete;
} }
public closeDialog(): void { public closeDialog(): void {
this._params = undefined; this._params = undefined;
this._config = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
@ -83,7 +88,9 @@ class DialogEntityStateIcon extends LitElement {
this._submitting = true; this._submitting = true;
try { try {
const icon = const icon =
Object.keys(this._config!).length === 0 ? null : this._config!; !this._config || Object.keys(this._config).length === 0
? null
: this._config;
this._params!.updateIcon(icon); this._params!.updateIcon(icon);
this.closeDialog(); this.closeDialog();
} catch (err: any) { } catch (err: any) {

27
src/panels/config/entities/entity-registry-settings-editor.ts
View File

@ -352,7 +352,10 @@ export class EntityRegistrySettingsEditor extends LitElement {
} }
private _renderIconPicker(stateObj: HassEntity) { private _renderIconPicker(stateObj: HassEntity) {
const value = typeof this._icon === "object" ? "" : this._icon; const useStateIcon = typeof this._icon === "object";
const value = useStateIcon ? "Custom state icons" : this._icon;
const placeholder = const placeholder =
this.entry.original_icon || this.entry.original_icon ||
(stateObj && until(entityIcon(this.hass, stateObj))) || (stateObj && until(entityIcon(this.hass, stateObj))) ||
@ -367,16 +370,26 @@ export class EntityRegistrySettingsEditor extends LitElement {
.label=${this.hass.localize("ui.dialogs.entity_registry.editor.icon")} .label=${this.hass.localize("ui.dialogs.entity_registry.editor.icon")}
.placeholder=${placeholder} .placeholder=${placeholder}
.disabled=${this.disabled} .disabled=${this.disabled}
.forceFallbackIcon=${useStateIcon}
> >
${!this._icon && !stateObj?.attributes.icon && stateObj ${useStateIcon
? html` ? html`
<ha-state-icon <ha-icon
slot="fallback" slot="fallback"
.hass=${this.hass} .icon=${(this._icon as EntityRegistryIcon).state?.[
.stateObj=${stateObj} stateObj.state
></ha-state-icon> ] || (this._icon as EntityRegistryIcon).default}
></ha-icon>
` `
: nothing} : !this._icon && !stateObj?.attributes.icon && stateObj
? html`
<ha-state-icon
slot="fallback"
.hass=${this.hass}
.stateObj=${stateObj}
></ha-state-icon>
`
: nothing}
</ha-icon-picker> </ha-icon-picker>
<ha-icon-button <ha-icon-button
.path=${mdiCog} .path=${mdiCog}