Updated grid toolbar images to icon font

vitmalina · Jul 10, 2014 · dbb6809 · dbb6809
1 parent a0b578b
commit dbb6809
Show file tree

Hide file tree

Showing 57 changed files with 435 additions and 133 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -210,7 +210,22 @@ module.exports = function (grunt) {
                 files: ['src/kickstart/less/*.less', 'src/kickstart/less/src/*.less'],
                 tasks: ['less:ks', 'less:ks-min', 'concat:banner-ks-1', 'concat:banner-ks-2']
             }
+        },
+
+        webfont: {
+            icons: {
+                src : 'src/less/icons/svg/*.svg',
+                dest: 'src/less/icons/',
+                options: {
+                    engine  : 'node',
+                    font    : 'icon-font',
+                    syntax  : 'bootstrap',
+                    types   : 'woff',
+                    embed   : true
+                }           
+            }
         }
+
     });
 
     grunt.loadNpmTasks('grunt-contrib-clean');
@@ -219,6 +234,7 @@ module.exports = function (grunt) {
     grunt.loadNpmTasks('grunt-contrib-uglify');
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-shell');
+    grunt.loadNpmTasks('grunt-webfont');
 
     grunt.registerTask('default', ['clean', 'less', 'concat', 'uglify']);
     grunt.registerTask('docs', ['shell:docs']);

diff --git a/demos/index.js b/demos/index.js
@@ -8,7 +8,7 @@ $(function () {
             { type: 'main', style: 'background-color: white;' }
         ]
     });
-    w2ui['main_layout'].content('top', '<div style="padding: 12px 20px; font-size: 18px;">W2UI 1.3 Demos</div>');
+    w2ui['main_layout'].content('top', '<div style="padding: 12px 20px; font-size: 18px;">W2UI 1.4 Demos</div>');
     // w2ui['main_layout'].content('top', '<div style="padding: 9px;">'+
     //     'Theme: '+
     //     '<select onchange="$(\'#mainCSS\').attr(\'href\', this.value);">'+

diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "grunt-contrib-less": "~0.9.0",
     "grunt-contrib-watch": "~0.5.3",
     "grunt-shell": "~0.6.4",
-    "grunt-contrib-uglify": "^0.4.0"
+    "grunt-contrib-uglify": "^0.4.0",
+    "grunt-webfont": "^0.4.3"
   }
 }
