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

2
demo-shell/src/app/components/app-layout/app-layout.component.html
View File

@@ -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>

11
demo-shell/src/app/components/app-layout/app-layout.component.scss
View File

@@ -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;
}
}
}

4
demo-shell/src/app/components/search/search-bar.component.html
View File

@@ -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>

26
demo-shell/src/app/components/search/search-bar.component.ts
View File

@@ -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,7 +35,7 @@ export class SearchBarComponent {
* @param event Parameters relating to the search
*/
onSearchSubmit(event: KeyboardEvent) {
let value = (event.target as HTMLInputElement).value;
const value = (event.target as HTMLInputElement).value;
this.router.navigate(['/search', {
q: value
}]);
@@ -60,8 +43,7 @@ export class SearchBarComponent {
onItemClicked(event: MinimalNodeEntity) {
if (event.entry.isFile) {
this.fileNodeId = event.entry.id;
this.fileShowed = true;
this.router.navigate(['/files', event.entry.id, 'view']);
} else if (event.entry.isFolder) {
this.router.navigate(['/files', event.entry.id]);
}

16
lib/content-services/search/components/search-control.component.html
View File

@@ -1,14 +1,14 @@
<div class="adf-search-container" *ngIf="isLoggedIn()"
[@transitionMessages]="subscriptAnimationState">
<a mat-icon-button
<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">
</a>
<mat-form-field class="adf-input-form-field-divider">
<input matInput
[type]="inputType"
[autocomplete]="getAutoComplete()"
@@ -20,7 +20,8 @@
(ngModelChange)="inputChange($event)"
[searchAutocomplete]="auto"
(keyup.enter)="searchSubmit($event)">
</mat-form-field>
</mat-form-field>
</div>
</div>
<adf-search #auto="searchAutocomplete"
@@ -45,7 +46,8 @@
*ngIf="highlight; else elseBlock"
class="adf-search-fixed-text"
[innerHtml]="item.entry.name | highlight: searchTerm">
{{ item?.entry.name }}</h4>
{{ 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>

4
lib/content-services/search/components/search-control.component.scss
View File

@@ -5,6 +5,10 @@
$accent: map-get($theme, accent);
$mat-menu-border-radius: 2px !default;
.adf-search-container {
overflow: hidden;
}
.adf {
&-search-fixed-text {

23
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 {
@@ -96,8 +98,15 @@ export class SearchControlComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
if (this.focusSubject) {
this.focusSubject.unsubscribe();
this.focusSubject = null;
}
if (this.toggleSearch) {
this.toggleSearch.unsubscribe();
this.toggleSearch = null;
}
}
isLoggedIn(): boolean {
@@ -135,8 +144,10 @@ export class SearchControlComponent implements OnInit, OnDestroy {
}
toggleSearchBar() {
if (this.toggleSearch) {
this.toggleSearch.next();
}
}
elementClicked(item: any) {
if (item.entry) {
@@ -154,7 +165,7 @@ export class SearchControlComponent implements OnInit, OnDestroy {
}
activateToolbar($event) {
if ( !this.isSearchBarActive() ) {
if (!this.isSearchBarActive()) {
this.toggleSearchBar();
}
}

3
lib/content-services/search/components/search-trigger.directive.ts
View File

@@ -79,7 +79,10 @@ export class SearchTriggerDirective implements ControlValueAccessor, OnDestroy {
@Optional() @Inject(DOCUMENT) private document: any) { }
ngOnDestroy() {
if (this.escapeEventStream) {
this.escapeEventStream.unsubscribe();
this.escapeEventStream = null;
}
if ( this.closingActionsSubscription ) {
this.closingActionsSubscription.unsubscribe();
}