diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index 9e9642f716..99d094eb83 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -1,5 +1,6 @@
import { mdiDevices } from "@mdi/js";
import Fuse from "fuse.js";
+import type { CSSResultGroup } from "lit";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@@ -50,8 +51,10 @@ import {
multiTermSortedSearch,
type FuseWeightedKey,
} from "../../resources/fuseMultiTerm";
+import { buttonLinkStyle } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import { isIosApp } from "../../util/is_ios";
+import { isMac } from "../../util/is_mac";
import { showConfirmationDialog } from "../generic/show-dialog-box";
import { showShortcutsDialog } from "../shortcuts/show-shortcuts-dialog";
import type { QuickBarParams, QuickBarSection } from "./show-dialog-quick-bar";
@@ -66,7 +69,7 @@ export class QuickBar extends LitElement {
@state() private _loading = true;
- @state() private _hint?: string;
+ @state() private _showHint = false;
@state() private _selectedSection?: QuickBarSection;
@@ -96,7 +99,7 @@ export class QuickBar extends LitElement {
}
this._initialize();
this._selectedSection = params.mode;
- this._hint = params.hint;
+ this._showHint = params.showHint ?? false;
this._open = true;
}
@@ -256,9 +259,17 @@ export class QuickBar extends LitElement {
clearable
>`
: nothing}
- ${this._hint
+ ${this._showHint
? html`${this._hint}${this.hass.localize("ui.tips.key_shortcut_quick_search", {
+ keyboard_shortcut: html``,
+ modifier: isMac ? "⌘" : "Ctrl",
+ })}`
: nothing}
@@ -751,48 +762,59 @@ export class QuickBar extends LitElement {
}
}
+ private _openShortcutDialog(ev: Event): void {
+ ev.preventDefault();
+ showShortcutsDialog(this);
+ this.closeDialog();
+ }
+
// #endregion interaction
// #region styles
- static styles = css`
- :host {
- --dialog-surface-margin-top: var(--ha-space-10);
- --ha-dialog-min-height: 620px;
- --ha-bottom-sheet-height: calc(
- 100vh - max(var(--safe-area-inset-top), 48px)
- );
- --ha-bottom-sheet-height: calc(
- 100dvh - max(var(--safe-area-inset-top), 48px)
- );
- --ha-bottom-sheet-max-height: calc(
- 100vh - max(var(--safe-area-inset-top), 48px)
- );
- --ha-bottom-sheet-max-height: calc(
- 100dvh - max(var(--safe-area-inset-top), 48px)
- );
- --dialog-content-padding: 0;
- --safe-area-inset-bottom: 0px;
- }
+ static get styles(): CSSResultGroup {
+ return [
+ buttonLinkStyle,
+ css`
+ :host {
+ --dialog-surface-margin-top: var(--ha-space-10);
+ --ha-dialog-min-height: 620px;
+ --ha-bottom-sheet-height: calc(
+ 100vh - max(var(--safe-area-inset-top), 48px)
+ );
+ --ha-bottom-sheet-height: calc(
+ 100dvh - max(var(--safe-area-inset-top), 48px)
+ );
+ --ha-bottom-sheet-max-height: calc(
+ 100vh - max(var(--safe-area-inset-top), 48px)
+ );
+ --ha-bottom-sheet-max-height: calc(
+ 100dvh - max(var(--safe-area-inset-top), 48px)
+ );
+ --dialog-content-padding: 0;
+ --safe-area-inset-bottom: 0px;
+ }
- ha-tip {
- display: flex;
- justify-content: center;
- align-items: center;
- color: var(--secondary-text-color);
- gap: var(--ha-space-1);
- }
+ ha-tip {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: var(--secondary-text-color);
+ gap: var(--ha-space-1);
+ }
- ha-tip a {
- color: var(--primary-color);
- }
+ ha-tip a {
+ color: var(--primary-color);
+ }
- @media all and (max-width: 450px), all and (max-height: 690px) {
- ha-tip {
- display: none;
- }
- }
- `;
+ @media all and (max-width: 450px), all and (max-height: 690px) {
+ ha-tip {
+ display: none;
+ }
+ }
+ `,
+ ];
+ }
// #endregion styles
}
diff --git a/src/dialogs/quick-bar/show-dialog-quick-bar.ts b/src/dialogs/quick-bar/show-dialog-quick-bar.ts
index 1adc687eae..41e8dba855 100644
--- a/src/dialogs/quick-bar/show-dialog-quick-bar.ts
+++ b/src/dialogs/quick-bar/show-dialog-quick-bar.ts
@@ -11,7 +11,7 @@ export type QuickBarSection =
export interface QuickBarParams {
entityFilter?: string;
mode?: QuickBarSection;
- hint?: string;
+ showHint?: boolean;
}
export const loadQuickBar = () => import("./ha-quick-bar");
diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts
index 62c1d967d0..a39e05526a 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -39,6 +39,7 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
+import { isMac } from "../../../util/is_mac";
import { isMobileClient } from "../../../util/is_mobile";
import "../ha-config-section";
import { configSections } from "../ha-panel-config";
@@ -123,6 +124,14 @@ const randomTip = (openFn: any, hass: HomeAssistant, narrow: boolean) => {
content: hass.localize("ui.tips.key_a_tip", localizeParam),
weight: 1,
narrow: false,
+ },
+ {
+ content: hass.localize("ui.tips.key_shortcut_quick_search", {
+ ...localizeParam,
+ modifier: isMac ? "⌘" : "Ctrl",
+ }),
+ weight: 1,
+ narrow: false,
}
);
}
@@ -364,17 +373,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
);
private _showQuickBar(): void {
- const params = {
- keyboard_shortcut: html`${this.hass.localize("ui.tips.keyboard_shortcut")}`,
- };
-
- showQuickBar(this, {
- hint: this.hass.enableShortcuts
- ? this.hass.localize("ui.dialogs.quick-bar.key_c_tip", params)
- : undefined,
- });
+ showQuickBar(this, { showHint: true });
}
private async _handleMenuAction(
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 757fd0110b..1c5f1341c5 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -72,7 +72,6 @@ import {
} from "../../dialogs/generic/show-dialog-box";
import { showMoreInfoDialog } from "../../dialogs/more-info/show-ha-more-info-dialog";
import { showQuickBar } from "../../dialogs/quick-bar/show-dialog-quick-bar";
-import { showShortcutsDialog } from "../../dialogs/shortcuts/show-shortcuts-dialog";
import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
import { haStyle } from "../../resources/styles";
import type { HomeAssistant, PanelInfo } from "../../types";
@@ -863,17 +862,7 @@ class HUIRoot extends LitElement {
};
private _showQuickBar = () => {
- const params = {
- keyboard_shortcut: html`${this.hass.localize("ui.tips.keyboard_shortcut")}`,
- };
-
- showQuickBar(this, {
- hint: this.hass.enableShortcuts
- ? this.hass.localize("ui.tips.key_e_tip", params)
- : undefined,
- });
+ showQuickBar(this, { showHint: true });
};
private _goBack(): void {
@@ -1220,11 +1209,6 @@ class HUIRoot extends LitElement {
root.appendChild(view);
}
- private _openShortcutDialog(ev: Event) {
- ev.preventDefault();
- showShortcutsDialog(this);
- }
-
private async _applyUndoRedo(item: UndoStackItem) {
this._configChangedByUndo = true;
try {
diff --git a/src/translations/en.json b/src/translations/en.json
index 4e4ab1ae47..15d65189b1 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -10178,7 +10178,8 @@
"key_c_tip": "Press {keyboard_shortcut} 'c' on any page to open the command dialog",
"key_e_tip": "Press {keyboard_shortcut} 'e' on any page to open the entity search dialog",
"key_m_tip": "Press {keyboard_shortcut} 'm' on any page to get the My Home Assistant link",
- "key_a_tip": "Press {keyboard_shortcut} 'a' on any page to open the Assist dialog"
+ "key_a_tip": "Press {keyboard_shortcut} 'a' on any page to open the Assist dialog",
+ "key_shortcut_quick_search": "Press {keyboard_shortcut} ''{modifier}+k'' on any page to open quick search"
}
},
"landing-page": {