[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,7 +35,7 @@ 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', {
             q: value
         }]);
@@ -60,8 +43,7 @@ export class SearchBarComponent {
 
     onItemClicked(event: MinimalNodeEntity) {
         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) {
             this.router.navigate(['/files', event.entry.id]);
         }

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

@@ -1,14 +1,14 @@
-<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"
             id="adf-search-button"
             class="adf-search-button"
             (click)="toggleSearchBar($event)"
             (keyup.enter)="toggleSearchBar($event)">
             <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
                 [type]="inputType"
                 [autocomplete]="getAutoComplete()"
@@ -20,7 +20,8 @@
                 (ngModelChange)="inputChange($event)"
                 [searchAutocomplete]="auto"
                 (keyup.enter)="searchSubmit($event)">
-</mat-form-field>
+        </mat-form-field>
+    </div>
 </div>
 
 <adf-search #auto="searchAutocomplete"
@@ -45,7 +46,8 @@
                     *ngIf="highlight; else elseBlock"
                     class="adf-search-fixed-text"
                     [innerHtml]="item.entry.name | highlight: searchTerm">
-                        {{ item?.entry.name }}</h4>
+                    {{ item?.entry.name }}
+                </h4>
                 <ng-template #elseBlock>
                     <h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" [innerHtml]="item.entry.name"></h4>
                 </ng-template>

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 {
 
@@ -96,8 +98,15 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     }
 
     ngOnDestroy(): void {
+        if (this.focusSubject) {
             this.focusSubject.unsubscribe();
+            this.focusSubject = null;
+        }
+
+        if (this.toggleSearch) {
             this.toggleSearch.unsubscribe();
+            this.toggleSearch = null;
+        }
     }
 
     isLoggedIn(): boolean {
@@ -135,8 +144,10 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     }
 
     toggleSearchBar() {
+        if (this.toggleSearch) {
             this.toggleSearch.next();
         }
+    }
 
     elementClicked(item: any) {
         if (item.entry) {
@@ -154,7 +165,7 @@ export class SearchControlComponent implements OnInit, OnDestroy {
     }
 
     activateToolbar($event) {
-      if ( !this.isSearchBarActive() ) {
+        if (!this.isSearchBarActive()) {
             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() {
+        if (this.escapeEventStream) {
             this.escapeEventStream.unsubscribe();
+            this.escapeEventStream = null;
+        }
         if ( this.closingActionsSubscription ) {
             this.closingActionsSubscription.unsubscribe();
         }