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

Merge pull request #290 from Alfresco/dev-wabson-228

Browse Source 
Search component responsiveness
This commit is contained in:
Mario Romano
2016-06-29 02:44:12 -07:00
committed by GitHub
parent 97d32fcc61 b3a5cdabe9
commit 3f7d5d8371
13 changed files with 103 additions and 23 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);
}
}

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

@@ -36,6 +36,17 @@ declare let __moduleName: string;
:host tbody tr {
cursor: pointer;
}
@media screen and (max-width: 600px) {
:host .col-display-name {
min-width: 100px;
}
:host .col-modified-at, :host .col-modified-by {
display: none;
}
:host div.search-results-container table {
width: 100%;
}
}
`],
directives: [ ALFRESCO_SEARCH_DIRECTIVES, VIEWERCOMPONENT ]
})