Skip to content

Commit 546dbfd

Browse files
devoto13devoto13
authored
Merge pull request FortAwesome#80 from paustint/feature-79
Add size and fixedWidth attribute to fa-layers FortAwesome#79
2 parents 7a95dc3 + be9e26c commit 546dbfd

File tree

5 files changed

+116
-16
lines changed

5 files changed

+116
-16
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
*.sublime-workspace
2222

2323
# IDE - VSCode
24+
.vscode/
2425
.vscode/*
2526
!.vscode/settings.json
2627
!.vscode/tasks.json

‎src/app/example.component.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,25 @@ <h3>Animation</h3>
2525

2626
<h3>Layers</h3>
2727
<p>Custom icons created with multiple layers.</p>
28-
<div class="fa-4x">
29-
<fa-layers [ngClass]="['fa-fw']">
28+
<div>
29+
<fa-layers [fixedWidth]="true" size="4x">
3030
<fa-icon [icon]="faCircle" [styles]="{color: 'Tomato'}"></fa-icon>
3131
<fa-icon [icon]="faTimes" [inverse]="true" transform="shrink-6"></fa-icon>
3232
</fa-layers>
33-
<fa-layers [ngClass]="['fa-fw']">
33+
<fa-layers [fixedWidth]="true" size="4x">
3434
<fa-icon [icon]="faMobile"></fa-icon>
3535
<fa-icon [icon]="faBatteryQuarter" transform="shrink-11 up-1.5" [styles]="{color: 'Tomato'}"></fa-icon>
3636
</fa-layers>
37-
<fa-layers [ngClass]="['fa-fw']">
37+
<fa-layers [fixedWidth]="true" size="4x">
3838
<fa-icon [icon]="faFighterJet"></fa-icon>
3939
<fa-icon [icon]="faCircle" [inverse]="true" transform="shrink-13.8 right-1.8"></fa-icon>
4040
<fa-icon [icon]="faEllipsisH" transform="shrink-13 up-6.8 right-2"></fa-icon>
4141
<fa-icon [icon]="faEllipsisH" transform="shrink-13 down-6.8 right-2"></fa-icon>
4242
</fa-layers>
4343
</div>
4444
<p>Using text as one of the layers.</p>
45-
<div class="fa-4x">
46-
<fa-layers [ngClass]="['fa-fw']">
45+
<div>
46+
<fa-layers [fixedWidth]="true" size="4x">
4747
<fa-icon [icon]="faFlag"></fa-icon>
4848
<fa-layers-text title="Fort Awesome" [content]="'Fa'" transform="up-4" [styles]="{'font-size': '0.3em'}"></fa-layers-text>
4949
</fa-layers>
@@ -54,8 +54,8 @@ <h3>Layers</h3>
5454
[max]="2000"
5555
[value]="notificationsCounter"
5656
(input)="notificationsCounter = $event.target.value"/>
57-
<div class="fa-3x">
58-
<fa-layers [ngClass]="['fa-fw']">
57+
<div>
58+
<fa-layers [fixedWidth]="true" size="3x">
5959
<fa-icon [icon]="faBell"></fa-icon>
6060
<fa-layers-counter [content]="notificationsCounter | number" title="Unread Messages"></fa-layers-counter>
6161
</fa-layers>

‎src/lib/layers/layers.component.spec.ts‎

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Component, Type } from '@angular/core';
1+
import { Component, Type, ElementRef } from '@angular/core';
22
import { ComponentFixture, TestBed } from '@angular/core/testing';
33
import { faUser, faMobile } from '@fortawesome/free-solid-svg-icons';
4-
4+
import { By } from '@angular/platform-browser';
55
import { FaIconComponent } from '../icon/icon.component';
66
import { FaLayersComponent } from './layers.component';
77
import { FaLayersTextComponent } from './layers-text.component';
@@ -17,6 +17,10 @@ function svgLayers(fixture: ComponentFixture<any>): SVGElement {
1717
return fixture.debugElement.nativeElement.querySelector('svg');
1818
}
1919

20+
function queryByCss(fixture: ComponentFixture<any>, className: string): ElementRef {
21+
return fixture.debugElement.query(By.css(className));
22+
}
23+
2024
describe('FaLayersCompoennt', () => {
2125
it('should render layers icon', () => {
2226
@Component({
@@ -37,4 +41,65 @@ describe('FaLayersCompoennt', () => {
3741
fixture.detectChanges();
3842
expect(svgLayers(fixture)).toBeTruthy();
3943
});
44+
45+
it('should include size class', () => {
46+
@Component({
47+
selector: 'fa-host',
48+
template: `
49+
<fa-layers size="2x">
50+
<fa-icon [icon]="faUser"></fa-icon>
51+
<fa-icon [icon]="faMobile"></fa-icon>
52+
<fa-layers-text [content]="'User with mobile'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
53+
</fa-layers>`
54+
})
55+
class HostComponent {
56+
faUser = faUser;
57+
faMobile = faMobile;
58+
}
59+
60+
const fixture = initTest(HostComponent);
61+
fixture.detectChanges();
62+
expect(queryByCss(fixture, '.fa-2x')).toBeTruthy();
63+
});
64+
65+
it('should include fixed width', () => {
66+
@Component({
67+
selector: 'fa-host',
68+
template: `
69+
<fa-layers [fixedWidth]="true">
70+
<fa-icon [icon]="faUser"></fa-icon>
71+
<fa-icon [icon]="faMobile"></fa-icon>
72+
<fa-layers-text [content]="'User with mobile'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
73+
</fa-layers>`
74+
})
75+
class HostComponent {
76+
faUser = faUser;
77+
faMobile = faMobile;
78+
}
79+
80+
const fixture = initTest(HostComponent);
81+
fixture.detectChanges();
82+
expect(queryByCss(fixture, '.fa-fw')).toBeTruthy();
83+
});
84+
85+
86+
it('should not include fixed width', () => {
87+
@Component({
88+
selector: 'fa-host',
89+
template: `
90+
<fa-layers [fixedWidth]="false">
91+
<fa-icon [icon]="faUser"></fa-icon>
92+
<fa-icon [icon]="faMobile"></fa-icon>
93+
<fa-layers-text [content]="'User with mobile'" [styles]="{ color: 'Tomato' }"></fa-layers-text>
94+
</fa-layers>`
95+
})
96+
class HostComponent {
97+
faUser = faUser;
98+
faMobile = faMobile;
99+
}
100+
const fixture = initTest(HostComponent);
101+
fixture.detectChanges();
102+
expect(queryByCss(fixture, '.fa-fw')).toBeFalsy();
103+
});
40104
});
105+

‎src/lib/layers/layers.component.ts‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,38 @@
1-
import { Component } from '@angular/core';
1+
import { Component, Input, SimpleChanges, OnChanges, OnInit, HostBinding } from '@angular/core';
2+
import { SizeProp } from '@fortawesome/fontawesome-svg-core';
3+
import { faLayerClassList } from '../shared/utils/classlist.util';
4+
import { FaProps } from '../shared/models/props.model';
25

36
/**
47
* Fontawesome layers.
58
*/
69
@Component({
710
selector: 'fa-layers',
811
template: `<ng-content select="fa-icon, fa-layers-text, fa-layers-counter"></ng-content>`,
9-
host: {
10-
class: 'fa-layers'
11-
}
1212
})
13-
export class FaLayersComponent {
14-
}
13+
export class FaLayersComponent implements OnInit, OnChanges {
14+
@Input() size?: SizeProp;
15+
@Input() fixedWidth?: boolean;
16+
17+
@HostBinding('class')
18+
hostClass = 'fa-layers';
19+
20+
ngOnInit() {
21+
this.updateClasses();
22+
}
1523

24+
ngOnChanges(changes: SimpleChanges) {
25+
if (changes) {
26+
this.updateClasses();
27+
}
28+
}
29+
30+
updateClasses() {
31+
const classOpts: FaProps = {
32+
size: this.size || null,
33+
fixedWidth: this.fixedWidth,
34+
};
35+
this.hostClass = `fa-layers ${faLayerClassList(classOpts).join(' ')}`;
36+
}
37+
38+
}

‎src/lib/shared/utils/classlist.util.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,14 @@ export const faClassList = (props: FaProps): string[] => {
2424
.map(key => (classes[key] ? key : null))
2525
.filter(key => key);
2626
};
27+
28+
export const faLayerClassList = (props: FaProps): string[] => {
29+
const classes = {
30+
'fa-fw': props.fixedWidth,
31+
[`fa-${props.size}`]: props.size !== null,
32+
};
33+
34+
return Object.keys(classes)
35+
.map(key => (classes[key] ? key : null))
36+
.filter(key => key);
37+
};

0 commit comments

Comments
 (0)