Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Spotlight execute search on enter

Browse Source
This commit is contained in:
Adina Țeudan 2021-12-09 17:40:52 +02:00
parent cb373de859
commit 01f2309375
2 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
View File

@ -1,28 +1,31 @@
<iqser-input-with-action
(click)="openMenuIfValue()"
(valueChange)="valueChanges$.next($event)"
[placeholder]="placeholder"
></iqser-input-with-action>
<form>
<iqser-input-with-action
(action)="executeCurrentAction()"
(click)="openMenuIfValue()"
(valueChange)="valueChanges$.next($event)"
[placeholder]="placeholder"
></iqser-input-with-action>
<mat-menu #menu="matMenu" class="search-menu" xPosition="after">
<ng-template matMenuContent>
<div class="wrapper">
<button
(click)="item.action(valueChanges$.getValue())"
*ngFor="let item of shownActions; let index = index"
[class.highlight]="(currentActionIdx$ | async) === index"
class="spotlight-row pointer"
>
<mat-icon [svgIcon]="item.icon"></mat-icon>
<span>{{ item.text }}</span>
</button>
</div>
</ng-template>
</mat-menu>
<mat-menu #menu="matMenu" class="search-menu" xPosition="after">
<ng-template matMenuContent>
<div class="wrapper">
<button
(click)="item.action(valueChanges$.getValue())"
*ngFor="let item of shownActions; let index = index"
[class.highlight]="(currentActionIdx$ | async) === index"
class="spotlight-row pointer"
>
<mat-icon [svgIcon]="item.icon"></mat-icon>
<span>{{ item.text }}</span>
</button>
</div>
</ng-template>
</mat-menu>
<!-- https://material.angular.io/components/menu/overview#toggling-the-menu-programmatically -->
<!-- To toggle menu programmatically a matMenuTriggerFor directive is needed -->
<div [matMenuTriggerFor]="menu"></div>
<!-- https://material.angular.io/components/menu/overview#toggling-the-menu-programmatically -->
<!-- To toggle menu programmatically a matMenuTriggerFor directive is needed -->
<div [matMenuTriggerFor]="menu"></div>
<!-- A hack to avoid subscribing in component -->
<ng-container *ngIf="showActions$ | async"></ng-container>
<!-- A hack to avoid subscribing in component -->
<ng-container *ngIf="showActions$ | async"></ng-container>
</form>

8
apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.ts
View File

@ -38,6 +38,10 @@ export class SpotlightSearchComponent {
}
}
executeCurrentAction(): void {
this.shownActions[this._currentActionIdx].action(this.valueChanges$.getValue());
}
@HostListener('document:keydown.arrowDown', ['$event'])
@HostListener('document:keydown.arrowUp', ['$event'])
handleKeyDown(event: KeyboardEvent): void {
@ -48,13 +52,13 @@ export class SpotlightSearchComponent {
handleKeyUpArrowDown(event: KeyboardEvent): void {
this.handleKeyDown(event);
const index = this._currentActionIdx + 1;
this._currentActionIdx$.next(index >= this.actions.length ? 0 : index);
this._currentActionIdx$.next(index >= this.shownActions.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);
this._currentActionIdx$.next(index < 0 ? this.shownActions.length - 1 : index);
}
}