Skip to content

Commit

Permalink
Merge pull request #53 from GSA/filter-drawer-updates
Browse files Browse the repository at this point in the history
Filter drawer updates
  • Loading branch information
colinalford-gsa authored Sep 13, 2018
2 parents 2a08bfd + 0a378d5 commit a461c31
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 52 deletions.
39 changes: 12 additions & 27 deletions src/ui-kit/experimental/filter-drawer/filter-drawer.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,26 +6,26 @@ import {
Input,
QueryList,
forwardRef,
ChangeDetectionStrategy,
AfterContentChecked,
} from '@angular/core';

@Component({
selector: 'sam-filter-drawer-chip',
template: `
<span class="sam label">
{{ label }}
<button class="sam button tertiary"
<button *ngIf="!disabled"
class="sam button tertiary"
[title]="'Remove ' + label"
(click)="click.next($event)">
(click)="remove.next($event)">
<span class="fa fa-close" aria-hidden="true"></span>
</button>
</span>
`
})
export class SamFilterDrawerChip {
@Input() public label: string;
@Output() public click = new EventEmitter<any>();
@Input() public disabled = false;
@Output() public remove = new EventEmitter<any>();
}

@Component({
Expand All @@ -36,7 +36,8 @@ export class SamFilterDrawerChip {
<li *ngFor="let value of values">
<sam-filter-drawer-chip
[label]="value"
(click)="removeFilter(value)"
[disabled]="disabled"
(remove)="removeFilter(value)"
></sam-filter-drawer-chip>
</li>
</ul>
Expand All @@ -45,9 +46,10 @@ export class SamFilterDrawerChip {
export class SamFilterDrawerItemComponent {
@Input() public label: string;
@Input() public values: any[];
@Input() public disabled = true;
@Output() public remove = new EventEmitter();

public removeFilter (value) {
public removeFilter (value): void {
const removed = {};
removed[this.label] = value;
this.remove.emit(removed);
Expand All @@ -57,35 +59,18 @@ export class SamFilterDrawerItemComponent {
@Component({
selector: 'sam-filter-drawer',
templateUrl: 'filter-drawer.template.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SamFilterDrawerComponent implements AfterContentChecked {
/**
* Emits event when remove item is clicked
*/
@Output() public remove = new EventEmitter<any>();
export class SamFilterDrawerComponent {
/**
* Event emitter for the 'clear' event
*/
@Output() public clear = new EventEmitter<any>();

@ContentChildren(forwardRef(() => SamFilterDrawerItemComponent))
public items: QueryList<SamFilterDrawerItemComponent>;

constructor () {}

public ngAfterContentChecked () {
this.setupPageServiceHandling();
}

private setupPageServiceHandling(){
if(this.items){
this.items.forEach(
(el: SamFilterDrawerItemComponent) => {
el.remove.subscribe(evt => this.remove.emit(evt));
}
);
}
public get showClear (): boolean {
return this.items.length > 0;
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<ng-content></ng-content>
<span class="options">
<sam-button-next
*ngIf="showClear"
action="secondary"
size="small"
(click)="clear.emit()">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ import {
faTimes,
} from '@fortawesome/free-solid-svg-icons';

import { MdSidenavContainer, MdSidenav } from '../sidenav/sidenav';
import {
MdSidenavContainer,
MdSidenav
} from '../sidenav/sidenav';
import { SamToolbarComponent } from '../toolbar.component';

@Component({
Expand All @@ -25,41 +28,49 @@ import { SamToolbarComponent } from '../toolbar.component';
styleUrls: ['./sam-page-next.scss'],
})
export class SamPageNextComponent extends MdSidenavContainer {
@Input() backButtonText = "";
@Output() backButton: any = new EventEmitter();
@Input() public backButtonText = '';
@Output() public backButtonClick = new EventEmitter<any>();

@HostListener('window:resize')
resize() { if (this.aside) { this._responsiveAside(); } }
public resize() {
if (this.aside) {
this._responsiveAside();
}
}

@ContentChild(MdSidenav) public aside: MdSidenav;

@ContentChild(SamToolbarComponent)
public toolbar: SamToolbarComponent;
public toolbar: SamToolbarComponent;

faLongArrowAltLeft = faLongArrowAltLeft;
faTimes = faTimes;
public backIcon = faLongArrowAltLeft;
public closeIcon = faTimes;

constructor(_element: ElementRef, _renderer: Renderer2, _ngZone: NgZone) {
super(null, _element, _renderer, _ngZone);
}

ngAfterContentInit () {
public ngAfterContentInit (): void {
super.ngAfterContentInit();

this._setupToolbar();
}

ngAfterViewInit (){
public ngAfterViewInit (): void {
this._setupAside();
}

public backBtnClick (): void {
this.backButtonClick.emit();
}

private _setupAside () {
private _setupAside (): void {
if (this.aside) {
this._responsiveAside();
}
}

private _setupToolbar () {
private _setupToolbar (): void {
if (this.toolbar) {
if (this.aside) {
// Attach sidenav to toolbar
Expand All @@ -68,20 +79,17 @@ export class SamPageNextComponent extends MdSidenavContainer {
}
}

private _responsiveAside () {
private _responsiveAside (): void {
this.aside.mode = !this._isSmallScreen() ? 'side' : 'over';
if(this.aside.opened && this._isSmallScreen()){

if (this.aside.opened && this._isSmallScreen()) {
this.aside.opened = false;
}else if(!this.aside.opened && !this._isSmallScreen()){
} else if (!this.aside.opened && !this._isSmallScreen()) {
this.aside.opened = true;
}
}

private _isSmallScreen () {
private _isSmallScreen (): boolean {
return window.innerWidth <= 600 ? true : false;
}

backBtnClick(){
this.backButton.emit();
}
}
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<div class="sam-page-next-header">
<div *ngIf="backButtonText" class="backBtn">
<button (click)="backBtnClick()"><sam-icon [icon]="faLongArrowAltLeft"></sam-icon> {{backButtonText}}</button>
<button (click)="backBtnClick()">
<sam-icon [icon]="backIcon"></sam-icon>
{{ backButtonText }}
</button>
</div>
<ng-content select="sam-page-title">
</ng-content>
<ng-content select="sam-page-title"></ng-content>
<div *ngIf="backButtonText" class="backBtn-right">
<button (click)="backBtnClick()"><sam-icon [icon]="faTimes" size="2x"></sam-icon><span class="sr-only">{{backButtonText}}</span></button>
<button (click)="backBtnClick()"
[attr.title]="backButtonText">
<sam-icon [icon]="closeIcon" size="2x"></sam-icon>
</button>
</div>
</div>

Expand All @@ -16,8 +21,8 @@

<div class="mat-sidenav-backdrop"
(click)="_onBackdropClicked()"
[class.mat-sidenav-shown]="_isShowingBackdrop()"
></div>
[class.mat-sidenav-shown]="_isShowingBackdrop()">
</div>

<ng-content select="sam-aside"></ng-content>

Expand Down

0 comments on commit a461c31

Please sign in to comment.