add cell-ui and choose icons

Author: david-hodgetts

public/css/style.css

@@ -3,7 +3,6 @@ body{
 }
 h2, h3 { display: inline;}
 .grid { width: 450px; max-width: 450px; position: absolute}
-#grid_hint{z-index: 1}
 #editor { position: absolute; left: 50%; }
 #dialog {  
     position: absolute;
@@ -41,7 +40,8 @@ h2, h3 { display: inline;}
          left: 0;
          z-index: 999;
 	 background-color: rgba(100, 100, 100, 0.5); }
-.cell { width: 150px;  height: 150px; position:absolute}
+.cell, .cellUi { width: 150px;  height: 150px; position:absolute}
+.cellUi > span{ position: relative; margin: 5px; float: right }
 .hint { width: 148px;  height: 148px; position:absolute;border: 1px solid rgba(0,0,0,0);}
 .visible-grid, .visible-cell{ border: 1px solid rgba(200, 200, 200, 0.5); }
 .code_invalid { border: solid rgb(255, 0, 0); }

public/exquis.js

@@ -9,7 +9,8 @@ define(["iter2d", "csshelper"], function(iter2d, csshelper){
             cell = {};
 
         cell.canvasAnim = makeCanvasAnimation(context, animationCode);
-        cell.hint = makeHint(row, col, height, width);
+        cell.hint = createCellDiv("hint", row, col, height, width);
+        cell.ui = makeCellUi(row, col, height, width);
 
         return cell;
     };
@@ -36,7 +37,7 @@ define(["iter2d", "csshelper"], function(iter2d, csshelper){
                     return;
                 }
 
-                // force reset matrix
+                // force reset matrix/
                 context.setTransform(1, 0, 0, 1, 0, 0);
                 this.currentAnimation.draw(context, borders, this.lib);
             },
@@ -76,17 +77,34 @@ define(["iter2d", "csshelper"], function(iter2d, csshelper){
         return canvas;
     };
 
-    var makeHint = function(row, col, height, width){
-        var gridHint = document.createElement('div');
-        gridHint.id = "hint-" + row + "-" + col;
-        gridHint.className = "hint";
-        gridHint.style.top = (height * row)+"px";
-        gridHint.style.left = (width * col)+"px";
-
-        document.getElementById('dashboard').appendChild(gridHint);
-        return gridHint;
+    var createCellDiv = function(className, row, col, height, width){
+        var cellDiv = document.createElement('div');
+        cellDiv.id = className + "-" + row + "-" + col;
+        cellDiv.className = className;
+        cellDiv.style.top = (height * row)+"px";
+        cellDiv.style.left = (width * col)+"px";
+        
+        document.getElementById('dashboard').appendChild(cellDiv);
+        return cellDiv;
     };
 
+
+    var makeIcon = function(classNames){
+        var icon = document.createElement('span');
+        icon.className = classNames;
+        return icon;
+    };
+    
+    var makeCellUi = function(row, col, height, width){
+        var cellUi = createCellDiv("cellUi", row, col, height, width);
+
+        var edit = makeIcon("fa fa-pencil-square-o fa-2x");
+        var loadAnimation = makeIcon("fa fa-folder-open-o fa-2x");
+       
+        cellUi.appendChild(loadAnimation);
+        cellUi.appendChild(edit);
+    };
+    
     var addHintListeners = function(cells){
         var showGridHint = function(show){
 

public/fonts/FontAwesome.otf

@@ -6,6 +6,7 @@
     <!-- Mobile viewport optimized: h5bp.com/viewport -->
     <meta name="viewport" content="width=device-width">
     <link href="/css/style.css" rel="stylesheet">
+    <link href="/css/font-awesome.min.css" rel="stylesheet">
     <script data-main="/main.js" src="/lib/require.js"></script>
     <script src="/bibs/require-config.js"></script>
     <script src="/bibs/include-scripts.js"></script>