Add ui-color selector (#14348)
This commit is contained in:
parent
d6fa1427f1
commit
7a87dc4d8a
|
@ -0,0 +1,42 @@
|
|||
import { html, LitElement } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { ActionConfig } from "../../data/lovelace";
|
||||
import { UiColorSelector } from "../../data/selector";
|
||||
import "../../panels/lovelace/components/hui-color-picker";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
@customElement("ha-selector-ui-color")
|
||||
export class HaSelectorUiColor extends LitElement {
|
||||
@property() public hass!: HomeAssistant;
|
||||
|
||||
@property() public selector!: UiColorSelector;
|
||||
|
||||
@property() public value?: ActionConfig;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@property() public helper?: string;
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<hui-color-picker
|
||||
.label=${this.label}
|
||||
.hass=${this.hass}
|
||||
.value=${this.value}
|
||||
.helper=${this.helper}
|
||||
@value-changed=${this._valueChanged}
|
||||
></hui-color-picker>
|
||||
`;
|
||||
}
|
||||
|
||||
private _valueChanged(ev: CustomEvent) {
|
||||
fireEvent(this, "value-changed", { value: ev.detail.value });
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-selector-ui-color": HaSelectorUiColor;
|
||||
}
|
||||
}
|
|
@ -34,6 +34,7 @@ const LOAD_ELEMENTS = {
|
|||
location: () => import("./ha-selector-location"),
|
||||
color_temp: () => import("./ha-selector-color-temp"),
|
||||
"ui-action": () => import("./ha-selector-ui-action"),
|
||||
"ui-color": () => import("./ha-selector-ui-color"),
|
||||
};
|
||||
|
||||
@customElement("ha-selector")
|
||||
|
|
|
@ -33,7 +33,8 @@ export type Selector =
|
|||
| TemplateSelector
|
||||
| ThemeSelector
|
||||
| TimeSelector
|
||||
| UiActionSelector;
|
||||
| UiActionSelector
|
||||
| UiColorSelector;
|
||||
|
||||
export interface ActionSelector {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
|
@ -273,6 +274,11 @@ export interface UiActionSelector {
|
|||
} | null;
|
||||
}
|
||||
|
||||
export interface UiColorSelector {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
"ui-color": {} | null;
|
||||
}
|
||||
|
||||
export const filterSelectorDevices = (
|
||||
filterDevice: SelectorDevice,
|
||||
device: DeviceRegistryEntry,
|
||||
|
|
|
@ -0,0 +1,105 @@
|
|||
import "@material/mwc-list/mwc-list-item";
|
||||
import { css, html, LitElement } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import {
|
||||
computeRgbColor,
|
||||
THEME_COLORS,
|
||||
} from "../../../common/color/compute-color";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { stopPropagation } from "../../../common/dom/stop_propagation";
|
||||
import "../../../components/ha-select";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
|
||||
@customElement("hui-color-picker")
|
||||
export class HuiColorPicker extends LitElement {
|
||||
@property() public label?: string;
|
||||
|
||||
@property() public helper?: string;
|
||||
|
||||
@property() public hass!: HomeAssistant;
|
||||
|
||||
@property() public value?: string;
|
||||
|
||||
@property({ type: Boolean }) public disabled = false;
|
||||
|
||||
_valueSelected(ev) {
|
||||
const value = ev.target.value;
|
||||
if (value) {
|
||||
fireEvent(this, "value-changed", {
|
||||
value: value !== "default" ? value : undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<ha-select
|
||||
.icon=${Boolean(this.value)}
|
||||
.label=${this.label}
|
||||
.value=${this.value || "default"}
|
||||
.helper=${this.helper}
|
||||
.disabled=${this.disabled}
|
||||
@closed=${stopPropagation}
|
||||
@selected=${this._valueSelected}
|
||||
fixedMenuPosition
|
||||
naturalMenuWidth
|
||||
>
|
||||
${this.value
|
||||
? html`
|
||||
<span slot="icon">
|
||||
${this.renderColorCircle(this.value || "grey")}
|
||||
</span>
|
||||
`
|
||||
: null}
|
||||
<mwc-list-item value="default">
|
||||
${this.hass.localize(
|
||||
`ui.panel.lovelace.editor.color-picker.default_color`
|
||||
)}
|
||||
</mwc-list-item>
|
||||
${Array.from(THEME_COLORS).map(
|
||||
(color) => html`
|
||||
<mwc-list-item .value=${color} graphic="icon">
|
||||
${this.hass.localize(
|
||||
`ui.panel.lovelace.editor.color-picker.colors.${color}`
|
||||
) || color}
|
||||
<span slot="graphic">${this.renderColorCircle(color)}</span>
|
||||
</mwc-list-item>
|
||||
`
|
||||
)}
|
||||
</ha-select>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderColorCircle(color: string) {
|
||||
return html`
|
||||
<span
|
||||
class="circle-color"
|
||||
style=${styleMap({
|
||||
"--circle-color": computeRgbColor(color),
|
||||
})}
|
||||
></span>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
.circle-color {
|
||||
display: block;
|
||||
background-color: rgb(var(--circle-color));
|
||||
border-radius: 10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
ha-select {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"hui-color-picker": HuiColorPicker;
|
||||
}
|
||||
}
|
|
@ -13,11 +13,9 @@ import {
|
|||
optional,
|
||||
string,
|
||||
} from "superstruct";
|
||||
import { THEME_COLORS } from "../../../../common/color/compute-color";
|
||||
import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
|
||||
import { computeDomain } from "../../../../common/entity/compute_domain";
|
||||
import { domainIcon } from "../../../../common/entity/domain_icon";
|
||||
import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
|
||||
import "../../../../components/ha-form/ha-form";
|
||||
import type { SchemaUnion } from "../../../../components/ha-form/types";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
|
@ -93,20 +91,7 @@ export class HuiTileCardEditor
|
|||
{
|
||||
name: "color",
|
||||
selector: {
|
||||
select: {
|
||||
options: [
|
||||
{
|
||||
label: this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.tile.default_color`
|
||||
),
|
||||
value: "default",
|
||||
},
|
||||
...Array.from(THEME_COLORS).map((color) => ({
|
||||
label: capitalizeFirstLetter(color),
|
||||
value: color,
|
||||
})),
|
||||
],
|
||||
},
|
||||
"ui-color": {},
|
||||
},
|
||||
},
|
||||
{
|
||||
|
@ -159,11 +144,6 @@ export class HuiTileCardEditor
|
|||
stateObj
|
||||
);
|
||||
|
||||
const data = {
|
||||
color: "default",
|
||||
...this._config,
|
||||
};
|
||||
|
||||
if (this._subElementEditorConfig) {
|
||||
return html`
|
||||
<hui-sub-element-editor
|
||||
|
@ -179,7 +159,7 @@ export class HuiTileCardEditor
|
|||
return html`
|
||||
<ha-form
|
||||
.hass=${this.hass}
|
||||
.data=${data}
|
||||
.data=${this._config}
|
||||
.schema=${schema}
|
||||
.computeLabel=${this._computeLabelCallback}
|
||||
@value-changed=${this._valueChanged}
|
||||
|
@ -204,9 +184,6 @@ export class HuiTileCardEditor
|
|||
extras: this._config.extras,
|
||||
...ev.detail.value,
|
||||
};
|
||||
if (ev.detail.value.color === "default") {
|
||||
config.color = undefined;
|
||||
}
|
||||
fireEvent(this, "config-changed", { config });
|
||||
}
|
||||
|
||||
|
|
|
@ -4255,6 +4255,36 @@
|
|||
"warning_multiple_cards": "This view contains more than one card, but a panel view can only show 1 card."
|
||||
}
|
||||
},
|
||||
"color-picker": {
|
||||
"default_color": "Default color (state)",
|
||||
"colors": {
|
||||
"primary": "Primary",
|
||||
"accent": "Accent",
|
||||
"disabled": "Disabled",
|
||||
"red": "Red",
|
||||
"pink": "Pink",
|
||||
"purple": "Purple",
|
||||
"deep-purple": "Deep purple",
|
||||
"indigo": "Indigo",
|
||||
"blue": "Blue",
|
||||
"light-blue": "Light blue",
|
||||
"cyan": "Cyan",
|
||||
"teal": "Teal",
|
||||
"green": "Green",
|
||||
"light-green": "Light Green",
|
||||
"lime": "Lime",
|
||||
"yellow": "Yellow",
|
||||
"amber": "Amber",
|
||||
"orange": "Orange",
|
||||
"deep-orange": "Deep orange",
|
||||
"brown": "Brown",
|
||||
"grey": "Grey",
|
||||
"blue-grey": "Blue grey",
|
||||
"black": "Black",
|
||||
"white": "White"
|
||||
}
|
||||
},
|
||||
|
||||
"cardpicker": {
|
||||
"no_description": "No description available.",
|
||||
"custom_card": "Custom",
|
||||
|
|
Loading…
Reference in New Issue