UI: Redesign search input widget selector

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

@@ -245,23 +245,24 @@
                           headerTitle="{{
                             (!widgetsBundle?.title ? 'widget.select-widgets-bundle' : 'dashboard.select-widget-value') | translate: widgetsBundle
                           }}"
-                          headerHeightPx="120"
+                          headerHeightPx="64"
+                          [isShowSearch]="true"
                           [isReadOnly]="true"
                           [isEdit]="false"
-                          (closeDetails)="onAddWidgetClosed()">
+                          backgroundColor="#cfd8dc"
+                          (closeDetails)="onAddWidgetClosed()"
+                          (closeSearch)="onCloseSearchBundle()">
           <div class="prefix-title-buttons" [fxHide]="!widgetsBundle?.title" style="height: 28px; margin-right: 12px">
             <button class="tb-mat-28" mat-icon-button type="button" (click)="widgetBundleSelected(null)">
               <mat-icon>arrow_back</mat-icon>
             </button>
           </div>
-          <div class="header-pane" *ngIf="isAddingWidget">
+          <div class="search-pane" *ngIf="isAddingWidget" fxLayout="row">
-            <div fxLayout="row" fxLayoutGap="12px">
+            <tb-widgets-bundle-search fxFlex
-              <tb-widgets-bundle-search fxFlex
+                                      [(ngModel)]="searchBundle"
-                                        [(ngModel)]="searchBundle"
+                                      placeholder="{{ (!widgetsBundle?.title ? 'widgets-bundle.search' : 'widget.search') | translate }}"
-                                        placeholder="{{ (!widgetsBundle?.title ? 'widgets-bundle.search' : 'widget.search') | translate }}"
+                                      (ngModelChange)="searchBundle = $event">
-                                        (ngModelChange)="searchBundle = $event">
+            </tb-widgets-bundle-search>
-              </tb-widgets-bundle-search>
-            </div>
           </div>
           <div class="details-buttons" *ngIf="isAddingWidget">
             <button mat-button mat-icon-button type="button"

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -884,6 +884,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   addWidgetFromType(widget: WidgetInfo) {
     this.onAddWidgetClosed();
+    this.widgetTypes = [];
+    this.searchBundle = '';
     this.widgetComponentService.getWidgetInfo(widget.bundleAlias, widget.typeAlias, widget.isSystemType).subscribe(
       (widgetTypeInfo) => {
         const config: WidgetConfig = JSON.parse(widgetTypeInfo.defaultConfig);
@@ -1197,4 +1199,8 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     overlayRef.attach(new ComponentPortal(DisplayWidgetTypesPanelComponent, this.viewContainerRef, injector));
     this.cd.detectChanges();
   }
+
+  onCloseSearchBundle() {
+    this.searchBundle = '';
+  }
 }

ui-ngx/src/app/modules/home/components/details-panel.component.html

@@ -18,7 +18,7 @@
 <header>
   <mat-toolbar class="details-toolbar" color="primary" [ngStyle]="{height: headerHeightPx+'px'}">
     <div class="mat-toolbar-tools" fxLayout="row" fxLayoutAlign="start center" style="height: 100%;">
-      <div class="mat-toolbar-tools tb-details-title-header" fxFlex fxLayout="column" fxLayoutAlign="start start">
+      <div class="mat-toolbar-tools tb-details-title-header" fxFlex fxLayout="column" fxLayoutAlign="start start" [fxHide]="showSearchPane">
         <div class="tb-details-title" fxLayout="row" fxLayoutAlign="start center">
           <ng-content select=".prefix-title-buttons"></ng-content>
           <span>{{ headerTitle }}</span>
@@ -28,8 +28,19 @@
           <ng-content select=".header-pane"></ng-content>
         </span>
       </div>
+      <div *ngIf="isShowSearch" [fxHide]="!showSearchPane" fxLayout="row" fxLayoutAlign="start center" style="width: 100%;">
+        <button mat-button mat-icon-button (click)="onToggleSearch()">
+          <mat-icon class="material-icons">arrow_back</mat-icon>
+        </button>
+        <div style="width: 100%; margin: 0 20px">
+          <ng-content select=".search-pane"></ng-content>
+        </div>
+      </div>
+      <button mat-button mat-icon-button *ngIf="isShowSearch && !showSearchPane" (click)="onToggleSearch()">
+        <mat-icon class="material-icons">search</mat-icon>
+      </button>
       <ng-content select=".details-buttons"></ng-content>
-      <button mat-button cdkFocusInitial mat-icon-button (click)="onCloseDetails()">
+      <button mat-button mat-icon-button (click)="onCloseDetails()">
         <mat-icon class="material-icons">close</mat-icon>
       </button>
     </div>
@@ -54,6 +65,6 @@
     </section>
   </mat-toolbar>
 </header>
-<div fxFlex class="mat-content">
+<div fxFlex class="mat-content" [ngStyle]="{backgroundColor: backgroundColor}">
   <ng-content></ng-content>
 </div>

ui-ngx/src/app/modules/home/components/details-panel.component.scss

@@ -28,7 +28,7 @@
 :host ::ng-deep {
   .mat-toolbar-tools {
     height: 100%;
-    min-height: 100px;
+    min-height: 60px;
     max-height: 120px;
     &.tb-details-title-header {
       min-width: 0;

ui-ngx/src/app/modules/home/components/details-panel.component.ts

@@ -32,6 +32,8 @@ export class DetailsPanelComponent extends PageComponent {
   @Input() headerSubtitle = '';
   @Input() isReadOnly = false;
   @Input() isAlwaysEdit = false;
+  @Input() isShowSearch = false;
+  @Input() backgroundColor = '#FFF';
 
   theFormValue: FormGroup;
 
@@ -50,8 +52,11 @@ export class DetailsPanelComponent extends PageComponent {
   toggleDetailsEditMode = new EventEmitter<boolean>();
   @Output()
   applyDetails = new EventEmitter<void>();
+  @Output()
+  closeSearch = new EventEmitter<void>();
 
   isEditValue = false;
+  showSearchPane = false;
 
   @Output()
   isEditChange = new EventEmitter<boolean>();
@@ -88,4 +93,10 @@ export class DetailsPanelComponent extends PageComponent {
     }
   }
 
+  onToggleSearch() {
+    this.showSearchPane = !this.showSearchPane;
+    if (!this.showSearchPane) {
+      this.closeSearch.emit();
+    }
+  }
 }

ui-ngx/src/app/shared/components/widgets-bundle-search.component.html

@@ -15,10 +15,15 @@
     limitations under the License.
 
 -->
-<div class="input-wrapper" fxLayoutAlign="start center" fxLayoutGap="8px">
+<div class="input-wrapper" [ngClass]="{'focus': focus}" fxLayoutAlign="start center" fxLayoutGap="16px">
   <mat-icon>search</mat-icon>
-  <input type="text" [(ngModel)]="searchText" (ngModelChange)="updateSearchText()" [placeholder]=placeholder>
+  <input type="text"
-  <button mat-button type="button" *ngIf="searchText" mat-icon-button (click)="clear()">
+         [(ngModel)]="searchText"
-    <mat-icon>close</mat-icon>
+         (ngModelChange)="updateSearchText()"
+         (focus)="toggleFocus()"
+         (blur)="toggleFocus()"
+         [placeholder]=placeholder>
+  <button mat-button type="button" *ngIf="searchText" mat-icon-button (click)="clear($event)">
+    <mat-icon class="close">close</mat-icon>
   </button>
 </div>

ui-ngx/src/app/shared/components/widgets-bundle-search.component.scss

@@ -15,8 +15,10 @@
  */
 .input-wrapper {
   background: hsla(0, 0%, 100%, .2);
-  padding: 5px 0 5px 10px;
+  border-radius: 8px;
-  height: 40px;
+  color: rgb(255, 255, 255, .84);
+  padding: 5px 8px 5px 16px;
+  height: 46px;
 
   input {
     width: 100%;
@@ -30,9 +32,24 @@
 
     &::placeholder {
       color: #fff;
-      opacity: .8;
+      opacity: .6;
       line-height: 26px;
     }
   }
+
+  &.focus {
+    background: #fff;
+    color: rgba(0,0,0,.54);
+
+    input {
+      color: #000;
+      opacity: .60;
+    }
+
+    .close {
+      color: #000 !important;
+      opacity: .54;
+    }
+  }
 }
 

ui-ngx/src/app/shared/components/widgets-bundle-search.component.ts

@@ -31,6 +31,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 export class WidgetsBundleSearchComponent implements ControlValueAccessor {
 
   searchText: string;
+  focus = false;
 
   @Input() placeholder: string;
 
@@ -60,8 +61,14 @@ export class WidgetsBundleSearchComponent implements ControlValueAccessor {
     this.propagateChange(this.searchText);
   }
 
-  clear(): void {
+  clear($event: Event): void {
+    $event.preventDefault();
+    $event.stopPropagation();
     this.searchText = '';
     this.updateView();
   }
+
+  toggleFocus() {
+    this.focus = !this.focus;
+  }
 }