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

Add support for custom color display in color picker (#22174)

Browse Source 
Add support for custom color in color picker
This commit is contained in:
Paul Bottein 2024-10-01 15:43:31 +02:00 committed by GitHub
parent f9814f35d1
commit 70d6cce8f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/ha-color-picker.ts
View File

@ -1,6 +1,6 @@
import { mdiInvertColorsOff, mdiPalette } from "@mdi/js"; import { mdiInvertColorsOff, mdiPalette } from "@mdi/js";
import { css, html, LitElement, nothing } from "lit"; import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import { computeCssColor, THEME_COLORS } from "../common/color/compute-color"; import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
@ -8,8 +8,9 @@ import { stopPropagation } from "../common/dom/stop_propagation";
import { LocalizeKeys } from "../common/translations/localize"; import { LocalizeKeys } from "../common/translations/localize";
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
import "./ha-list-item"; import "./ha-list-item";
import "./ha-select";
import "./ha-md-divider"; import "./ha-md-divider";
import "./ha-select";
import type { HaSelect } from "./ha-select";
@customElement("ha-color-picker") @customElement("ha-color-picker")
export class HaColorPicker extends LitElement { export class HaColorPicker extends LitElement {
@ -32,7 +33,17 @@ export class HaColorPicker extends LitElement {
@property({ type: Boolean }) public disabled = false; @property({ type: Boolean }) public disabled = false;
_valueSelected(ev) { @query("ha-select") private _select!: HaSelect;
connectedCallback(): void {
super.connectedCallback();
// Refresh layout options when the field is connected to the DOM to ensure current value displayed
this._select.layoutOptions();
}
private _valueSelected(ev) {
ev.stopPropagation();
if (!this.isConnected) return;
const value = ev.target.value; const value = ev.target.value;
this.value = value === this.defaultColor ? undefined : value; this.value = value === this.defaultColor ? undefined : value;
fireEvent(this, "value-changed", { fireEvent(this, "value-changed", {
@ -41,7 +52,13 @@ export class HaColorPicker extends LitElement {
} }
render() { render() {
const value = this.value || this.defaultColor; const value = this.value || this.defaultColor || "";
const isCustom = !(
THEME_COLORS.has(value) ||
value === "none" ||
value === "state"
);
return html` return html`
<ha-select <ha-select
@ -110,6 +127,14 @@ export class HaColorPicker extends LitElement {
</ha-list-item> </ha-list-item>
` `
)} )}
${isCustom
? html`
<ha-list-item .value=${value} graphic="icon">
${value}
<span slot="graphic">${this.renderColorCircle(value)}</span>
</ha-list-item>
`
: nothing}
</ha-select> </ha-select>
`; `;
} }