We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
YellowLabTools
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

New icons from IcoMoon

Gaël Métais 10 years ago
parent
a8af5915e3
commit
24d9690b09
18 changed files with 294 additions and 55 deletions
Unified View Show Diff Stats
  1. 33 0
      Gruntfile.js
  2. 2 0
      README.md
  3. 2 1
      app/node_views/index.html
  4. 8 10
      app/node_views/results.html
  5. BIN
      app/public/fonts/icons.woff
  6. 0 0
      app/public/fonts/svg-icons/arrow-left3.svg
  7. 0 0
      app/public/fonts/svg-icons/drawer3.svg
  8. 0 0
      app/public/fonts/svg-icons/lab.svg
  9. 0 0
      app/public/fonts/svg-icons/list.svg
  10. 0 0
      app/public/fonts/svg-icons/question.svg
  11. 0 0
      app/public/fonts/svg-icons/tree.svg
  12. 0 0
      app/public/fonts/svg-icons/warning.svg
  13. 4 0
      app/public/styles/index.css
  14. 56 0
      app/public/styles/less/icons.less
  15. 49 0
      app/public/styles/less/main.less
  16. 115 20
      app/public/styles/main.css
  17. 21 23
      app/public/styles/results.css
  18. 4 1
      package.json

+ 33 - 0
Gruntfile.js
View File 

