[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()
-    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();
+    constructor(public router: Router) {
     }
 
     /**
@@ -52,19 +35,18 @@ export class SearchBarComponent {
      * @param event Parameters relating to the search
      */
     onSearchSubmit(event: KeyboardEvent) {
-      let value = (event.target as HTMLInputElement).value;
-      this.router.navigate(['/search', {
-          q: value
-      }]);
-  }
+        const value = (event.target as HTMLInputElement).value;
+        this.router.navigate(['/search', {
+            q: value
+        }]);
+    }
 
-  onItemClicked(event: MinimalNodeEntity) {
-      if (event.entry.isFile) {
-          this.fileNodeId = event.entry.id;
-          this.fileShowed = true;
-      } else if (event.entry.isFolder) {
-          this.router.navigate(['/files', event.entry.id]);
-      }
-  }
+    onItemClicked(event: MinimalNodeEntity) {
+        if (event.entry.isFile) {
+            this.router.navigate(['/files', event.entry.id, 'view']);
+        } else if (event.entry.isFolder) {
+            this.router.navigate(['/files', event.entry.id]);
+        }
+    }
 
 }