Redesign account page

3 files changed, 68 insertions, 33 deletions

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 fb0d97122..c20c02e23 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,14 +1,15 @@
-<span>
-  <my-global-icon iconName="search" aria-label="Search" role="button" (click)="showInput()"></my-global-icon>
-
+<div class="root">
   <input
     #ref
     type="text"
     [(ngModel)]="value"
-    (focusout)="focusLost()"
     (keyup.enter)="searchChange()"
-    [hidden]="!shown"
+    [hidden]="!inputShown"
     [name]="name"
     [placeholder]="placeholder"
   >
-</span>
+
+  <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
+
+  <my-global-icon *ngIf="!alwaysShow && inputShown" i18n-title title="Close search" iconName="cross" (click)="hideInput()"></my-global-icon>
+</div>
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 591b04fb2..037937f80 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
@@ -1,29 +1,29 @@
 @import '_variables';
 @import '_mixins';
 
-span {
-  opacity: .6;
-  
-  &:focus-within {
-    opacity: 1;
-  }
+.root {
+  display: flex;
 }
 
 my-global-icon {
-  height: 18px;
-  position: relative;
-  top: -2px;
-}
+  height: 26px;
+  width: 26px;
+  margin-left: 10px;
+  cursor: pointer;
 
-input {
-  @include peertube-input-text(150px);
+  &:hover {
+    color: pvar(--mainHoverColor);
+  }
 
-  height: 22px; // maximum height for the account/video-channels links
-  padding-left: 10px;
-  background-color: transparent;
-  border: none;
+  &[iconName=search] {
+    color: pvar(--mainColor);
+  }
 
-  &::placeholder {
-    font-size: 15px;
+  &[iconName=cross] {
+    color: pvar(--mainForegroundColor);
   }
 }
+
+input {
+  @include peertube-input-text(200px);
+}
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 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { ActivatedRoute, Router } from '@angular/router'
 import { Subject } from 'rxjs'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
 
 @Component({
   selector: 'simple-search-input',
@@ -13,11 +13,14 @@ export class SimpleSearchInputComponent implements OnInit {
 
   @Input() name = 'search'
   @Input() placeholder = $localize`Search`
+  @Input() iconTitle = $localize`Search`
+  @Input() alwaysShow = true
 
   @Output() searchChanged = new EventEmitter<string>()
+  @Output() inputDisplayChanged = new EventEmitter<boolean>()
 
   value = ''
-  shown: boolean
+  inputShown: boolean
 
   private searchSubject = new Subject<string>()
 
@@ -35,20 +38,51 @@ export class SimpleSearchInputComponent implements OnInit {
         .subscribe(value => this.searchChanged.emit(value))
 
     this.searchSubject.next(this.value)
+
+    if (this.isInputShown()) this.showInput(false)
   }
 
-  showInput () {
-    this.shown = true
-    setTimeout(() => this.input.nativeElement.focus())
+  isInputShown () {
+    if (this.alwaysShow) return true
+
+    return this.inputShown
+  }
+
+  onIconClick () {
+    if (!this.isInputShown()) {
+      this.showInput()
+      return
+    }
+
+    this.searchChange()
+  }
+
+  showInput (focus = true) {
+    this.inputShown = true
+    this.inputDisplayChanged.emit(this.inputShown)
+
+    if (focus) {
+      setTimeout(() => this.input.nativeElement.focus())
+    }
+  }
+
+  hideInput () {
+    this.inputShown = false
+
+    if (this.isInputShown() === false) {
+      this.inputDisplayChanged.emit(this.inputShown)
+    }
   }
 
   focusLost () {
-    if (this.value !== '') return
-    this.shown = false
+    if (this.value) return
+
+    this.hideInput()
   }
 
   searchChange () {
-    this.router.navigate(['./search'], { relativeTo: this.route })
+    this.router.navigate([ './search' ], { relativeTo: this.route })
+
     this.searchSubject.next(this.value)
   }
 }