jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 02:49:51 +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 { .main-content {
overflow-wrap: anywhere; overflow-wrap: anywhere;
word-break: break-word; word-break: break-word;
line-height: normal;
margin-left: 8px; margin-left: 8px;
margin-right: 0; margin-right: 0;
margin-inline-start: 8px; margin-inline-start: 8px;
margin-inline-end: 0; margin-inline-end: 8px;
} }
.title { .title {
margin-top: 2px; 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" : ""} class=${this._mode === "yaml" ? "yaml-mode" : ""}
@subscribe-automation-config=${this._subscribeAutomationConfig} @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 ${this._errors || stateObj?.state === UNAVAILABLE
? html`<ha-alert ? html`<ha-alert
alert-type="error" alert-type="error"
@@ -450,7 +482,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
></ha-svg-icon>` ></ha-svg-icon>`
: nothing} : nothing}
</ha-alert>` </ha-alert>`
: ""} : nothing}
${this._blueprintConfig ${this._blueprintConfig
? html`<ha-alert alert-type="info"> ? html`<ha-alert alert-type="info">
${this.hass.localize( ${this.hass.localize(
@@ -460,17 +492,23 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
<ha-button <ha-button
appearance="plain" appearance="plain"
@click=${this._takeControlSave} @click=${this._takeControlSave}
>${this.hass.localize("ui.common.yes")}</ha-button >${this.hass.localize(
"ui.common.yes"
)}</ha-button
> >
<ha-button <ha-button
appearance="plain" appearance="plain"
@click=${this._revertBlueprint} @click=${this._revertBlueprint}
>${this.hass.localize("ui.common.no")}</ha-button >${this.hass.localize(
"ui.common.no"
)}</ha-button
> >
</div> </div>
</ha-alert>` </ha-alert>`
: this._readOnly : this._readOnly
? html`<ha-alert alert-type="warning" dismissable ? html`<ha-alert
alert-type="warning"
dismissable
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.automation.editor.read_only" "ui.panel.config.automation.editor.read_only"
)} )}
@@ -487,39 +525,26 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
</ha-button> </ha-button>
</ha-alert>` </ha-alert>`
: nothing} : nothing}
</div> ${stateObj?.state === "off"
${this._mode === "gui"
? html` ? html`
<div> <ha-alert alert-type="info">
${useBlueprint ${this.hass.localize(
? html` "ui.panel.config.automation.editor.disabled"
<blueprint-automation-editor )}
.hass=${this.hass} <ha-button
.narrow=${this.narrow} size="small"
.isWide=${this.isWide} slot="action"
.stateObj=${stateObj} @click=${this._toggle}
.config=${this._config} >
.disabled=${Boolean(this._readOnly)} ${this.hass.localize(
.saving=${this._saving} "ui.panel.config.automation.editor.enable"
.dirty=${this._dirty} )}
@value-changed=${this._valueChanged} </ha-button>
@save-automation=${this._handleSaveAutomation} </ha-alert>
></blueprint-automation-editor>
` `
: html` : nothing}
<manual-automation-editor </div>
.hass=${this.hass} </manual-automation-editor>
.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>
`} `}
</div> </div>
` `
@@ -542,7 +567,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
</ha-button> </ha-button>
</ha-alert> </ha-alert>
` `
: ""} : nothing}
<ha-yaml-editor <ha-yaml-editor
copy-clipboard copy-clipboard
.hass=${this.hass} .hass=${this.hass}
@@ -1156,20 +1181,23 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
display: block; display: block;
} }
:not(.yaml-mode) > .error-wrapper { :not(.yaml-mode) > .alert-wrapper {
position: absolute; position: sticky;
top: 4px; top: -24px;
z-index: 3; margin-top: -24px;
z-index: 100;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; 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); background-color: var(--card-background-color);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
border-radius: var(--ha-border-radius-sm); border-radius: var(--ha-border-radius-sm);
margin-bottom: 0;
} }
manual-automation-editor { 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() { private _renderContent() {
return html` 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 ${this.config.description
? html`<ha-markdown ? html`<ha-markdown
class="description" class="description"
@@ -279,7 +265,10 @@ export class HaManualAutomationEditor extends LitElement {
})} })}
> >
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content">${this._renderContent()}</div> <div class="content">
<slot name="alerts"></slot>
${this._renderContent()}
</div>
<ha-fab <ha-fab
slot="fab" slot="fab"
class=${this.dirty ? "dirty" : ""} 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() { private _saveAutomation() {
this._closeSidebar(); this._closeSidebar();
fireEvent(this, "save-automation"); fireEvent(this, "save-automation");
@@ -656,9 +636,8 @@ export class HaManualAutomationEditor extends LitElement {
line-height: 0; line-height: 0;
} }
ha-alert { .description {
display: block; margin-top: 16px;
margin-bottom: 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-list-item>
</ha-button-menu> </ha-button-menu>
<div class=${this._mode === "yaml" ? "yaml-mode" : ""}> <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" ${this._mode === "gui"
? html` ? html`
<div> <div>
@@ -467,7 +413,68 @@ export class HaScriptEditor extends SubscribeMixin(
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
@editor-save=${this._handleSaveScript} @editor-save=${this._handleSaveScript}
@save-script=${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> </div>
` `
@@ -1092,6 +1099,26 @@ export class HaScriptEditor extends SubscribeMixin(
border-radius: var(--ha-border-radius-sm); 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 { manual-script-editor {
max-width: 1540px; max-width: 1540px;
padding: 0 12px; 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-wrapper">
<div class="content">${this._renderContent()}</div> <div class="content">
<slot name="alerts"></slot>
${this._renderContent()}
</div>
<ha-fab <ha-fab
slot="fab" slot="fab"
class=${this.dirty ? "dirty" : ""} class=${this.dirty ? "dirty" : ""}
@@ -522,6 +525,10 @@ export class HaManualScriptEditor extends LitElement {
font-weight: var(--ha-font-weight-normal); font-weight: var(--ha-font-weight-normal);
flex: 1; flex: 1;
} }
.description {
margin-top: 16px;
}
`, `,
]; ];
} }