inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Demo shell hiding app title when search bar expanded

Browse Source 
Refs #228
This commit is contained in:
Will Abson
2016-06-27 10:34:47 +01:00
parent 8c07c4a7c2
commit 4f171c8fd4
5 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
demo-shell-ng2/app/app.component.css
View File

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

2
demo-shell-ng2/app/app.component.html
View File

@@ -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">

10
demo-shell-ng2/app/app.component.ts
View File

@@ -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);
}

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

@@ -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>

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

@@ -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);
}
}