color: add option in hamburger to change the card color

Currently only dropdown, no palette

Fixes: #428

client/components/cards/cardDetails.jade

@@ -234,6 +234,7 @@ template(name="cardDetailsActionsPopup")
       li: a.js-due-date {{_ 'editCardDueDatePopup-title'}}
       li: a.js-end-date {{_ 'editCardEndDatePopup-title'}}
       li: a.js-spent-time {{_ 'editCardSpentTimePopup-title'}}
+      li: a.js-set-card-color {{_ 'setCardColor-title'}}
     hr
     ul.pop-over-list
       li: a.js-move-card-to-top {{_ 'moveCardToTop-title'}}
@@ -335,7 +336,38 @@ template(name="cardMorePopup")
     span.date(title=card.createdAt) {{ moment createdAt 'LLL' }}
     a.js-delete(title="{{_ 'card-delete-notice'}}") {{_ 'delete'}}
 
-
+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'}}
 
 template(name="cardDeletePopup")
   p {{_ "card-delete-pop"}}

client/components/cards/cardDetails.js

@@ -338,6 +338,7 @@ Template.cardDetailsActionsPopup.events({
   'click .js-move-card': Popup.open('moveCard'),
   'click .js-copy-card': Popup.open('copyCard'),
   'click .js-copy-checklist-cards': Popup.open('copyChecklistToManyCards'),
+  'click .js-set-card-color': Popup.open('setCardColor'),
   'click .js-move-card-to-top' (evt) {
     evt.preventDefault();
     const minOrder = _.min(this.list().cards(this.swimlaneId).map((c) => c.sort));
@@ -584,6 +585,18 @@ 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();

i18n/en.i18n.json

@@ -169,13 +169,28 @@
     "close-board-pop": "You will be able to restore the board by clicking the “Archive” button from the home header.",
     "color-black": "black",
     "color-blue": "blue",
+    "color-crimson": "crimson",
+    "color-darkgreen": "darkgreen",
+    "color-gold": "gold",
+    "color-gray": "gray",
     "color-green": "green",
+    "color-indigo": "indigo",
     "color-lime": "lime",
+    "color-magenta": "magenta",
+    "color-mistyrose": "mistyrose",
+    "color-navy": "navy",
     "color-orange": "orange",
+    "color-paleturquoise": "paleturquoise",
+    "color-peachpuff": "peachpuff",
     "color-pink": "pink",
+    "color-plum": "plum",
     "color-purple": "purple",
     "color-red": "red",
+    "color-saddlebrown": "saddlebrown",
+    "color-silver": "silver",
     "color-sky": "sky",
+    "color-slateblue": "slateblue",
+    "color-white": "white",
     "color-yellow": "yellow",
     "comment": "Comment",
     "comment-placeholder": "Write Comment",
@@ -501,6 +516,7 @@
     "card-end-on": "Ends on",
     "editCardReceivedDatePopup-title": "Change received date",
     "editCardEndDatePopup-title": "Change end date",
+    "setCardColor-title": "Set color",
     "assigned-by": "Assigned By",
     "requested-by": "Requested By",
     "board-delete-notice": "Deleting is permanent. You will lose all lists, cards and actions associated with this board.",

models/cards.js

@@ -1033,6 +1033,17 @@ Cards.mutations({
     }
   },
 
+  setColor(newColor) {
+    if (newColor === 'white') {
+      newColor = null;
+    }
+    return {
+      $set: {
+        color: newColor,
+      },
+    };
+  },
+
   assignMember(memberId) {
     return {
       $addToSet: {