mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1980] fix search component styles (#2684)
* fix search component styles * remove obsolete styles and use routed viewer * cleanup demo shell search bar * fix app crashes
This commit is contained in:
committed by
Eugenio Romano
parent
4f651ab868
commit
15950d27f2
@@ -23,7 +23,7 @@
|
||||
|
||||
<div class="adf-app-layout-menu-spacer"></div>
|
||||
|
||||
<adf-search-bar class="adf-search-bar-overflow" fxFlex="0 1 auto"></adf-search-bar>
|
||||
<adf-search-bar fxFlex="0 1 auto"></adf-search-bar>
|
||||
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.HOME' | translate }}</a>
|
||||
<a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.CONTENT_SERVICES' | translate }}</a>
|
||||
|
@@ -20,10 +20,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-bar-overflow {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-user-profile {
|
||||
margin-right: 10px;
|
||||
}
|
||||
@@ -58,16 +54,9 @@
|
||||
.adf-userinfo-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-search-bar-overflow {
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and ($mat-xsmall) {
|
||||
.adf-search-bar-overflow {
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@@ -2,7 +2,3 @@
|
||||
(optionClicked)="onItemClicked($event)"
|
||||
(submit)="onSearchSubmit($event)">
|
||||
</adf-search-control>
|
||||
|
||||
<adf-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed" [fileNodeId]="fileNodeId" [overlayMode]="true">
|
||||
<mat-spinner></mat-spinner>
|
||||
</adf-viewer>
|
||||
|
@@ -15,10 +15,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, EventEmitter, Output, Input } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { MinimalNodeEntity } from 'alfresco-js-api';
|
||||
import { AuthenticationService } from '@alfresco/adf-core';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-search-bar',
|
||||
@@ -27,23 +26,7 @@ import { AuthenticationService } from '@alfresco/adf-core';
|
||||
})
|
||||
export class SearchBarComponent {
|
||||
|
||||
@Input()
|
||||
expandable: boolean = true;
|
||||
|
||||
@Output()
|
||||
expand = new EventEmitter();
|
||||
|
||||
fileNodeId: string;
|
||||
fileShowed: boolean = false;
|
||||
searchTerm: string = '';
|
||||
subscriptAnimationState: string;
|
||||
|
||||
constructor(public router: Router,
|
||||
public authService: AuthenticationService) {
|
||||
}
|
||||
|
||||
isLoggedIn(): boolean {
|
||||
return this.authService.isLoggedIn();
|
||||
constructor(public router: Router) {
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -52,19 +35,18 @@ export class SearchBarComponent {
|
||||
* @param event Parameters relating to the search
|
||||
*/
|
||||
onSearchSubmit(event: KeyboardEvent) {
|
||||
let value = (event.target as HTMLInputElement).value;
|
||||
this.router.navigate(['/search', {
|
||||
q: value
|
||||
}]);
|
||||
}
|
||||
const value = (event.target as HTMLInputElement).value;
|
||||
this.router.navigate(['/search', {
|
||||
q: value
|
||||
}]);
|
||||
}
|
||||
|
||||
onItemClicked(event: MinimalNodeEntity) {
|
||||
if (event.entry.isFile) {
|
||||
this.fileNodeId = event.entry.id;
|
||||
this.fileShowed = true;
|
||||
} else if (event.entry.isFolder) {
|
||||
this.router.navigate(['/files', event.entry.id]);
|
||||
}
|
||||
}
|
||||
onItemClicked(event: MinimalNodeEntity) {
|
||||
if (event.entry.isFile) {
|
||||
this.router.navigate(['/files', event.entry.id, 'view']);
|
||||
} else if (event.entry.isFolder) {
|
||||
this.router.navigate(['/files', event.entry.id]);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@@ -1,26 +1,27 @@
|
||||
<div class="adf-search-container" *ngIf="isLoggedIn()"
|
||||
[@transitionMessages]="subscriptAnimationState">
|
||||
<a mat-icon-button
|
||||
*ngIf="expandable"
|
||||
id="adf-search-button"
|
||||
class="adf-search-button"
|
||||
(click)="toggleSearchBar($event)"
|
||||
(keyup.enter)="toggleSearchBar($event)">
|
||||
<mat-icon aria-label="search button">search</mat-icon>
|
||||
</a>
|
||||
<mat-form-field class="adf-input-form-field-divider">
|
||||
<input matInput
|
||||
[type]="inputType"
|
||||
[autocomplete]="getAutoComplete()"
|
||||
id="adf-control-input"
|
||||
[(ngModel)]="searchTerm"
|
||||
(focus)="activateToolbar()"
|
||||
(blur)="onBlur($event)"
|
||||
(keyup.escape)="toggleSearchBar()"
|
||||
(ngModelChange)="inputChange($event)"
|
||||
[searchAutocomplete]="auto"
|
||||
(keyup.enter)="searchSubmit($event)">
|
||||
</mat-form-field>
|
||||
<div class="adf-search-container">
|
||||
<div *ngIf="isLoggedIn()" [@transitionMessages]="subscriptAnimationState">
|
||||
<a mat-icon-button
|
||||
*ngIf="expandable"
|
||||
id="adf-search-button"
|
||||
class="adf-search-button"
|
||||
(click)="toggleSearchBar($event)"
|
||||
(keyup.enter)="toggleSearchBar($event)">
|
||||
<mat-icon aria-label="search button">search</mat-icon>
|
||||
</a>
|
||||
<mat-form-field class="adf-input-form-field-divider">
|
||||
<input matInput
|
||||
[type]="inputType"
|
||||
[autocomplete]="getAutoComplete()"
|
||||
id="adf-control-input"
|
||||
[(ngModel)]="searchTerm"
|
||||
(focus)="activateToolbar()"
|
||||
(blur)="onBlur($event)"
|
||||
(keyup.escape)="toggleSearchBar()"
|
||||
(ngModelChange)="inputChange($event)"
|
||||
[searchAutocomplete]="auto"
|
||||
(keyup.enter)="searchSubmit($event)">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<adf-search #auto="searchAutocomplete"
|
||||
@@ -41,15 +42,16 @@
|
||||
<mat-icon mat-list-icon>
|
||||
<img [src]="getMimeTypeIcon(item)" />
|
||||
</mat-icon>
|
||||
<h4 mat-line id="result_name_{{idx}}"
|
||||
*ngIf="highlight; else elseBlock"
|
||||
class="adf-search-fixed-text"
|
||||
[innerHtml]="item.entry.name | highlight: searchTerm">
|
||||
{{ item?.entry.name }}</h4>
|
||||
<ng-template #elseBlock>
|
||||
<h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" [innerHtml]="item.entry.name"></h4>
|
||||
</ng-template>
|
||||
<p mat-line class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
|
||||
<h4 mat-line id="result_name_{{idx}}"
|
||||
*ngIf="highlight; else elseBlock"
|
||||
class="adf-search-fixed-text"
|
||||
[innerHtml]="item.entry.name | highlight: searchTerm">
|
||||
{{ item?.entry.name }}
|
||||
</h4>
|
||||
<ng-template #elseBlock>
|
||||
<h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" [innerHtml]="item.entry.name"></h4>
|
||||
</ng-template>
|
||||
<p mat-line class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
|
||||
</mat-list-item>
|
||||
<mat-list-item
|
||||
id="search_no_result"
|
||||
|
@@ -5,6 +5,10 @@
|
||||
$accent: map-get($theme, accent);
|
||||
$mat-menu-border-radius: 2px !default;
|
||||
|
||||
.adf-search-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-search-fixed-text {
|
||||
|
@@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
@@ -79,7 +79,10 @@ export class SearchTriggerDirective implements ControlValueAccessor, OnDestroy {
|
||||
@Optional() @Inject(DOCUMENT) private document: any) { }
|
||||
|
||||
ngOnDestroy() {
|
||||
this.escapeEventStream.unsubscribe();
|
||||
if (this.escapeEventStream) {
|
||||
this.escapeEventStream.unsubscribe();
|
||||
this.escapeEventStream = null;
|
||||
}
|
||||
if ( this.closingActionsSubscription ) {
|
||||
this.closingActionsSubscription.unsubscribe();
|
||||
}
|
||||
|
Reference in New Issue
Block a user