diff options
author | Chocobozzz <me@florianbigard.com> | 2021-03-26 13:20:37 +0100 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2021-03-31 09:05:51 +0200 |
commit | 67264e060b6068399dae9a67abae035a73b84af1 (patch) | |
tree | dabb735a530c9389c941f7ff1d44fa4b5f6db03e /client/src/app/shared/shared-main/misc/simple-search-input.component.ts | |
parent | 60c35932f6a14cfe83bb0e54407427cce70171ea (diff) | |
download | PeerTube-67264e060b6068399dae9a67abae035a73b84af1.tar.gz PeerTube-67264e060b6068399dae9a67abae035a73b84af1.tar.zst PeerTube-67264e060b6068399dae9a67abae035a73b84af1.zip |
Redesign account page
Diffstat (limited to 'client/src/app/shared/shared-main/misc/simple-search-input.component.ts')
-rw-r--r-- | client/src/app/shared/shared-main/misc/simple-search-input.component.ts | 52 |
1 files changed, 43 insertions, 9 deletions
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts index 86ae9ab42..224d71134 100644 --- a/client/src/app/shared/shared-main/misc/simple-search-input.component.ts +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.ts | |||
@@ -1,7 +1,7 @@ | |||
1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' | ||
2 | import { ActivatedRoute, Router } from '@angular/router' | ||
3 | import { Subject } from 'rxjs' | 1 | import { Subject } from 'rxjs' |
4 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' | 2 | import { debounceTime, distinctUntilChanged } from 'rxjs/operators' |
3 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' | ||
4 | import { ActivatedRoute, Router } from '@angular/router' | ||
5 | 5 | ||
6 | @Component({ | 6 | @Component({ |
7 | selector: 'simple-search-input', | 7 | selector: 'simple-search-input', |
@@ -13,11 +13,14 @@ export class SimpleSearchInputComponent implements OnInit { | |||
13 | 13 | ||
14 | @Input() name = 'search' | 14 | @Input() name = 'search' |
15 | @Input() placeholder = $localize`Search` | 15 | @Input() placeholder = $localize`Search` |
16 | @Input() iconTitle = $localize`Search` | ||
17 | @Input() alwaysShow = true | ||
16 | 18 | ||
17 | @Output() searchChanged = new EventEmitter<string>() | 19 | @Output() searchChanged = new EventEmitter<string>() |
20 | @Output() inputDisplayChanged = new EventEmitter<boolean>() | ||
18 | 21 | ||
19 | value = '' | 22 | value = '' |
20 | shown: boolean | 23 | inputShown: boolean |
21 | 24 | ||
22 | private searchSubject = new Subject<string>() | 25 | private searchSubject = new Subject<string>() |
23 | 26 | ||
@@ -35,20 +38,51 @@ export class SimpleSearchInputComponent implements OnInit { | |||
35 | .subscribe(value => this.searchChanged.emit(value)) | 38 | .subscribe(value => this.searchChanged.emit(value)) |
36 | 39 | ||
37 | this.searchSubject.next(this.value) | 40 | this.searchSubject.next(this.value) |
41 | |||
42 | if (this.isInputShown()) this.showInput(false) | ||
38 | } | 43 | } |
39 | 44 | ||
40 | showInput () { | 45 | isInputShown () { |
41 | this.shown = true | 46 | if (this.alwaysShow) return true |
42 | setTimeout(() => this.input.nativeElement.focus()) | 47 | |
48 | return this.inputShown | ||
49 | } | ||
50 | |||
51 | onIconClick () { | ||
52 | if (!this.isInputShown()) { | ||
53 | this.showInput() | ||
54 | return | ||
55 | } | ||
56 | |||
57 | this.searchChange() | ||
58 | } | ||
59 | |||
60 | showInput (focus = true) { | ||
61 | this.inputShown = true | ||
62 | this.inputDisplayChanged.emit(this.inputShown) | ||
63 | |||
64 | if (focus) { | ||
65 | setTimeout(() => this.input.nativeElement.focus()) | ||
66 | } | ||
67 | } | ||
68 | |||
69 | hideInput () { | ||
70 | this.inputShown = false | ||
71 | |||
72 | if (this.isInputShown() === false) { | ||
73 | this.inputDisplayChanged.emit(this.inputShown) | ||
74 | } | ||
43 | } | 75 | } |
44 | 76 | ||
45 | focusLost () { | 77 | focusLost () { |
46 | if (this.value !== '') return | 78 | if (this.value) return |
47 | this.shown = false | 79 | |
80 | this.hideInput() | ||
48 | } | 81 | } |
49 | 82 | ||
50 | searchChange () { | 83 | searchChange () { |
51 | this.router.navigate(['./search'], { relativeTo: this.route }) | 84 | this.router.navigate([ './search' ], { relativeTo: this.route }) |
85 | |||
52 | this.searchSubject.next(this.value) | 86 | this.searchSubject.next(this.value) |
53 | } | 87 | } |
54 | } | 88 | } |