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 eccd95f917..0801863105 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 = []; @@ -276,7 +291,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" /> @@ -284,7 +299,7 @@ export class UmbSearchModalElement extends UmbLitElement { ${this.#renderSearchTags()} ${this._search ? html`
${this._searchResults.length > 0 ? this.#renderResults() : this.#renderNoResults()}
` - : nothing} + : this.#renderNavigationTips()} `; } @@ -340,6 +355,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 +408,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;