Add semantic headings to automation editor (#13542)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Steve Repsher 2022-08-31 15:15:14 -04:00 committed by GitHub
parent 774aee406c
commit 604e5d5e09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 24 deletions

View File

@ -157,13 +157,13 @@ export default class HaAutomationActionRow extends LitElement {
</div>`
: ""}
<ha-expansion-panel leftChevron>
<div slot="header">
<h3 slot="header">
<ha-svg-icon
class="action-icon"
.path=${ACTION_TYPES[type!]}
></ha-svg-icon>
${capitalizeFirstLetter(describeAction(this.hass, this.action))}
</div>
</h3>
${this.index !== 0
? html`
@ -507,6 +507,11 @@ export default class HaAutomationActionRow extends LitElement {
--expansion-panel-summary-padding: 0 0 0 8px;
--expansion-panel-content-padding: 0;
}
h3 {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.action-icon {
display: none;
}

View File

@ -93,7 +93,7 @@ export default class HaAutomationConditionRow extends LitElement {
: ""}
<ha-expansion-panel leftChevron>
<div slot="header">
<h3 slot="header">
<ha-svg-icon
class="condition-icon"
.path=${CONDITION_TYPES[this.condition.condition]}
@ -101,7 +101,7 @@ export default class HaAutomationConditionRow extends LitElement {
${capitalizeFirstLetter(
describeCondition(this.condition, this.hass)
)}
</div>
</h3>
<ha-button-menu
slot="icons"
@ -423,6 +423,11 @@ export default class HaAutomationConditionRow extends LitElement {
--expansion-panel-summary-padding: 0 0 0 8px;
--expansion-panel-content-padding: 0;
}
h3 {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.condition-icon {
display: none;
}

View File

@ -681,15 +681,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
}
h1 {
margin: 0;
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(
--paper-font-headline_-_-webkit-font-smoothing
);
font-size: var(--paper-font-headline_-_font-size);
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
opacity: var(--dark-primary-opacity);
}
.header-name {
display: flex;

View File

@ -47,12 +47,12 @@ export class HaManualAutomationEditor extends LitElement {
: ""}
<ha-expansion-panel leftChevron>
<div slot="header">
<h3 slot="header">
<ha-svg-icon class="settings-icon" .path=${mdiRobot}></ha-svg-icon>
${this.hass.localize(
"ui.panel.config.automation.editor.automation_settings"
)}
</div>
</h3>
<div class="card-content">
<ha-textarea
.label=${this.hass.localize(
@ -115,11 +115,11 @@ export class HaManualAutomationEditor extends LitElement {
</ha-card>
<div class="header">
<div class="name">
<h2 id="triggers-heading" class="name">
${this.hass.localize(
"ui.panel.config.automation.editor.triggers.header"
)}
</div>
</h2>
<a
href=${documentationUrl(this.hass, "/docs/automation/trigger/")}
target="_blank"
@ -135,17 +135,19 @@ export class HaManualAutomationEditor extends LitElement {
</div>
<ha-automation-trigger
role="region"
aria-labelledby="triggers-heading"
.triggers=${this.config.trigger}
@value-changed=${this._triggerChanged}
.hass=${this.hass}
></ha-automation-trigger>
<div class="header">
<div class="name">
<h2 id="conditions-heading" class="name">
${this.hass.localize(
"ui.panel.config.automation.editor.conditions.header"
)}
</div>
</h2>
<a
href=${documentationUrl(this.hass, "/docs/automation/condition/")}
target="_blank"
@ -161,17 +163,19 @@ export class HaManualAutomationEditor extends LitElement {
</div>
<ha-automation-condition
role="region"
aria-labelledby="conditions-heading"
.conditions=${this.config.condition || []}
@value-changed=${this._conditionChanged}
.hass=${this.hass}
></ha-automation-condition>
<div class="header">
<div class="name">
<h2 id="actions-heading" class="name">
${this.hass.localize(
"ui.panel.config.automation.editor.actions.header"
)}
</div>
</h2>
<a
href=${documentationUrl(this.hass, "/docs/automation/action/")}
target="_blank"
@ -187,6 +191,8 @@ export class HaManualAutomationEditor extends LitElement {
</div>
<ha-automation-action
role="region"
aria-labelledby="actions-heading"
.actions=${this.config.action}
@value-changed=${this._actionChanged}
.hass=${this.hass}
@ -292,7 +298,6 @@ export class HaManualAutomationEditor extends LitElement {
}
.header {
display: flex;
margin: 16px 0;
align-items: center;
}
.header .name {
@ -303,6 +308,11 @@ export class HaManualAutomationEditor extends LitElement {
.header a {
color: var(--secondary-text-color);
}
h3 {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
ha-expansion-panel {
--expansion-panel-summary-padding: 0 0 0 8px;
--expansion-panel-content-padding: 0;

View File

@ -121,13 +121,13 @@ export default class HaAutomationTriggerRow extends LitElement {
: ""}
<ha-expansion-panel leftChevron>
<div slot="header">
<h3 slot="header">
<ha-svg-icon
class="trigger-icon"
.path=${TRIGGER_TYPES[this.trigger.platform]}
></ha-svg-icon>
${capitalizeFirstLetter(describeTrigger(this.trigger, this.hass))}
</div>
</h3>
<ha-button-menu
slot="icons"
fixed
@ -532,6 +532,11 @@ export default class HaAutomationTriggerRow extends LitElement {
--expansion-panel-summary-padding: 0 0 0 8px;
--expansion-panel-content-padding: 0;
}
h3 {
margin: 0;
font-size: inherit;
font-weight: inherit;
}
.trigger-icon {
display: none;
}