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

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]