inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +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 ]
})

2
ng2-components/ng2-alfresco-search/i18n/en.json
View File

@@ -8,7 +8,7 @@
"NONE": "No results found for {{searchTerm}}",
"ERROR": "An error occurred while running the search",
"COLUMNS": {
"NAME": "Name",
"NAME": "Display name",
"MODIFIED_BY": "Modified by",
"MODIFIED_AT": "Modified at"
}

11
ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.css
View File

@@ -1,6 +1,6 @@
:host {
position: absolute;
z-index: 1;
z-index: 5;
display: none;
color: #555;
margin: -21px 0px 0px 0px;
@@ -36,3 +36,12 @@
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (max-width: 400px) {
:host {
right: 0;
}
.truncate{
width: 200px;
}
}

12
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.css
View File

@@ -1,3 +1,13 @@
.search-field{
.search-field {
width: 267px;
}
@media only screen and (max-width: 400px) {
.search-field {
width: 200px;
}
}
@media only screen and (max-width: 320px) {
.search-field {
width: 160px;
}
}

2
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.html
View File

@@ -5,7 +5,7 @@
</label>
<div [class]="getTextFieldHolderClassName()">
<input class="mdl-textfield__input" [type]="inputType" [autocomplete]="getAutoComplete()" data-automation-id="search_input"
id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus($event)"
#searchInput id="searchControl" [ngFormControl]="searchControl" [(ngModel)]="searchTerm" (focus)="onFocus($event)"
(blur)="onBlur($event)">
<label class="mdl-textfield__label" for="searchControl">{{'SEARCH.CONTROL.LABEL' | translate}}</label>
</div>

19
ng2-components/ng2-alfresco-search/src/components/alfresco-search-control.component.ts
View File

@@ -16,7 +16,7 @@
*/
import { Control, Validators } from '@angular/common';
import { Component, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit, ViewChild } from '@angular/core';
import { AlfrescoPipeTranslate, AlfrescoTranslationService } from 'ng2-alfresco-core';
import { AlfrescoSearchAutocompleteComponent } from './alfresco-search-autocomplete.component';
@@ -53,8 +53,13 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
@Output()
preview = new EventEmitter();
@Output()
expand = new EventEmitter();
searchControl: Control;
@ViewChild('searchInput', {}) searchInput: ElementRef;
@Input()
autocompleteSearchTerm = '';
@@ -111,7 +116,7 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
this.searchChange.emit({
value: this.searchTerm
});
// this.router.navigate(['Search', term]);
this.searchInput.nativeElement.blur();
}
}
@@ -123,12 +128,22 @@ export class AlfrescoSearchControlComponent implements AfterViewInit {
onFocus(): void {
this.searchActive = true;
if (this.expandable) {
this.expand.emit({
expanded: true
});
}
}
onBlur(): void {
window.setTimeout(() => {
this.searchActive = false;
}, 200);
if (this.expandable && (this.searchControl.value === '' || this.searchControl.value === undefined)) {
this.expand.emit({
expanded: false
});
}
}
}

26
ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.html
View File

@@ -3,28 +3,28 @@
<table data-automation-id="search_result_table" *ngIf="results && results.length && searchTerm" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
<thead>
<tr>
<th>
<span class="mdl-data-table__cell--non-numeric"></span>
<th class="mdl-data-table__cell--non-numeric col-mimetype-icon"></th>
<th class="mdl-data-table__cell--non-numeric col-display-name">
{{'SEARCH.RESULTS.COLUMNS.NAME' | translate}}
</th>
<th>
<span class="mdl-data-table__cell--non-numeric">{{'SEARCH.RESULTS.COLUMNS.NAME' | translate}}</span>
<th class="mdl-data-table__cell--non-numeric col-modified-by">
{{'SEARCH.RESULTS.COLUMNS.MODIFIED_BY' | translate}}
</th>
<th>
<span class="mdl-data-table__cell--non-numeric">{{'SEARCH.RESULTS.COLUMNS.MODIFIED_BY' | translate}}</span>
</th>
<th>
<span class="mdl-data-table__cell--non-numeric">{{'SEARCH.RESULTS.COLUMNS.MODIFIED_AT' | translate}}</span>
<th class="mdl-data-table__cell--non-numeric col-modified-at">
{{'SEARCH.RESULTS.COLUMNS.MODIFIED_AT' | translate}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let result of results; let idx = index" (click)="onItemClick(result, $event)">
<td><img src="{{getMimeTypeIcon(result)}}" /></td>
<td attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>
<td attr.data-automation-id=file_{{result.entry.name}}_{{result.entry.modifiedByUser.displayName}}>
<td class="col-mimetype-icon"><img src="{{getMimeTypeIcon(result)}}" /></td>
<td class="mdl-data-table__cell--non-numeric col-display-name"
attr.data-automation-id=file_{{result.entry.name}} >{{result.entry.name}}</td>
<td class="mdl-data-table__cell--non-numeric col-modified-by"
attr.data-automation-id=file_{{result.entry.name}}_{{result.entry.modifiedByUser.displayName}}>
{{result.entry.modifiedByUser.displayName}}</td>
<td>{{result.entry.modifiedAt | date}}</td>
<td class="col-modified-at">{{result.entry.modifiedAt | date}}</td>
</tr>
</tbody>

15
ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts
View File

@@ -26,7 +26,20 @@ declare let __moduleName: string;
@Component({
moduleId: __moduleName,
selector: 'alfresco-search',
styles: [],
styles: [`
:host .mdl-data-table td {
max-width: 0;
white-space: nowrap;
}
:host .mdl-data-table td.col-mimetype-icon {
width: 24px;
}
:host .col-display-name {
min-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
}
`],
templateUrl: './alfresco-search.component.html',
providers: [AlfrescoSearchService],
pipes: [AlfrescoPipeTranslate]