home-assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-02-04 01:10:33 -06:00
Code Issues Packages Projects Releases 748 Wiki Activity

Add tooltips for undo/redo in automation & script editors (#27224)

Browse Source
This commit is contained in:
Jan-Philipp Benecke 2025-09-28 12:35:48 +02:00 committed by GitHub
parent 54177a16e9
commit 6d5c165bd2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 69 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import { consume } from "@lit/context";
import {
mdiAppleKeyboardCommand,
mdiCog,
mdiContentSave,
mdiDebugStepOver,
@ -87,6 +88,7 @@ import "./blueprint-automation-editor";
import "./manual-automation-editor";
import type { HaManualAutomationEditor } from "./manual-automation-editor";
import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
import { isMac } from "../../../util/is_mac";
declare global {
interface HTMLElementTagNameMap {
@ -215,6 +217,10 @@ export class HaAutomationEditor extends UndoRedoMixin<
: undefined;
const useBlueprint = "use_blueprint" in this._config;
const shortcutIcon = isMac
? html`<ha-svg-icon .path=${mdiAppleKeyboardCommand}></ha-svg-icon>`
: this.hass.localize("ui.panel.config.automation.editor.ctrl");
return html`
<hass-subpage
.hass=${this.hass}
@ -231,16 +237,35 @@ export class HaAutomationEditor extends UndoRedoMixin<
.path=${mdiUndo}
@click=${this.undo}
.disabled=${!this.canUndo}
id="button-undo"
>
</ha-icon-button>
<ha-tooltip placement="bottom" for="button-undo">
${this.hass.localize("ui.common.undo")}
<span class="shortcut"
>(
<span>${shortcutIcon}</span>
<span>+</span>
<span>Z</span>)
</span>
</ha-tooltip>
<ha-icon-button
slot="toolbar-icon"
.label=${this.hass.localize("ui.common.redo")}
.path=${mdiRedo}
@click=${this.redo}
.disabled=${!this.canRedo}
id="button-redo"
>
</ha-icon-button>`
</ha-icon-button>
<ha-tooltip placement="bottom" for="button-redo">
${this.hass.localize("ui.common.redo")}
<span class="shortcut">
(<span>${shortcutIcon}</span>
<span>+</span>
<span>Y</span>)
</span>
</ha-tooltip>`
: nothing}
${this._config?.id && !this.narrow
? html`
@ -1292,6 +1317,15 @@ export class HaAutomationEditor extends UndoRedoMixin<
ha-fab.dirty {
bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
}
ha-tooltip ha-svg-icon {
width: 12px;
}
ha-tooltip .shortcut {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 2px;
}
`,
];
}

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

@ -1,5 +1,6 @@
import { consume } from "@lit/context";
import {
mdiAppleKeyboardCommand,
mdiCog,
mdiContentSave,
mdiDebugStepOver,
@ -75,6 +76,7 @@ import "./blueprint-script-editor";
import "./manual-script-editor";
import type { HaManualScriptEditor } from "./manual-script-editor";
import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
import { isMac } from "../../../util/is_mac";
const baseEditorMixins = SubscribeMixin(
PreventUnsavedMixin(KeyboardShortcutMixin(LitElement))
@ -168,6 +170,10 @@ export class HaScriptEditor extends UndoRedoMixin<
: undefined;
const useBlueprint = "use_blueprint" in this._config;
const shortcutIcon = isMac
? html`<ha-svg-icon .path=${mdiAppleKeyboardCommand}></ha-svg-icon>`
: this.hass.localize("ui.panel.config.automation.editor.ctrl");
return html`
<hass-subpage
.hass=${this.hass}
@ -184,16 +190,34 @@ export class HaScriptEditor extends UndoRedoMixin<
.path=${mdiUndo}
@click=${this.undo}
.disabled=${!this.canUndo}
id="button-undo"
>
</ha-icon-button>
<ha-tooltip placement="bottom" for="button-undo">
${this.hass.localize("ui.common.undo")}
<span class="shortcut">
(<span>${shortcutIcon}</span>
<span>+</span>
<span>Z</span>)
</span>
</ha-tooltip>
<ha-icon-button
slot="toolbar-icon"
.label=${this.hass.localize("ui.common.redo")}
.path=${mdiRedo}
@click=${this.redo}
.disabled=${!this.canRedo}
id="button-redo"
>
</ha-icon-button>`
</ha-icon-button>
<ha-tooltip placement="bottom" for="button-redo">
${this.hass.localize("ui.common.redo")}
<span class="shortcut">
(<span>${shortcutIcon}</span>
<span>+</span>
<span>Y</span>)
</span>
</ha-tooltip>`
: nothing}
${this.scriptId && !this.narrow
? html`
@ -1233,6 +1257,15 @@ export class HaScriptEditor extends UndoRedoMixin<
text-decoration: none;
color: var(--primary-color);
}
ha-tooltip ha-svg-icon {
width: 12px;
}
ha-tooltip .shortcut {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 2px;
}
`,
];
}