Merge pull request #2121 from bentiss/color

Color picker in IFTTT

client/components/cards/cardDetails.jade

@@ -234,7 +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'}}
+      li: a.js-set-card-color {{_ 'setCardColorPopup-title'}}
     hr
     ul.pop-over-list
       li: a.js-move-card-to-top {{_ 'moveCardToTop-title'}}
@@ -337,14 +337,12 @@ template(name="cardMorePopup")
     a.js-delete(title="{{_ 'card-delete-notice'}}") {{_ 'delete'}}
 
 template(name="setCardColorPopup")
-  p.quiet
-    span.clearfix
-  label {{_ "select-color"}}
   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'}}
 

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;
   },
 

client/components/cards/cardDetails.styl

@@ -144,16 +144,20 @@ input[type="submit"].attachment-add-link-submit
 card-details-color(background, color...)
   background: background !important
   if color
-    color: color //overwrite text for better visibility
+    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
 
 .card-details-yellow
-  card-details-color(#fad900)
+  card-details-color(#fad900, #000) //Black text for better visibility
 
 .card-details-orange
-  card-details-color(#ff9f19)
+  card-details-color(#ff9f19, #000) //Black text for better visibility
 
 .card-details-red
   card-details-color(#eb4646, #ffffff) //White text for better visibility
@@ -165,7 +169,7 @@ card-details-color(background, color...)
   card-details-color(#0079bf, #ffffff) //White text for better visibility
 
 .card-details-pink
-  card-details-color(#ff78cb)
+  card-details-color(#ff78cb, #000) //Black text for better visibility
 
 .card-details-sky
   card-details-color(#00c2e0, #ffffff) //White text for better visibility
@@ -174,19 +178,19 @@ card-details-color(background, color...)
   card-details-color(#4d4d4d, #ffffff) //White text for better visibility
 
 .card-details-lime
-  card-details-color(#51e898)
+  card-details-color(#51e898, #000) //Black text for better visibility
 
 .card-details-silver
-  card-details-color(#c0c0c0)
+  card-details-color(#c0c0c0, #000) //Black text for better visibility
 
 .card-details-peachpuff
-  card-details-color(#ffdab9)
+  card-details-color(#ffdab9, #000) //Black text for better visibility
 
 .card-details-crimson
   card-details-color(#dc143c, #ffffff) //White text for better visibility
 
 .card-details-plum
-  card-details-color(#dda0dd)
+  card-details-color(#dda0dd, #000) //Black text for better visibility
 
 .card-details-darkgreen
   card-details-color(#006400, #ffffff) //White text for better visibility
@@ -198,7 +202,7 @@ card-details-color(background, color...)
   card-details-color(#ff00ff, #ffffff) //White text for better visibility
 
 .card-details-gold
-  card-details-color(#ffd700)
+  card-details-color(#ffd700, #000) //Black text for better visibility
 
 .card-details-navy
   card-details-color(#000080, #ffffff) //White text for better visibility
@@ -210,10 +214,10 @@ card-details-color(background, color...)
   card-details-color(#8b4513, #ffffff) //White text for better visibility
 
 .card-details-paleturquoise
-  card-details-color(#afeeee)
+  card-details-color(#afeeee, #000) //Black text for better visibility
 
 .card-details-mistyrose
-  card-details-color(#ffe4e1)
+  card-details-color(#ffe4e1, #000) //Black text for better visibility
 
 .card-details-indigo
   card-details-color(#4b0082, #ffffff) //White text for better visibility

client/components/rules/actions/cardActions.jade

@@ -39,32 +39,15 @@ template(name="cardActions")
     div.trigger-content
       div.trigger-text
         | {{{_'r-set-color'}}}
-      div.trigger-dropdown
-        select(id="color-action")
-          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'}}}
+        button.trigger-button.trigger-button-color.card-details-green.js-show-color-palette(id="color-action")
+          | {{{_'color-green'}}}
     div.trigger-button.js-set-color-action.js-goto-rules
       i.fa.fa-plus
+
+template(name="setCardActionsColorPopup")
+  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'}}

client/components/rules/actions/cardActions.js

@@ -1,3 +1,8 @@
+let cardColors;
+Meteor.startup(() => {
+  cardColors = Cards.simpleSchema()._schema.color.allowedValues;
+});
+
 BlazeComponent.extendComponent({
   onCreated() {
     this.subscribe('allRules');
@@ -112,10 +117,22 @@ BlazeComponent.extendComponent({
           boardId,
         });
       },
+      'click .js-show-color-palette'(event){
+        const funct = Popup.open('setCardActionsColor');
+        const colorButton = this.find('#color-action');
+        if (colorButton.value === '') {
+          colorButton.value = 'green';
+        }
+        funct.call(this, event);
+      },
       'click .js-set-color-action' (event) {
         const ruleName = this.data().ruleName.get();
         const trigger = this.data().triggerVar.get();
-        const selectedColor = this.find('#color-action').value;
+        const colorButton = this.find('#color-action');
+        if (colorButton.value === '') {
+          colorButton.value = 'green';
+        }
+        const selectedColor = colorButton.value;
         const boardId = Session.get('currentBoard');
         const desc = Utils.getTriggerActionDesc(event, this);
         const triggerId = Triggers.insert(trigger);
@@ -136,3 +153,34 @@ BlazeComponent.extendComponent({
   },
 
 }).register('cardActions');
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.currentAction = this.currentData();
+    this.colorButton = Popup.getOpenerComponent().find('#color-action');
+    this.currentColor = new ReactiveVar(this.colorButton.value);
+  },
+
+  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.colorButton.classList.remove(`card-details-${ this.colorButton.value }`);
+        this.colorButton.value = this.currentColor.get();
+        this.colorButton.innerText = `${TAPi18n.__(`color-${ this.currentColor.get() }`)}`;
+        this.colorButton.classList.add(`card-details-${ this.colorButton.value }`);
+        Popup.close();
+      },
+    }];
+  },
+}).register('setCardActionsColorPopup');

client/components/rules/rules.styl

@@ -174,6 +174,15 @@
           top:30px
         .trigger-button.trigger-button-person
           right:-40px
+        .trigger-button.trigger-button-color
+          top: unset
+          position: unset
+          transform: unset
+          font-size: 16px
+          width:auto
+          padding-left: 10px
+          padding-right: 10px
+          height:40px
       .trigger-item.trigger-item-mail
         height:300px
   

i18n/en.i18n.json

@@ -517,7 +517,8 @@
     "card-end-on": "Ends on",
     "editCardReceivedDatePopup-title": "Change received date",
     "editCardEndDatePopup-title": "Change end date",
-    "setCardColor-title": "Set color",
+    "setCardColorPopup-title": "Set color",
+    "setCardActionsColorPopup-title": "Choose a 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

@@ -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