From 9af6ba3ac2ec30a395b1062db0d5b0069b73171a Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 27 May 2024 13:54:32 +0200 Subject: [PATCH 1/3] add temp event listener for outside clicks --- .../search/search-modal/search-modal.element.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts index eccd95f917..630a403874 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts @@ -64,12 +64,27 @@ export class UmbSearchModalElement extends UmbLitElement { super.connectedCallback(); this.addEventListener('keydown', this.#onKeydown); + document.addEventListener('click', this.#onDocumentClick); //TODO: Temp solution to close the modal on outside click. We need to look into a generic solution for this. requestAnimationFrame(() => { this.#focusInput(); }); } + disconnectedCallback(): void { + super.disconnectedCallback(); + + this.removeEventListener('keydown', this.#onKeydown); + document.removeEventListener('click', this.#onDocumentClick); + } + + #onDocumentClick = (event: MouseEvent) => { + const path = event.composedPath(); + if (path.includes(this)) return; + + this.modalContext?.reject(); + }; + #observeProviders() { new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'searchProvider', null, async (providers) => { const searchProviders: Array = []; From 55cac5eda04897423b7980e99ef0c378e749a124 Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 27 May 2024 14:46:45 +0200 Subject: [PATCH 2/3] add navigation tips --- .../search-modal/search-modal.element.ts | 63 ++++++++++++++++++- 1 file changed, 62 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts index eccd95f917..085e1edc23 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts @@ -284,7 +284,7 @@ export class UmbSearchModalElement extends UmbLitElement { ${this.#renderSearchTags()} ${this._search ? html`
${this._searchResults.length > 0 ? this.#renderResults() : this.#renderNoResults()}
` - : nothing} + : this.#renderNavigationTips()} `; } @@ -340,6 +340,44 @@ export class UmbSearchModalElement extends UmbLitElement { return this._loading ? nothing : html`
${this.localize.term('general_searchNoResult')}
`; } + #renderNavigationTips() { + return html``; + } + static styles = [ UmbTextStyles, css` @@ -355,6 +393,29 @@ export class UmbSearchModalElement extends UmbLitElement { font-size: 1rem; padding-bottom: var(--uui-size-space-2); } + #navigation-tips { + display: grid; + grid-template-columns: 50px 50px auto; + column-gap: var(--uui-size-space-3); + row-gap: var(--uui-size-space-4); + align-items: center; + color: var(--uui-color-border-emphasis); + margin-top: var(--uui-size-layout-3); + margin-inline: auto; + } + .navigation-tips-key { + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--uui-border-radius); + border: 1px solid var(--uui-color-border); + height: 36px; + font-size: 0.9rem; + font-weight: bold; + } + #navigation-tips .navigation-tips-key + span { + margin-left: var(--uui-size-space-2); + } #top { background-color: var(--uui-color-surface); display: flex; From e3a38c3b431955fac77118192f9b5ebd6864af90 Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Mon, 27 May 2024 14:52:20 +0200 Subject: [PATCH 3/3] add localization --- src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts | 4 ++++ src/Umbraco.Web.UI.Client/src/assets/lang/en.ts | 4 ++++ .../packages/search/search-modal/search-modal.element.ts | 6 +++--- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts index cd6731163f..b38bcea472 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts @@ -936,6 +936,10 @@ export default { font: 'Skrifttype', text: 'Tekst', }, + globalSearch: { + navigateSearchProviders: 'Naviger søgeudbydere', + navigateSearchResults: 'Naviger søgeresultater', + }, headers: { page: 'Side', }, diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index 7a7d2f59d1..7ac38c0e4e 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -962,6 +962,10 @@ export default { font: 'Font', text: 'Text', }, + globalSearch: { + navigateSearchProviders: 'Navigate search providers', + navigateSearchResults: 'Navigate search results', + }, headers: { page: 'Page', }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts index 085e1edc23..bb9e269e90 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts @@ -276,7 +276,7 @@ export class UmbSearchModalElement extends UmbLitElement { @blur=${() => this.#setShowFakeCursor(true)} @focus=${() => this.#setShowFakeCursor(false)} type="text" - placeholder="Search..." + placeholder=${this.localize.term('placeholders_search')} autocomplete="off" /> @@ -343,7 +343,7 @@ export class UmbSearchModalElement extends UmbLitElement { #renderNavigationTips() { return html``; }