Icon pickers (#5453)

This commit is contained in:
Zack Arnett 2020-04-07 09:03:36 -04:00 committed by GitHub
parent 6ca944b7ef
commit 764234f744
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 16 deletions

View File

@ -10,6 +10,7 @@ import "@polymer/paper-input/paper-input";
import "../../components/hui-action-editor";
import "../../components/hui-theme-select-editor";
import "../../components/hui-entity-editor";
import "../../../../components/ha-icon-input";
import { struct } from "../../common/structs/struct";
import {
@ -23,6 +24,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { configElementStyle } from "./config-elements-style";
import { ActionConfig } from "../../../../data/lovelace";
import { ButtonCardConfig } from "../../cards/types";
import { stateIcon } from "../../../../common/entity/state_icon";
const cardConfigStruct = struct({
type: "string",
@ -127,16 +129,18 @@ export class HuiButtonCardEditor extends LitElement
.configValue="${"name"}"
@value-changed="${this._valueChanged}"
></paper-input>
<paper-input
<ha-icon-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value="${this._icon}"
.configValue="${"icon"}"
@value-changed="${this._valueChanged}"
></paper-input>
.value=${this._icon}
.placeholder=${this._icon ||
stateIcon(this.hass.states[this._entity])}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-input>
</div>
<div class="side-by-side">
<ha-switch

View File

@ -10,6 +10,7 @@ import "@polymer/paper-input/paper-input";
import "../../components/hui-action-editor";
import "../../components/hui-theme-select-editor";
import "../../components/hui-entity-editor";
import "../../../../components/ha-icon-input";
import { struct } from "../../common/structs/struct";
import { EntitiesEditorEvent, EditorTarget } from "../types";
@ -19,6 +20,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { configElementStyle } from "./config-elements-style";
import { EntityCardConfig } from "../../cards/types";
import { headerFooterConfigStructs } from "../../header-footer/types";
import { stateIcon } from "../../../../common/entity/state_icon";
const cardConfigStruct = struct({
type: "string",
@ -28,7 +30,6 @@ const cardConfigStruct = struct({
attribute: "string?",
unit: "string?",
theme: "string?",
header: struct.optional(headerFooterConfigStructs),
footer: struct.optional(headerFooterConfigStructs),
});
@ -99,16 +100,18 @@ export class HuiEntityCardEditor extends LitElement
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
<ha-icon-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._icon}
.placeholder=${this._icon ||
stateIcon(this.hass.states[this._entity])}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></paper-input>
></ha-icon-input>
</div>
<div class="side-by-side">
<paper-input

View File

@ -12,6 +12,7 @@ import "@polymer/paper-listbox/paper-listbox";
import "../../components/hui-theme-select-editor";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-icon-input";
import { struct } from "../../common/structs/struct";
import { EntitiesEditorEvent, EditorTarget } from "../types";
@ -20,6 +21,7 @@ import { LovelaceCardEditor } from "../../types";
import { fireEvent } from "../../../../common/dom/fire_event";
import { configElementStyle } from "./config-elements-style";
import { SensorCardConfig } from "../../cards/types";
import { stateIcon } from "../../../../common/entity/state_icon";
const cardConfigStruct = struct({
type: "string",
@ -111,16 +113,18 @@ export class HuiSensorCardEditor extends LitElement
@value-changed="${this._valueChanged}"
></paper-input>
<div class="side-by-side">
<paper-input
<ha-icon-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.icon"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value="${this._icon}"
.configValue="${"icon"}"
@value-changed="${this._valueChanged}"
></paper-input>
.value=${this._icon}
.placeholder=${this._icon ||
stateIcon(this.hass.states[this._entity])}
.configValue=${"icon"}
@value-changed=${this._valueChanged}
></ha-icon-input>
<paper-dropdown-menu
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.sensor.graph_type"