diff --git a/src/css/spectrum/spectrum.css b/src/css/spectrum/spectrum.css index c21fad6a..850e1930 100644 --- a/src/css/spectrum/spectrum.css +++ b/src/css/spectrum/spectrum.css @@ -13,7 +13,7 @@ License: MIT *display: inline; *zoom: 1; /* https://github.com/bgrins/spectrum/issues/40 */ - z-index: 20000; + z-index: 9999994; overflow: hidden; } .sp-container.sp-flat { diff --git a/src/css/tools.css b/src/css/tools.css index 18565425..0b13b42b 100644 --- a/src/css/tools.css +++ b/src/css/tools.css @@ -159,10 +159,3 @@ ); } -.palette-value-displayer{ - color: #FFF; - text-align: center; - clear: both; - padding-top: 3px; - min-height: 1em; -} diff --git a/src/js/controller/PaletteController.js b/src/js/controller/PaletteController.js index 8170bdcc..9bc45fff 100644 --- a/src/js/controller/PaletteController.js +++ b/src/js/controller/PaletteController.js @@ -1,9 +1,7 @@ (function () { var ns = $.namespace('pskl.controller'); - ns.PaletteController = function () { - this.displayer = $('.palette-value-displayer'); - }; + ns.PaletteController = function () {}; /** * @public @@ -34,14 +32,12 @@ var colorPicker = $('#color-picker'); colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg)); colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this)); - colorPicker.parent().mouseenter({isPrimary : true}, $.proxy(this.showValueDisplayer_, this)) - .mouseleave($.proxy(this.hideValueDisplayer_, this)); + this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker); var secondaryColorPicker = $('#secondary-color-picker'); secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg)); secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this)); - secondaryColorPicker.parent().mouseenter({isPrimary : false}, $.proxy(this.showValueDisplayer_, this)) - .mouseleave($.proxy(this.hideValueDisplayer_, this)); + this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker); var swapColorsIcon = $('.swap-colors-button'); swapColorsIcon.click(this.swapColors.bind(this)); @@ -110,21 +106,11 @@ } else { colorPicker.spectrum('set', color); } + this.setTitleOnPicker_(color, colorPicker); }; - /** - * @private - */ - ns.PaletteController.prototype.showValueDisplayer_ = function (evt) { - var color = evt.data.isPrimary ? - pskl.app.selectedColorsService.getPrimaryColor() : - pskl.app.selectedColorsService.getSecondaryColor(); - this.displayer.html(color); - }; - /** - * @private - */ - ns.PaletteController.prototype.hideValueDisplayer_ = function (evt) { - this.displayer.html(''); + ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) { + var spectrumInputSelector = '.sp-replacer'; + colorPicker.next(spectrumInputSelector).attr('title', title); }; })(); diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html index f1254817..638e6646 100644 --- a/src/templates/drawing-tools.html +++ b/src/templates/drawing-tools.html @@ -33,7 +33,6 @@ rel="tooltip" data-placement="right" > -