[ADF-1980] fix search component styles (#2684)

* fix search component styles

* remove obsolete styles and use routed viewer

* cleanup demo shell search bar

* fix app crashes

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -23,7 +23,7 @@
 
         <div class="adf-app-layout-menu-spacer"></div>
 
-        <adf-search-bar class="adf-search-bar-overflow" fxFlex="0 1 auto"></adf-search-bar>
+        <adf-search-bar fxFlex="0 1 auto"></adf-search-bar>
 
         <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.HOME' | translate }}</a>
         <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.CONTENT_SERVICES' | translate }}</a>

demo-shell/src/app/components/app-layout/app-layout.component.scss

@@ -20,10 +20,6 @@
       }
     }
 
-    .adf-search-bar-overflow {
-        overflow: hidden;
-    }
-
     &-user-profile {
       margin-right: 10px;
     }
@@ -58,16 +54,9 @@
     .adf-userinfo-name {
       display: none;
     }
-
-    .adf-search-bar-overflow {
-        padding-right: 4px;
-    }
   }
 
   @media screen and ($mat-xsmall) {
-      .adf-search-bar-overflow {
-          padding-right: 16px;
-      }
   }
 
 }

demo-shell/src/app/components/search/search-bar.component.html

@@ -2,7 +2,3 @@
     (optionClicked)="onItemClicked($event)"
     (submit)="onSearchSubmit($event)">
 </adf-search-control>
-
-<adf-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed" [fileNodeId]="fileNodeId" [overlayMode]="true">
-  <mat-spinner></mat-spinner>
-</adf-viewer>

demo-shell/src/app/components/search/search-bar.component.ts

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Output, Input } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { MinimalNodeEntity } from 'alfresco-js-api';
-import { AuthenticationService } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-search-bar',
@@ -27,23 +26,7 @@ import { AuthenticationService } from '@alfresco/adf-core';
 })
 export class SearchBarComponent {
 
-    @Input()
+    constructor(public router: Router) {
-    expandable: boolean = true;
-
-    @Output()
-    expand = new EventEmitter();
-
-    fileNodeId: string;
-    fileShowed: boolean = false;
-    searchTerm: string = '';
-    subscriptAnimationState: string;
-
-    constructor(public router: Router,
-                public authService: AuthenticationService) {
-    }
-
-    isLoggedIn(): boolean {
-        return this.authService.isLoggedIn();
     }
 
     /**
@@ -52,19 +35,18 @@ export class SearchBarComponent {
      * @param event Parameters relating to the search
      */
     onSearchSubmit(event: KeyboardEvent) {
-      let value = (event.target as HTMLInputElement).value;
+        const value = (event.target as HTMLInputElement).value;
-      this.router.navigate(['/search', {
+        this.router.navigate(['/search', {
-          q: value
+            q: value
-      }]);
+        }]);
-  }
+    }
 
-  onItemClicked(event: MinimalNodeEntity) {
+    onItemClicked(event: MinimalNodeEntity) {
-      if (event.entry.isFile) {
+        if (event.entry.isFile) {
-          this.fileNodeId = event.entry.id;
+            this.router.navigate(['/files', event.entry.id, 'view']);
-          this.fileShowed = true;
+        } else if (event.entry.isFolder) {
-      } else if (event.entry.isFolder) {
+            this.router.navigate(['/files', event.entry.id]);
-          this.router.navigate(['/files', event.entry.id]);
+        }
-      }
+    }
-  }
 
 }

lib/content-services/search/components/search-control.component.html

