icons for save/upload etc...

web/app/3d/ctrl.js

@@ -38,6 +38,7 @@ function UI(app) {
 
   this.craftToolBar = this.createCraftToolBar();
   this.createBoolToolBar(this.craftToolBar.node.position().top + this.craftToolBar.node.height() + 20);
+  this.createMiscToolBar();
   
   var ui = this;
   
@@ -168,6 +169,17 @@ UI.prototype.createCraftToolBar = function () {
   return toolBar;
 };
 
+UI.prototype.createMiscToolBar = function () {
+  var toolBar = new ToolBar();
+  toolBar.addFa('floppy-o', () => this.app.sketchFace());
+  toolBar.addFa('upload', () => this.app.sketchFace());
+  toolBar.addFa('refresh', () => this.app.sketchFace());
+  toolBar.addFa('square-o', () => this.app.sketchFace());
+  $('body').append(toolBar.node);
+  toolBar.node.css({left : '', right: '20px', 'font-size': '16px'});
+  return toolBar;
+};
+
 UI.prototype.createBoolToolBar = function(vertPos) {
   var toolBar = new ToolBar();
   toolBar.add('Intersection', 'img/3d/intersection96.png', () => this.app.sketchFace());

web/app/ui/toolbar.js

@@ -14,21 +14,45 @@ export default function ToolBar() {
 
 ToolBar.prototype.add = function(caption, icon, action) {
   var btn = $('<div>', {
-    'class': 'tc-toolbar-btn',
+    'class': 'tc-toolbar-btn tc-squeezed-text',
     text : caption,
-    css: {
+    css: ToolBar.buttonCss({
       'background-image': 'url('+icon+')',
       'background-repeat': 'no-repeat',
       'background-position-x': 'center',
       'background-position-y': 'top',
-      'background-size': '48px 48px',
-      'border-radius' : '5px',
-      'width': '53px',
-      'padding-top' : '48px',
-      'margin-top' : '5px'
-    }
+      'background-size': '48px 48px'
+    })
   });
   btn.click(action);
   this.node.append(btn);
   return btn;
+};
+
+ToolBar.prototype.addFa = function(faIcon, action) {
+  var btn = $('<div>', {
+    'class': 'tc-toolbar-btn',
+    css : {
+      'border-radius' : '5px',
+      'padding' : '5px'
+    }
+  });
+  btn.click(action);
+  btn.append($('<i>', {
+    'class' : 'fa fa-' + faIcon,
+    css: {
+      'vertical-align': 'middle'
+    }
+  }));
+  this.node.append(btn);
+  return btn;
+};
+
+ToolBar.buttonCss = function(css) {
+  return Object.assign(css, {
+    'border-radius' : '5px',
+    'width': '53px',
+    'padding-top' : '48px',
+    'margin-top' : '5px'
+  })
 };

web/css/toolkit.css

@@ -166,9 +166,6 @@ input[type=checkbox] {
     color: #fff;
 }
 .tc-toolbar-btn {
-    white-space: nowrap;
-    font-size: 12px;
-    font-family:  "Arial Narrow", Arial, sans-serif;
     color: #555;
     text-align: center;
     user-select: none;
@@ -176,3 +173,9 @@ input[type=checkbox] {
     -moz-user-select: none;
     -ms-user-select: none;
 }
+
+.tc-squeezed-text {
+    white-space: nowrap;
+    font-size: 12px;
+    font-family:  "Arial Narrow", Arial, sans-serif;
+}

web/index.html

@@ -10,6 +10,7 @@
   </style>
   <link rel="stylesheet" href="css/toolkit.css">
   <link rel="stylesheet" href="css/app3d.css">
+  <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
 
 
   <script src="lib/jquery-2.1.0.min.js"></script>