diff --git a/web/app/3d/ctrl.js b/web/app/3d/ctrl.js
index 44988480..f8e73f18 100644
--- a/web/app/3d/ctrl.js
+++ b/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());
diff --git a/web/app/ui/toolbar.js b/web/app/ui/toolbar.js
index 327063b5..6d4f9e3e 100644
--- a/web/app/ui/toolbar.js
+++ b/web/app/ui/toolbar.js
@@ -14,21 +14,45 @@ export default function ToolBar() {
ToolBar.prototype.add = function(caption, icon, action) {
var btn = $('
', {
- '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 = $('
', {
+ 'class': 'tc-toolbar-btn',
+ css : {
+ 'border-radius' : '5px',
+ 'padding' : '5px'
+ }
+ });
+ btn.click(action);
+ btn.append($('', {
+ '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'
+ })
};
\ No newline at end of file
diff --git a/web/css/toolkit.css b/web/css/toolkit.css
index b985e43b..4baa269b 100644
--- a/web/css/toolkit.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 525066d8..84452808 100644
--- a/web/index.html
+++ b/web/index.html
@@ -10,6 +10,7 @@
+