Add default to action editor (#7006)

* Add default to action editor

* only select default when action undefined

* Update action to actuall default when selecting default

* import type

* Tooltip and lokalize

* comments

* wording

* Comments

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Zack Barett 2020-09-29 15:45:13 -05:00 committed by GitHub
parent 7d1f9f3981
commit 9ac777d687
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 218 additions and 92 deletions

View File

@ -0,0 +1,45 @@
import { mdiHelpCircle } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import {
css,
customElement,
html,
LitElement,
property,
TemplateResult,
} from "lit-element";
import "./ha-svg-icon";
@customElement("ha-help-tooltip")
export class HaHelpTooltip extends LitElement {
@property() public label!: string;
@property() public position = "top";
protected render(): TemplateResult {
return html`
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
<paper-tooltip
offset="4"
.position=${this.position}
.fitToVisibleBounds=${true}
>${this.label}</paper-tooltip
>
`;
}
static get styles() {
return css`
ha-svg-icon {
--mdc-icon-size: var(--ha-help-tooltip-size, 14px);
color: var(--ha-help-tooltip-color, var(--disabled-text-color));
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-help-tooltip": HaHelpTooltip;
}
}

View File

@ -3,7 +3,10 @@ import "@polymer/paper-input/paper-input";
import "@polymer/paper-input/paper-textarea";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResult,
customElement,
html,
LitElement,
@ -11,6 +14,7 @@ import {
TemplateResult,
} from "lit-element";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-help-tooltip";
import "../../../components/ha-service-picker";
import {
ActionConfig,
@ -29,11 +33,9 @@ export class HuiActionEditor extends LitElement {
@property() public actions?: string[];
@property() protected hass?: HomeAssistant;
@property() public tooltipText?: string;
get _action(): string {
return this.config?.action || "";
}
@property() protected hass?: HomeAssistant;
get _navigation_path(): string {
const config = this.config as NavigateActionConfig;
@ -54,72 +56,131 @@ export class HuiActionEditor extends LitElement {
if (!this.hass || !this.actions) {
return html``;
}
return html`
<paper-dropdown-menu
.label="${this.label}"
.configValue="${"action"}"
@value-changed="${this._valueChanged}"
>
<paper-listbox
slot="dropdown-content"
.selected="${this.actions.indexOf(this._action)}"
<div class="dropdown">
<paper-dropdown-menu
.label=${this.label}
.configValue=${"action"}
@iron-select=${this._actionPicked}
>
${this.actions.map((action) => {
return html` <paper-item>${action}</paper-item> `;
})}
</paper-listbox>
</paper-dropdown-menu>
${this._action === "navigate"
<paper-listbox
slot="dropdown-content"
attr-for-selected="value"
.selected=${this.config?.action ?? "default"}
>
<paper-item .value=${"default"}
>${this.hass!.localize(
"ui.panel.lovelace.editor.action-editor.actions.default_action"
)}</paper-item
>
${this.actions.map((action) => {
return html`
<paper-item .value=${action}
>${this.hass!.localize(
`ui.panel.lovelace.editor.action-editor.actions.${action}`
)}</paper-item
>
`;
})}
</paper-listbox>
</paper-dropdown-menu>
${this.tooltipText
? html`
<ha-help-tooltip .label=${this.tooltipText}></ha-help-tooltip>
`
: ""}
</div>
${this.config?.action === "navigate"
? html`
<paper-input
label="Navigation Path"
.value="${this._navigation_path}"
.configValue="${"navigation_path"}"
@value-changed="${this._valueChanged}"
label=${this.hass!.localize(
"ui.panel.lovelace.editor.action-editor.navigation_path"
)}
.value=${this._navigation_path}
.configValue=${"navigation_path"}
@value-changed=${this._valueChanged}
></paper-input>
`
: ""}
${this._action === "url"
${this.config?.action === "url"
? html`
<paper-input
label="Url Path"
.value="${this._url_path}"
.configValue="${"url_path"}"
@value-changed="${this._valueChanged}"
label=${this.hass!.localize(
"ui.panel.lovelace.editor.action-editor.url_path"
)}
.value=${this._url_path}
.configValue=${"url_path"}
@value-changed=${this._valueChanged}
></paper-input>
`
: ""}
${this.config && this.config.action === "call-service"
${this.config?.action === "call-service"
? html`
<ha-service-picker
.hass=${this.hass}
.value="${this._service}"
.configValue="${"service"}"
@value-changed="${this._valueChanged}"
.value=${this._service}
.configValue=${"service"}
@value-changed=${this._valueChanged}
></ha-service-picker>
<b>Service data can only be entered in the code editor</b>
<b>
${this.hass!.localize(
"ui.panel.lovelace.editor.action-editor.editor_service_data"
)}
</b>
`
: ""}
`;
}
private _valueChanged(ev: Event): void {
private _actionPicked(ev: CustomEvent): void {
ev.stopPropagation();
if (!this.hass) {
return;
}
const item = ev.detail.item;
const value = item.value;
if (this.config?.action === value) {
return;
}
if (value === "default") {
fireEvent(this, "value-changed", { value: undefined });
if (this.config?.action) {
(this.shadowRoot!.querySelector(
"paper-listbox"
) as PaperListboxElement).select(this.config.action);
}
return;
}
fireEvent(this, "value-changed", {
value: { action: value },
});
}
private _valueChanged(ev: CustomEvent): void {
ev.stopPropagation();
if (!this.hass) {
return;
}
const target = ev.target! as EditorTarget;
if (this[`_${target.configValue}`] === target.value) {
const value = ev.detail.value;
if (this[`_${target.configValue}`] === value) {
return;
}
if (target.configValue) {
const newConfig =
target.configValue === "action"
? { action: target.value }
: { ...this.config!, [target.configValue!]: target.value };
fireEvent(this, "value-changed", { value: newConfig });
fireEvent(this, "value-changed", {
value: { ...this.config!, [target.configValue!]: value },
});
}
}
static get styles(): CSSResult {
return css`
.dropdown {
display: flex;
}
`;
}
}
declare global {

View File

@ -38,6 +38,15 @@ const cardConfigStruct = object({
show_state: optional(boolean()),
});
const actions = [
"more-info",
"toggle",
"navigate",
"url",
"call-service",
"none",
];
@customElement("hui-button-card-editor")
export class HuiButtonCardEditor extends LitElement
implements LovelaceCardEditor {
@ -80,8 +89,8 @@ export class HuiButtonCardEditor extends LitElement
: "";
}
get _tap_action(): ActionConfig {
return this._config!.tap_action || { action: "toggle" };
get _tap_action(): ActionConfig | undefined {
return this._config!.tap_action;
}
get _hold_action(): ActionConfig {
@ -97,14 +106,6 @@ export class HuiButtonCardEditor extends LitElement
return html``;
}
const actions = [
"more-info",
"toggle",
"navigate",
"url",
"call-service",
"none",
];
const dir = computeRTLDirection(this.hass!);
return html`
@ -117,9 +118,9 @@ export class HuiButtonCardEditor extends LitElement
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass=${this.hass}
.value="${this._entity}"
.value=${this._entity}
.configValue=${"entity"}
@value-changed="${this._valueChanged}"
@value-changed=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>
<div class="side-by-side">
@ -129,9 +130,9 @@ export class HuiButtonCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value="${this._name}"
.configValue="${"name"}"
@value-changed="${this._valueChanged}"
.value=${this._name}
.configValue=${"name"}
@value-changed=${this._valueChanged}
></paper-input>
<ha-icon-input
.label="${this.hass.localize(
@ -155,9 +156,9 @@ export class HuiButtonCardEditor extends LitElement
.dir=${dir}
>
<ha-switch
.checked="${this._show_name !== false}"
.configValue="${"show_name"}"
@change="${this._change}"
.checked=${this._show_name !== false}
.configValue=${"show_name"}
@change=${this._change}
></ha-switch>
</ha-formfield>
</div>
@ -183,9 +184,9 @@ export class HuiButtonCardEditor extends LitElement
.dir=${dir}
>
<ha-switch
.checked="${this._show_icon !== false}"
.configValue="${"show_icon"}"
@change="${this._change}"
.checked=${this._show_icon !== false}
.configValue=${"show_icon"}
@change=${this._change}
></ha-switch>
</ha-formfield>
</div>
@ -197,17 +198,17 @@ export class HuiButtonCardEditor extends LitElement
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value="${this._icon_height}"
.configValue="${"icon_height"}"
@value-changed="${this._valueChanged}"
.value=${this._icon_height}
.configValue=${"icon_height"}
@value-changed=${this._valueChanged}
type="number"
><div class="suffix" slot="suffix">px</div>
</paper-input>
<hui-theme-select-editor
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@value-changed="${this._valueChanged}"
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
</div>
<div class="side-by-side">
@ -218,10 +219,13 @@ export class HuiButtonCardEditor extends LitElement
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass=${this.hass}
.config="${this._tap_action}"
.actions="${actions}"
.configValue="${"tap_action"}"
@value-changed="${this._valueChanged}"
.config=${this._tap_action}
.actions=${actions}
.configValue=${"tap_action"}
.tooltipText=${this.hass.localize(
"ui.panel.lovelace.editor.card.button.default_action_help"
)}
@value-changed=${this._valueChanged}
></hui-action-editor>
<hui-action-editor
.label="${this.hass.localize(
@ -230,10 +234,13 @@ export class HuiButtonCardEditor extends LitElement
"ui.panel.lovelace.editor.card.config.optional"
)})"
.hass=${this.hass}
.config="${this._hold_action}"
.actions="${actions}"
.configValue="${"hold_action"}"
@value-changed="${this._valueChanged}"
.config=${this._hold_action}
.actions=${actions}
.configValue=${"hold_action"}
.tooltipText=${this.hass.localize(
"ui.panel.lovelace.editor.card.button.default_action_help"
)}
@value-changed=${this._valueChanged}
></hui-action-editor>
</div>
</div>
@ -251,11 +258,12 @@ export class HuiButtonCardEditor extends LitElement
return;
}
this._config = {
...this._config,
[target.configValue!]: value,
};
fireEvent(this, "config-changed", { config: this._config });
fireEvent(this, "config-changed", {
config: {
...this._config,
[target.configValue!]: value,
},
});
}
private _valueChanged(ev: CustomEvent): void {
@ -268,25 +276,22 @@ export class HuiButtonCardEditor extends LitElement
if (this[`_${target.configValue}`] === value) {
return;
}
let newConfig;
if (target.configValue) {
if (value !== false && !value) {
this._config = { ...this._config };
delete this._config[target.configValue!];
newConfig = { ...this._config };
delete newConfig[target.configValue!];
} else {
let newValue: string | undefined;
if (
target.configValue === "icon_height" &&
!isNaN(Number(target.value))
) {
newValue = `${String(value)}px`;
}
this._config = {
newConfig = {
...this._config,
[target.configValue!]: newValue !== undefined ? newValue : value,
[target.configValue!]:
target.configValue === "icon_height" && !isNaN(Number(target.value))
? `${String(value)}px`
: value,
};
}
}
fireEvent(this, "config-changed", { config: this._config });
fireEvent(this, "config-changed", { config: newConfig });
}
}

View File

@ -2247,6 +2247,20 @@
"para_migrate": "Home Assistant can add ID's to all your cards and views automatically for you by pressing the 'Migrate configuration' button.",
"migrate": "Migrate configuration"
},
"action-editor": {
"navigation_path": "Navigation Path",
"url_path": "Url Path",
"editor_service_data": "Service data can only be entered in the code editor",
"actions": {
"default_action": "Default Action",
"call-service": "Call Service",
"more-info": "More Info",
"toggle": "Toggle",
"navigate": "Navigate",
"url": "Url",
"none": "No Action"
}
},
"card": {
"alarm-panel": {
"name": "Alarm Panel",
@ -2304,7 +2318,8 @@
},
"button": {
"name": "Button",
"description": "The Button card allows you to add buttons to perform tasks."
"description": "The Button card allows you to add buttons to perform tasks.",
"default_action_help": "The default action depends on the entity's capabilities, it will either be toggled or the more info will be shown."
},
"entity-filter": {
"name": "Entity Filter",