Demo shell hiding app title when search bar expanded

Refs #228

demo-shell-ng2/app/app.component.css

@@ -0,0 +1,5 @@
+@media only screen and (max-width: 640px) {
+    .mdl-layout__header.header-search-expanded .mdl-layout-title {
+        display: none;
+    }
+}

demo-shell-ng2/app/app.component.html

@@ -8,7 +8,7 @@
             <div class="mdl-layout-spacer"></div>
 
             <!-- Search bar -->
-            <search-bar></search-bar>
+            <search-bar (expand)="onToggleSearch($event)"></search-bar>
 
             <!-- Navigation. We hide it in small screens. -->
             <nav class="mdl-navigation mdl-layout--large-screen-only">

demo-shell-ng2/app/app.component.ts

@@ -82,6 +82,16 @@ export class AppComponent {
             );
     }
 
+    onToggleSearch(event) {
+        let expandedHeaderClass = 'header-search-expanded',
+            header = document.querySelector('header');
+        if (event.expanded) {
+            header.classList.add(expandedHeaderClass);
+        } else {
+            header.classList.remove(expandedHeaderClass);
+        }
+    }
+
     changeLanguage(lang: string) {
         this.translate.use(lang);
     }

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

@@ -1,5 +1,5 @@
 <alfresco-search-control *ngIf="isLoggedIn()" [searchTerm]="searchTerm" [autocomplete]="false"
-    (searchChange)="searchTermChange($event);"(preview)="onFileClicked($event)"></alfresco-search-control>
+    (searchChange)="searchTermChange($event);" (expand)="onExpandToggle($event);" (preview)="onFileClicked($event)"></alfresco-search-control>
 
 <alfresco-viewer [(showViewer)]="fileShowed" [urlFile]="urlFile" [fileName]="fileName" [mimeType]="mimeType" [overlayMode]="true">
     <div class="mdl-spinner mdl-js-spinner is-active"></div>

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
 import { Router } from '@angular/router-deprecated';
 import { ALFRESCO_SEARCH_DIRECTIVES } from 'ng2-alfresco-search';
 import { VIEWERCOMPONENT } from 'ng2-alfresco-viewer';
@@ -41,6 +41,9 @@ export class SearchBarComponent {
     mimeType: string;
     fileShowed: boolean = false;
 
+    @Output()
+    expand = new EventEmitter();
+
     constructor(
         public router: Router,
         public auth: AlfrescoAuthenticationService,
@@ -72,4 +75,8 @@ export class SearchBarComponent {
             this.fileShowed = true;
         }
     }
+
+    onExpandToggle(event) {
+        this.expand.emit(event);
+    }
 }