Skip to content

Commit 23c1e28

Browse files
ZeevKatzmlwilkerson
ZeevKatz
authored and
mlwilkerson
committed
Add FaLayersComponent and FaLayersTextComponent and refactoring (FortAwesome#14)
- Add layers component (FaLayersComponent) whose purpose to create one icon from multiple icon layers. - Add text component (FaTextComponent) whose purpose to enable text layer for layers component. - Util methods and shared models added to shared directory. - Refactoring - Add new examples - Update .gitignore
1 parent bf1574d commit 23c1e28

30 files changed

+636
-11309
lines changed

‎.gitignore‎

Lines changed: 47 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,47 @@
1-
build
2-
coverage
3-
dist
4-
debug.log
5-
node_modules
6-
out-tsc
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist/
5+
/dist/*
6+
/tmp
7+
/out-tsc
8+
/docs
9+
/docs/*
10+
11+
# dependencies
12+
/node_modules
13+
14+
# IDEs and editors
15+
/.idea
16+
.project
17+
.classpath
18+
.c9/
19+
*.launch
20+
.settings/
21+
*.sublime-workspace
22+
23+
# IDE - VSCode
24+
.vscode/*
25+
!.vscode/settings.json
26+
!.vscode/tasks.json
27+
!.vscode/launch.json
28+
!.vscode/extensions.json
29+
30+
# misc
31+
/.sass-cache
32+
/connect.lock
33+
/coverage
34+
/libpeerconnection.log
35+
npm-debug.log
36+
testem.log
37+
yarn-error.log
38+
yarn.lock
39+
package-lock.json
40+
/typings
41+
42+
# System Files
43+
.DS_Store
44+
Thumbs.db
45+
/*.iml
46+
/*.ipr
47+
/*.iws

‎examples/example.component.html‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,55 @@ <h3>Change Size</h3>
1818
<fa-icon [icon]="faAdjust" size="2x"></fa-icon>
1919
<h3>Animation</h3>
2020
<p>Click to toggle animation.</p>
21-
<fa-icon [icon]="faSync" [spin]="isSyncAnimated" (click)="isSyncAnimated=!isSyncAnimated"></fa-icon>
21+
<fa-icon [icon]="faSync" [spin]="isSyncAnimated" (click)="isSyncAnimated =! isSyncAnimated"></fa-icon>
2222
<p>Slide to turn up the magic.</p>
2323
<fa-icon [icon]="faMagic" transform="rotate-{{magicLevel}}"></fa-icon>
24-
<input type='range' [value]="magicLevel" (input)="magicLevel=$event.target.value"/>
24+
<input type='range' [value]="magicLevel" (input)="magicLevel = $event.target.value"/>
25+
26+
<h3>Layers</h3>
27+
<p>Custom icons created with multiple layers.</p>
28+
<div [style.font-size.em]="5">
29+
<fa-layers [ngClass]="['fa-fw']">
30+
<fa-icon [icon]="faCircle" [styles]="{color: 'Tomato'}"></fa-icon>
31+
<fa-icon [icon]="faTimes" [inverse]="true" transform="shrink-6"></fa-icon>
32+
</fa-layers>
33+
<fa-layers [ngClass]="['fa-fw']">
34+
<fa-icon [icon]="faMobile"></fa-icon>
35+
<fa-icon [icon]="faBatteryQuarter" transform="shrink-11 up-1.5" [styles]="{color: 'Tomato'}"></fa-icon>
36+
</fa-layers>
37+
<fa-layers [ngClass]="['fa-fw']">
38+
<fa-icon [icon]="faFighterJet"></fa-icon>
39+
<fa-icon [icon]="faCircle" [inverse]="true" transform="shrink-13.8 right-1.8"></fa-icon>
40+
<fa-icon [icon]="faEllipsisH" transform="shrink-13 up-6.8 right-2"></fa-icon>
41+
<fa-icon [icon]="faEllipsisH" transform="shrink-13 down-6.8 right-2"></fa-icon>
42+
</fa-layers>
43+
</div>
44+
<p>Using text as one of the layers.</p>
45+
<div [style.font-size.em]="4">
46+
<fa-layers [ngClass]="['fa-fw']">
47+
<fa-icon [icon]="faFlag"></fa-icon>
48+
<fa-layers-text [content]="'Fa'" transform="up-4" [styles]="{'font-size': '0.3em'}"></fa-layers-text>
49+
</fa-layers>
50+
</div>
51+
<p>Slide and increase the number.</p>
52+
<input type='range'
53+
[min]="1000"
54+
[max]="2000"
55+
[value]="notificationsCounter"
56+
(input)="notificationsCounter = $event.target.value"/>
57+
<div [style.font-size.em]="3">
58+
<fa-layers [ngClass]="['fa-fw']">
59+
<fa-icon [icon]="faBell"></fa-icon>
60+
<fa-layers-text [content]="notificationsCounter | number" [counter]="true"></fa-layers-text>
61+
</fa-layers>
62+
</div>
63+
64+
<h3>When using text layer outside layers component</h3>
65+
<p>Expect to see an error on the JavaScript console, and nothing shown between these bars:
66+
|<fa-layers-text [content]="notificationsCounter | number" [counter]="true"></fa-layers-text>|
67+
</p>
68+
2569
<h3>Intentionally Missing Icon</h3>
2670
<p>Expect to see an error on the JavaScript console, and nothing shown between these bars: |<fa-icon [icon]="faFluzzle"></fa-icon>|</p>
2771

72+

‎examples/example.component.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
font-family: Tahoma, Geneva, sans-serif;
3+
}

‎examples/example.component.ts‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,63 @@
11
import { Component } from '@angular/core';
2-
import { faUser,
2+
import {
3+
faUser,
4+
faSync,
5+
faBell,
6+
faTimes,
37
faMagic,
48
faAdjust,
59
faCoffee,
610
faCircle,
711
faSquare,
8-
faSync } from '@fortawesome/fontawesome-free-solid';
9-
import { faUser as regularUser } from '@fortawesome/fontawesome-free-regular';
12+
faMobile,
13+
faEllipsisH,
14+
faFighterJet,
15+
faBatteryQuarter
16+
} from '@fortawesome/fontawesome-free-solid';
17+
import { faUser as regularUser, faFlag } from '@fortawesome/fontawesome-free-regular';
1018
import { library } from '@fortawesome/fontawesome';
1119

1220
@Component({
1321
selector: 'example-root',
1422
templateUrl: './example.component.html',
15-
styleUrls: []
23+
styleUrls: ['./example.component.scss']
1624
})
1725
export class ExampleComponent {
18-
faCoffee = faCoffee;
26+
faBell = faBell;
27+
faSync = faSync;
28+
faFlag = faFlag;
29+
faTimes = faTimes;
1930
faMagic = faMagic;
2031
faAdjust = faAdjust;
2132
faCircle = faCircle;
33+
faCoffee = faCoffee;
2234
faSquare = faSquare;
23-
faSync = faSync;
35+
faMobile = faMobile;
2436
regularUser = regularUser;
37+
faEllipsisH = faEllipsisH;
38+
faFighterJet = faFighterJet;
39+
faBatteryQuarter = faBatteryQuarter;
40+
41+
notificationsCounter = 1000;
2542
isSyncAnimated = true;
2643
magicLevel = 0;
2744

2845
constructor() {
2946
// Notice that we're adding two different icon objects to the library.
3047
// Each of them within their respective icon npm packages are exported as faUser,
31-
// but we've renamed the second one in order to disambiguate the two objects within
32-
// this JavaScript module. Internally, these objects are different, even though they have the same iconName.
48+
// but we've renamed the second one in order to disambiguate the two objects within
49+
// this JavaScript module. Internally, these objects are different, even though they have the same iconName.
3350
// They have different prefixes: faUser has a prefix of fas, since it came from fontawesome-free-solid;
3451
// regularUser has a prefix of far, since it came from fontawesome-free-regular.
3552
// And of course, they also have different SVG content, resulting in different appearances.
3653
// So they really are totally different icons. However, they share the same iconName: user.
3754
// So in the template, the only way to reference the non-default (fas) icon is to either
3855
// use the array syntax that specifies [prefix, iconName], like this:
39-
//
56+
//
4057
// <fa-icon [icon]="['far','user']"></fa-icon>
4158
//
4259
// Or we could make the regularUser object available to the template and simply
43-
// reference it as an object, like this:
60+
// reference it as an object, like this:
4461
//
4562
// <fa-icon [icon]="regularUser"></fa-icon>
4663
//

0 commit comments

Comments
 (0)