@@ -4,6 +4,30 @@ module.exports = function(grunt) {
 
     grunt.initConfig({
 
     grunt.initConfig({
 
         pkg: grunt.file.readJSON('package.json'),
 
         pkg: grunt.file.readJSON('package.json'),
 
         
         
+        font: {
 
+            icons: {
 
+                src: ['app/public/fonts/svg-icons/*.svg'],
 
+                destCss: 'app/public/styles/less/icons.less',
 
+                destFonts: 'app/public/fonts/icons.woff',
 
+
 
+                // Optional: Custom routing of font filepaths for CSS
 
+                cssRouter: function (fontpath) {
 
+                    var pathArray = fontpath.split('/');
 
+                    var fileName = pathArray[pathArray.length - 1];
 
+                    return '/public/fonts/' + fileName;
 
+                }
 
+            }
 
+        },
 
+        less: {
 
+            icons: {
 
+                files: {
 
+                    'app/public/styles/main.css': [
 
+                        //'app/public/styles/less/icons.less',
 
+                        'app/public/styles/less/main.less'
 
+                    ]
 
+                }
 
+            }
 
+        },
 
         jshint: {
 
         jshint: {
 
             all: [
 
             all: [
 
                 '*.js',
 
                 '*.js',
 
@@ -14,6 +38,9 @@ module.exports = function(grunt) {
 
             ]
 
             ]
 
         },
 
         },
 
         clean: {
 
         clean: {
 
+            icons: {
 
+                src: ['tmp']
 
+            },
 
             coverage: {
 
             coverage: {
 
                 src: ['coverage/']
 
                 src: ['coverage/']
 
             }
 
             }
 
@@ -53,6 +80,12 @@ module.exports = function(grunt) {
 
 
 
     require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
     require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
 
 
+    grunt.registerTask('build', [
 
+        'jshint',
 
+        'font:icons',
 
+        'less:icons',
 
+        'clean:icons'
 
+    ]);
 
 
 
     grunt.registerTask('hint', [
 
     grunt.registerTask('hint', [
 
         'jshint'
 
         'jshint'

+ 2 - 0
README.md
View File 

@@ -62,6 +62,8 @@ vagrant up
 
 ## License
 
 ## License
 
 Please read the [license](LICENSE).
 
 Please read the [license](LICENSE).
 
 
 
+Icons are the property of [IcoMoon.io](https://icomoon.io/)
 
+
 
 
 
 ## Author
 
 ## Author
 
 Gaël Métais. I'm a webperf freelance based in Paris. If you understand french, you can visit [my website](http://www.gaelmetais.com).
 
 Gaël Métais. I'm a webperf freelance based in Paris. If you understand french, you can visit [my website](http://www.gaelmetais.com).

+ 2 - 1
app/node_views/index.html
View File 

@@ -6,12 +6,13 @@
 
     <link rel="stylesheet" type="text/css" href="/public/styles/index.css">
 
     <link rel="stylesheet" type="text/css" href="/public/styles/index.css">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
-    <h1>Yellow Lab Tools</h1>
 
+    <h1>Yellow Lab <span class="icon-lab"></span> Tools</h1>
 
     <h2 class="promess">Free online test to help speeding up heavily javascripted pages</h2>
 
     <h2 class="promess">Free online test to help speeding up heavily javascripted pages</h2>
 
     <form method="post" action="/launchTest">
 
     <form method="post" action="/launchTest">
 
         <input type="text" name="url" placeholder="http://www.mysite.com" class="url" />
 
         <input type="text" name="url" placeholder="http://www.mysite.com" class="url" />
 
         <input type="submit" value="Launch test" class="launchBtn" onclick="this.className += ' clicked'" />
 
         <input type="submit" value="Launch test" class="launchBtn" onclick="this.className += ' clicked'" />
 
     </form>
 
     </form>
 
+    <p>(This is an early BETA, so please don't spread on the web)</p>
 
 
 
     <div class="footer">
 
     <div class="footer">
 
         <p><b>Yellow Lab Tools</b> is an open source project by <a href="http://www.gaelmetais.com" target="_blank">Gaël Métais</a>, based on <a href="https://github.com/macbre/phantomas" target="_blank">Phantomas</a>.<br>If you like it, <a href="https://github.com/gmetais/YellowLabTools" target="_blank" class="star">give it a <span>&#9733;</span> on GitHub</a>!</p>
 
         <p><b>Yellow Lab Tools</b> is an open source project by <a href="http://www.gaelmetais.com" target="_blank">Gaël Métais</a>, based on <a href="https://github.com/macbre/phantomas" target="_blank">Phantomas</a>.<br>If you like it, <a href="https://github.com/gmetais/YellowLabTools" target="_blank" class="star">give it a <span>&#9733;</span> on GitHub</a>!</p>

+ 8 - 10
app/node_views/results.html
View File 

@@ -18,10 +18,10 @@
 
         <div>Tested url: &nbsp; <a class="testedUrl" href="{{phantomasResults.url}}" target="_blank">{{phantomasResults.url}}</a></div>
 
         <div>Tested url: &nbsp; <a class="testedUrl" href="{{phantomasResults.url}}" target="_blank">{{phantomasResults.url}}</a></div>
 
 
 
         <div class="resultsMenu">
 
         <div class="resultsMenu">
 
-            <a class="menuItem" href="/"><span>New test<span></a>
 
-            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'summary'}" ng-click="setView('summary')"><span>Summary</span></div>
 
-            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'execution'}" ng-click="setView('execution')"><span>Spaghetti</span></div>
 
-            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'metrics'}" ng-click="setView('metrics')"><span>Metrics</span></div>
 
+            <a class="menuItem back" href="/"><div class="icon-back"></div><span>New test<span></a>
 
+            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'summary'}" ng-click="setView('summary')"><div class="icon-summary"></div><span>Summary</span></div>
 
+            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'execution'}" ng-click="setView('execution')"><div class="icon-spaghetti"></div><span>Spaghetti</span></div>
 
+            <div class="menuItem" ng-if="!phantomasResults.error" ng-class="{active: view == 'metrics'}" ng-click="setView('metrics')"><div class="icon-metrics"></div><span>Metrics</span></div>
 
         </div>
 
         </div>
 
 
 
         <div ng-if="phantomasResults.error">
 
         <div ng-if="phantomasResults.error">
 
@@ -166,11 +166,9 @@
 
                     </div>
 
                     </div>
 
                     
                     
                     <div class="details">
 
                     <div class="details">
 
-                        <button ng-click="onNodeDetailsClick(node)" 
-                                ng-class="{
 
-                                    'warningDetails': node.data.type == 'jQuery - bind' && node.data.callDetails.context.length > 5
 
-                                }"
 
-                                ng-if="node.data.type != 'script loaded' && node.data.type != 'jQuery loaded'">i</button>
 
+                        <div class="icon-question"
 
+                                ng-click="onNodeDetailsClick(node)"
 
+                                ng-if="node.data.type != 'script loaded' && node.data.type != 'jQuery loaded'"></div>
 
                         <div class="detailsOverlay" ng-show="node.data.showDetails">
 
                         <div class="detailsOverlay" ng-show="node.data.showDetails">
 
                             <div class="closeBtn" ng-click="onNodeDetailsClick(node)">✖</div>
 
                             <div class="closeBtn" ng-click="onNodeDetailsClick(node)">✖</div>
 
 
 
@@ -230,7 +228,7 @@
 
                     </div>
 
                     </div>
 
                     <div class="duration" ng-if="node.data.time != undefined">
 
                     <div class="duration" ng-if="node.data.time != undefined">
 
                         {{node.data.time}} ms
 
                         {{node.data.time}} ms
 
-                        <div ng-if="node.data.time > slowRequestsLimit" class="warningIcon" title="Slower than {{slowRequestsLimit}} ms"></div>
 
+                        <span ng-if="node.data.time > slowRequestsLimit" class="icon-warning" title="Slower than {{slowRequestsLimit}} ms"></span>
 
                     </div>
 
                     </div>
 
                     <div class="duration" ng-if="node.data.time == undefined"></div>
 
                     <div class="duration" ng-if="node.data.time == undefined"></div>
 
                     <div class="startTime">{{node.data.timestamp}}</div>
 
                     <div class="startTime">{{node.data.timestamp}}</div>

BIN
app/public/fonts/icons.woff
View File


File diff suppressed because it is too large
+ 0 - 0
app/public/fonts/svg-icons/arrow-left3.svg


File diff suppressed because it is too large
+ 0 - 0
app/public/fonts/svg-icons/drawer3.svg


File diff suppressed because it is too large
+ 0 - 0
app/public/fonts/svg-icons/lab.svg


File diff suppressed because it is too large
+ 0 - 0
app/public/fonts/svg-icons/list.svg


File diff suppressed because it is too large
+ 0 - 0
app/public/fonts/svg-icons/question.svg


File diff suppressed because it is too large
+ 0 - 0
app/public/fonts/svg-icons/tree.svg


File diff suppressed because it is too large
+ 0 - 0
app/public/fonts/svg-icons/warning.svg


+ 4 - 0
app/public/styles/index.css
View File 

@@ -1,3 +1,7 @@
 
+h1 span {
 
+    color: #ffa319;
 
+}
 
+
 
 .promess {
 
 .promess {
 
     padding: 0em 2em 3em;
 
     padding: 0em 2em 3em;
 
     font-weight: normal;
 
     font-weight: normal;

+ 56 - 0
app/public/styles/less/icons.less
View File 

@@ -0,0 +1,56 @@
 
+@warning-font-family: "fontsmith-icons";
 
+@warning-value: "\e000";
 
+@warning: '"fontsmith-icons"' '"\\e000"';
 
+@arrow-left3-font-family: "fontsmith-icons";
 
+@arrow-left3-value: "\e006";
 
+@arrow-left3: '"fontsmith-icons"' '"\\e006"';
 
+@drawer3-font-family: "fontsmith-icons";
 
+@drawer3-value: "\e005";
 
+@drawer3: '"fontsmith-icons"' '"\\e005"';
 
+@list-font-family: "fontsmith-icons";
 
+@list-value: "\e003";
 
+@list: '"fontsmith-icons"' '"\\e003"';
 
+@lab-font-family: "fontsmith-icons";
 
+@lab-value: "\e004";
 
+@lab: '"fontsmith-icons"' '"\\e004"';
 
+@tree-font-family: "fontsmith-icons";
 
+@tree-value: "\e001";
 
+@tree: '"fontsmith-icons"' '"\\e001"';
 
+@question-font-family: "fontsmith-icons";
 
+@question-value: "\e002";
 
+@question: '"fontsmith-icons"' '"\\e002"';
 
+
 
+.icon-font-family(@char) {
 
+  font-family: ~`@{char}[0]`;
 
+}
 
+
 
+.icon-font() {
 
+  speak: none;
 
+  font-style: normal;
 
+  font-weight: normal;
 
+  font-variant: normal;
 
+  text-transform: none;
 
+  line-height: 1;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+
 
+.icon-content(@char) {
 
+  content: ~`@{char}[1]`;
 
+}
 
+
 
+.icon(@char) {
 
+  .icon-font-family(@char);
 
+  .icon-font();
 
+
 
+  &:before {
 
+    .icon-content(@char);
 
+  }
 
+}
 
+
 
+@font-face {
 
+  font-family: "fontsmith-icons";
 
+  src:url("/public/fonts/icons.woff") format("woff"),
 
+    ;
 
+  font-weight: normal;
 
+  font-style: normal;
 
+}

+ 49 - 0
app/public/styles/less/main.less
View File 

@@ -0,0 +1,49 @@
 
+@import "icons.less";
 
+
 
+html {
 
+    margin: 100px 50px;
 
+}
 
+
 
+body {
 
+    margin: 0 auto;
 
+    max-width: 1280px;
 
+    background: #9c4274;
 
+    color: #fff;
 
+    font-size: 16px;
 
+    text-align: center;
 
+}
 
+
 
+body, input[type=submit], input[type=text], input[type=number], button {
 
+    font-family: 'Century Gothic', helvetica, arial, sans-serif;
 
+}
 
+
 
+input[type=text] {
 
+
 
+}
 
+
 
+input[type=submit] {
 
+    cursor: pointer;
 
+}
 
+
 
+/* Icons */
 
+.icon-lab {
 
+    .icon(@lab);
 
+}
 
+.icon-question {
 
+    .icon(@question);
 
+}
 
+.icon-warning {
 
+    .icon(@warning);
 
+}
 
+.icon-back {
 
+    .icon(@arrow-left3);
 
+}
 
+.icon-summary {
 
+    .icon(@list);
 
+}
 
+.icon-spaghetti {
 
+    .icon(@tree);
 
+}
 
+.icon-metrics {
 
+    .icon(@drawer3);
 
+}

+ 115 - 20
app/public/styles/main.css
View File 

@@ -1,24 +1,119 @@
 
+@font-face {
 
+  font-family: "fontsmith-icons";
 
+  src: url("/public/fonts/icons.woff") format("woff");
 
+  font-weight: normal;
 
+  font-style: normal;
 
+}
 
 html {
 
 html {
 
-    margin: 100px 50px;
 
+  margin: 100px 50px;
 
 }
 
 }
 
-
 
 body {
 
 body {
 
-    margin: 0 auto;
 
-    max-width: 1280px;
 
-    background: #9c4274;
 
-    color: #fff;
 
-    font-size: 16px;
 
-    text-align: center;
 
-}
 
-
 
-body, input[type=submit], input[type=text], input[type=number], button {
 
-    font-family: 'Century Gothic', helvetica, arial, sans-serif;
 
-}
 
-
 
-input[type=text] {
 
-
 
-}
 
-
 
+  margin: 0 auto;
 
+  max-width: 1280px;
 
+  background: #9c4274;
 
+  color: #fff;
 
+  font-size: 16px;
 
+  text-align: center;
 
+}
 
+body,
 
+input[type=submit],
 
+input[type=text],
 
+input[type=number],
 
+button {
 
+  font-family: 'Century Gothic', helvetica, arial, sans-serif;
 
+}
 
 input[type=submit] {
 
 input[type=submit] {
 
-    cursor: pointer;
 
-}
 
+  cursor: pointer;
 
+}
 
+/* Icons */
 
+.icon-lab {
 
+  font-family: "fontsmith-icons";
 
+  speak: none;
 
+  font-style: normal;
 
+  font-weight: normal;
 
+  font-variant: normal;
 
+  text-transform: none;
 
+  line-height: 1;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+.icon-lab:before {
 
+  content: "\e004";
 
+}
 
+.icon-question {
 
+  font-family: "fontsmith-icons";
 
+  speak: none;
 
+  font-style: normal;
 
+  font-weight: normal;
 
+  font-variant: normal;
 
+  text-transform: none;
 
+  line-height: 1;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+.icon-question:before {
 
+  content: "\e002";
 
+}
 
+.icon-warning {
 
+  font-family: "fontsmith-icons";
 
+  speak: none;
 
+  font-style: normal;
 
+  font-weight: normal;
 
+  font-variant: normal;
 
+  text-transform: none;
 
+  line-height: 1;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+.icon-warning:before {
 
+  content: "\e000";
 
+}
 
+.icon-back {
 
+  font-family: "fontsmith-icons";
 
+  speak: none;
 
+  font-style: normal;
 
+  font-weight: normal;
 
+  font-variant: normal;
 
+  text-transform: none;
 
+  line-height: 1;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+.icon-back:before {
 
+  content: "\e006";
 
+}
 
+.icon-summary {
 
+  font-family: "fontsmith-icons";
 
+  speak: none;
 
+  font-style: normal;
 
+  font-weight: normal;
 
+  font-variant: normal;
 
+  text-transform: none;
 
+  line-height: 1;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+.icon-summary:before {
 
+  content: "\e003";
 
+}
 
+.icon-spaghetti {
 
+  font-family: "fontsmith-icons";
 
+  speak: none;
 
+  font-style: normal;
 
+  font-weight: normal;
 
+  font-variant: normal;
 
+  text-transform: none;
 
+  line-height: 1;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+.icon-spaghetti:before {
 
+  content: "\e001";
 
+}
 
+.icon-metrics {
 
+  font-family: "fontsmith-icons";
 
+  speak: none;
 
+  font-style: normal;
 
+  font-weight: normal;
 
+  font-variant: normal;
 
+  text-transform: none;
 
+  line-height: 1;
 
+  -webkit-font-smoothing: antialiased;
 
+}
 
+.icon-metrics:before {
 
+  content: "\e005";
 
+}

+ 21 - 23
app/public/styles/results.css
View File 

@@ -6,21 +6,32 @@
 
     display: inline-block;
 
     display: inline-block;
 
     margin: 1em;
 
     margin: 1em;
 
     width: 8em;
 
     width: 8em;
 
-    height: 8em;
 
-    background: #fff;
 
+    height: 7em;
 
+    color: #fff;
 
+    border: 3px solid #fff;
 
     border-radius: 0.5em;
 
     border-radius: 0.5em;
 
-    color: #9c4274;
 
     cursor: pointer;
 
     cursor: pointer;
 
     text-decoration: none;
 
     text-decoration: none;
 
 }
 
 }
 
-
 
-.resultsMenu .active, .resultsMenu .menuItem:hover {
 
-    color: #e74c3c;
 
+.resultsMenu .back {
 
+    color: #5e2846;
 
+    border-color: #5e2846;
 
+}
 
+.resultsMenu .menuItem div {
 
+    padding-top: 0.5em;
 
+    font-size: 3em;
 
+}
 
+.resultsMenu .active, .resultsMenu .menuItem.active:hover {
 
+    color: #ffa319;
 
+    border-color: #ffa319;
 
+}
 
+.resultsMenu .menuItem:hover {
 
+    color: #ffa319;
 
 }
 
 }
 
 
 
 .resultsMenu span {
 
 .resultsMenu span {
 
     position: relative;
 
     position: relative;
 
-    top: 6em;
 
+    top: 0.5em;
 
 }
 
 }
 
 
 
 .testedUrl {
 
 .testedUrl {
 
@@ -202,20 +213,10 @@ input.textFilter {
 
 .table > div > .details {
 
 .table > div > .details {
 
     position: relative;
 
     position: relative;
 
 }
 
 }
 
-.table > div > .details button {
 
+.table .details .icon-question {
 
     color: #f1c40f;
 
     color: #f1c40f;
 
-    font-weight: bold;
 
-    border: 2px solid #f1c40f;
 
-    border-radius: 50%;
 
-    background: transparent;
 
-    height: 2em;
 
-    width: 2em;
 
     cursor: pointer;
 
     cursor: pointer;
 
 }
 
 }
 
-.table > div > .details button.warningDetails {
 
-    color: #e74c3c;
 
-    border-color: #e74c3c;
 
-}
 
 
 
 .detailsOverlay {
 
 .detailsOverlay {
 
     position: absolute;
 
     position: absolute;
 
@@ -254,9 +255,6 @@ input.textFilter {
 
     white-space:nowrap;
 
     white-space:nowrap;
 
 }
 
 }
 
 
 
-.warningIcon {
 
-    display: inline-block;
 
-    width: 1.5em;
 
-    height: 1.5em;
 
-    background: url('data:image/svg+xml;utf8,<svg version="1.1" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><defs/><g fill="none" fill-rule="evenodd" id="Icons new Arranged Names Color" stroke="none" stroke-width="1"><g fill="#e74c3c" id="101 Warning"><path d="M14.4242327,6.14839275 C15.2942987,4.74072976 16.707028,4.74408442 17.5750205,6.14839275 L28.3601099,23.59738 C29.5216388,25.4765951 28.6755462,27 26.4714068,27 L5.5278464,27 C3.32321557,27 2.47386317,25.4826642 3.63914331,23.59738 Z M16,20 C16.5522847,20 17,19.5469637 17,19.0029699 L17,12.9970301 C17,12.4463856 16.5561352,12 16,12 C15.4477153,12 15,12.4530363 15,12.9970301 L15,19.0029699 C15,19.5536144 15.4438648,20 16,20 Z M16,24 C16.5522848,24 17,23.5522848 17,23 C17,22.4477152 16.5522848,22 16,22 C15.4477152,22 15,22.4477152 15,23 C15,23.5522848 15.4477152,24 16,24 Z M16,24" id="Triangle 29"/></g></g></svg>') no-repeat 0 3px;
 
+.table .icon-warning {
 
+    color: #e74c3c;
 
 }
 
 }

+ 4 - 1
package.json
View File 

@@ -22,7 +22,10 @@
 
     "grunt-contrib-copy": "^0.5.0",
 
     "grunt-contrib-copy": "^0.5.0",
 
     "grunt-blanket": "0.0.8",
 
     "grunt-blanket": "0.0.8",
 
     "chai": "^1.9.1",
 
     "chai": "^1.9.1",
 
-    "mocha": "^1.21.4"
 
+    "mocha": "^1.21.4",
 
+    "phantomjs": "^1.9.7-15",
 
+    "grunt-fontsmith": "^0.9.1",
 
+    "grunt-contrib-less": "^0.11.4"
 
   },
 
   },
 
   "scripts": {}
 
   "scripts": {}
 
 }
 
 }

Some files were not shown because too many files changed in this diff

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5