harmonize search for libraries

3 files changed, 20 insertions, 17 deletions

diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 6d098b507..faeb3b56c 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -1,11 +1,16 @@
-<h1>
-  <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
-  <ng-container i18n>My videos</ng-container><span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
-</h1>
+<h1 class="d-flex justify-content-between">
+  <span>
+    <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
+    <ng-container i18n>My videos</ng-container>
+    <span class="badge badge-secondary"> {{ pagination.totalItems }}</span>
+  </span>
 
-<div class="videos-header">
-  <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
-</div>
+  <div class="has-feedback has-clear">
+    <input type="text" placeholder="Search your videos" i18n-placeholder [(ngModel)]="videosSearch" (ngModelChange)="onVideosSearchChanged()" />
+    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetSearch()"></a>
+    <span class="sr-only" i18n>Clear filters</span>
+  </div>
+</h1>
 
 <my-videos-selection
   [pagination]="pagination"
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index 9225fc5fd..0930b1959 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -1,14 +1,8 @@
 @import '_variables';
 @import '_mixins';
 
-.videos-header {
-  display: flex;
-  justify-content: space-between;
-  margin: 20px 0 50px;
-
-  input[type=text] {
-    @include peertube-input-text(300px);
-  }
+input[type=text] {
+  @include peertube-input-text(300px);
 }
 
 .action-button-delete-selection {
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 3cfe8fb38..2274c6a7b 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -59,13 +59,17 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
 
   ngOnInit () {
     this.videosSearchChanged
-      .pipe(
-        debounceTime(500))
+      .pipe(debounceTime(500))
       .subscribe(() => {
         this.videosSelection.reloadVideos()
       })
   }
 
+  resetSearch () {
+    this.videosSearch = ''
+    this.onVideosSearchChanged()
+  }
+
   onVideosSearchChanged () {
     this.videosSearchChanged.next()
   }