Replace font-awesome with pre-rendered png images

Author: christopherthielen

images/128/check.png

@@ -1,7 +1,7 @@
 {
   "name": "ui-router-visualizer",
   "description": "UI-Router State Visualizer and Transition Visualizer",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "scripts": {
     "start": "webpack-dev-server --content-base example",
     "clean": "rm -rf ./build ./release",
@@ -33,7 +33,7 @@
   "license": "MIT",
   "dependencies": {
     "file-loader": "^0.9.0",
-    "font-awesome": "^4.6.3",
+    "font-awesome-svg-png": "^1.1.5",
     "react": "^15",
     "react-dom": "^15",
     "url-loader": "^0.5.7"
@@ -43,13 +43,15 @@
   },
   "devDependencies": {
     "angular": "^1.4.9",
-    "ui-router-core": ">=1.0.0-beta.1",
+    "awesome-typescript-loader": "^2.0.1",
     "css-loader": "^0.23.1",
     "d3": "^3.5.14",
     "es6-shim": "^0.35.0",
-    "awesome-typescript-loader": "^2.0.1",
-    "style-loader": "^0.13.0",
+    "file-loader": "^0.9.0",
+    "style-loader": "^0.13.1",
     "typescript": "^1.8.10",
+    "ui-router-core": ">=1.0.0-beta.1",
+    "url-loader": "^0.5.7",
     "webpack": "^1.12.12",
     "webpack-dev-server": "^1.14.1"
   },

images/128/chevron-down.png

@@ -8,6 +8,9 @@ import {toggleClass, addClass} from "../util/toggleClass";
 import {draggable} from "../util/draggable";
 import {StateTree} from "./stateTree";
 
+declare function require(string): string;
+let imgChevron = require('../../images/16/chevron-down.png');
+
 export interface IProps {
   router;
   width?: number;
@@ -127,7 +130,7 @@ export class StateVisualizer extends React.Component<IProps, IState> {
           <div className="uirStateVisControls">
             <div> Current State: <StateSelector router={this.props.router} /></div>
             <button onClick={this.minimize}>
-              <i className="fa fa-chevron-down" style={{ cursor: 'pointer' }} />
+              <img src={imgChevron} style={{ cursor: 'pointer' }} />
             </button>
           </div>
 

images/128/circle-o.png

@@ -16,11 +16,11 @@ export class BreadcrumbArrow extends React.Component<IProps, IState> {
 
   iconClass() {
     let iconClasses = {
-      running: 'fa fa-spin fa-spinner',
-      success: 'fa fa-check',
-      redirected: 'fa fa-share',
-      ignored: 'fa fa-circle-o',
-      error: 'fa fa-close'
+      running: 'uir-icon uir-spin uir-iconw-spinner',
+      success: 'uir-icon uir-iconw-check',
+      redirected: 'uir-icon uir-iconw-share',
+      ignored: 'uir-icon uir-iconw-circle-o',
+      error: 'uir-icon uir-iconw-close'
     };
 
     return iconClasses[this.props.status];

images/128/close.png

@@ -14,19 +14,19 @@ export interface IState {
 
 export class PopoverHeading extends React.Component<IProps, IState> {
   render() {
-    const tackClass = () => "fa fa-thumb-tack " + (this.props.pinned ? "" : "fa-rotate-45 text-muted");
-    const expandClass = () => "fa tooltip-right " + (this.props.expanded ? "fa-toggle-on" : "fa-toggle-off");
+    const tackClass = () => "uir-icon uir-icon-thumb-tack " + (this.props.pinned ? "" : "uir-rotate-35");
+    const expandClass = () => "uir-icon tooltip-right " + (this.props.expanded ? "uir-icon-toggle-on" : "uir-icon-toggle-off");
 
     return (
       <div className="uir-panel-heading uir-header">
-        <button className="btn btn-default btn-xs pinButton" onClick={this.props.togglePinned}>
+        <div style={{ cursor: "pointer" }} onClick={this.props.togglePinned}>
           <i className={ tackClass() } />
-        </button>
+        </div>
 
         <h3 className="uir-panel-title">Transition #{ this.props.transition.$id }</h3>
 
         <div style={{ cursor: "pointer" }} onClick={this.props.toggleExpand}>
-          <i className={ expandClass() } title="Show Details" />
+          <i className={ expandClass() }/>
         </div>
       </div>
     )

images/128/share.png

@@ -20,8 +20,8 @@ export class ResolveData extends React.Component<IProps,any> {
           <Modal>
             <div className="uir-modal-header uir-resolve-header">
               <div style={{"fontSize": "1.5em"}}>{this.props.labels.modalTitle}: {this.props.id}</div>
-              <button className="btn btn-primary" onClick={this.close}>
-                <i className="fa fa-close"/>
+              <button className="btn btn-xs btn-primary" onClick={this.close}>
+                <i className="uir-icon uir-iconw-close"/>
               </button>
             </div>
 

images/128/spinner.png

@@ -94,6 +94,10 @@
 }
 .historyEntry .summary .transname {
     font-weight: bold;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center
 }
 
 /* breadcrumb/history entry color coding */
@@ -203,21 +207,12 @@
     align-items: baseline;
 }
 
-.transitionDetail .uir-header > button {
-    flex: 0 1 auto;
-    transition: transform 0.5s ease;
-}
-.transitionDetail .uir-header > button:hover i {
+.transitionDetail .uir-header > *  {
     flex: 0 1 auto;
-    transition: all 0.5s ease;
 }
 
-.fa-thumb-tack.fa-rotate-45 {
-    color: lightgray;
-    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
+.transitionDetail .uir-header > * i {
+    transition: all 0.5s ease;
 }
 
 .transitionDetail table.paths {
@@ -439,13 +434,6 @@ span.link {
     font-size: smaller;
 }
 
-.fa.tooltip-right:after {
-    left: 1.5em;
-}
-
-
-
-
 
 
 /* Bootstrap stuff */
@@ -626,3 +614,37 @@ span.link {
     text-align: right;
     border-top: 1px solid #e5e5e5;
 }
+
+.uir-icon {
+    display: inline-block;
+    height: 1em; width: 1em;
+    margin: 0.25em;
+    background-size: cover;
+    background-position: 0 0;
+}
+
+.uir-spin {
+    animation: uirspin 2s infinite;
+    transform: rotate(0deg);
+}
+
+.uir-rotate-35 {
+    transform: rotate(35deg);
+    opacity: 0.5;
+}
+
+@keyframes uirspin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+
+.uir-iconw-spinner       { background-image: url("../../images/w/16/spinner.png"); }
+.uir-iconw-check         { background-image: url("../../images/w/16/check.png"); }
+.uir-iconw-circle-o      { background-image: url("../../images/w/16/circle-o.png"); }
+.uir-iconw-share         { background-image: url("../../images/w/16/share.png"); }
+.uir-iconw-close         { background-image: url("../../images/w/16/close.png"); }
+
+.uir-icon-thumb-tack     { background-image: url("../../images/16/thumb-tack.png"); }
+.uir-icon-toggle-on      { background-image: url("../../images/16/toggle-on.png"); }
+.uir-icon-toggle-off     { background-image: url("../../images/16/toggle-off.png"); }

images/128/thumb-tack.png

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import "font-awesome/css/font-awesome.min.css"
 
 import "./transitionVisualizer.css";
 

images/128/toggle-off.png

@@ -16,11 +16,11 @@ module.exports = {
   devtool: 'source-map',
 
   plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    }),
+    // new webpack.optimize.UglifyJsPlugin({
+    //   compress: {
+    //     warnings: false
+    //   }
+    // }),
 
     new webpack.DefinePlugin({
       'process.env': {
@@ -36,10 +36,10 @@ module.exports = {
 
   module: {
     loaders: [
-      {test: /\.css$/, loader: "style!css"},
       {test: /\.tsx?$/, loader: 'awesome-typescript-loader', tsconfig: 'tsconfig.json'},
-      {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"},
-      {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader"}
+      { test: /\.css$/, loader: 'style!css?sourceMap' },
+      // inline base64 URLs for <=8k images, direct URLs for the rest
+      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }
 
     ]
   },