IFTTT: card colors: add an actual white entry

To unset the color through the IFTTT, we need a white entry.
However, we do not want to show the white enry in the hamburger
`Set Color` entry.

We can also give the `white` capability to the API, it won't hurt
and be more straightforward.

4 files changed, 19 insertions, 8 deletions

diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade
index f6cbbba6..25316d04 100644
--- a/client/components/cards/cardDetails.jade
+++ b/client/components/cards/cardDetails.jade
@@ -339,9 +339,10 @@ template(name="cardMorePopup")
 template(name="setCardColorPopup")
   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
+      unless $eq color 'white'
+        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'}}
 
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index cc04b830..04620084 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -601,6 +601,9 @@ BlazeComponent.extendComponent({
   },
 
   isSelected(color) {
+    if (this.currentColor.get() === null) {
+      return color === 'white';
+    }
     return this.currentColor.get() === color;
   },
 
diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl
index c18e1d2d..bf50c071 100644
--- a/client/components/cards/cardDetails.styl
+++ b/client/components/cards/cardDetails.styl
@@ -146,6 +146,10 @@ card-details-color(background, color...)
   if color
     color: color !important //overwrite text for better visibility
 
+.card-details-white
+  card-details-color(unset, #000) //Black text for better visibility
+  border: 1px solid #eee
+
 .card-details-green
   card-details-color(#3cb500, #ffffff) //White text for better visibility
 
diff --git a/models/cards.js b/models/cards.js
index c5d9bf05..9b32e89a 100644
--- a/models/cards.js
+++ b/models/cards.js
@@ -69,7 +69,7 @@ Cards.attachSchema(new SimpleSchema({
     type: String,
     optional: true,
     allowedValues: [
-      'green', 'yellow', 'orange', 'red', 'purple',
+      'white', 'green', 'yellow', 'orange', 'red', 'purple',
       'blue', 'sky', 'lime', 'pink', 'black',
       'silver', 'peachpuff', 'crimson', 'plum', 'darkgreen',
       'slateblue', 'magenta', 'gold', 'navy', 'gray',
@@ -1571,13 +1571,16 @@ if (Meteor.isServer) {
    *
    * @description Edit a card
    *
-   * The color has to be chosen between `green`, `yellow`, `orange`, `red`,
-   * `purple`, `blue`, `sky`, `lime`, `pink`, `black`, `silver`, `peachpuff`,
-   * `crimson`, `plum`, `darkgreen`, `slateblue`, `magenta`, `gold`, `navy`,
-   * `gray`, `saddlebrown`, `paleturquoise`, `mistyrose`, `indigo`:
+   * The color has to be chosen between `white`, `green`, `yellow`, `orange`,
+   * `red`, `purple`, `blue`, `sky`, `lime`, `pink`, `black`, `silver`,
+   * `peachpuff`, `crimson`, `plum`, `darkgreen`, `slateblue`, `magenta`,
+   * `gold`, `navy`, `gray`, `saddlebrown`, `paleturquoise`, `mistyrose`,
+   * `indigo`:
    *
    * <img src="/card-colors.png" width="40%" alt="Wekan card colors" />
    *
+   * Note: setting the color to white has the same effect than removing it.
+   *
    * @param {string} boardId the board ID of the card
    * @param {string} list the list ID of the card
    * @param {string} cardId the ID of the card