@@ -1,26 +1,27 @@
-<div class="adf-search-container" *ngIf="isLoggedIn()"
+<div class="adf-search-container">
-[@transitionMessages]="subscriptAnimationState">
+    <div *ngIf="isLoggedIn()" [@transitionMessages]="subscriptAnimationState">
-<a mat-icon-button
+        <a mat-icon-button
-    *ngIf="expandable"
+            *ngIf="expandable"
-    id="adf-search-button"
+            id="adf-search-button"
-    class="adf-search-button"
+            class="adf-search-button"
-    (click)="toggleSearchBar($event)"
+            (click)="toggleSearchBar($event)"
-    (keyup.enter)="toggleSearchBar($event)">
+            (keyup.enter)="toggleSearchBar($event)">
-    <mat-icon aria-label="search button">search</mat-icon>
+            <mat-icon aria-label="search button">search</mat-icon>
-</a>
+        </a>
-<mat-form-field class="adf-input-form-field-divider">
+        <mat-form-field class="adf-input-form-field-divider">
-    <input matInput
+            <input matInput
-        [type]="inputType"
+                [type]="inputType"
-        [autocomplete]="getAutoComplete()"
+                [autocomplete]="getAutoComplete()"
-        id="adf-control-input"
+                id="adf-control-input"
-        [(ngModel)]="searchTerm"
+                [(ngModel)]="searchTerm"
-        (focus)="activateToolbar()"
+                (focus)="activateToolbar()"
-        (blur)="onBlur($event)"
+                (blur)="onBlur($event)"
-        (keyup.escape)="toggleSearchBar()"
+                (keyup.escape)="toggleSearchBar()"
-        (ngModelChange)="inputChange($event)"
+                (ngModelChange)="inputChange($event)"
-        [searchAutocomplete]="auto"
+                [searchAutocomplete]="auto"
-        (keyup.enter)="searchSubmit($event)">
+                (keyup.enter)="searchSubmit($event)">
-</mat-form-field>
+        </mat-form-field>
+    </div>
 </div>
 
 <adf-search #auto="searchAutocomplete"
@@ -41,15 +42,16 @@
                 <mat-icon mat-list-icon>
                     <img [src]="getMimeTypeIcon(item)" />
                 </mat-icon>
-                    <h4 mat-line id="result_name_{{idx}}"
+                <h4 mat-line id="result_name_{{idx}}"
-                        *ngIf="highlight; else elseBlock"
+                    *ngIf="highlight; else elseBlock"
-                        class="adf-search-fixed-text"
+                    class="adf-search-fixed-text"
-                        [innerHtml]="item.entry.name | highlight: searchTerm">
+                    [innerHtml]="item.entry.name | highlight: searchTerm">
-                        {{ item?.entry.name }}</h4>
+                    {{ item?.entry.name }}
-                    <ng-template #elseBlock>
+                </h4>
-                        <h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" [innerHtml]="item.entry.name"></h4>
+                <ng-template #elseBlock>
-                    </ng-template>
+                    <h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" [innerHtml]="item.entry.name"></h4>
-                    <p mat-line class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
+                </ng-template>
+                <p mat-line class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
             </mat-list-item>
             <mat-list-item
                 id="search_no_result"

lib/content-services/search/components/search-control.component.scss

@@ -5,6 +5,10 @@
     $accent: map-get($theme, accent);
     $mat-menu-border-radius: 2px !default;
 
