Skip to content

Commit 9859e2b

Browse files
Replace font-awesome with pre-rendered png images
1 parent a865a59 commit 9859e2b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+80
-46
lines changed

images/128/check.png

977 Bytes

images/128/chevron-down.png

860 Bytes

images/128/circle-o.png

2.07 KB

images/128/close.png

1.13 KB

images/128/share.png

1.58 KB

images/128/spinner.png

2.03 KB

images/128/thumb-tack.png

1.24 KB

images/128/toggle-off.png

2.34 KB

images/128/toggle-on.png

1.73 KB

images/128/tooltip-right.png

Lines changed: 1 addition & 0 deletions

images/16/check.png

189 Bytes

images/16/chevron-down.png

197 Bytes

images/16/circle-o.png

265 Bytes

images/16/close.png

218 Bytes

images/16/share.png

273 Bytes

images/16/spinner.png

308 Bytes

images/16/thumb-tack.png

247 Bytes

images/16/toggle-off.png

300 Bytes

images/16/toggle-on.png

240 Bytes

images/16/tooltip-right.png

Lines changed: 1 addition & 0 deletions

images/32/check.png

288 Bytes

images/32/chevron-down.png

263 Bytes

images/32/circle-o.png

523 Bytes

images/32/close.png

300 Bytes

images/32/share.png

392 Bytes

images/32/spinner.png

443 Bytes

images/32/thumb-tack.png

314 Bytes

images/32/toggle-off.png

434 Bytes

images/32/toggle-on.png

359 Bytes

images/32/tooltip-right.png

Lines changed: 1 addition & 0 deletions

images/64/check.png

500 Bytes

images/64/chevron-down.png

408 Bytes

images/64/circle-o.png

923 Bytes

images/64/close.png

549 Bytes

images/64/share.png

735 Bytes

images/64/spinner.png

946 Bytes

images/64/thumb-tack.png

564 Bytes

images/64/toggle-off.png

1008 Bytes

images/64/toggle-on.png

804 Bytes

images/64/tooltip-right.png

Lines changed: 1 addition & 0 deletions

images/w/128/check.png

1009 Bytes

images/w/128/chevron-down.png

857 Bytes

images/w/128/circle-o.png

2.07 KB

images/w/128/close.png

1.13 KB

images/w/128/share.png

1.57 KB

images/w/128/spinner.png

2.02 KB

images/w/128/thumb-tack.png

1.32 KB

images/w/128/toggle-off.png

2.35 KB

images/w/128/toggle-on.png

1.8 KB

images/w/128/tooltip-right.png

Lines changed: 1 addition & 0 deletions

images/w/16/check.png

190 Bytes

images/w/16/chevron-down.png

204 Bytes

images/w/16/circle-o.png

279 Bytes

images/w/16/close.png

223 Bytes

images/w/16/share.png

284 Bytes

images/w/16/spinner.png

339 Bytes

images/w/16/thumb-tack.png

265 Bytes

images/w/16/toggle-off.png

325 Bytes

images/w/16/toggle-on.png

263 Bytes

images/w/16/tooltip-right.png

Lines changed: 1 addition & 0 deletions

images/w/32/check.png

283 Bytes

images/w/32/chevron-down.png

272 Bytes

images/w/32/circle-o.png

540 Bytes

images/w/32/close.png

301 Bytes

images/w/32/share.png

419 Bytes

images/w/32/spinner.png

464 Bytes

images/w/32/thumb-tack.png

342 Bytes

images/w/32/toggle-off.png

469 Bytes

images/w/32/toggle-on.png

408 Bytes

images/w/32/tooltip-right.png

Lines changed: 1 addition & 0 deletions

images/w/64/check.png

546 Bytes

images/w/64/chevron-down.png

440 Bytes

images/w/64/circle-o.png

992 Bytes

images/w/64/close.png

574 Bytes

images/w/64/share.png

833 Bytes

images/w/64/spinner.png

1012 Bytes

images/w/64/thumb-tack.png

634 Bytes

images/w/64/toggle-off.png

1.04 KB

images/w/64/toggle-on.png

894 Bytes

images/w/64/tooltip-right.png

Lines changed: 1 addition & 0 deletions

