diff --git a/www/kanban/app-kanban.less b/www/kanban/app-kanban.less index d871a45ae..8d833237a 100644 --- a/www/kanban/app-kanban.less +++ b/www/kanban/app-kanban.less @@ -59,6 +59,9 @@ // make a numbered class selector for each color .cp-kanban-palette-color@{index}{ background-color: @color !important; + &.cp-kanban-palette-board { + background-color: @color !important; + } &.kanban-board-inner { background-color: fade(@color, 50%) !important; } @@ -73,6 +76,9 @@ // background-color: @color !important; // } .cp-kanban-palette-color@{index}{ + &.cp-kanban-palette-card { + background-color: @color !important; + } &.kanban-item { background-color: @color !important; } diff --git a/www/kanban/inner.js b/www/kanban/inner.js index c3de0e0e8..75e01e658 100644 --- a/www/kanban/inner.js +++ b/www/kanban/inner.js @@ -363,6 +363,18 @@ define([ var palette = ['']; for (var i=1; i<=8; i++) { palette.push('color'+i); } var selectedColor = ''; + var resetThemeClass = function () { + $colors.find('.cp-kanban-palette').each(function (i, el) { + var $c = $(el); + $c.removeClass('cp-kanban-palette-card'); + $c.removeClass('cp-kanban-palette-board'); + if (isBoard) { + $c.addClass('cp-kanban-palette-board'); + } else { + $c.addClass('cp-kanban-palette-card'); + } + }); + }; palette.forEach(function (color) { var $color = $(h('span.cp-kanban-palette.fa')); $color.addClass('cp-kanban-palette-'+(color || 'nocolor')); @@ -383,6 +395,7 @@ define([ return selectedColor; }, setValue: function (color) { + resetThemeClass(); $colors.find('.cp-kanban-palette').removeClass('fa-check'); var $col = $colors.find('.cp-kanban-palette-'+(color || 'nocolor')); $col.addClass('fa-check');