Add icon to trigger/condition/action editor rows (#13481)

This commit is contained in:
Franck Nijhof 2022-08-25 13:04:40 +02:00 committed by GitHub
parent 255cb23c7d
commit 700af72303
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 18 deletions

View File

@ -156,12 +156,15 @@ export default class HaAutomationActionRow extends LitElement {
)}
</div>`
: ""}
<ha-expansion-panel
leftChevron
.header=${capitalizeFirstLetter(
describeAction(this.hass, this.action)
)}
>
<ha-expansion-panel leftChevron>
<div slot="header">
<ha-svg-icon
class="action-icon"
.path=${ACTION_TYPES[type!]}
></ha-svg-icon>
${capitalizeFirstLetter(describeAction(this.hass, this.action))}
</div>
${this.index !== 0
? html`
<ha-icon-button
@ -504,6 +507,10 @@ export default class HaAutomationActionRow extends LitElement {
--expansion-panel-summary-padding: 0 0 0 8px;
--expansion-panel-content-padding: 0;
}
.action-icon {
color: var(--sidebar-icon-color);
padding-right: 8px;
}
.card-content {
padding: 16px;
}

View File

@ -23,6 +23,7 @@ import "../../../../components/ha-expansion-panel";
import "../../../../components/ha-icon-button";
import { Condition, testCondition } from "../../../../data/automation";
import { describeCondition } from "../../../../data/automation_i18n";
import { CONDITION_TYPES } from "../../../../data/condition";
import { validateConfig } from "../../../../data/config";
import {
showAlertDialog,
@ -88,12 +89,17 @@ export default class HaAutomationConditionRow extends LitElement {
</div>`
: ""}
<ha-expansion-panel
leftChevron
.header=${capitalizeFirstLetter(
describeCondition(this.condition, this.hass)
)}
>
<ha-expansion-panel leftChevron>
<div slot="header">
<ha-svg-icon
class="condition-icon"
.path=${CONDITION_TYPES[this.condition.condition]}
></ha-svg-icon>
${capitalizeFirstLetter(
describeCondition(this.condition, this.hass)
)}
</div>
<ha-progress-button slot="icons" @click=${this._testCondition}>
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.test"
@ -398,6 +404,10 @@ export default class HaAutomationConditionRow extends LitElement {
--expansion-panel-summary-padding: 0 0 0 8px;
--expansion-panel-content-padding: 0;
}
.condition-icon {
color: var(--sidebar-icon-color);
padding-right: 8px;
}
.card-content {
padding: 16px;
}

View File

@ -29,6 +29,7 @@ import { HaYamlEditor } from "../../../../components/ha-yaml-editor";
import { subscribeTrigger, Trigger } from "../../../../data/automation";
import { describeTrigger } from "../../../../data/automation_i18n";
import { validateConfig } from "../../../../data/config";
import { TRIGGER_TYPES } from "../../../../data/trigger";
import {
showAlertDialog,
showConfirmationDialog,
@ -119,12 +120,14 @@ export default class HaAutomationTriggerRow extends LitElement {
`
: ""}
<ha-expansion-panel
leftChevron
.header=${capitalizeFirstLetter(
describeTrigger(this.trigger, this.hass)
)}
>
<ha-expansion-panel leftChevron>
<div slot="header">
<ha-svg-icon
class="trigger-icon"
.path=${TRIGGER_TYPES[this.trigger.platform]}
></ha-svg-icon>
${capitalizeFirstLetter(describeTrigger(this.trigger, this.hass))}
</div>
<ha-button-menu
slot="icons"
fixed
@ -529,6 +532,10 @@ export default class HaAutomationTriggerRow extends LitElement {
--expansion-panel-summary-padding: 0 0 0 8px;
--expansion-panel-content-padding: 0;
}
.trigger-icon {
color: var(--sidebar-icon-color);
padding-right: 8px;
}
.card-content {
padding: 16px;
}