(feat) add clear search button

src/app/modules/pro/channel/channel.component.html

@@ -11,7 +11,7 @@
 
  <div class="m-proChannelTopbar__SearchBox">
  <div class="mdl-textfield mdl-js-textfield">
- <i class="material-icons">search</i>
+ <i class="material-icons search">search</i>
  <input
  [(ngModel)]="searchedText"
  id="search"
@@ -20,6 +20,9 @@
  type="text"
  (keyup.enter)="search()"
  >
+ <ng-container *ngIf="searchedText">
+ <i class="material-icons clear" (click)="clearSearch()" >close</i>
+ </ng-container>
  <label class="mdl-textfield__label" for="search"></label>
  </div>
  </div>

src/app/modules/pro/channel/channel.component.scss

@@ -48,12 +48,23 @@ m-pro--channel {
  transition: width ease-in-out .2s;
  padding: 8px 0;
 
- i {
+ i.search {
  position: absolute;
  margin: 6px;
  font-size: 20px;
  color: rgba(0,0,0,.87)!important;
  }
+
+ i.clear {
+ font-size: 16px;
+ background-color: #3e3737;
+ color: white;
+ border-radius: 20px;
+ cursor: pointer;
+ position: absolute;
+ top: 16px;
+ right: 10px;
+ }
  
  input {
  height: 32px;

src/app/modules/pro/channel/channel.component.ts

@@ -175,6 +175,12 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  this.router.navigate([this.currentURL,{ query: this.searchedText, period: '24h' }]);
  }
 
+ clearSearch() {
+ this.searchedText = '';
+ const cleanUrl = this.router.url.split(';')[0];
+ this.router.navigate([cleanUrl]);
+ }
+
  get linkTo() {
  return this.channelService.linkTo.bind(this.channelService);
  }

src/app/modules/pro/channel/list/list.component.scss

@@ -7,7 +7,6 @@ m-pro--channel-list {
 
  .m-proChannelList__tools {
  background-color: var(--plain-background-color) !important;
- width: 100%;
  padding: 20px;
  height: 70px;
  border-radius: 20px;