mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
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:
parent
7d1f9f3981
commit
9ac777d687
45
src/components/ha-help-tooltip.ts
Normal file
45
src/components/ha-help-tooltip.ts
Normal 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;
|
||||
}
|
||||
}
|
@ -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 {
|
||||
|
@ -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 });
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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",
|
||||
|
Loading…
x
Reference in New Issue
Block a user