Don't use ha-card in card-condition-editor (#22085)

This commit is contained in:
Paul Bottein 2024-09-26 12:15:58 +02:00 committed by GitHub
parent 5a5005c09c
commit 62cba99491
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -93,18 +93,16 @@ export class HaCardConditionEditor extends LitElement {
if (!condition) return nothing; if (!condition) return nothing;
return html` return html`
<ha-card outlined> <div class="container">
<ha-expansion-panel leftChevron> <ha-expansion-panel leftChevron>
<h3 slot="header"> <h3 slot="header">
<ha-svg-icon <ha-svg-icon
class="condition-icon" class="condition-icon"
.path=${ICON_CONDITION[condition.condition]} .path=${ICON_CONDITION[condition.condition]}
></ha-svg-icon> ></ha-svg-icon>
${ ${this.hass.localize(
this.hass.localize(
`ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label` `ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label`
) || condition.condition ) || condition.condition}
}
</h3> </h3>
<ha-button-menu <ha-button-menu
slot="icons" slot="icons"
@ -133,8 +131,7 @@ export class HaCardConditionEditor extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.panel.lovelace.editor.edit_card.edit_ui" "ui.panel.lovelace.editor.edit_card.edit_ui"
)} )}
${ ${!this._yamlMode
!this._yamlMode
? html` ? html`
<ha-svg-icon <ha-svg-icon
class="selected_menu_item" class="selected_menu_item"
@ -142,16 +139,14 @@ export class HaCardConditionEditor extends LitElement {
.path=${mdiCheck} .path=${mdiCheck}
></ha-svg-icon> ></ha-svg-icon>
` `
: `` : ``}
}
</ha-list-item> </ha-list-item>
<ha-list-item graphic="icon"> <ha-list-item graphic="icon">
${this.hass.localize( ${this.hass.localize(
"ui.panel.lovelace.editor.edit_card.edit_yaml" "ui.panel.lovelace.editor.edit_card.edit_yaml"
)} )}
${ ${this._yamlMode
this._yamlMode
? html` ? html`
<ha-svg-icon <ha-svg-icon
class="selected_menu_item" class="selected_menu_item"
@ -159,8 +154,7 @@ export class HaCardConditionEditor extends LitElement {
.path=${mdiCheck} .path=${mdiCheck}
></ha-svg-icon> ></ha-svg-icon>
` `
: `` : ``}
}
</ha-list-item> </ha-list-item>
<li divider role="separator"></li> <li divider role="separator"></li>
@ -174,9 +168,7 @@ export class HaCardConditionEditor extends LitElement {
></ha-svg-icon> ></ha-svg-icon>
</ha-list-item> </ha-list-item>
</ha-button-menu> </ha-button-menu>
</div> ${!this._uiAvailable
${
!this._uiAvailable
? html` ? html`
<ha-alert <ha-alert
alert-type="warning" alert-type="warning"
@ -199,11 +191,9 @@ export class HaCardConditionEditor extends LitElement {
)} )}
</ha-alert> </ha-alert>
` `
: nothing : nothing}
}
<div class="content"> <div class="content">
${ ${this._yamlMode
this._yamlMode
? html` ? html`
<ha-yaml-editor <ha-yaml-editor
.hass=${this.hass} .hass=${this.hass}
@ -212,15 +202,11 @@ export class HaCardConditionEditor extends LitElement {
></ha-yaml-editor> ></ha-yaml-editor>
` `
: html` : html`
${dynamicElement( ${dynamicElement(`ha-card-condition-${condition.condition}`, {
`ha-card-condition-${condition.condition}`,
{
hass: this.hass, hass: this.hass,
condition: condition, condition: condition,
} })}
)} `}
`
}
</div> </div>
</ha-expansion-panel> </ha-expansion-panel>
<div <div
@ -230,8 +216,7 @@ export class HaCardConditionEditor extends LitElement {
error: this._testingResult === false, error: this._testingResult === false,
})}" })}"
> >
${ ${this._testingResult
this._testingResult
? this.hass.localize( ? this.hass.localize(
"ui.panel.lovelace.editor.condition-editor.testing_pass" "ui.panel.lovelace.editor.condition-editor.testing_pass"
) )
@ -239,10 +224,9 @@ export class HaCardConditionEditor extends LitElement {
? this.hass.localize( ? this.hass.localize(
"ui.panel.lovelace.editor.condition-editor.testing_error" "ui.panel.lovelace.editor.condition-editor.testing_error"
) )
: nothing : nothing}
} </div>
</div> </div>
</ha-card>
`; `;
} }
@ -313,7 +297,6 @@ export class HaCardConditionEditor extends LitElement {
ha-button-menu { ha-button-menu {
--mdc-theme-text-primary-on-background: var(--primary-text-color); --mdc-theme-text-primary-on-background: var(--primary-text-color);
} }
ha-expansion-panel { ha-expansion-panel {
--expansion-panel-summary-padding: 0 0 0 8px; --expansion-panel-summary-padding: 0 0 0 8px;
--expansion-panel-content-padding: 0; --expansion-panel-content-padding: 0;
@ -372,6 +355,11 @@ export class HaCardConditionEditor extends LitElement {
.testing.pass { .testing.pass {
background-color: var(--success-color); background-color: var(--success-color);
} }
.container {
position: relative;
border-radius: var(--ha-card-border-radius, 12px);
border: 1px solid var(--divider-color);
}
`, `,
]; ];
} }