diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.html b/client/src/app/shared/shared-forms/advanced-input-filter.component.html index e4f318385..0ef062fdd 100644 --- a/client/src/app/shared/shared-forms/advanced-input-filter.component.html +++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.html @@ -1,9 +1,8 @@ -
+
-
- -
+
@@ -23,7 +22,10 @@ class="last-in-group" [(ngModel)]="searchValue" (keyup)="onInputSearch($event)" + #input > - +
diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss index f5438ffdb..5830d6e18 100644 --- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss +++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss @@ -1,6 +1,10 @@ @use '_variables' as *; @use '_mixins' as *; +.input-group { + width: fit-content; +} + .dropdown-item { font-size: 14px; } @@ -13,15 +17,23 @@ input { background-color: transparent; } +.form-control-clear my-global-icon { + display: block; + + ::ng-deep svg { + vertical-align: inherit; + } +} + my-global-icon { - $size: 18px; + $size: 19px; $margin: 2px; @include margin-right($margin); opacity: 1; - width: 18px; - height: 18px; + width: $size; + height: $size; &.no-visible { @include margin-right($size + $margin); diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html index 386d26116..27830419d 100644 --- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html @@ -1,13 +1,20 @@
-
- + - +
- + - +
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss index ee0f7a8d2..e3e767153 100644 --- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss @@ -5,16 +5,18 @@ display: flex; } -.root > my-global-icon { +.search-button, +.close-search-button { @include margin-left(10px); - height: 28px; - width: 28px; - cursor: pointer; - color: pvar(--mainColor); + my-global-icon { + height: 28px; + width: 28px; + color: pvar(--mainColor); - &:hover { - color: pvar(--mainHoverColor); + &:hover { + color: pvar(--mainHoverColor); + } } } @@ -26,6 +28,7 @@ input { } } -.input-group > my-global-icon { +.form-control-clear my-global-icon { width: 20px; + height: 20px; } 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 99abb94e7..eae4f9a7f 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 @@ -17,10 +17,9 @@ export class SimpleSearchInputComponent implements OnInit { @Output() inputDisplayChanged = new EventEmitter() value = '' + lastSearch = '' inputShown: boolean - private hasAlreadySentSearch = false - ngOnInit () { if (this.isInputShown()) this.showInput(false) } @@ -64,13 +63,16 @@ export class SimpleSearchInputComponent implements OnInit { } sendSearch () { - this.hasAlreadySentSearch = true + if (this.lastSearch === this.value) return + + this.lastSearch = this.value this.searchChanged.emit(this.value) } onResetFilter () { this.value = '' + this.input.nativeElement.focus() - if (this.hasAlreadySentSearch) this.sendSearch() + this.sendSearch() } } diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.ts b/client/src/app/shared/shared-video-miniature/videos-list.component.ts index afdef5ace..c64fd51b8 100644 --- a/client/src/app/shared/shared-video-miniature/videos-list.component.ts +++ b/client/src/app/shared/shared-video-miniature/videos-list.component.ts @@ -113,6 +113,8 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy { private videoRequests = new Subject<{ reset: boolean, obs: Observable> }>() + private alreadyDoneSearch = false + constructor ( private notifier: Notifier, private authService: AuthService, @@ -403,8 +405,9 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy { private subscribeToSearchChange () { this.routeSub = this.route.queryParams.subscribe(param => { - if (!param['search']) return + if (!this.alreadyDoneSearch && !param['search']) return + this.alreadyDoneSearch = true this.filters.load({ search: param['search'] }) this.onFiltersChanged(true) }) diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 36d8fb167..01bd77600 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss @@ -355,17 +355,14 @@ body { .has-clear { input { - @include padding-right(1.5rem !important); + padding-inline-end: 30px !important; } .form-control-clear { - display: flex; - justify-content: center; - align-items: center; - height: 95%; - font-size: 14px; position: absolute; right: .5rem; + top: 0; + bottom: 0; opacity: 0.4; &:hover {