Add tool icons

client-data/board.css

@@ -74,6 +74,14 @@ html, body, svg {
 	transition-duration:0.5s;
 }
 
+#menu .tool-icon {
+	padding:3px;
+	width:10px;
+}
+#menu .tool-name {
+	margin-left: 20px;
+}
+
 input {
 	font-size:16px;
 }

client-data/board.html

@@ -7,6 +7,7 @@
 	<link rel="icon" type="image/png" href="favicon.ico" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<link rel="stylesheet" type="text/css" href="board.css" />
+	<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css" />
 	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
 	<script type="text/javascript" src="/js/jscolor/jscolor.js"></script>
 </head>
@@ -28,7 +29,7 @@
 	<div id="menuItems">
 		<h3>Tools</h3>
 		<ul id="tools">
-			<li class="tool">Tool template</li>
+			<li class="tool"><i class="tool-icon fa"></i><span class="tool-name">Tool template</span></li>
 		</ul>
 
 		<h3>Configuration</h3>

client-data/js/board.js

@@ -38,14 +38,15 @@ Tools.socket.emit("getboard");
 
 Tools.HTML = {
 	template : new Minitpl("#tools > .tool"),
-	addTool : function(toolName) {
+	addTool : function(toolName, toolIcon) {
 		var callback = function () {
 			Tools.change(toolName);
 		};
 		return this.template.add(function (elem) {
 				elem.addEventListener("click", callback);
 				elem.id = "toolID-"+toolName;
-				return toolName;
+				elem.getElementsByClassName("tool-name")[0].textContent = toolName;
+				elem.getElementsByClassName("tool-icon")[0].className += " " + toolIcon;
 			}
 		);
 	},
@@ -84,7 +85,7 @@ Tools.add = function (newTool) {
 	}
 
 	//Add the tool to the GUI
-	Tools.HTML.addTool(newTool.name);
+	Tools.HTML.addTool(newTool.name, newTool.icon);
 
 	//There may be pending messages for the tool
 	var pending = Tools.pendingMessages[newTool.name];

client-data/js/minitpl.js

@@ -37,7 +37,7 @@ function Minitpl(elem, data) {
 
 function transform (element, transformer) {
 	if (typeof(transformer)==="function") {
-		element.textContent = transformer(element);
+		transformer(element);
 	} else {
 		element.textContent = transformer;
 	}

client-data/tools/eraser/eraser.js

@@ -70,6 +70,7 @@
 
 	Tools.add({ //The new tool
 		"name" : "Eraser",
+		"icon" : "fa-eraser",
 		"listeners" : {
 			"press" : startErasing,
 			"move" : erase,

client-data/tools/hand/hand.js

@@ -46,6 +46,7 @@
 
 	Tools.add({ //The new tool
 	 	"name" : "Hand",
+	 	"icon" : "fa-arrows",
 	 	"listeners" : {
 	 		"press" : press,
 	 		"move" : move,

client-data/tools/pencil/pencil.js

@@ -159,6 +159,7 @@
 
 	Tools.add({ //The new tool
 	 	"name" : "Pencil",
+	 	"icon" : "fa-pencil",
 	 	"listeners" : {
 	 		"press" : startLine,
 	 		"move" : continueLine,

client-data/tools/text/text.js

@@ -129,6 +129,7 @@
 
 	Tools.add({ //The new tool
 	 	"name" : "Text",
+	 	"icon" : "fa-font",
 	 	"listeners" : {
 	 		"press" : clickHandler,
 	 	},

package.json

@@ -3,7 +3,7 @@
       "collaborative",
       "whiteboard"
    ],
-   "version": "0.2.1-8",
+   "version": "0.2.1-9",
    "dependencies": {
       "node-static": "0.7.x",
       "socket.io": "0.9.x",