From fb9c600b9f4ad13291958ebcbb3ea2142b5a9f26 Mon Sep 17 00:00:00 2001 From: Guillaume Martigny Date: Wed, 3 Feb 2016 12:45:44 +0100 Subject: [PATCH 1/4] fix #348 Add a proposition to replace the title attribute. Signed-off-by:Guillaume Martigny --- src/css/spectrum/spectrum.css | 2 +- src/css/tools.css | 7 +++++++ src/js/controller/PaletteController.js | 28 ++++++++++++++++++-------- src/templates/drawing-tools.html | 1 + 4 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/css/spectrum/spectrum.css b/src/css/spectrum/spectrum.css index 850e193..c21fad6 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: 9999994; + z-index: 20000; overflow: hidden; } .sp-container.sp-flat { diff --git a/src/css/tools.css b/src/css/tools.css index 0b13b42..1856542 100644 --- a/src/css/tools.css +++ b/src/css/tools.css @@ -159,3 +159,10 @@ ); } +.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 9bc45ff..c44e999 100644 --- a/src/js/controller/PaletteController.js +++ b/src/js/controller/PaletteController.js @@ -1,7 +1,9 @@ (function () { var ns = $.namespace('pskl.controller'); - ns.PaletteController = function () {}; + ns.PaletteController = function () { + this.displayer = $('.palette-value-displayer'); + }; /** * @public @@ -27,17 +29,19 @@ tinycolor.setAlpha(1); } }; - + // Initialize colorpickers: var colorPicker = $('#color-picker'); colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg)); colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this)); - this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker); + colorPicker.parent().mouseenter({isPrimary : true}, $.proxy(this.showValueDisplayer_, this)) + .mouseleave($.proxy(this.hideValueDisplayer_, this)); var secondaryColorPicker = $('#secondary-color-picker'); secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg)); secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this)); - this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker); + secondaryColorPicker.parent().mouseenter({isPrimary : false}, $.proxy(this.showValueDisplayer_, this)) + .mouseleave($.proxy(this.hideValueDisplayer_, this)); var swapColorsIcon = $('.swap-colors-button'); swapColorsIcon.click(this.swapColors.bind(this)); @@ -106,11 +110,19 @@ } else { colorPicker.spectrum('set', color); } - this.setTitleOnPicker_(color, colorPicker); }; - ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) { - var spectrumInputSelector = '.sp-replacer'; - colorPicker.next(spectrumInputSelector).attr('title', title); + /** + * @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(''); }; })(); diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html index 638e664..f125481 100644 --- a/src/templates/drawing-tools.html +++ b/src/templates/drawing-tools.html @@ -33,6 +33,7 @@ rel="tooltip" data-placement="right" > +
From 9bd3bf4adf63d2a7471a04a3f9ba4555602280c2 Mon Sep 17 00:00:00 2001 From: Guillaume Martigny Date: Wed, 3 Feb 2016 14:17:12 +0100 Subject: [PATCH 2/4] code formating Signed-off-by:Guillaume Martigny --- src/js/controller/PaletteController.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/js/controller/PaletteController.js b/src/js/controller/PaletteController.js index c44e999..8170bdc 100644 --- a/src/js/controller/PaletteController.js +++ b/src/js/controller/PaletteController.js @@ -2,7 +2,7 @@ var ns = $.namespace('pskl.controller'); ns.PaletteController = function () { - this.displayer = $('.palette-value-displayer'); + this.displayer = $('.palette-value-displayer'); }; /** @@ -29,7 +29,7 @@ tinycolor.setAlpha(1); } }; - + // Initialize colorpickers: var colorPicker = $('#color-picker'); colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg)); @@ -116,7 +116,9 @@ * @private */ ns.PaletteController.prototype.showValueDisplayer_ = function (evt) { - var color = evt.data.isPrimary ? pskl.app.selectedColorsService.getPrimaryColor() : pskl.app.selectedColorsService.getSecondaryColor(); + var color = evt.data.isPrimary ? + pskl.app.selectedColorsService.getPrimaryColor() : + pskl.app.selectedColorsService.getSecondaryColor(); this.displayer.html(color); }; /** From 7088d9aa332826f4899ed523425d76aba11cda88 Mon Sep 17 00:00:00 2001 From: GMartigny Date: Sat, 5 Mar 2016 17:23:25 +0100 Subject: [PATCH 3/4] Revert modifications after discussion --- src/css/spectrum/spectrum.css | 2 +- src/css/tools.css | 7 ------- src/js/controller/PaletteController.js | 28 +++++++------------------- src/templates/drawing-tools.html | 1 - 4 files changed, 8 insertions(+), 30 deletions(-) diff --git a/src/css/spectrum/spectrum.css b/src/css/spectrum/spectrum.css index c21fad6..850e193 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 1856542..0b13b42 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 8170bdc..9bc45ff 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 f125481..638e664 100644 --- a/src/templates/drawing-tools.html +++ b/src/templates/drawing-tools.html @@ -33,7 +33,6 @@ rel="tooltip" data-placement="right" > -
From 14fde4f8a07165dbc7c860dd9ab9c5488fa67c6f Mon Sep 17 00:00:00 2001 From: GMartigny Date: Sat, 5 Mar 2016 17:31:56 +0100 Subject: [PATCH 4/4] Multi-line title on color selector --- src/js/controller/PaletteController.js | 5 +++-- src/templates/drawing-tools.html | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/js/controller/PaletteController.js b/src/js/controller/PaletteController.js index 9bc45ff..2a2090c 100644 --- a/src/js/controller/PaletteController.js +++ b/src/js/controller/PaletteController.js @@ -110,7 +110,8 @@ }; ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) { - var spectrumInputSelector = '.sp-replacer'; - colorPicker.next(spectrumInputSelector).attr('title', title); + var parent = colorPicker.parent(); + title = parent.data('initial-title') + '
' + title; + parent.attr('data-original-title', title); }; })(); diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html index 638e664..003ab3a 100644 --- a/src/templates/drawing-tools.html +++ b/src/templates/drawing-tools.html @@ -13,7 +13,7 @@
@@ -21,7 +21,7 @@