From 30b30406fef359654adc3d7956a5f505ad5f9d17 Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Tue, 16 May 2017 16:11:26 +0200 Subject: [PATCH] Fixed some styling of buttons --- main.css | 1 - src/js/components/ImageEditor/ButtonMenu.js | 1 - src/js/components/ImageEditor/Canvas.js | 4 +-- src/js/components/ImageEditor/ImageEditor.js | 7 ++--- src/js/components/ImageEditor/RulerHandler.js | 4 +-- src/js/components/ImageEditor/TextButton.js | 7 +++-- src/js/components/config/button-menu.js | 27 ++++++++++++++++++- 7 files changed, 39 insertions(+), 12 deletions(-) diff --git a/main.css b/main.css index c9ba5c7..a320681 100644 --- a/main.css +++ b/main.css @@ -34,7 +34,6 @@ canvas { margin: 0 auto; - position: relative !important; max-width: 100% !important; height: auto !important; } diff --git a/src/js/components/ImageEditor/ButtonMenu.js b/src/js/components/ImageEditor/ButtonMenu.js index 46524e2..59a7857 100644 --- a/src/js/components/ImageEditor/ButtonMenu.js +++ b/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 diff --git a/src/js/components/ImageEditor/Canvas.js b/src/js/components/ImageEditor/Canvas.js index e434fd0..a8b6965 100644 --- a/src/js/components/ImageEditor/Canvas.js +++ b/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; }, diff --git a/src/js/components/ImageEditor/ImageEditor.js b/src/js/components/ImageEditor/ImageEditor.js index 6760222..2223dd0 100644 --- a/src/js/components/ImageEditor/ImageEditor.js +++ b/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()); }) diff --git a/src/js/components/ImageEditor/RulerHandler.js b/src/js/components/ImageEditor/RulerHandler.js index 939d4d6..91262dc 100644 --- a/src/js/components/ImageEditor/RulerHandler.js +++ b/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) diff --git a/src/js/components/ImageEditor/TextButton.js b/src/js/components/ImageEditor/TextButton.js index b045e68..645042a 100644 --- a/src/js/components/ImageEditor/TextButton.js +++ b/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); diff --git a/src/js/components/config/button-menu.js b/src/js/components/config/button-menu.js index 9347ea5..48e849a 100644 --- a/src/js/components/config/button-menu.js +++ b/src/js/components/config/button-menu.js @@ -1,5 +1,30 @@ 'use strict'; module.exports = { - margin: 5, + + 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', + }, + } + };