mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

fix #348

Browse Source 
Add a proposition to replace the title attribute.
Signed-off-by:Guillaume Martigny <guillaume.martigny@gmail.com>
This commit is contained in:
Guillaume Martigny 2016-02-03 12:45:44 +01:00
parent 20ecfd431b
commit fb9c600b9f
4 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/spectrum/spectrum.css
View File

@ -13,7 +13,7 @@ License: MIT
*display: inline; *display: inline;
*zoom: 1; *zoom: 1;
/* https://github.com/bgrins/spectrum/issues/40 */ /* https://github.com/bgrins/spectrum/issues/40 */
z-index: 9999994; z-index: 20000;
overflow: hidden; overflow: hidden;
} }
.sp-container.sp-flat { .sp-container.sp-flat {

7
src/css/tools.css
View File

@ -159,3 +159,10 @@
); );
} }
.palette-value-displayer{
color: #FFF;
text-align: center;
clear: both;
padding-top: 3px;
min-height: 1em;
}

28
src/js/controller/PaletteController.js
View File

@ -1,7 +1,9 @@
(function () { (function () {
var ns = $.namespace('pskl.controller'); var ns = $.namespace('pskl.controller');
ns.PaletteController = function () {}; ns.PaletteController = function () {
this.displayer = $('.palette-value-displayer');
};
/** /**
* @public * @public
@ -27,17 +29,19 @@
tinycolor.setAlpha(1); tinycolor.setAlpha(1);
} }
}; };
// Initialize colorpickers: // Initialize colorpickers:
var colorPicker = $('#color-picker'); var colorPicker = $('#color-picker');
colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg)); colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg));
colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this)); 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'); var secondaryColorPicker = $('#secondary-color-picker');
secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg)); secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg));
secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this)); 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'); var swapColorsIcon = $('.swap-colors-button');
swapColorsIcon.click(this.swapColors.bind(this)); swapColorsIcon.click(this.swapColors.bind(this));
@ -106,11 +110,19 @@
} else { } else {
colorPicker.spectrum('set', color); colorPicker.spectrum('set', color);
} }
this.setTitleOnPicker_(color, colorPicker);
}; };
ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) { /**
var spectrumInputSelector = '.sp-replacer'; * @private
colorPicker.next(spectrumInputSelector).attr('title', title); */
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('');
}; };
})(); })();

1
src/templates/drawing-tools.html
View File

@ -33,6 +33,7 @@
rel="tooltip" rel="tooltip"
data-placement="right" data-placement="right"
></div> ></div>
<div class="palette-value-displayer"></div>
</div> </div>
</div> </div>
</div> </div>