mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
Use icons in add trigger/condition/action menus (#13452)
This commit is contained in:
Franck Nijhof
GitHub
parent
f5b44656cf
commit
8d18fb79fb
@ -1,16 +1,32 @@
|
||||
export const ACTION_TYPES = [
|
||||
"condition",
|
||||
"delay",
|
||||
"event",
|
||||
"play_media",
|
||||
"activate_scene",
|
||||
"service",
|
||||
"wait_template",
|
||||
"wait_for_trigger",
|
||||
"repeat",
|
||||
"choose",
|
||||
"if",
|
||||
"device_id",
|
||||
"stop",
|
||||
"parallel",
|
||||
];
|
||||
import {
|
||||
mdiAbTesting,
|
||||
mdiArrowDecision,
|
||||
mdiCallSplit,
|
||||
mdiChevronRight,
|
||||
mdiCloseOctagon,
|
||||
mdiDevices,
|
||||
mdiExclamation,
|
||||
mdiPalette,
|
||||
mdiPlay,
|
||||
mdiRefresh,
|
||||
mdiShuffleDisabled,
|
||||
mdiTimerOutline,
|
||||
mdiTrafficLight,
|
||||
} from "@mdi/js";
|
||||
|
||||
export const ACTION_TYPES = {
|
||||
condition: mdiAbTesting,
|
||||
delay: mdiTimerOutline,
|
||||
event: mdiExclamation,
|
||||
play_media: mdiPlay,
|
||||
activate_scene: mdiPalette,
|
||||
service: mdiChevronRight,
|
||||
wait_template: mdiTrafficLight,
|
||||
wait_for_trigger: mdiTrafficLight,
|
||||
repeat: mdiRefresh,
|
||||
choose: mdiArrowDecision,
|
||||
if: mdiCallSplit,
|
||||
device_id: mdiDevices,
|
||||
stop: mdiCloseOctagon,
|
||||
parallel: mdiShuffleDisabled,
|
||||
};
|
||||
|
||||
@ -1,15 +1,27 @@
|
||||
import type { Condition } from "./automation";
|
||||
import {
|
||||
mdiAmpersand,
|
||||
mdiCancel,
|
||||
mdiClockOutline,
|
||||
mdiCodeBraces,
|
||||
mdiDevices,
|
||||
mdiExclamation,
|
||||
mdiGateOr,
|
||||
mdiMapMarkerRadius,
|
||||
mdiNumeric,
|
||||
mdiStateMachine,
|
||||
mdiWeatherSunny,
|
||||
} from "@mdi/js";
|
||||
|
||||
export const CONDITION_TYPES: Condition["condition"][] = [
|
||||
"device",
|
||||
"and",
|
||||
"or",
|
||||
"not",
|
||||
"state",
|
||||
"numeric_state",
|
||||
"sun",
|
||||
"template",
|
||||
"time",
|
||||
"trigger",
|
||||
"zone",
|
||||
];
|
||||
export const CONDITION_TYPES = {
|
||||
device: mdiDevices,
|
||||
and: mdiAmpersand,
|
||||
or: mdiGateOr,
|
||||
not: mdiCancel,
|
||||
state: mdiStateMachine,
|
||||
numeric_state: mdiNumeric,
|
||||
sun: mdiWeatherSunny,
|
||||
template: mdiCodeBraces,
|
||||
time: mdiClockOutline,
|
||||
trigger: mdiExclamation,
|
||||
zone: mdiMapMarkerRadius,
|
||||
};
|
||||
|
||||
@ -1,19 +1,35 @@
|
||||
import type { Trigger } from "./automation";
|
||||
import {
|
||||
mdiAvTimer,
|
||||
mdiCalendar,
|
||||
mdiClockOutline,
|
||||
mdiCodeBraces,
|
||||
mdiDevices,
|
||||
mdiExclamation,
|
||||
mdiHomeAssistant,
|
||||
mdiMapMarker,
|
||||
mdiMapMarkerRadius,
|
||||
mdiNfcVariant,
|
||||
mdiNumeric,
|
||||
mdiStateMachine,
|
||||
mdiSwapHorizontal,
|
||||
mdiWeatherSunny,
|
||||
mdiWebhook,
|
||||
} from "@mdi/js";
|
||||
|
||||
export const TRIGGER_TYPES: Trigger["platform"][] = [
|
||||
"calendar",
|
||||
"device",
|
||||
"event",
|
||||
"state",
|
||||
"geo_location",
|
||||
"homeassistant",
|
||||
"mqtt",
|
||||
"numeric_state",
|
||||
"sun",
|
||||
"tag",
|
||||
"template",
|
||||
"time",
|
||||
"time_pattern",
|
||||
"webhook",
|
||||
"zone",
|
||||
];
|
||||
export const TRIGGER_TYPES = {
|
||||
calendar: mdiCalendar,
|
||||
device: mdiDevices,
|
||||
event: mdiExclamation,
|
||||
state: mdiStateMachine,
|
||||
geo_location: mdiMapMarker,
|
||||
homeassistant: mdiHomeAssistant,
|
||||
mqtt: mdiSwapHorizontal,
|
||||
numeric_state: mdiNumeric,
|
||||
sun: mdiWeatherSunny,
|
||||
tag: mdiNfcVariant,
|
||||
template: mdiCodeBraces,
|
||||
time: mdiClockOutline,
|
||||
time_pattern: mdiAvTimer,
|
||||
webhook: mdiWebhook,
|
||||
zone: mdiMapMarkerRadius,
|
||||
};
|
||||
|
||||
@ -51,7 +51,7 @@ const getType = (action: Action | undefined) => {
|
||||
if (["and", "or", "not"].some((key) => key in action)) {
|
||||
return "condition";
|
||||
}
|
||||
return ACTION_TYPES.find((option) => option in action);
|
||||
return Object.keys(ACTION_TYPES).find((option) => option in action);
|
||||
};
|
||||
|
||||
declare global {
|
||||
|
||||
@ -73,8 +73,10 @@ export default class HaAutomationAction extends LitElement {
|
||||
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
|
||||
</mwc-button>
|
||||
${this._processedTypes(this.hass.localize).map(
|
||||
([opt, label]) => html`
|
||||
<mwc-list-item .value=${opt}>${label}</mwc-list-item>
|
||||
([opt, label, icon]) => html`
|
||||
<mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
|
||||
${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
|
||||
></mwc-list-item>
|
||||
`
|
||||
)}
|
||||
</ha-button-menu>
|
||||
@ -104,9 +106,7 @@ export default class HaAutomationAction extends LitElement {
|
||||
}
|
||||
|
||||
private _addAction(ev: CustomEvent<ActionDetail>) {
|
||||
const action = (ev.currentTarget as HaSelect).items[ev.detail.index]
|
||||
.value as typeof ACTION_TYPES[number];
|
||||
|
||||
const action = (ev.currentTarget as HaSelect).items[ev.detail.index].value;
|
||||
const elClass = customElements.get(
|
||||
`ha-automation-action-${action}`
|
||||
) as CustomElementConstructor & { defaultConfig: Action };
|
||||
@ -158,16 +158,19 @@ export default class HaAutomationAction extends LitElement {
|
||||
}
|
||||
|
||||
private _processedTypes = memoizeOne(
|
||||
(localize: LocalizeFunc): [string, string][] =>
|
||||
ACTION_TYPES.map(
|
||||
(action) =>
|
||||
[
|
||||
action,
|
||||
localize(
|
||||
`ui.panel.config.automation.editor.actions.type.${action}.label`
|
||||
),
|
||||
] as [string, string]
|
||||
).sort((a, b) => stringCompare(a[1], b[1]))
|
||||
(localize: LocalizeFunc): [string, string, string][] =>
|
||||
Object.entries(ACTION_TYPES)
|
||||
.map(
|
||||
([action, icon]) =>
|
||||
[
|
||||
action,
|
||||
localize(
|
||||
`ui.panel.config.automation.editor.actions.type.${action}.label`
|
||||
),
|
||||
icon,
|
||||
] as [string, string, string]
|
||||
)
|
||||
.sort((a, b) => stringCompare(a[1], b[1]))
|
||||
);
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
|
||||
@ -34,8 +34,10 @@ export class HaConditionAction extends LitElement implements ActionElement {
|
||||
@selected=${this._typeChanged}
|
||||
>
|
||||
${this._processedTypes(this.hass.localize).map(
|
||||
([opt, label]) => html`
|
||||
<mwc-list-item .value=${opt}>${label}</mwc-list-item>
|
||||
([opt, label, icon]) => html`
|
||||
<mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
|
||||
${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
|
||||
></mwc-list-item>
|
||||
`
|
||||
)}
|
||||
</ha-select>
|
||||
@ -48,16 +50,19 @@ export class HaConditionAction extends LitElement implements ActionElement {
|
||||
}
|
||||
|
||||
private _processedTypes = memoizeOne(
|
||||
(localize: LocalizeFunc): [string, string][] =>
|
||||
CONDITION_TYPES.map(
|
||||
(condition) =>
|
||||
[
|
||||
condition,
|
||||
localize(
|
||||
`ui.panel.config.automation.editor.conditions.type.${condition}.label`
|
||||
),
|
||||
] as [string, string]
|
||||
).sort((a, b) => stringCompare(a[1], b[1]))
|
||||
(localize: LocalizeFunc): [string, string, string][] =>
|
||||
Object.entries(CONDITION_TYPES)
|
||||
.map(
|
||||
([condition, icon]) =>
|
||||
[
|
||||
condition,
|
||||
localize(
|
||||
`ui.panel.config.automation.editor.conditions.type.${condition}.label`
|
||||
),
|
||||
icon,
|
||||
] as [string, string, string]
|
||||
)
|
||||
.sort((a, b) => stringCompare(a[1], b[1]))
|
||||
);
|
||||
|
||||
private _conditionChanged(ev: CustomEvent) {
|
||||
|
||||
@ -103,8 +103,10 @@ export default class HaAutomationCondition extends LitElement {
|
||||
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
|
||||
</mwc-button>
|
||||
${this._processedTypes(this.hass.localize).map(
|
||||
([opt, label]) => html`
|
||||
<mwc-list-item .value=${opt}>${label}</mwc-list-item>
|
||||
([opt, label, icon]) => html`
|
||||
<mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
|
||||
${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
|
||||
></mwc-list-item>
|
||||
`
|
||||
)}
|
||||
</ha-button-menu>
|
||||
@ -165,16 +167,19 @@ export default class HaAutomationCondition extends LitElement {
|
||||
}
|
||||
|
||||
private _processedTypes = memoizeOne(
|
||||
(localize: LocalizeFunc): [string, string][] =>
|
||||
CONDITION_TYPES.map(
|
||||
(condition) =>
|
||||
[
|
||||
condition,
|
||||
localize(
|
||||
`ui.panel.config.automation.editor.conditions.type.${condition}.label`
|
||||
),
|
||||
] as [string, string]
|
||||
).sort((a, b) => stringCompare(a[1], b[1]))
|
||||
(localize: LocalizeFunc): [string, string, string][] =>
|
||||
Object.entries(CONDITION_TYPES)
|
||||
.map(
|
||||
([condition, icon]) =>
|
||||
[
|
||||
condition,
|
||||
localize(
|
||||
`ui.panel.config.automation.editor.conditions.type.${condition}.label`
|
||||
),
|
||||
icon,
|
||||
] as [string, string, string]
|
||||
)
|
||||
.sort((a, b) => stringCompare(a[1], b[1]))
|
||||
);
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
|
||||
@ -69,8 +69,10 @@ export default class HaAutomationTrigger extends LitElement {
|
||||
<ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
|
||||
</mwc-button>
|
||||
${this._processedTypes(this.hass.localize).map(
|
||||
([opt, label]) => html`
|
||||
<mwc-list-item .value=${opt}>${label}</mwc-list-item>
|
||||
([opt, label, icon]) => html`
|
||||
<mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
|
||||
${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
|
||||
></mwc-list-item>
|
||||
`
|
||||
)}
|
||||
</ha-button-menu>
|
||||
@ -145,16 +147,19 @@ export default class HaAutomationTrigger extends LitElement {
|
||||
}
|
||||
|
||||
private _processedTypes = memoizeOne(
|
||||
(localize: LocalizeFunc): [string, string][] =>
|
||||
TRIGGER_TYPES.map(
|
||||
(action) =>
|
||||
[
|
||||
action,
|
||||
localize(
|
||||
`ui.panel.config.automation.editor.triggers.type.${action}.label`
|
||||
),
|
||||
] as [string, string]
|
||||
).sort((a, b) => stringCompare(a[1], b[1]))
|
||||
(localize: LocalizeFunc): [string, string, string][] =>
|
||||
Object.entries(TRIGGER_TYPES)
|
||||
.map(
|
||||
([action, icon]) =>
|
||||
[
|
||||
action,
|
||||
localize(
|
||||
`ui.panel.config.automation.editor.triggers.type.${action}.label`
|
||||
),
|
||||
icon,
|
||||
] as [string, string, string]
|
||||
)
|
||||
.sort((a, b) => stringCompare(a[1], b[1]))
|
||||
);
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user