jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
1 changed files with 114 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts
View File

@ -93,134 +93,120 @@ 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"
@action=${this._handleAction} @action=${this._handleAction}
@click=${preventDefault} @click=${preventDefault}
@closed=${stopPropagation} @closed=${stopPropagation}
fixed fixed
.corner=${"BOTTOM_END"} .corner=${"BOTTOM_END"}
.menuCorner=${"END"} .menuCorner=${"END"}
>
<ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
> >
<ha-icon-button </ha-icon-button>
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
>
</ha-icon-button>
<ha-list-item graphic="icon"> <ha-list-item graphic="icon">
${this.hass.localize( ${this.hass.localize(
"ui.panel.lovelace.editor.condition-editor.test" "ui.panel.lovelace.editor.condition-editor.test"
)} )}
<ha-svg-icon slot="graphic" .path=${mdiFlask}></ha-svg-icon> <ha-svg-icon slot="graphic" .path=${mdiFlask}></ha-svg-icon>
</ha-list-item> </ha-list-item>
<ha-list-item graphic="icon" .disabled=${!this._uiAvailable}> <ha-list-item graphic="icon" .disabled=${!this._uiAvailable}>
${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`
<ha-svg-icon
class="selected_menu_item"
slot="graphic"
.path=${mdiCheck}
></ha-svg-icon>
`
: ``
}
</ha-list-item>
<ha-list-item graphic="icon">
${this.hass.localize(
"ui.panel.lovelace.editor.edit_card.edit_yaml"
)}
${
this._yamlMode
? html`
<ha-svg-icon
class="selected_menu_item"
slot="graphic"
.path=${mdiCheck}
></ha-svg-icon>
`
: ``
}
</ha-list-item>
<li divider role="separator"></li>
<ha-list-item class="warning" graphic="icon">
${this.hass!.localize("ui.common.delete")}
<ha-svg-icon
class="warning"
slot="graphic"
.path=${mdiDelete}
></ha-svg-icon>
</ha-list-item>
</ha-button-menu>
</div>
${
!this._uiAvailable
? html`
<ha-alert
alert-type="warning"
.title=${this.hass.localize(
"ui.errors.config.editor_not_supported"
)}
>
${this._uiWarnings!.length > 0 &&
this._uiWarnings![0] !== undefined
? html`
<ul>
${this._uiWarnings!.map(
(warning) => html`<li>${warning}</li>`
)}
</ul>
`
: nothing}
${this.hass.localize(
"ui.errors.config.edit_in_yaml_supported"
)}
</ha-alert>
`
: nothing
}
<div class="content">
${
this._yamlMode
? html` ? html`
<ha-yaml-editor <ha-svg-icon
.hass=${this.hass} class="selected_menu_item"
.defaultValue=${this.condition} slot="graphic"
@value-changed=${this._onYamlChange} .path=${mdiCheck}
></ha-yaml-editor> ></ha-svg-icon>
` `
: html` : ``}
${dynamicElement( </ha-list-item>
`ha-card-condition-${condition.condition}`,
{ <ha-list-item graphic="icon">
hass: this.hass, ${this.hass.localize(
condition: condition, "ui.panel.lovelace.editor.edit_card.edit_yaml"
} )}
)} ${this._yamlMode
? html`
<ha-svg-icon
class="selected_menu_item"
slot="graphic"
.path=${mdiCheck}
></ha-svg-icon>
` `
} : ``}
</ha-list-item>
<li divider role="separator"></li>
<ha-list-item class="warning" graphic="icon">
${this.hass!.localize("ui.common.delete")}
<ha-svg-icon
class="warning"
slot="graphic"
.path=${mdiDelete}
></ha-svg-icon>
</ha-list-item>
</ha-button-menu>
${!this._uiAvailable
? html`
<ha-alert
alert-type="warning"
.title=${this.hass.localize(
"ui.errors.config.editor_not_supported"
)}
>
${this._uiWarnings!.length > 0 &&
this._uiWarnings![0] !== undefined
? html`
<ul>
${this._uiWarnings!.map(
(warning) => html`<li>${warning}</li>`
)}
</ul>
`
: nothing}
${this.hass.localize(
"ui.errors.config.edit_in_yaml_supported"
)}
</ha-alert>
`
: nothing}
<div class="content">
${this._yamlMode
? html`
<ha-yaml-editor
.hass=${this.hass}
.defaultValue=${this.condition}
@value-changed=${this._onYamlChange}
></ha-yaml-editor>
`
: html`
${dynamicElement(`ha-card-condition-${condition.condition}`, {
hass: this.hass,
condition: condition,
})}
`}
</div> </div>
</ha-expansion-panel> </ha-expansion-panel>
<div <div
@ -230,19 +216,17 @@ export class HaCardConditionEditor extends LitElement {
error: this._testingResult === false, error: this._testingResult === false,
})}" })}"
> >
${ ${this._testingResult
this._testingResult ? this.hass.localize(
"ui.panel.lovelace.editor.condition-editor.testing_pass"
)
: this._testingResult === false
? this.hass.localize( ? this.hass.localize(
"ui.panel.lovelace.editor.condition-editor.testing_pass" "ui.panel.lovelace.editor.condition-editor.testing_error"
) )
: this._testingResult === false : nothing}
? this.hass.localize(
"ui.panel.lovelace.editor.condition-editor.testing_error"
)
: nothing
}
</div> </div>
</ha-card> </div>
`; `;
} }
@ -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);
}
`, `,
]; ];
} }