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 @@ +