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": {