UI: Redesign search input widget selector

5 years ago · 3dd57fd286
8 changed files with 80 additions and 22 deletions
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/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 fxLayout="row" fxLayoutGap="12px">
-              <tb-widgets-bundle-search fxFlex
-                                        [(ngModel)]="searchBundle"
-                                        placeholder="{{ (!widgetsBundle?.title ? 'widgets-bundle.search' : 'widget.search') | translate }}"
-                                        (ngModelChange)="searchBundle = $event">
-              </tb-widgets-bundle-search>
-            </div>
+          <div class="search-pane" *ngIf="isAddingWidget" fxLayout="row">
+            <tb-widgets-bundle-search fxFlex
+                                      [(ngModel)]="searchBundle"
+                                      placeholder="{{ (!widgetsBundle?.title ? 'widgets-bundle.search' : 'widget.search') | translate }}"
+                                      (ngModelChange)="searchBundle = $event">
+            </tb-widgets-bundle-search>
          </div>
          <div class="details-buttons" *ngIf="isAddingWidget">
            <button mat-button mat-icon-button type="button"
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/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 = '';
+  }
 }
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.html
+++ b/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>
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.scss
+++ b/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;
--- a/ui-ngx/src/app/modules/home/components/details-panel.component.ts
+++ b/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();
+    }
+  }
 }
--- a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.html
+++ b/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>
-  <button mat-button type="button" *ngIf="searchText" mat-icon-button (click)="clear()">
-    <mat-icon>close</mat-icon>
+  <input type="text"
+         [(ngModel)]="searchText"
+         (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>
--- a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.scss
+++ b/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;
-  height: 40px;
+  border-radius: 8px;
+  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;
+    }
+  }
 }

--- a/ui-ngx/src/app/shared/components/widgets-bundle-search.component.ts
+++ b/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;
+  }
 }