Set the card color with the color picker

When triggered from the hamburger

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"}}

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() {

i18n/en.i18n.json

@@ -192,6 +192,7 @@
     "color-slateblue": "slateblue",
     "color-white": "white",
     "color-yellow": "yellow",
+    "unset-color": "Unset",
     "comment": "Comment",
     "comment-placeholder": "Write Comment",
     "comment-only": "Comment only",