summaryrefslogtreecommitdiffstats
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/components/cards/cardDetails.jade35
-rw-r--r--client/components/cards/cardDetails.js44
2 files changed, 41 insertions, 38 deletions
diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade
index 4838d82c..c1e771cb 100644
--- a/client/components/cards/cardDetails.jade
+++ b/client/components/cards/cardDetails.jade
@@ -340,34 +340,13 @@ template(name="setCardColorPopup")
p.quiet
span.clearfix
label {{_ "select-color"}}
- select.js-select-colors
- option(value="white") {{{_'color-white'}}}
- option(value="green") {{{_'color-green'}}}
- option(value="yellow") {{{_'color-yellow'}}}
- option(value="orange") {{{_'color-orange'}}}
- option(value="red") {{{_'color-red'}}}
- option(value="purple") {{{_'color-purple'}}}
- option(value="blue") {{{_'color-blue'}}}
- option(value="sky") {{{_'color-sky'}}}
- option(value="lime") {{{_'color-lime'}}}
- option(value="pink") {{{_'color-pink'}}}
- option(value="black") {{{_'color-black'}}}
- option(value="silver") {{{_'color-silver'}}}
- option(value="peachpuff") {{{_'color-peachpuff'}}}
- option(value="crimson") {{{_'color-crimson'}}}
- option(value="plum") {{{_'color-plum'}}}
- option(value="darkgreen") {{{_'color-darkgreen'}}}
- option(value="slateblue") {{{_'color-slateblue'}}}
- option(value="magenta") {{{_'color-magenta'}}}
- option(value="gold") {{{_'color-gold'}}}
- option(value="navy") {{{_'color-navy'}}}
- option(value="gray") {{{_'color-gray'}}}
- option(value="saddlebrown") {{{_'color-saddlebrown'}}}
- option(value="paleturquoise") {{{_'color-paleturquoise'}}}
- option(value="mistyrose") {{{_'color-mistyrose'}}}
- option(value="indigo") {{{_'color-indigo'}}}
- .edit-controls.clearfix
- button.primary.confirm.js-submit {{_ 'save'}}
+ form.edit-label
+ .palette-colors: each colors
+ span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
+ if(isSelected color)
+ i.fa.fa-check
+ button.primary.confirm.js-submit {{_ 'save'}}
+ button.js-remove-color.negate.wide.right {{_ 'unset-color'}}
template(name="cardDeletePopup")
p {{_ "card-delete-pop"}}
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index 7883f129..c936f0f4 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -1,6 +1,11 @@
const subManager = new SubsManager();
const { calculateIndexData, enableClickOnTouch } = Utils;
+let cardColors;
+Meteor.startup(() => {
+ cardColors = Cards.simpleSchema()._schema['color'].allowedValues;
+});
+
BlazeComponent.extendComponent({
mixins() {
return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar];
@@ -585,17 +590,36 @@ Template.copyChecklistToManyCardsPopup.events({
},
});
-Template.setCardColorPopup.events({
- 'click .js-submit' () {
- // XXX We should *not* get the currentCard from the global state, but
- // instead from a “component” state.
- const card = Cards.findOne(Session.get('currentCard'));
- const colorSelect = $('.js-select-colors')[0];
- newColor = colorSelect.options[colorSelect.selectedIndex].value;
- card.setColor(newColor);
- Popup.close();
+BlazeComponent.extendComponent({
+ onCreated() {
+ this.currentCard = this.currentData();
+ this.currentColor = new ReactiveVar(this.currentCard.color);
},
-});
+
+ colors() {
+ return cardColors.map((color) => ({ color, name: '' }));
+ },
+
+ isSelected(color) {
+ return this.currentColor.get() === color;
+ },
+
+ events() {
+ return [{
+ 'click .js-palette-color'() {
+ this.currentColor.set(this.currentData().color);
+ },
+ 'click .js-submit' () {
+ this.currentCard.setColor(this.currentColor.get());
+ Popup.close();
+ },
+ 'click .js-remove-color'() {
+ this.currentCard.setColor(null);
+ Popup.close();
+ },
+ }];
+ },
+}).register('setCardColorPopup');
BlazeComponent.extendComponent({
onCreated() {