+    .adf-search-container {
+        overflow: hidden;
+    }
+
     .adf {
 
         &-search-fixed-text {

lib/content-services/search/components/search-control.component.ts

@@ -17,7 +17,7 @@
 
 import { AuthenticationService, ThumbnailService } from '@alfresco/adf-core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { MinimalNodeEntity, QueryBody } from 'alfresco-js-api';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
@@ -28,15 +28,17 @@ import { Subject } from 'rxjs/Subject';
     styleUrls: ['./search-control.component.scss'],
     animations: [
         trigger('transitionMessages', [
-            state('active', style({transform: 'translateX(0%)'})),
+            state('active', style({ transform: 'translateX(0%)' })),
-            state('inactive', style({transform: 'translateX(83%)', overflow: 'hidden'})),
+            state('inactive', style({ transform: 'translateX(83%)', overflow: 'hidden' })),
-            state('no-animation', style({transform: 'translateX(0%)', width: '100%'})),
+            state('no-animation', style({ transform: 'translateX(0%)', width: '100%' })),
             transition('inactive => active',
                 animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
             transition('active => inactive',
                 animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
         ])
-    ]
+    ],
+    encapsulation: ViewEncapsulation.None,
+    host: { class: 'adf-search-control' }
 })
 export class SearchControlComponent implements OnInit, OnDestroy {
 
@@ -77,7 +79,7 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     private focusSubject = new Subject<FocusEvent>();
 
     constructor(public authService: AuthenticationService,
-                private thumbnailService: ThumbnailService) {
+        private thumbnailService: ThumbnailService) {
 
         this.toggleSearch.asObservable().debounceTime(100).subscribe(() => {
             if (this.expandable) {
@@ -96,8 +98,15 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     }
 
     ngOnDestroy(): void {
-        this.focusSubject.unsubscribe();
+        if (this.focusSubject) {
-        this.toggleSearch.unsubscribe();
+            this.focusSubject.unsubscribe();
+            this.focusSubject = null;
+        }
+
+        if (this.toggleSearch) {
+            this.toggleSearch.unsubscribe();
+            this.toggleSearch = null;
+        }
     }
 
     isLoggedIn(): boolean {
@@ -118,55 +127,57 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     }
 
     getMimeTypeIcon(node: MinimalNodeEntity): string {
-      let mimeType;
+        let mimeType;
 
-      if (node.entry.content && node.entry.content.mimeType) {
+        if (node.entry.content && node.entry.content.mimeType) {
-          mimeType = node.entry.content.mimeType;
+            mimeType = node.entry.content.mimeType;
-      }
+        }
-      if (node.entry.isFolder) {
+        if (node.entry.isFolder) {
-          mimeType = 'folder';
+            mimeType = 'folder';
-      }
+        }
 
-      return this.thumbnailService.getMimeTypeIcon(mimeType);
+        return this.thumbnailService.getMimeTypeIcon(mimeType);
-  }
+    }
 
-  isSearchBarActive() {
+    isSearchBarActive() {
-      return this.subscriptAnimationState === 'active' && this.liveSearchEnabled;
+        return this.subscriptAnimationState === 'active' && this.liveSearchEnabled;
-  }
+    }
 
-  toggleSearchBar() {
+    toggleSearchBar() {
-    this.toggleSearch.next();
+        if (this.toggleSearch) {
-  }
+            this.toggleSearch.next();
+        }
+    }
 
-  elementClicked(item: any) {
+    elementClicked(item: any) {
-      if (item.entry) {
+        if (item.entry) {
-          this.optionClicked.next(item);
+            this.optionClicked.next(item);
-          this.toggleSearchBar();
+            this.toggleSearchBar();
-      }
+        }
-  }
+    }
 
-  onFocus($event): void {
+    onFocus($event): void {
-      this.focusSubject.next($event);
+        this.focusSubject.next($event);
-  }
+    }
 
-  onBlur($event): void {
+    onBlur($event): void {
-     this.focusSubject.next($event);
+        this.focusSubject.next($event);
-  }
+    }
 
-  activateToolbar($event) {
+    activateToolbar($event) {
-      if ( !this.isSearchBarActive() ) {
+        if (!this.isSearchBarActive()) {
-          this.toggleSearchBar();
+            this.toggleSearchBar();
-      }
+        }
-  }
+    }
 
-  private setupFocusEventHandlers() {
+    private setupFocusEventHandlers() {
-      let focusEvents: Observable<FocusEvent> = this.focusSubject.asObservable()
+        let focusEvents: Observable<FocusEvent> = this.focusSubject.asObservable()
-                                                    .distinctUntilChanged().debounceTime(50);
+            .distinctUntilChanged().debounceTime(50);
-      focusEvents.filter(($event: any) => {
+        focusEvents.filter(($event: any) => {
-          return this.isSearchBarActive() && ($event.type === 'blur' ||  $event.type === 'focusout');
+            return this.isSearchBarActive() && ($event.type === 'blur' || $event.type === 'focusout');
-      }).subscribe(() => {
+        }).subscribe(() => {
-        this.toggleSearchBar();
+            this.toggleSearchBar();
-      });
+        });
-  }
+    }
 
 }

lib/content-services/search/components/search-trigger.directive.ts

@@ -79,7 +79,10 @@ export class SearchTriggerDirective implements ControlValueAccessor, OnDestroy {
                 @Optional() @Inject(DOCUMENT) private document: any) { }
 
     ngOnDestroy() {
-        this.escapeEventStream.unsubscribe();
+        if (this.escapeEventStream) {
+            this.escapeEventStream.unsubscribe();
+            this.escapeEventStream = null;
+        }
         if ( this.closingActionsSubscription ) {
             this.closingActionsSubscription.unsubscribe();
         }