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

[ADF-1980] fix search component styles (#2684)

Browse Source 
* fix search component styles

* remove obsolete styles and use routed viewer

* cleanup demo shell search bar

* fix app crashes
This commit is contained in:
Denys Vuika
2017-11-21 13:31:14 +00:00
committed by Eugenio Romano
parent 4f651ab868
commit 15950d27f2
8 changed files with 117 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
lib/content-services/search/components/search-control.component.ts
View File

@@ -17,7 +17,7 @@
import { AuthenticationService, ThumbnailService } from '@alfresco/adf-core';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { MinimalNodeEntity, QueryBody } from 'alfresco-js-api';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
@@ -28,15 +28,17 @@ import { Subject } from 'rxjs/Subject';
styleUrls: ['./search-control.component.scss'],
animations: [
trigger('transitionMessages', [
state('active', style({transform: 'translateX(0%)'})),
state('inactive', style({transform: 'translateX(83%)', overflow: 'hidden'})),
state('no-animation', style({transform: 'translateX(0%)', width: '100%'})),
state('active', style({ transform: 'translateX(0%)' })),
state('inactive', style({ transform: 'translateX(83%)', overflow: 'hidden' })),
state('no-animation', style({ transform: 'translateX(0%)', width: '100%' })),
transition('inactive => active',
animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)')),
transition('active => inactive',
animate('300ms cubic-bezier(0.55, 0, 0.55, 0.2)'))
])
]
],
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-search-control' }
})
export class SearchControlComponent implements OnInit, OnDestroy {
@@ -77,7 +79,7 @@ export class SearchControlComponent implements OnInit, OnDestroy {
private focusSubject = new Subject<FocusEvent>();
constructor(public authService: AuthenticationService,
private thumbnailService: ThumbnailService) {
private thumbnailService: ThumbnailService) {
this.toggleSearch.asObservable().debounceTime(100).subscribe(() => {
if (this.expandable) {
@@ -96,8 +98,15 @@ export class SearchControlComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
this.focusSubject.unsubscribe();
this.toggleSearch.unsubscribe();
if (this.focusSubject) {
this.focusSubject.unsubscribe();
this.focusSubject = null;
}
if (this.toggleSearch) {
this.toggleSearch.unsubscribe();
this.toggleSearch = null;
}
}
isLoggedIn(): boolean {
@@ -118,55 +127,57 @@ export class SearchControlComponent implements OnInit, OnDestroy {
}
getMimeTypeIcon(node: MinimalNodeEntity): string {
let mimeType;
let mimeType;
if (node.entry.content && node.entry.content.mimeType) {
mimeType = node.entry.content.mimeType;
}
if (node.entry.isFolder) {
mimeType = 'folder';
}
if (node.entry.content && node.entry.content.mimeType) {
mimeType = node.entry.content.mimeType;
}
if (node.entry.isFolder) {
mimeType = 'folder';
}
return this.thumbnailService.getMimeTypeIcon(mimeType);
}
return this.thumbnailService.getMimeTypeIcon(mimeType);
}
isSearchBarActive() {
return this.subscriptAnimationState === 'active' && this.liveSearchEnabled;
}
isSearchBarActive() {
return this.subscriptAnimationState === 'active' && this.liveSearchEnabled;
}
toggleSearchBar() {
this.toggleSearch.next();
}
toggleSearchBar() {
if (this.toggleSearch) {
this.toggleSearch.next();
}
}
elementClicked(item: any) {
if (item.entry) {
this.optionClicked.next(item);
this.toggleSearchBar();
}
}
elementClicked(item: any) {
if (item.entry) {
this.optionClicked.next(item);
this.toggleSearchBar();
}
}
onFocus($event): void {
this.focusSubject.next($event);
}
onFocus($event): void {
this.focusSubject.next($event);
}
onBlur($event): void {
this.focusSubject.next($event);
}
onBlur($event): void {
this.focusSubject.next($event);
}
activateToolbar($event) {
if ( !this.isSearchBarActive() ) {
this.toggleSearchBar();
}
}
activateToolbar($event) {
if (!this.isSearchBarActive()) {
this.toggleSearchBar();
}
}
private setupFocusEventHandlers() {
let focusEvents: Observable<FocusEvent> = this.focusSubject.asObservable()
.distinctUntilChanged().debounceTime(50);
focusEvents.filter(($event: any) => {
return this.isSearchBarActive() && ($event.type === 'blur' || $event.type === 'focusout');
}).subscribe(() => {
this.toggleSearchBar();
});
}
private setupFocusEventHandlers() {
let focusEvents: Observable<FocusEvent> = this.focusSubject.asObservable()
.distinctUntilChanged().debounceTime(50);
focusEvents.filter(($event: any) => {
return this.isSearchBarActive() && ($event.type === 'blur' || $event.type === 'focusout');
}).subscribe(() => {
this.toggleSearchBar();
});
}
}