package.json

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ui-router-visualizer",
33
"description": "UI-Router State Visualizer and Transition Visualizer",
4-
"version": "2.0.1",
4+
"version": "2.0.2",
55
"scripts": {
66
"start": "webpack-dev-server --content-base example",
77
"clean": "rm -rf ./build ./release",
@@ -33,7 +33,7 @@
3333
"license": "MIT",
3434
"dependencies": {
3535
"file-loader": "^0.9.0",
36-
"font-awesome": "^4.6.3",
36+
"font-awesome-svg-png": "^1.1.5",
3737
"react": "^15",
3838
"react-dom": "^15",
3939
"url-loader": "^0.5.7"
@@ -43,13 +43,15 @@
4343
},
4444
"devDependencies": {
4545
"angular": "^1.4.9",
46-
"ui-router-core": ">=1.0.0-beta.1",
46+
"awesome-typescript-loader": "^2.0.1",
4747
"css-loader": "^0.23.1",
4848
"d3": "^3.5.14",
4949
"es6-shim": "^0.35.0",
50-
"awesome-typescript-loader": "^2.0.1",
51-
"style-loader": "^0.13.0",
50+
"file-loader": "^0.9.0",
51+
"style-loader": "^0.13.1",
5252
"typescript": "^1.8.10",
53+
"ui-router-core": ">=1.0.0-beta.1",
54+
"url-loader": "^0.5.7",
5355
"webpack": "^1.12.12",
5456
"webpack-dev-server": "^1.14.1"
5557
},

src/state/stateVisualizer.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ import {toggleClass, addClass} from "../util/toggleClass";
88
import {draggable} from "../util/draggable";
99
import {StateTree} from "./stateTree";
1010

11+
declare function require(string): string;
12+
let imgChevron = require('../../images/16/chevron-down.png');
13+
1114
export interface IProps {
1215
router;
1316
width?: number;
@@ -127,7 +130,7 @@ export class StateVisualizer extends React.Component<IProps, IState> {
127130
<div className="uirStateVisControls">
128131
<div> Current State: <StateSelector router={this.props.router} /></div>
129132
<button onClick={this.minimize}>
130-
<i className="fa fa-chevron-down" style={{ cursor: 'pointer' }} />
133+
<img src={imgChevron} style={{ cursor: 'pointer' }} />
131134
</button>
132135
</div>
133136

src/transition/breadcrumbArrow.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ export class BreadcrumbArrow extends React.Component<IProps, IState> {
1616

1717
iconClass() {
1818
let iconClasses = {
19-
running: 'fa fa-spin fa-spinner',
20-
success: 'fa fa-check',
21-
redirected: 'fa fa-share',
22-
ignored: 'fa fa-circle-o',
23-
error: 'fa fa-close'
19+
running: 'uir-icon uir-spin uir-iconw-spinner',
20+
success: 'uir-icon uir-iconw-check',
21+
redirected: 'uir-icon uir-iconw-share',
22+
ignored: 'uir-icon uir-iconw-circle-o',
23+
error: 'uir-icon uir-iconw-close'
2424
};
2525

2626
return iconClasses[this.props.status];

src/transition/popoverHeading.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,19 @@ export interface IState {
1414

1515
export class PopoverHeading extends React.Component<IProps, IState> {
1616
render() {
17-
const tackClass = () => "fa fa-thumb-tack " + (this.props.pinned ? "" : "fa-rotate-45 text-muted");
18-
const expandClass = () => "fa tooltip-right " + (this.props.expanded ? "fa-toggle-on" : "fa-toggle-off");
17+
const tackClass = () => "uir-icon uir-icon-thumb-tack " + (this.props.pinned ? "" : "uir-rotate-35");
18+
const expandClass = () => "uir-icon tooltip-right " + (this.props.expanded ? "uir-icon-toggle-on" : "uir-icon-toggle-off");
1919

2020
return (
2121
<div className="uir-panel-heading uir-header">
22-
<button className="btn btn-default btn-xs pinButton" onClick={this.props.togglePinned}>
22+
<div style={{ cursor: "pointer" }} onClick={this.props.togglePinned}>
2323
<i className={ tackClass() } />
24-
</button>
24+
</div>
2525

2626
<h3 className="uir-panel-title">Transition #{ this.props.transition.$id }</h3>
2727

2828
<div style={{ cursor: "pointer" }} onClick={this.props.toggleExpand}>
29-
<i className={ expandClass() } title="Show Details" />
29+
<i className={ expandClass() }/>
3030
</div>
3131
</div>
3232
)

src/transition/resolveData.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ export class ResolveData extends React.Component<IProps,any> {
2020
<Modal>
2121
<div className="uir-modal-header uir-resolve-header">
2222
<div style={{"fontSize": "1.5em"}}>{this.props.labels.modalTitle}: {this.props.id}</div>
23-
<button className="btn btn-primary" onClick={this.close}>
24-
<i className="fa fa-close"/>
23+
<button className="btn btn-xs btn-primary" onClick={this.close}>
24+
<i className="uir-icon uir-iconw-close"/>
2525
</button>
2626
</div>
2727

src/transition/transitionVisualizer.css

Lines changed: 41 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@
9494
}
9595
.historyEntry .summary .transname {
9696
font-weight: bold;
97+
display: flex;
98+
flex-flow: row nowrap;
99+
align-items: center;
100+
justify-content: center
97101
}
98102

99103
/* breadcrumb/history entry color coding */
@@ -203,21 +207,12 @@
203207
align-items: baseline;
204208
}
205209

206-
.transitionDetail .uir-header > button {
207-
flex: 0 1 auto;
208-
transition: transform 0.5s ease;
209-
}
210-
.transitionDetail .uir-header > button:hover i {
210+
.transitionDetail .uir-header > * {
211211
flex: 0 1 auto;
212-
transition: all 0.5s ease;
213212
}
214213

215-
.fa-thumb-tack.fa-rotate-45 {
216-
color: lightgray;
217-
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
218-
-webkit-transform: rotate(45deg);
219-
-ms-transform: rotate(45deg);
220-
transform: rotate(45deg);
214+
.transitionDetail .uir-header > * i {
215+
transition: all 0.5s ease;
221216
}
222217

223218
.transitionDetail table.paths {
@@ -439,13 +434,6 @@ span.link {
439434
font-size: smaller;
440435
}
441436

442-
.fa.tooltip-right:after {
443-
left: 1.5em;
444-
}
445-
446-
447-
448-
449437

450438

451439
/* Bootstrap stuff */
@@ -626,3 +614,37 @@ span.link {
626614
text-align: right;
627615
border-top: 1px solid #e5e5e5;
628616
}
617+
618+
.uir-icon {
619+
display: inline-block;
620+
height: 1em; width: 1em;
621+
margin: 0.25em;
622+
background-size: cover;
623+
background-position: 0 0;
624+
}
625+
626+
.uir-spin {
627+
animation: uirspin 2s infinite;
628+
transform: rotate(0deg);
629+
}
630+
631+
.uir-rotate-35 {
632+
transform: rotate(35deg);
633+
opacity: 0.5;
634+
}
635+
636+
@keyframes uirspin {
637+
0% { transform: rotate(0deg); }
638+
100% { transform: rotate(360deg); }
639+
}
640+
641+
642+
.uir-iconw-spinner { background-image: url("../../images/w/16/spinner.png"); }
643+
.uir-iconw-check { background-image: url("../../images/w/16/check.png"); }
644+
.uir-iconw-circle-o { background-image: url("../../images/w/16/circle-o.png"); }
645+
.uir-iconw-share { background-image: url("../../images/w/16/share.png"); }
646+
.uir-iconw-close { background-image: url("../../images/w/16/close.png"); }
647+
648+
.uir-icon-thumb-tack { background-image: url("../../images/16/thumb-tack.png"); }
649+
.uir-icon-toggle-on { background-image: url("../../images/16/toggle-on.png"); }
650+
.uir-icon-toggle-off { background-image: url("../../images/16/toggle-off.png"); }

src/transition/transitionVisualizer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from "react";
22
import * as ReactDOM from "react-dom";
3-
import "font-awesome/css/font-awesome.min.css"
43

54
import "./transitionVisualizer.css";
65

webpack.config.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ module.exports = {
1616
devtool: 'source-map',
1717

1818
plugins: [
19-
new webpack.optimize.UglifyJsPlugin({
20-
compress: {
21-
warnings: false
22-
}
23-
}),
19+
// new webpack.optimize.UglifyJsPlugin({
20+
// compress: {
21+
// warnings: false
22+
// }
23+
// }),
2424

2525
new webpack.DefinePlugin({
2626
'process.env': {
@@ -36,10 +36,10 @@ module.exports = {
3636

3737
module: {
3838
loaders: [
39-
{test: /\.css$/, loader: "style!css"},
4039
{test: /\.tsx?$/, loader: 'awesome-typescript-loader', tsconfig: 'tsconfig.json'},
41-
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"},
42-
{test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader"}
40+
{ test: /\.css$/, loader: 'style!css?sourceMap' },
41+
// inline base64 URLs for <=8k images, direct URLs for the rest
42+
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
4343

4444
]
4545
},

0 commit comments

Comments
 (0)