mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 15:26:36 +00:00
Improved automation & script menus + show errors in toast (#7371)
* Improved automation & script menus + show errors in toast * Changes from review * Re-added old error display * Toast back to default duration + remove action
This commit is contained in:
parent
9f41f80a91
commit
52b2fd046b
@ -86,10 +86,12 @@ class NotificationManager extends LitElement {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
padding: 8px 12px;
|
||||||
}
|
}
|
||||||
mwc-button {
|
mwc-button {
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -31,6 +31,7 @@ import "../../../components/ha-card";
|
|||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
import "../../../components/ha-yaml-editor";
|
import "../../../components/ha-yaml-editor";
|
||||||
|
import { showToast } from "../../../util/toast";
|
||||||
import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
|
import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
|
||||||
import {
|
import {
|
||||||
AutomationConfig,
|
AutomationConfig,
|
||||||
@ -132,6 +133,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
|
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
|
||||||
${this._mode === "gui"
|
${this._mode === "gui"
|
||||||
? html`<ha-svg-icon
|
? html`<ha-svg-icon
|
||||||
|
class="selected_menu_item"
|
||||||
slot="graphic"
|
slot="graphic"
|
||||||
.path=${mdiCheck}
|
.path=${mdiCheck}
|
||||||
></ha-svg-icon>`
|
></ha-svg-icon>`
|
||||||
@ -147,6 +149,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
|
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
|
||||||
${this._mode === "yaml"
|
${this._mode === "yaml"
|
||||||
? html`<ha-svg-icon
|
? html`<ha-svg-icon
|
||||||
|
class="selected_menu_item"
|
||||||
slot="graphic"
|
slot="graphic"
|
||||||
.path=${mdiCheck}
|
.path=${mdiCheck}
|
||||||
></ha-svg-icon>`
|
></ha-svg-icon>`
|
||||||
@ -168,6 +171,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
slot="graphic"
|
slot="graphic"
|
||||||
.path=${mdiContentDuplicate}
|
.path=${mdiContentDuplicate}
|
||||||
|
class=${classMap({ enabled_icon: this.automationId })}
|
||||||
></ha-svg-icon>
|
></ha-svg-icon>
|
||||||
</mwc-list-item>
|
</mwc-list-item>
|
||||||
|
|
||||||
@ -182,7 +186,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
${this.hass.localize(
|
${this.hass.localize(
|
||||||
"ui.panel.config.automation.picker.delete_automation"
|
"ui.panel.config.automation.picker.delete_automation"
|
||||||
)}
|
)}
|
||||||
<ha-svg-icon slot="graphic" .path=${mdiDelete}></ha-svg-icon>
|
<ha-svg-icon
|
||||||
|
class=${classMap({ warning: this.automationId })}
|
||||||
|
slot="graphic"
|
||||||
|
.path=${mdiDelete}
|
||||||
|
>
|
||||||
|
</ha-svg-icon>
|
||||||
</mwc-list-item>
|
</mwc-list-item>
|
||||||
</ha-button-menu>
|
</ha-button-menu>
|
||||||
${this._config
|
${this._config
|
||||||
@ -725,6 +734,9 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
},
|
},
|
||||||
(errors) => {
|
(errors) => {
|
||||||
this._errors = errors.body.message;
|
this._errors = errors.body.message;
|
||||||
|
showToast(this, {
|
||||||
|
message: errors.body.message,
|
||||||
|
});
|
||||||
throw errors;
|
throw errors;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -766,6 +778,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
mwc-fab.dirty {
|
mwc-fab.dirty {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
.enabled_icon {
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
.selected_menu_item {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
li[role="separator"] {
|
||||||
|
border-bottom-color: var(--divider-color);
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@ -57,6 +57,7 @@ import { HomeAssistant, Route } from "../../../types";
|
|||||||
import "../ha-config-section";
|
import "../ha-config-section";
|
||||||
import { configSections } from "../ha-panel-config";
|
import { configSections } from "../ha-panel-config";
|
||||||
import "../../../components/ha-svg-icon";
|
import "../../../components/ha-svg-icon";
|
||||||
|
import { showToast } from "../../../util/toast";
|
||||||
import { mdiContentSave } from "@mdi/js";
|
import { mdiContentSave } from "@mdi/js";
|
||||||
import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
|
import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
|
||||||
|
|
||||||
@ -715,6 +716,9 @@ export class HaSceneEditor extends SubscribeMixin(
|
|||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
this._errors = err.body.message || err.message;
|
this._errors = err.body.message || err.message;
|
||||||
|
showToast(this, {
|
||||||
|
message: err.body.message || err.message,
|
||||||
|
});
|
||||||
throw err;
|
throw err;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -107,6 +107,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
|
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
|
||||||
${this._mode === "gui"
|
${this._mode === "gui"
|
||||||
? html` <ha-svg-icon
|
? html` <ha-svg-icon
|
||||||
|
class="selected_menu_item"
|
||||||
slot="graphic"
|
slot="graphic"
|
||||||
.path=${mdiCheck}
|
.path=${mdiCheck}
|
||||||
></ha-svg-icon>`
|
></ha-svg-icon>`
|
||||||
@ -122,6 +123,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
|
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
|
||||||
${this._mode === "yaml"
|
${this._mode === "yaml"
|
||||||
? html` <ha-svg-icon
|
? html` <ha-svg-icon
|
||||||
|
class="selected_menu_item"
|
||||||
slot="graphic"
|
slot="graphic"
|
||||||
.path=${mdiCheck}
|
.path=${mdiCheck}
|
||||||
></ha-svg-icon>`
|
></ha-svg-icon>`
|
||||||
@ -139,7 +141,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
graphic="icon"
|
graphic="icon"
|
||||||
>
|
>
|
||||||
${this.hass.localize("ui.panel.config.script.editor.delete_script")}
|
${this.hass.localize("ui.panel.config.script.editor.delete_script")}
|
||||||
<ha-svg-icon slot="graphic" .path=${mdiDelete}></ha-svg-icon>
|
<ha-svg-icon
|
||||||
|
class=${classMap({ warning: this.scriptEntityId })}
|
||||||
|
slot="graphic"
|
||||||
|
.path=${mdiDelete}
|
||||||
|
>
|
||||||
|
</ha-svg-icon>
|
||||||
</mwc-list-item>
|
</mwc-list-item>
|
||||||
</ha-button-menu>
|
</ha-button-menu>
|
||||||
${this.narrow
|
${this.narrow
|
||||||
@ -573,9 +580,17 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
|
|
||||||
private _saveScript(): void {
|
private _saveScript(): void {
|
||||||
if (this._idError) {
|
if (this._idError) {
|
||||||
this._errors = this.hass.localize(
|
showToast(this, {
|
||||||
|
message: this.hass.localize(
|
||||||
"ui.panel.config.script.editor.id_already_exists_save_error"
|
"ui.panel.config.script.editor.id_already_exists_save_error"
|
||||||
);
|
),
|
||||||
|
dismissable: false,
|
||||||
|
duration: 0,
|
||||||
|
action: {
|
||||||
|
action: () => {},
|
||||||
|
text: this.hass.localize("ui.dialogs.generic.ok"),
|
||||||
|
},
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const id = this.scriptEntityId
|
const id = this.scriptEntityId
|
||||||
@ -591,6 +606,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
},
|
},
|
||||||
(errors) => {
|
(errors) => {
|
||||||
this._errors = errors.body.message;
|
this._errors = errors.body.message;
|
||||||
|
showToast(this, {
|
||||||
|
message: errors.body.message,
|
||||||
|
});
|
||||||
throw errors;
|
throw errors;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -629,6 +647,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
mwc-fab.dirty {
|
mwc-fab.dirty {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
.selected_menu_item {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
li[role="separator"] {
|
||||||
|
border-bottom-color: var(--divider-color);
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user