From dc34321cec763eb2df64e179b178f6819b6f7c45 Mon Sep 17 00:00:00 2001 From: TheKenkei Date: Wed, 4 Sep 2024 22:22:41 +0300 Subject: [PATCH 1/2] feat(addon-doc): adds keybindings to the search field --- .../navigation/navigation.component.ts | 25 +++++++++++++------ .../navigation/navigation.style.less | 5 ++++ .../navigation/navigation.template.html | 6 ++++- 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts index 175531208d83..82cca782ce89 100644 --- a/projects/addon-doc/components/navigation/navigation.component.ts +++ b/projects/addon-doc/components/navigation/navigation.component.ts @@ -4,6 +4,7 @@ import { ChangeDetectorRef, Component, inject, + ViewChild, } from '@angular/core'; import {takeUntilDestroyed} from '@angular/core/rxjs-interop'; import {FormControl, ReactiveFormsModule} from '@angular/forms'; @@ -15,11 +16,7 @@ import { RouterLinkActive, Scroll, } from '@angular/router'; -import { - TUI_DOC_ICONS, - TUI_DOC_PAGE_LOADED, - TUI_DOC_SEARCH_TEXT, -} from '@taiga-ui/addon-doc/tokens'; +import {TUI_DOC_ICONS, TUI_DOC_PAGE_LOADED} from '@taiga-ui/addon-doc/tokens'; import type {TuiDocRoutePage, TuiDocRoutePages} from '@taiga-ui/addon-doc/types'; import {tuiTransliterateKeyboardLayout} from '@taiga-ui/addon-doc/utils'; import {TuiSidebarDirective} from '@taiga-ui/addon-mobile/directives/sidebar'; @@ -34,8 +31,7 @@ import {TuiScrollbar} from '@taiga-ui/core/components/scrollbar'; import {TuiTextfield} from '@taiga-ui/core/components/textfield'; import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens'; import {TuiAccordion} from '@taiga-ui/kit/components/accordion'; -import type {TuiInputComponent} from '@taiga-ui/legacy/components/input'; -import {TuiInputModule} from '@taiga-ui/legacy/components/input'; +import {TuiInputComponent, TuiInputModule} from '@taiga-ui/legacy/components/input'; import {TuiTextfieldControllerModule} from '@taiga-ui/legacy/directives/textfield-controller'; import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus'; import {combineLatest, filter, map, switchMap, take} from 'rxjs'; @@ -79,9 +75,13 @@ import {TuiDocScrollIntoViewLink} from './scroll-into-view.directive'; providers: NAVIGATION_PROVIDERS, host: { '[class._open]': 'menuOpen', + '(window:keydown)': 'onFocusSearch($event)', }, }) export class TuiDocNavigation { + @ViewChild(TuiInputComponent, {static: true}) + private readonly searchInput?: TuiInputComponent; + private readonly router = inject(Router); private readonly doc = inject(DOCUMENT); @@ -90,7 +90,6 @@ export class TuiDocNavigation { protected readonly sidebar = inject(TuiSidebarDirective, {optional: true}); protected readonly labels = inject(NAVIGATION_LABELS); protected readonly items = inject(NAVIGATION_ITEMS); - protected readonly searchText = inject(TUI_DOC_SEARCH_TEXT); protected readonly activatedRoute = inject(ActivatedRoute); protected readonly docIcons = inject(TUI_DOC_ICONS); protected readonly icons = inject(TUI_COMMON_ICONS); @@ -165,6 +164,16 @@ export class TuiDocNavigation { this.openActivePageGroup(); } + protected onFocusSearch(event: KeyboardEvent): void { + if ( + event.code === 'Slash' && + !(this.doc.activeElement instanceof HTMLInputElement) + ) { + this.searchInput?.nativeFocusableElement?.focus(); + event.preventDefault(); + } + } + @tuiPure private filterItems( items: ReadonlyArray, diff --git a/projects/addon-doc/components/navigation/navigation.style.less b/projects/addon-doc/components/navigation/navigation.style.less index 6f07aeebd298..630b0569a175 100644 --- a/projects/addon-doc/components/navigation/navigation.style.less +++ b/projects/addon-doc/components/navigation/navigation.style.less @@ -15,6 +15,11 @@ ::ng-deep tui-icon { border: 0.25rem solid transparent; } + + .slash { + block-size: 1rem; + font-size: 0.5rem; + } } .t-navigation { diff --git a/projects/addon-doc/components/navigation/navigation.template.html b/projects/addon-doc/components/navigation/navigation.template.html index 271f726983be..39cd41d22f1f 100644 --- a/projects/addon-doc/components/navigation/navigation.template.html +++ b/projects/addon-doc/components/navigation/navigation.template.html @@ -8,7 +8,11 @@ [tuiTextfieldIconLeft]="docIcons.search" [tuiTextfieldLabelOutside]="true" > - {{ searchText }} + + Type + / + to search + Date: Wed, 11 Sep 2024 19:27:19 +0300 Subject: [PATCH 2/2] feat(addon-doc): adds support i18n to search field --- .../components/navigation/navigation.component.ts | 7 ++++++- .../components/navigation/navigation.style.less | 12 +++++++++--- .../components/navigation/navigation.template.html | 9 ++++----- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/projects/addon-doc/components/navigation/navigation.component.ts b/projects/addon-doc/components/navigation/navigation.component.ts index 82cca782ce89..e53ec55f8e82 100644 --- a/projects/addon-doc/components/navigation/navigation.component.ts +++ b/projects/addon-doc/components/navigation/navigation.component.ts @@ -16,7 +16,11 @@ import { RouterLinkActive, Scroll, } from '@angular/router'; -import {TUI_DOC_ICONS, TUI_DOC_PAGE_LOADED} from '@taiga-ui/addon-doc/tokens'; +import { + TUI_DOC_ICONS, + TUI_DOC_PAGE_LOADED, + TUI_DOC_SEARCH_TEXT, +} from '@taiga-ui/addon-doc/tokens'; import type {TuiDocRoutePage, TuiDocRoutePages} from '@taiga-ui/addon-doc/types'; import {tuiTransliterateKeyboardLayout} from '@taiga-ui/addon-doc/utils'; import {TuiSidebarDirective} from '@taiga-ui/addon-mobile/directives/sidebar'; @@ -90,6 +94,7 @@ export class TuiDocNavigation { protected readonly sidebar = inject(TuiSidebarDirective, {optional: true}); protected readonly labels = inject(NAVIGATION_LABELS); protected readonly items = inject(NAVIGATION_ITEMS); + protected readonly searchText = inject(TUI_DOC_SEARCH_TEXT); protected readonly activatedRoute = inject(ActivatedRoute); protected readonly docIcons = inject(TUI_DOC_ICONS); protected readonly icons = inject(TUI_COMMON_ICONS); diff --git a/projects/addon-doc/components/navigation/navigation.style.less b/projects/addon-doc/components/navigation/navigation.style.less index 630b0569a175..10cecc016ca4 100644 --- a/projects/addon-doc/components/navigation/navigation.style.less +++ b/projects/addon-doc/components/navigation/navigation.style.less @@ -16,9 +16,15 @@ border: 0.25rem solid transparent; } - .slash { - block-size: 1rem; - font-size: 0.5rem; + .t-search-text { + display: flex; + flex-direction: row; + justify-content: space-between; + + .t-slash { + block-size: 1rem; + font-size: 0.5rem; + } } } diff --git a/projects/addon-doc/components/navigation/navigation.template.html b/projects/addon-doc/components/navigation/navigation.template.html index 39cd41d22f1f..a3b5f2c63072 100644 --- a/projects/addon-doc/components/navigation/navigation.template.html +++ b/projects/addon-doc/components/navigation/navigation.template.html @@ -8,11 +8,10 @@ [tuiTextfieldIconLeft]="docIcons.search" [tuiTextfieldLabelOutside]="true" > - - Type - / - to search - +
+ {{ searchText }} + / +