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 : changed classnames used for primary and secondary color highlight in palette

Browse Source
This commit is contained in:
jdescottes
2014-05-08 22:03:19 +02:00
parent 3969867dfa
commit 453fbcf88e
2 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/css/toolbox-palettes-list.css
View File

@@ -41,8 +41,8 @@
width: 29px width: 29px
} }
.palettes-list-color.primary:before, .palettes-list-primary-color:before,
.palettes-list-color.secondary:before { .palettes-list-secondary-color:before {
content: ""; content: "";
position: absolute; position: absolute;
bottom: 1px; bottom: 1px;
@@ -54,13 +54,13 @@
height: 0px; height: 0px;
} }
.palettes-list-color.primary:before { .palettes-list-primary-color:before {
left: 1px; left: 1px;
border-right-color: transparent; border-right-color: transparent;
} }
.palettes-list-color.secondary:before { .palettes-list-secondary-color:before {
right: 1px; right: 1px;
border-left-color: transparent; border-left-color: transparent;
} }

32
src/js/controller/PalettesListController.js
View File

@@ -1,6 +1,9 @@
(function () { (function () {
var ns = $.namespace('pskl.controller'); var ns = $.namespace('pskl.controller');
var PRIMARY_COLOR_CLASSNAME = 'palettes-list-primary-color';
var SECONDARY_COLOR_CLASSNAME = 'palettes-list-secondary-color';
ns.PalettesListController = function (paletteController, usedColorService) { ns.PalettesListController = function (paletteController, usedColorService) {
this.usedColorService = usedColorService; this.usedColorService = usedColorService;
this.paletteController = paletteController; this.paletteController = paletteController;
@@ -110,27 +113,30 @@
} }
}; };
ns.PalettesListController.prototype.highlightSelectedColors = function (event) { ns.PalettesListController.prototype.highlightSelectedColors = function () {
this.removeClass_('primary', '.palettes-list-color'); this.removeClass_(PRIMARY_COLOR_CLASSNAME);
this.removeClass_('secondary', '.palettes-list-color'); this.removeClass_(SECONDARY_COLOR_CLASSNAME);
var secondaryColor = this.paletteController.getSecondaryColor();
var colorContainer = this.colorListContainer_.querySelector('.palettes-list-color[data-color="'+secondaryColor+'"]'); var colorContainer = this.getColorContainer_(this.paletteController.getSecondaryColor());
if (colorContainer) { if (colorContainer) {
colorContainer.classList.remove('primary'); colorContainer.classList.remove(PRIMARY_COLOR_CLASSNAME);
colorContainer.classList.add('secondary'); colorContainer.classList.add(SECONDARY_COLOR_CLASSNAME);
} }
var primaryColor = this.paletteController.getPrimaryColor(); colorContainer = this.getColorContainer_(this.paletteController.getPrimaryColor());
colorContainer = this.colorListContainer_.querySelector('.palettes-list-color[data-color="'+primaryColor+'"]');
if (colorContainer) { if (colorContainer) {
colorContainer.classList.remove('secondary'); colorContainer.classList.remove(SECONDARY_COLOR_CLASSNAME);
colorContainer.classList.add('primary'); colorContainer.classList.add(PRIMARY_COLOR_CLASSNAME);
} }
}; };
ns.PalettesListController.prototype.removeClass_ = function (cssClass, selector) { ns.PalettesListController.prototype.getColorContainer_ = function (color) {
var element = document.querySelector(selector + '.' + cssClass); return this.colorListContainer_.querySelector('.palettes-list-color[data-color="'+color+'"]');
};
ns.PalettesListController.prototype.removeClass_ = function (cssClass) {
var element = document.querySelector('.' + cssClass);
if (element) { if (element) {
element.classList.remove(cssClass); element.classList.remove(cssClass);
} }