From 488d664d4589f581f8fb714f040ac273443b5a96 Mon Sep 17 00:00:00 2001 From: Dan Percic Date: Sat, 28 Aug 2021 02:19:03 +0300 Subject: [PATCH] rip mac style spotlight search --- .../base-screen/base-screen.component.html | 19 +++-- .../base-screen/base-screen.component.scss | 4 + .../base-screen/base-screen.component.ts | 44 ++++------- .../spotlight-search-action.ts | 2 +- .../spotlight-search-dialog-data.ts | 6 -- .../spotlight-search.component.html | 50 ++++++------ .../spotlight-search.component.scss | 42 ++++------ .../spotlight-search.component.ts | 76 ++++++++++--------- apps/red-ui/src/assets/i18n/de.json | 1 - apps/red-ui/src/assets/i18n/en.json | 7 +- 10 files changed, 116 insertions(+), 135 deletions(-) delete mode 100644 apps/red-ui/src/app/components/spotlight-search/spotlight-search-dialog-data.ts diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html index 440e53047..ab473f6c6 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html @@ -3,6 +3,7 @@
+
+
{{ 'top-bar.navigation-items.back' | translate }} + + + {{ appStateService.activeDossier.dossierName }} + +
+
{{ titleService.getTitle() }}
+
- + >
diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.scss b/apps/red-ui/src/app/components/base-screen/base-screen.component.scss index ab6144a7f..3ec6a589c 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.scss +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.scss @@ -33,3 +33,7 @@ margin-right: 2px; } } + +redaction-spotlight-search { + margin-right: 16px !important; +} diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts index 1db7fe6cd..aa8b2cd4b 100644 --- a/apps/red-ui/src/app/components/base-screen/base-screen.component.ts +++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.ts @@ -6,10 +6,7 @@ import { NavigationStart, Router } from '@angular/router'; import { Title } from '@angular/platform-browser'; import { FileDownloadService } from '@upload-download/services/file-download.service'; import { TranslateService } from '@ngx-translate/core'; -import { MatDialog } from '@angular/material/dialog'; -import { SpotlightSearchComponent } from '@components/spotlight-search/spotlight-search.component'; import { SpotlightSearchAction } from '@components/spotlight-search/spotlight-search-action'; -import { SpotlightSearchDialogData } from '@components/spotlight-search/spotlight-search-dialog-data'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { distinctUntilChanged, filter, map, startWith } from 'rxjs/operators'; @@ -38,7 +35,7 @@ export class BaseScreenComponent { readonly currentUser = this.userService.currentUser; readonly isDossiersView$ = this._navigationStart$.pipe(map(isDossiersView)); readonly isSearchScreen$ = this._navigationStart$.pipe(map(isSearchScreen)); - readonly userMenuItems: MenuItem[] = [ + readonly userMenuItems: readonly MenuItem[] = [ { name: _('top-bar.navigation-items.my-account.children.my-profile'), routerLink: '/main/my-profile', @@ -61,6 +58,19 @@ export class BaseScreenComponent { show: this.currentUser.isManager } ]; + readonly searchActions: readonly SpotlightSearchAction[] = [ + { + text: this._translateService.instant('search.this-dossier'), + icon: 'red:enter', + hide: (): boolean => !this.appStateService.activeDossier, + action: (query): void => this._search(query, this.appStateService.activeDossier.dossierId) + }, + { + text: this._translateService.instant('search.entire-platform'), + icon: 'red:enter', + action: (query): void => this._search(query) + } + ]; constructor( readonly appStateService: AppStateService, @@ -69,33 +79,9 @@ export class BaseScreenComponent { readonly titleService: Title, readonly fileDownloadService: FileDownloadService, private readonly _router: Router, - private readonly _translateService: TranslateService, - private readonly _dialog: MatDialog + private readonly _translateService: TranslateService ) {} - openSpotlightSearch() { - const spotlightSearchActions: SpotlightSearchAction[] = [ - { - text: this._translateService.instant('search.this-dossier'), - icon: 'red:enter', - hide: !this.appStateService.activeDossier, - action: query => this._search(query, this.appStateService.activeDossier.dossierId) - }, - { - text: this._translateService.instant('search.entire-platform'), - icon: 'red:enter', - action: query => this._search(query) - } - ]; - - this._dialog.open(SpotlightSearchComponent, { - data: { - actionsConfig: spotlightSearchActions, - placeholder: this._translateService.instant('search.placeholder') - } as SpotlightSearchDialogData - }); - } - private _search(query: string, dossierId?: string) { const queryParams = { query, dossierId }; this._router.navigate(['main/dossiers/search'], { queryParams }).then(); diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search-action.ts b/apps/red-ui/src/app/components/spotlight-search/spotlight-search-action.ts index 47a39ad27..d3f4cf396 100644 --- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search-action.ts +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search-action.ts @@ -2,5 +2,5 @@ export interface SpotlightSearchAction { readonly text: string; readonly action: (query: string) => void; readonly icon?: string; - readonly hide?: boolean; + readonly hide?: () => boolean; } diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search-dialog-data.ts b/apps/red-ui/src/app/components/spotlight-search/spotlight-search-dialog-data.ts deleted file mode 100644 index d817800e2..000000000 --- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search-dialog-data.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { SpotlightSearchAction } from './spotlight-search-action'; - -export interface SpotlightSearchDialogData { - readonly actionsConfig: SpotlightSearchAction[]; - readonly placeholder: string; -} diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html index 2c59b412f..4031594a4 100644 --- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html @@ -1,28 +1,28 @@ -
-
- + - + + +
+ +
+ + - -
+ + +
-
- - - - -
+ + diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss index 349d5ce01..9d7c4942c 100644 --- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.scss @@ -1,50 +1,38 @@ @import '../../../assets/styles/variables'; -.spotlight-wrapper { - overflow: hidden; - position: absolute; - top: 15%; - left: 0; - right: 0; - border-radius: 10px; - box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3); -} - .spotlight-row { + width: 300px; display: flex; align-items: center; - height: 60px; + height: 40px; text-align: left; - font-size: 16px; - font-weight: 500; + font-size: 13px; border: none; outline: none; color: $accent; - padding: 0 24px; background-color: $white; } -.spotlight-row, -.spotlight-wrapper { - width: 750px; - margin: auto; -} - .highlight { + border-radius: 4px; background-color: $grey-2; } -.search { - background-color: $white; - align-items: center; +.wrapper { + width: 300px; } -.divider { - height: 1px; - background-color: rgba(226, 228, 233, 0.9); +::ng-deep .mat-menu-content { + padding: 8px !important; +} + +button { + padding: 0; } mat-icon { - width: 14px; + margin-left: 13px; + margin-right: 8px; height: 14px; + width: 14px; } diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts index 420816a1c..b4440f490 100644 --- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts +++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts @@ -1,59 +1,63 @@ -import { ChangeDetectionStrategy, Component, HostListener, Inject } from '@angular/core'; -import { FormBuilder } from '@angular/forms'; -import { debounceTime, distinctUntilChanged, map, startWith } from 'rxjs/operators'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { SpotlightSearchDialogData } from '@components/spotlight-search/spotlight-search-dialog-data'; +import { ChangeDetectionStrategy, Component, HostListener, Input, ViewChild } from '@angular/core'; +import { debounceTime, distinctUntilChanged, map, tap } from 'rxjs/operators'; import { BehaviorSubject } from 'rxjs'; +import { SpotlightSearchAction } from '@components/spotlight-search/spotlight-search-action'; +import { MatMenuTrigger } from '@angular/material/menu'; @Component({ - selector: 'redaction-spotlight-search', + selector: 'redaction-spotlight-search [actions]', templateUrl: './spotlight-search.component.html', styleUrls: ['./spotlight-search.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class SpotlightSearchComponent { - private readonly _currentActionIdx$ = new BehaviorSubject(0); + @Input() actions: readonly SpotlightSearchAction[]; + @Input() placeholder?: string; + @ViewChild(MatMenuTrigger) private readonly _menuTrigger!: MatMenuTrigger; + private readonly _currentActionIdx$ = new BehaviorSubject(0); readonly currentActionIdx$ = this._currentActionIdx$.asObservable().pipe(distinctUntilChanged()); - readonly shownActions = this.data.actionsConfig.filter(a => !a.hide); - readonly formGroup = this._formBuilder.group({ query: [''] }); - readonly showActions$ = this.formGroup.get('query').valueChanges.pipe( - startWith(''), + + readonly valueChanges$ = new BehaviorSubject(''); + readonly showActions$ = this.valueChanges$.pipe( debounceTime(300), - map(value => value !== '') + map(value => value !== ''), + tap(show => (show ? this._menuTrigger.openMenu() : this._menuTrigger.closeMenu())) ); - constructor( - private readonly _formBuilder: FormBuilder, - readonly dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) - readonly data: SpotlightSearchDialogData - ) {} + get shownActions(): readonly SpotlightSearchAction[] { + return this.actions.filter(a => !a.hide?.()); + } - @HostListener('document:keydown', ['$event']) - handleKeyDown(event: KeyboardEvent): void { - if (['ArrowDown', 'ArrowUp'].includes(event.code)) { - event.preventDefault(); - return event.stopPropagation(); + openMenuIfValue(): void { + const value = this.valueChanges$.getValue(); + if (value && value !== '') { + this._menuTrigger.openMenu(); } } - @HostListener('document:keyup', ['$event']) - handleKeyUp(event: KeyboardEvent): void { - if (['ArrowDown', 'ArrowUp'].includes(event.code)) { - event.preventDefault(); - event.stopPropagation(); - const index = this._currentActionIdx + event.code === 'ArrowDown' ? 1 : -1; - return this._currentActionIdx$.next(this._fixIndexOutOfBound(index)); - } + @HostListener('document:keydown.arrowDown', ['$event']) + @HostListener('document:keydown.arrowUp', ['$event']) + handleKeyDown(event: KeyboardEvent): void { + event.preventDefault(); + event.stopPropagation(); + } + + @HostListener('document:keyup.arrowDown', ['$event']) + handleKeyUpArrowDown(event: KeyboardEvent): void { + this.handleKeyDown(event); + const index = this._currentActionIdx + 1; + this._currentActionIdx$.next(index >= this.actions.length ? 0 : index); + } + + @HostListener('document:keyup.arrowUp', ['$event']) + handleKeyUpArrowUp(event: KeyboardEvent): void { + this.handleKeyDown(event); + const index = this._currentActionIdx - 1; + this._currentActionIdx$.next(index < 0 ? this.actions.length - 1 : index); } private get _currentActionIdx(): number { return this._currentActionIdx$.getValue(); } - - private _fixIndexOutOfBound(index: number): number { - const indexOutOfBound = index < 0 || index >= this.shownActions.length; - return indexOutOfBound ? Math.abs(this.shownActions.length - Math.abs(index)) : index; - } } diff --git a/apps/red-ui/src/assets/i18n/de.json b/apps/red-ui/src/assets/i18n/de.json index 6bc4c7da7..f387f5528 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -1212,7 +1212,6 @@ }, "search": { "entire-platform": "", - "header-label": "", "placeholder": "", "this-dossier": "" }, diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 65a3f04dd..0a2b0307c 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -1349,10 +1349,9 @@ "table-header": "{length} search {length, plural, one{result} other{results}}" }, "search": { - "entire-platform": "entire platform", - "header-label": "Search entire platform", - "placeholder": "Search for documents or document content", - "this-dossier": "in this dossier" + "entire-platform": "all documents", + "placeholder": "Search...", + "this-dossier": "documents in this dossier" }, "smtp-auth-config": { "actions": {