From 734a733a4c66469c847b04b7b5a8a14e20f4e5bf Mon Sep 17 00:00:00 2001 From: Zack Barett Date: Fri, 21 Jan 2022 16:06:25 -0600 Subject: [PATCH] Add Search Icon to Config Dashboard (#11375) Co-authored-by: Philip Allgaier Co-authored-by: Paulus Schoutsen --- src/dialogs/quick-bar/ha-quick-bar.ts | 125 ++++++++++++------ .../quick-bar/show-dialog-quick-bar.ts | 1 + .../config/dashboard/ha-config-dashboard.ts | 14 +- src/translations/en.json | 4 +- 4 files changed, 103 insertions(+), 41 deletions(-) diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index 5fd0420c25..ed4e22cd1b 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -33,7 +33,6 @@ import { import { debounce } from "../../common/util/debounce"; import "../../components/ha-chip"; import "../../components/ha-circular-progress"; -import "../../components/ha-dialog"; import "../../components/ha-header-bar"; import "../../components/ha-icon-button"; import { domainToName } from "../../data/integration"; @@ -95,6 +94,10 @@ export class QuickBar extends LitElement { @state() private _done = false; + @state() private _narrow = false; + + @state() private _hint?: string; + @query("paper-input", false) private _filterInputField?: HTMLElement; private _focusSet = false; @@ -103,6 +106,8 @@ export class QuickBar extends LitElement { public async showDialog(params: QuickBarParams) { this._commandMode = params.commandMode || this._toggleIfAlreadyOpened(); + this._hint = params.hint; + this._narrow = matchMedia("(max-width: 600px)").matches; this._initializeItemsIfNeeded(); this._opened = true; } @@ -137,40 +142,52 @@ export class QuickBar extends LitElement { @closed=${this.closeDialog} hideActions > - ${this._search}` : this._search} - @keydown=${this._handleInputKeyDown} - @focus=${this._setFocusFirstListItem} - > - ${this._commandMode - ? html`` - : html``} - ${this._search && - html` - - `} - +
+ ${this._search}` : this._search} + @keydown=${this._handleInputKeyDown} + @focus=${this._setFocusFirstListItem} + > + ${this._commandMode + ? html` + + ` + : html` + + `} + ${this._search && + html` + + `} + + ${this._narrow + ? html` + + ` + : ""} +
${!items ? html``} + ${!this._narrow && this._hint + ? html`
${this._hint}
` + : ""} `; } @@ -339,13 +359,27 @@ export class QuickBar extends LitElement { private _handleSearchChange(ev: CustomEvent): void { const newFilter = ev.detail.value; const oldCommandMode = this._commandMode; + const oldSearch = this._search; + let newCommandMode: boolean; + let newSearch: string; if (newFilter.startsWith(">")) { - this._commandMode = true; - this._search = newFilter.substring(1); + newCommandMode = true; + newSearch = newFilter.substring(1); } else { - this._commandMode = false; - this._search = newFilter; + newCommandMode = false; + newSearch = newFilter; + } + + if (oldCommandMode === newCommandMode && oldSearch === newSearch) { + return; + } + + this._commandMode = newCommandMode; + this._search = newSearch; + + if (this._hint) { + this._hint = undefined; } if (oldCommandMode !== this._commandMode) { @@ -628,6 +662,13 @@ export class QuickBar extends LitElement { css` .heading { padding: 8px 20px 0px; + display: flex; + align-items: center; + --mdc-theme-primary: var(--primary-text-color); + } + + .heading paper-input { + flex-grow: 1; } ha-dialog { @@ -688,6 +729,12 @@ export class QuickBar extends LitElement { mwc-list-item.command-item { text-transform: capitalize; } + + .hint { + padding: 20px; + font-style: italic; + text-align: center; + } `, ]; } diff --git a/src/dialogs/quick-bar/show-dialog-quick-bar.ts b/src/dialogs/quick-bar/show-dialog-quick-bar.ts index 09ba816341..353160000a 100644 --- a/src/dialogs/quick-bar/show-dialog-quick-bar.ts +++ b/src/dialogs/quick-bar/show-dialog-quick-bar.ts @@ -3,6 +3,7 @@ import { fireEvent } from "../../common/dom/fire_event"; export interface QuickBarParams { entityFilter?: string; commandMode?: boolean; + hint?: string; } 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 a03936a2c6..003e74bcae 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -1,4 +1,4 @@ -import { mdiCloudLock } from "@mdi/js"; +import { mdiCloudLock, mdiMagnify } from "@mdi/js"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { @@ -16,6 +16,7 @@ import "../../../components/ha-icon-next"; import "../../../components/ha-menu-button"; import { CloudStatus } from "../../../data/cloud"; import { SupervisorAvailableUpdates } from "../../../data/supervisor/supervisor"; +import { showQuickBar } from "../../../dialogs/quick-bar/show-dialog-quick-bar"; import { ExternalConfig, getExternalConfig, @@ -65,6 +66,10 @@ class HaConfigDashboard extends LitElement { .narrow=${this.narrow} >
${this.hass.localize("panel.config")}
+ @@ -123,6 +128,13 @@ class HaConfigDashboard extends LitElement { `; } + private _showQuickBar(): void { + showQuickBar(this, { + commandMode: true, + hint: this.hass.localize("ui.dialogs.quick-bar.key_c_hint"), + }); + } + static get styles(): CSSResultGroup { return [ haStyle, diff --git a/src/translations/en.json b/src/translations/en.json index 8119ddd573..52b9f9bfa5 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -626,7 +626,9 @@ "server_control": "[%key:ui::panel::config::server_control::caption%]" } }, - "filter_placeholder": "Entity Filter" + "filter_placeholder": "Entity Filter", + "title": "Quick Search", + "key_c_hint": "Press 'c' on any page to open this search bar" }, "voice_command": { "did_not_hear": "Home Assistant did not hear anything",