Fixed some styling of buttons

main.css

@@ -34,7 +34,6 @@
 
 canvas {
     margin: 0 auto;
-    position: relative !important;
     max-width: 100% !important;
     height: auto !important;
 }

src/js/components/ImageEditor/ButtonMenu.js

@@ -12,7 +12,6 @@ var config = require('../config');
 function ButtonMenu(canvas, settings) {
     var _textButtons = [];
     var _width = 0;
-    settings = $.extend({}, config.buttonMenu, settings);
 
     /**
      * Calculates the width of all contained items

src/js/components/ImageEditor/Canvas.js

@@ -60,9 +60,9 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
      * Gets the menu for this instance
      * @returns {ButtonMenu}
      */
-    getButtonMenu: function () {
+    getButtonMenu: function (settings) {
         if (!this.__buttonMenu) {
-            this.__buttonMenu = new ButtonMenu(this);
+            this.__buttonMenu = new ButtonMenu(this, settings);
         }
         return this.__buttonMenu;
     },

src/js/components/ImageEditor/ImageEditor.js

@@ -2,6 +2,7 @@
 
 var Canvas = require('./Canvas');
 var util = require('../util');
+var config = require('../config');
 
 function ImageEditor(canvasId, args) {
     var _canvas;
@@ -24,12 +25,12 @@ function ImageEditor(canvasId, args) {
      */
     $(function () {
         if (_canvas.__type === 'canvas') {
-            _canvas.getButtonMenu()
+            _canvas.getButtonMenu(config.buttonMenu.canvas)
                 .addItem('3D', function () {})
-                .addItem('Flat', function () {})
+                .addItem('Flat', function () {}, true)
                 .render();
         } else {
-            _canvas.getButtonMenu()
+            _canvas.getButtonMenu(config.buttonMenu.wallpaper)
                 .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () {
                     _canvas.getViewport().getGores().enable(this.isActive());
                 })

src/js/components/ImageEditor/RulerHandler.js

@@ -77,13 +77,13 @@ function RulerHandler(viewport) {
         viewport.canvas.add(_lines.h);
         viewport.canvas.add(_lines.v);
 
-        _rect.h = new TextButton('H', config.rulerHandle.text)
+        _rect.h = new TextButton('H', config.rulerHandle)
             .set(config.rulerHandle.h(_lines, bounds))
             .addTo(viewport.canvas)
             .on('moving', Event.onMove)
             .trigger('moving');
 
-        _rect.v = new TextButton('V', config.rulerHandle.text)
+        _rect.v = new TextButton('V', config.rulerHandle)
             .set(config.rulerHandle.v(_lines, bounds))
             .addTo(viewport.canvas)
             .on('moving', Event.onMove)

src/js/components/ImageEditor/TextButton.js

@@ -13,9 +13,11 @@ function TextButton(text, settings) {
     var _callback = null;
     var _rect = null;
     var _text = null;
+    var width = settings.rect ? settings.rect.width : 0;
+    var height = settings.rect ? settings.rect.height : 0;
 
-    var _rectSettings = $.extend({}, config.textButton.rect(settings.width, settings.height));
-    var _textSettings = $.extend({}, config.textButton.text, settings, {
+    var _rectSettings = $.extend({}, config.textButton.rect(width, height), settings.rect);
+    var _textSettings = $.extend({}, config.textButton.text, settings.text, {
         text: Array.isArray(text) ? text[0] : text,
         textActive: Array.isArray(text) ? text[1] : text,
     });
@@ -57,6 +59,7 @@ function TextButton(text, settings) {
 
     function handleMouseDown(e) {
         _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
+        _text.setFill(_textSettings[this.isActive() ? 'activeFill' : 'fill']);
         this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
         _callback.call(this, e);
 

src/js/components/config/button-menu.js

@@ -1,5 +1,30 @@
 'use strict';
 
 module.exports = {
+
+    canvas: {
+        margin: 0,
+        text: {
+            fill: '#ffffff',
+            activeFill: '#000000',
+        },
+        rect: {
+            fill: '#444444',
+            activeFill: '#ffffff',
+            width: 100,
+        },
+    },
+
+    wallpaper: {
         margin: 5,
+        text: {
+            fill: '#ffffff',
+            activeFill: '#ffffff',
+        },
+        rect: {
+            fill: '#000000',
+            activeFill: '#444444',
+        },
+    }
+
 };