jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-08 18:39:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move automation and script ha-alerts to main flow (#26735)

Browse Source 
Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
Aidan Timson
2025-08-28 12:53:15 +01:00
committed by GitHub
parent 35895735cc
commit 66d011cfb9
5 changed files with 191 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ha-alert.ts
View File

@@ -119,10 +119,11 @@ class HaAlert extends LitElement {
.main-content {
overflow-wrap: anywhere;
word-break: break-word;
line-height: normal;
margin-left: 8px;
margin-right: 0;
margin-inline-start: 8px;
margin-inline-end: 0;
margin-inline-end: 8px;
}
.title {
margin-top: 2px;

112
src/panels/config/automation/ha-automation-editor.ts
View File

@@ -432,7 +432,39 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
class=${this._mode === "yaml" ? "yaml-mode" : ""}
@subscribe-automation-config=${this._subscribeAutomationConfig}
>
<div class="error-wrapper">
${this._mode === "gui"
? html`
<div>
${useBlueprint
? html`
<blueprint-automation-editor
.hass=${this.hass}
.narrow=${this.narrow}
.isWide=${this.isWide}
.stateObj=${stateObj}
.config=${this._config}
.disabled=${this._readOnly}
.saving=${this._saving}
.dirty=${this._dirty}
@value-changed=${this._valueChanged}
@save-automation=${this._handleSaveAutomation}
></blueprint-automation-editor>
`
: html`
<manual-automation-editor
.hass=${this.hass}
.narrow=${this.narrow}
.isWide=${this.isWide}
.stateObj=${stateObj}
.config=${this._config}
.disabled=${this._readOnly}
.dirty=${this._dirty}
.saving=${this._saving}
@value-changed=${this._valueChanged}
@save-automation=${this._handleSaveAutomation}
@editor-save=${this._handleSaveAutomation}
>
<div class="alert-wrapper" slot="alerts">
${this._errors || stateObj?.state === UNAVAILABLE
? html`<ha-alert
alert-type="error"
@@ -450,7 +482,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
></ha-svg-icon>`
: nothing}
</ha-alert>`
: ""}
: nothing}
${this._blueprintConfig
? html`<ha-alert alert-type="info">
${this.hass.localize(
@@ -460,17 +492,23 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
<ha-button
appearance="plain"
@click=${this._takeControlSave}
>${this.hass.localize("ui.common.yes")}</ha-button
>${this.hass.localize(
"ui.common.yes"
)}</ha-button
>
<ha-button
appearance="plain"
@click=${this._revertBlueprint}
>${this.hass.localize("ui.common.no")}</ha-button
>${this.hass.localize(
"ui.common.no"
)}</ha-button
>
</div>
</ha-alert>`
: this._readOnly
? html`<ha-alert alert-type="warning" dismissable
? html`<ha-alert
alert-type="warning"
dismissable
>${this.hass.localize(
"ui.panel.config.automation.editor.read_only"
)}
@@ -487,39 +525,26 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
</ha-button>
</ha-alert>`
: nothing}
</div>
${this._mode === "gui"
${stateObj?.state === "off"
? html`
<div>
${useBlueprint
? html`
<blueprint-automation-editor
.hass=${this.hass}
.narrow=${this.narrow}
.isWide=${this.isWide}
.stateObj=${stateObj}
.config=${this._config}
.disabled=${Boolean(this._readOnly)}
.saving=${this._saving}
.dirty=${this._dirty}
@value-changed=${this._valueChanged}
@save-automation=${this._handleSaveAutomation}
></blueprint-automation-editor>
<ha-alert alert-type="info">
${this.hass.localize(
"ui.panel.config.automation.editor.disabled"
)}
<ha-button
size="small"
slot="action"
@click=${this._toggle}
>
${this.hass.localize(
"ui.panel.config.automation.editor.enable"
)}
</ha-button>
</ha-alert>
`
: html`
<manual-automation-editor
.hass=${this.hass}
.narrow=${this.narrow}
.isWide=${this.isWide}
.stateObj=${stateObj}
.config=${this._config}
.disabled=${Boolean(this._readOnly)}
.dirty=${this._dirty}
.saving=${this._saving}
@value-changed=${this._valueChanged}
@save-automation=${this._handleSaveAutomation}
@editor-save=${this._handleSaveAutomation}
></manual-automation-editor>
: nothing}
</div>
</manual-automation-editor>
`}
</div>
`
@@ -542,7 +567,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
</ha-button>
</ha-alert>
`
: ""}
: nothing}
<ha-yaml-editor
copy-clipboard
.hass=${this.hass}
@@ -1156,20 +1181,23 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
display: block;
}
:not(.yaml-mode) > .error-wrapper {
position: absolute;
top: 4px;
z-index: 3;
:not(.yaml-mode) > .alert-wrapper {
position: sticky;
top: -24px;
margin-top: -24px;
z-index: 100;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
:not(.yaml-mode) > .error-wrapper ha-alert {
:not(.yaml-mode) > .alert-wrapper ha-alert {
background-color: var(--card-background-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border-radius: var(--ha-border-radius-sm);
margin-bottom: 0;
}
manual-automation-editor {

33
src/panels/config/automation/manual-automation-editor.ts
View File

@@ -112,20 +112,6 @@ export class HaManualAutomationEditor extends LitElement {
private _renderContent() {
return html`
${this.stateObj?.state === "off"
? html`
<ha-alert alert-type="info">
${this.hass.localize(
"ui.panel.config.automation.editor.disabled"
)}
<ha-button size="small" slot="action" @click=${this._enable}>
${this.hass.localize(
"ui.panel.config.automation.editor.enable"
)}
</ha-button>
</ha-alert>
`
: nothing}
${this.config.description
? html`<ha-markdown
class="description"
@@ -279,7 +265,10 @@ export class HaManualAutomationEditor extends LitElement {
})}
>
<div class="content-wrapper">
<div class="content">${this._renderContent()}</div>
<div class="content">
<slot name="alerts"></slot>
${this._renderContent()}
</div>
<ha-fab
slot="fab"
class=${this.dirty ? "dirty" : ""}
@@ -386,15 +375,6 @@ export class HaManualAutomationEditor extends LitElement {
});
}
private async _enable(): Promise<void> {
if (!this.hass || !this.stateObj) {
return;
}
await this.hass.callService("automation", "turn_on", {
entity_id: this.stateObj.entity_id,
});
}
private _saveAutomation() {
this._closeSidebar();
fireEvent(this, "save-automation");
@@ -656,9 +636,8 @@ export class HaManualAutomationEditor extends LitElement {
line-height: 0;
}
ha-alert {
display: block;
margin-bottom: 16px;
.description {
margin-top: 16px;
}
`,
];

137
src/panels/config/script/ha-script-editor.ts
View File

@@ -384,60 +384,6 @@ export class HaScriptEditor extends SubscribeMixin(
</ha-list-item>
</ha-button-menu>
<div class=${this._mode === "yaml" ? "yaml-mode" : ""}>
<div class="error-wrapper">
${this._errors || stateObj?.state === UNAVAILABLE
? html`<ha-alert
alert-type="error"
.title=${stateObj?.state === UNAVAILABLE
? this.hass.localize(
"ui.panel.config.script.editor.unavailable"
)
: undefined}
>
${this._errors || this._validationErrors}
${stateObj?.state === UNAVAILABLE
? html`<ha-svg-icon
slot="icon"
.path=${mdiRobotConfused}
></ha-svg-icon>`
: nothing}
</ha-alert>`
: nothing}
${this._blueprintConfig
? html`<ha-alert alert-type="info">
${this.hass.localize(
"ui.panel.config.script.editor.confirm_take_control"
)}
<div slot="action" style="display: flex;">
<ha-button
appearance="plain"
@click=${this._takeControlSave}
>${this.hass.localize("ui.common.yes")}</ha-button
>
<ha-button
appearance="plain"
@click=${this._revertBlueprint}
>${this.hass.localize("ui.common.no")}</ha-button
>
</div>
</ha-alert>`
: this._readOnly
? html`<ha-alert alert-type="warning" dismissable
>${this.hass.localize(
"ui.panel.config.script.editor.read_only"
)}
<ha-button
appearance="plain"
slot="action"
@click=${this._duplicate}
>
${this.hass.localize(
"ui.panel.config.script.editor.migrate"
)}
</ha-button>
</ha-alert>`
: nothing}
</div>
${this._mode === "gui"
? html`
<div>
@@ -467,7 +413,68 @@ export class HaScriptEditor extends SubscribeMixin(
@value-changed=${this._valueChanged}
@editor-save=${this._handleSaveScript}
@save-script=${this._handleSaveScript}
></manual-script-editor>
>
<div class="alert-wrapper" slot="alerts">
${this._errors || stateObj?.state === UNAVAILABLE
? html`<ha-alert
alert-type="error"
.title=${stateObj?.state === UNAVAILABLE
? this.hass.localize(
"ui.panel.config.script.editor.unavailable"
)
: undefined}
>
${this._errors || this._validationErrors}
${stateObj?.state === UNAVAILABLE
? html`<ha-svg-icon
slot="icon"
.path=${mdiRobotConfused}
></ha-svg-icon>`
: nothing}
</ha-alert>`
: nothing}
${this._blueprintConfig
? html`<ha-alert alert-type="info">
${this.hass.localize(
"ui.panel.config.script.editor.confirm_take_control"
)}
<div slot="action" style="display: flex;">
<ha-button
appearance="plain"
@click=${this._takeControlSave}
>${this.hass.localize(
"ui.common.yes"
)}</ha-button
>
<ha-button
appearance="plain"
@click=${this._revertBlueprint}
>${this.hass.localize(
"ui.common.no"
)}</ha-button
>
</div>
</ha-alert>`
: this._readOnly
? html`<ha-alert
alert-type="warning"
dismissable
>${this.hass.localize(
"ui.panel.config.script.editor.read_only"
)}
<ha-button
appearance="plain"
slot="action"
@click=${this._duplicate}
>
${this.hass.localize(
"ui.panel.config.script.editor.migrate"
)}
</ha-button>
</ha-alert>`
: nothing}
</div>
</manual-script-editor>
`}
</div>
`
@@ -1092,6 +1099,26 @@ export class HaScriptEditor extends SubscribeMixin(
border-radius: var(--ha-border-radius-sm);
}
.alert-wrapper {
position: sticky;
top: -24px;
margin-top: -24px;
margin-bottom: 8px;
z-index: 100;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.alert-wrapper ha-alert {
background-color: var(--card-background-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border-radius: var(--ha-border-radius-sm);
margin-bottom: 0;
}
manual-script-editor {
max-width: 1540px;
padding: 0 12px;

9
src/panels/config/script/manual-script-editor.ts
View File

@@ -201,7 +201,10 @@ export class HaManualScriptEditor extends LitElement {
})}
>
<div class="content-wrapper">
<div class="content">${this._renderContent()}</div>
<div class="content">
<slot name="alerts"></slot>
${this._renderContent()}
</div>
<ha-fab
slot="fab"
class=${this.dirty ? "dirty" : ""}
@@ -522,6 +525,10 @@ export class HaManualScriptEditor extends LitElement {
font-weight: var(--ha-font-weight-normal);
flex: 1;
}
.description {
margin-top: 16px;
}
`,
];
}