diff --git a/src/less/icons/icon-font.css b/src/less/icons/icon-font.css
@@ -0,0 +1,74 @@
+/* Generated by grunt-webfont */
+/* Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css */
+
+
+@font-face {
+	font-family:"icon-font";
+	src:url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAWIAAoAAAAACAgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAEMAAABWQLxMsmNtYXAAAAE4AAAAOgAAAUriGRC2Z2x5ZgAAAXQAAAH9AAACgLu4vTRoZWFkAAADdAAAADAAAAA2AOYXBGhoZWEAAAOkAAAAIAAAACQD8wHHaG10eAAAA8QAAAAWAAAAIA7dAABsb2NhAAAD3AAAABIAAAASAngBuG1heHAAAAPwAAAAHwAAACABFQA2bmFtZQAABBAAAAEtAAACIsTQ/zJwb3N0AAAFQAAAAEgAAABi4/7ZEHicY2BkvMM4gYGVgYPRhTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHD4yfmRnPPD/AIMe4wEGR6AwI0gOANHZC/IAeJxjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYGBg+sv//D1LwkRFE8zNA1QMBIxvDiAcAddwGvgAAeJxFkLFv01AQxu97LrHdRImjpnaS1gnEia3IoqAktkkiEhaEOiCsDkEo8dyBDkytKpYKVWwssKKKAYmBREKMLJSFoRJ/AGJhY0NZGFgSzrUinvR+d++7T+/ePQLRci4IJ3SFCLIjG8CH+ZPwHHdwkkSS2PMXP3DGmUxpoo123lrt5nj8fjyejsc4W0zwNtl8FfHCKV5QnaOhF3IJUrUbkGPYnSGcGH6risBvGQhdVY0iVXXVkhJN1JL6/6xOIqWk4tRlJiVFiSJFSUrsZ+tkoqpEgt/6Hb/wjtZog2gonBx24AyFJUuNwMvha+/CvLi3vq1f785GsxGuTqfWc5O1N/r2+lNrOl38ZHnWpdUMr/CaLKLGZiHl4hI1+zasGB2/Dy9GSzfRbul4qaWPtHSQ0Y7SWpxmgnSc/mblMKNpmcOVEhfj+5d/8BGfqMl9bKuWFYWKaLf8YIAq9IKc5TY7ojNgTTcC7iEjaN4yPdswbM+81t8UimRLojq66YbdWq0bus375t21bwgcw/H6nmNUyhIkR/DsTasXPgx7VtV8oDx6XIxHE8vl8rMAzqlEDZ7QseUBPP6tLOQKDH5HqooKfLvB2gABa1lgflzI60VxsLd3IJj1YRn5/Wx9Syy++LvArn/JzH4e5WE98TCLer5wnBNb9WcrB5PoH084dg8AAAB4nGNgZGBgAOKMsPib8fw2Xxm4mRhA4PzjbBcY/f////1MjIwHgFwOBrA0AFcuDPF4nGNgZGBgPPD/AIMeEwMDw/9/TEwMQBEUwAEAe34EvHicY2JgYGCCYsbJCJpxO4QNABdTAesAAAAAAAAAEgAsAGgAjgC+AP4BQAAAeJxjYGRgYOBg0GJgZgABJiDmAkIGhv9gPgMADYEBTAB4nG2PTW7CMBCFXyBQFaQKtVKl7qwuuqkIPwsWHAD2LNiH4ARQEkeOQeICPUHP0DP0BF32DD1KX8IoixZbHn/z5o1/AAzwBQ/V8HBbx2q0cMPswm3SQNgnPwl30MezcJf6ULiHV8yE+3hAyBM8vzrtHk64hTu8Cbepvwv75A/hDh7xKdyl/i3cwxo/wn28eLN9ZPJhbHK30skxDW2TN7DWttybXE2CcaMtda5t6PRWbc6qPCVT52IVW5OpBas6TY0qrDnoyAU754r5aBSLHkQmwx4RDHL+Oq53hxU0EhyR8sf2Sv2/smaHRclKlStMEGB8xbekL6+9ITONLb0bnBlLnHjnlKqjW3FZ9mSkhfRqviclKxR17UAloh5gV3cVmGPEGf/xB/Ursl9uDmByAAAAeJxtwUEOgCAMBMAu0sI3SdMEIwKh8n8PXp2hQB+mf5kIAQciGIKEzFpNr6Sj7bs76xruMq3r2eJs22XZtPKIW1laiV6rCBDA") format("woff");
+	font-weight:normal;
+	font-style:normal;
+}
+
+
+/* Bootstrap Overrides */
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+	font-family:"icon-font";
+	display:inline-block;
+	vertical-align:middle;
+	line-height:1;
+	font-weight:normal;
+	font-style:normal;
+	speak:none;
+	text-decoration:inherit;
+	text-transform:none;
+	text-rendering:optimizeLegibility;
+	-webkit-font-smoothing:antialiased;
+	-moz-osx-font-smoothing:grayscale;
+}
+
+
+
+/* Icons */
+
+
+.icon-check:before {
+	content:"\f101";
+}
+
+
+
+.icon-columns:before {
+	content:"\f102";
+}
+
+
+
+.icon-cross:before {
+	content:"\f103";
+}
+
+
+
+.icon-pencil:before {
+	content:"\f104";
+}
+
+
+
+.icon-plus:before {
+	content:"\f105";
+}
+
+
+
+.icon-repeat:before {
+	content:"\f106";
+}
+
+
+
+.icon-search:before {
+	content:"\f107";
+}
+
diff --git a/src/less/icons/icon-font.html b/src/less/icons/icon-font.html
@@ -0,0 +1,170 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>icon-font</title>
+		<style>
+		body {
+			margin:0;
+			padding:10px 20px;
+			background:#fff;
+			color:#222;
+			}
+		h1, div, footer {
+			font-family:"Helvetica Neue", Arial, sans-serif;
+			}
+		h1 {
+			margin:0 0 20px;
+			font-size:32px;
+			font-weight:normal;
+			}
+		.icons {
+			margin-bottom:40px;
+			-webkit-column-count:5;
+			   -moz-column-count:5;
+			        column-count:5;
+			-webkit-column-gap:20px;
+			   -moz-column-gap:20px;
+			        column-gap:20px;
+			}
+		.icons__item,
+		.icons__item i {
+			line-height:2em;
+			cursor:pointer;
+			}
+		.icons__item:hover {
+			color:#3c90be;
+			}
+		.icons__item i {
+			display:inline-block;
+			width:32px;
+			text-align:center;
+			}
+		.icons__item:hover i {
+			-webkit-transform:scale(1.5);
+			        transform:scale(1.5);
+			}
+		footer {
+			margin-top:40px;
+			font-size:14px;
+			color:#999;
+			}
+
+		/* Generated by grunt-webfont */
+/* Based on https://github.com/endtwist/fontcustom/blob/master/lib/fontcustom/templates/fontcustom.css */
+
+
+@font-face {
+	font-family:"icon-font";
+	src:url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAWIAAoAAAAACAgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAEMAAABWQLxMsmNtYXAAAAE4AAAAOgAAAUriGRC2Z2x5ZgAAAXQAAAH9AAACgLu4vTRoZWFkAAADdAAAADAAAAA2AOYXBGhoZWEAAAOkAAAAIAAAACQD8wHHaG10eAAAA8QAAAAWAAAAIA7dAABsb2NhAAAD3AAAABIAAAASAngBuG1heHAAAAPwAAAAHwAAACABFQA2bmFtZQAABBAAAAEtAAACIsTQ/zJwb3N0AAAFQAAAAEgAAABi4/7ZEHicY2BkvMM4gYGVgYPRhTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHD4yfmRnPPD/AIMe4wEGR6AwI0gOANHZC/IAeJxjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYGBg+sv//D1LwkRFE8zNA1QMBIxvDiAcAddwGvgAAeJxFkLFv01AQxu97LrHdRImjpnaS1gnEia3IoqAktkkiEhaEOiCsDkEo8dyBDkytKpYKVWwssKKKAYmBREKMLJSFoRJ/AGJhY0NZGFgSzrUinvR+d++7T+/ePQLRci4IJ3SFCLIjG8CH+ZPwHHdwkkSS2PMXP3DGmUxpoo123lrt5nj8fjyejsc4W0zwNtl8FfHCKV5QnaOhF3IJUrUbkGPYnSGcGH6risBvGQhdVY0iVXXVkhJN1JL6/6xOIqWk4tRlJiVFiSJFSUrsZ+tkoqpEgt/6Hb/wjtZog2gonBx24AyFJUuNwMvha+/CvLi3vq1f785GsxGuTqfWc5O1N/r2+lNrOl38ZHnWpdUMr/CaLKLGZiHl4hI1+zasGB2/Dy9GSzfRbul4qaWPtHSQ0Y7SWpxmgnSc/mblMKNpmcOVEhfj+5d/8BGfqMl9bKuWFYWKaLf8YIAq9IKc5TY7ojNgTTcC7iEjaN4yPdswbM+81t8UimRLojq66YbdWq0bus375t21bwgcw/H6nmNUyhIkR/DsTasXPgx7VtV8oDx6XIxHE8vl8rMAzqlEDZ7QseUBPP6tLOQKDH5HqooKfLvB2gABa1lgflzI60VxsLd3IJj1YRn5/Wx9Syy++LvArn/JzH4e5WE98TCLer5wnBNb9WcrB5PoH084dg8AAAB4nGNgZGBgAOKMsPib8fw2Xxm4mRhA4PzjbBcY/f////1MjIwHgFwOBrA0AFcuDPF4nGNgZGBgPPD/AIMeEwMDw/9/TEwMQBEUwAEAe34EvHicY2JgYGCCYsbJCJpxO4QNABdTAesAAAAAAAAAEgAsAGgAjgC+AP4BQAAAeJxjYGRgYOBg0GJgZgABJiDmAkIGhv9gPgMADYEBTAB4nG2PTW7CMBCFXyBQFaQKtVKl7qwuuqkIPwsWHAD2LNiH4ARQEkeOQeICPUHP0DP0BF32DD1KX8IoixZbHn/z5o1/AAzwBQ/V8HBbx2q0cMPswm3SQNgnPwl30MezcJf6ULiHV8yE+3hAyBM8vzrtHk64hTu8Cbepvwv75A/hDh7xKdyl/i3cwxo/wn28eLN9ZPJhbHK30skxDW2TN7DWttybXE2CcaMtda5t6PRWbc6qPCVT52IVW5OpBas6TY0qrDnoyAU754r5aBSLHkQmwx4RDHL+Oq53hxU0EhyR8sf2Sv2/smaHRclKlStMEGB8xbekL6+9ITONLb0bnBlLnHjnlKqjW3FZ9mSkhfRqviclKxR17UAloh5gV3cVmGPEGf/xB/Ursl9uDmByAAAAeJxtwUEOgCAMBMAu0sI3SdMEIwKh8n8PXp2hQB+mf5kIAQciGIKEzFpNr6Sj7bs76xruMq3r2eJs22XZtPKIW1laiV6rCBDA") format("woff");
+	font-weight:normal;
+	font-style:normal;
+}
+
+
+/* Bootstrap Overrides */
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+	font-family:"icon-font";
+	display:inline-block;
+	vertical-align:middle;
+	line-height:1;
+	font-weight:normal;
+	font-style:normal;
+	speak:none;
+	text-decoration:inherit;
+	text-transform:none;
+	text-rendering:optimizeLegibility;
+	-webkit-font-smoothing:antialiased;
+	-moz-osx-font-smoothing:grayscale;
+}
+
+
+
+/* Icons */
+
+
+.icon-check:before {
+	content:"\f101";
+}
+
+
+
+.icon-columns:before {
+	content:"\f102";
+}
+
+
+
+.icon-cross:before {
+	content:"\f103";
+}
+
+
+
+.icon-pencil:before {
+	content:"\f104";
+}
+
+
+
+.icon-plus:before {
+	content:"\f105";
+}
+
+
+
+.icon-repeat:before {
+	content:"\f106";
+}
+
+
+
+.icon-search:before {
+	content:"\f107";
+}
+
+
+		</style>
+	</head>
+	<body>
+		<h1>icon-font</h1>
+
+		<div class="icons" id="icons">
+
+				<div class="icons__item" data-name="check"><i class=" icon-check"></i> icon-check</div>
+
+				<div class="icons__item" data-name="columns"><i class=" icon-columns"></i> icon-columns</div>
+
+				<div class="icons__item" data-name="cross"><i class=" icon-cross"></i> icon-cross</div>
+
+				<div class="icons__item" data-name="pencil"><i class=" icon-pencil"></i> icon-pencil</div>
+
+				<div class="icons__item" data-name="plus"><i class=" icon-plus"></i> icon-plus</div>
+
+				<div class="icons__item" data-name="repeat"><i class=" icon-repeat"></i> icon-repeat</div>
+
+				<div class="icons__item" data-name="search"><i class=" icon-search"></i> icon-search</div>
+
+		</div>
+
+
+
+		<h1>Usage</h1>
+		<pre><code>&lt;i class=&quot;icon-<span id="name">name</span>&quot;&gt;&lt;/i&gt;</code></pre>
+
+
+		<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>
+
+		<script>
+		(function() {
+			document.getElementById('icons').onclick = function(e) {
+				e = e || window.event;
+				var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
+				document.getElementById('name').innerHTML = name;
+				document.getElementById('name2').innerHTML = name;
+			}
+		})();
+		</script>
+	</body>
+</html>
diff --git a/src/less/icons/svg/check.svg b/src/less/icons/svg/check.svg
diff --git a/src/less/icons/svg/columns.svg b/src/less/icons/svg/columns.svg
diff --git a/src/less/icons/svg/cross.svg b/src/less/icons/svg/cross.svg
diff --git a/src/less/icons/svg/pencil.svg b/src/less/icons/svg/pencil.svg
diff --git a/src/less/icons/svg/plus.svg b/src/less/icons/svg/plus.svg
diff --git a/src/less/icons/svg/repeat.svg b/src/less/icons/svg/repeat.svg
diff --git a/src/less/icons/svg/search.svg b/src/less/icons/svg/search.svg
diff --git a/src/less/images-dark/w2ui-add.png b/src/less/images-dark/w2ui-add.png
diff --git a/src/less/images-dark/w2ui-bullet-black.png b/src/less/images-dark/w2ui-bullet-black.png
diff --git a/src/less/images-dark/w2ui-columns.png b/src/less/images-dark/w2ui-columns.png
diff --git a/src/less/images-dark/w2ui-delete.png b/src/less/images-dark/w2ui-delete.png
diff --git a/src/less/images-dark/w2ui-edit.png b/src/less/images-dark/w2ui-edit.png
diff --git a/src/less/images-dark/w2ui-enumlist.png b/src/less/images-dark/w2ui-enumlist.png
diff --git a/src/less/images-dark/w2ui-folder.png b/src/less/images-dark/w2ui-folder.png
diff --git a/src/less/images-dark/w2ui-msg-button.png b/src/less/images-dark/w2ui-msg-button.png
diff --git a/src/less/images-dark/w2ui-page.png b/src/less/images-dark/w2ui-page.png
diff --git a/src/less/images-dark/w2ui-reload.png b/src/less/images-dark/w2ui-reload.png
diff --git a/src/less/images-dark/w2ui-save.png b/src/less/images-dark/w2ui-save.png
diff --git a/src/less/images-dark/w2ui-search-clear.png b/src/less/images-dark/w2ui-search-clear.png
diff --git a/src/less/images-dark/w2ui-search-down.png b/src/less/images-dark/w2ui-search-down.png
diff --git a/src/less/images-dark/w2ui-sort-down.png b/src/less/images-dark/w2ui-sort-down.png
diff --git a/src/less/images-dark/w2ui-sort-up.png b/src/less/images-dark/w2ui-sort-up.png
diff --git a/src/less/images-dark/w2ui-tb-down.png b/src/less/images-dark/w2ui-tb-down.png
diff --git a/src/less/images/w2ui-add.png b/src/less/images/w2ui-add.png
diff --git a/src/less/images/w2ui-bullet-black.png b/src/less/images/w2ui-bullet-black.png
diff --git a/src/less/images/w2ui-columns.png b/src/less/images/w2ui-columns.png
diff --git a/src/less/images/w2ui-delete.png b/src/less/images/w2ui-delete.png
diff --git a/src/less/images/w2ui-edit.png b/src/less/images/w2ui-edit.png
diff --git a/src/less/images/w2ui-enumlist.png b/src/less/images/w2ui-enumlist.png
diff --git a/src/less/images/w2ui-folder.png b/src/less/images/w2ui-folder.png
diff --git a/src/less/images/w2ui-msg-button.png b/src/less/images/w2ui-msg-button.png
diff --git a/src/less/images/w2ui-page.png b/src/less/images/w2ui-page.png
diff --git a/src/less/images/w2ui-reload.png b/src/less/images/w2ui-reload.png
diff --git a/src/less/images/w2ui-save.png b/src/less/images/w2ui-save.png
diff --git a/src/less/images/w2ui-search-clear.png b/src/less/images/w2ui-search-clear.png
diff --git a/src/less/images/w2ui-search-down-2.png b/src/less/images/w2ui-search-down-2.png
diff --git a/src/less/images/w2ui-search-down.png b/src/less/images/w2ui-search-down.png
diff --git a/src/less/images/w2ui-sort-down.png b/src/less/images/w2ui-sort-down.png
diff --git a/src/less/images/w2ui-sort-up.png b/src/less/images/w2ui-sort-up.png
diff --git a/src/less/images/w2ui-tb-down.png b/src/less/images/w2ui-tb-down.png