Merge pull request #2116 from bentiss/color

Add per card color

client/components/cards/cardDetails.jade

@@ -1,6 +1,6 @@
 template(name="cardDetails")
   section.card-details.js-card-details.js-perfect-scrollbar: .card-details-canvas
-    .card-details-header
+    .card-details-header(class='{{#if colorClass}}card-details-{{colorClass}}{{/if}}')
       +inlinedForm(classNames="js-card-details-title")
         +editCardTitleForm
       else
@@ -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

@@ -22,6 +22,7 @@ BlazeComponent.extendComponent({
   onCreated() {
     this.currentBoard = Boards.findOne(Session.get('currentBoard'));
     this.isLoaded = new ReactiveVar(false);
+    this.currentColor = new ReactiveVar(this.data().color);
     const boardBody =  this.parentComponent().parentComponent();
     //in Miniview parent is Board, not BoardBody.
     if (boardBody !== null) {
@@ -337,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));
@@ -583,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();

client/components/cards/cardDetails.styl

@@ -140,3 +140,80 @@ input[type="submit"].attachment-add-link-submit
 
       .card-details-menu
         margin-right: 10px
+
+card-details-color(background, color...)
+  background: background !important
+  if color
+    color: color //overwrite text for better visibility
+
+.card-details-green
+  card-details-color(#3cb500, #ffffff) //White text for better visibility
+
+.card-details-yellow
+  card-details-color(#fad900)
+
+.card-details-orange
+  card-details-color(#ff9f19)
+
+.card-details-red
+  card-details-color(#eb4646, #ffffff) //White text for better visibility
+
+.card-details-purple
+  card-details-color(#a632db, #ffffff) //White text for better visibility
+
+.card-details-blue
+  card-details-color(#0079bf, #ffffff) //White text for better visibility
+
+.card-details-pink
+  card-details-color(#ff78cb)
+
+.card-details-sky
+  card-details-color(#00c2e0, #ffffff) //White text for better visibility
+
+.card-details-black
+  card-details-color(#4d4d4d, #ffffff) //White text for better visibility
+
+.card-details-lime
+  card-details-color(#51e898)
+
+.card-details-silver
+  card-details-color(#c0c0c0)
+
+.card-details-peachpuff
+  card-details-color(#ffdab9)
+
+.card-details-crimson
+  card-details-color(#dc143c, #ffffff) //White text for better visibility
+
+.card-details-plum
+  card-details-color(#dda0dd)
+
+.card-details-darkgreen
+  card-details-color(#006400, #ffffff) //White text for better visibility
+
+.card-details-slateblue
+  card-details-color(#6a5acd, #ffffff) //White text for better visibility
+
+.card-details-magenta
+  card-details-color(#ff00ff, #ffffff) //White text for better visibility
+
+.card-details-gold
+  card-details-color(#ffd700)
+
+.card-details-navy
+  card-details-color(#000080, #ffffff) //White text for better visibility
+
+.card-details-gray
+  card-details-color(#808080, #ffffff) //White text for better visibility
+
+.card-details-saddlebrown
+  card-details-color(#8b4513, #ffffff) //White text for better visibility
+
+.card-details-paleturquoise
+  card-details-color(#afeeee)
+
+.card-details-mistyrose
+  card-details-color(#ffe4e1)
+
+.card-details-indigo
+  card-details-color(#4b0082, #ffffff) //White text for better visibility

client/components/cards/minicard.jade

@@ -1,7 +1,8 @@
 template(name="minicard")
   .minicard(
     class="{{#if isLinkedCard}}linked-card{{/if}}"
-    class="{{#if isLinkedBoard}}linked-board{{/if}}")
+    class="{{#if isLinkedBoard}}linked-board{{/if}}"
+    class="minicard-{{colorClass}}")
     if cover
       .minicard-cover(style="background-image: url('{{cover.url}}');")
     if labels

client/components/cards/minicard.js

@@ -3,6 +3,10 @@
 // });
 
 BlazeComponent.extendComponent({
+  onCreated() {
+    this.currentColor = new ReactiveVar(this.data().color);
+  },
+
   template() {
     return 'minicard';
   },

client/components/cards/minicard.styl

@@ -202,3 +202,86 @@
       border-top-right-radius: 0
       z-index: 15
       box-shadow: 0 1px 2px rgba(0,0,0,.15)
+
+minicard-color(background, color...)
+  background-color: background
+  if color
+    color: color //overwrite text for better visibility
+  &:hover:not(.minicard-composer),
+  .is-selected &,
+  .draggable-hover-card &
+    background: darken(background, 3%)
+  .draggable-hover-card &
+    background: darken(background, 7%)
+
+.minicard-green
+  minicard-color(#3cb500, #ffffff) //White text for better visibility
+
+.minicard-yellow
+  minicard-color(#fad900)
+
+.minicard-orange
+  minicard-color(#ff9f19)
+
+.minicard-red
+  minicard-color(#eb4646, #ffffff) //White text for better visibility
+
+.minicard-purple
+  minicard-color(#a632db, #ffffff) //White text for better visibility
+
+.minicard-blue
+  minicard-color(#0079bf, #ffffff) //White text for better visibility
+
+.minicard-pink
+  minicard-color(#ff78cb)
+
+.minicard-sky
+  minicard-color(#00c2e0, #ffffff) //White text for better visibility
+
+.minicard-black
+  minicard-color(#4d4d4d, #ffffff) //White text for better visibility
+
+.minicard-lime
+  minicard-color(#51e898)
+
+.minicard-silver
+  minicard-color(#c0c0c0)
+
+.minicard-peachpuff
+  minicard-color(#ffdab9)
+
+.minicard-crimson
+  minicard-color(#dc143c, #ffffff) //White text for better visibility
+
+.minicard-plum
+  minicard-color(#dda0dd)
+
+.minicard-darkgreen
+  minicard-color(#006400, #ffffff) //White text for better visibility
+
+.minicard-slateblue
+  minicard-color(#6a5acd, #ffffff) //White text for better visibility
+
+.minicard-magenta
+  minicard-color(#ff00ff, #ffffff) //White text for better visibility
+
+.minicard-gold
+  minicard-color(#ffd700)
+
+.minicard-navy
+  minicard-color(#000080, #ffffff) //White text for better visibility
+
+.minicard-gray
+  minicard-color(#808080, #ffffff) //White text for better visibility
+
+.minicard-saddlebrown
+  minicard-color(#8b4513, #ffffff) //White text for better visibility
+
+.minicard-paleturquoise
+  minicard-color(#afeeee)
+
+.minicard-mistyrose
+  minicard-color(#ffe4e1)
+
+.minicard-indigo
+  minicard-color(#4b0082, #ffffff) //White text for better visibility

client/components/rules/actions/cardActions.jade

@@ -35,9 +35,36 @@ template(name="cardActions")
     div.trigger-button.js-add-removeall-action.js-goto-rules
       i.fa.fa-plus
 
-
-   
-  
-
-
-
+  div.trigger-item
+    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'}}}
+    div.trigger-button.js-set-color-action.js-goto-rules
+      i.fa.fa-plus

client/components/rules/actions/cardActions.js

@@ -112,6 +112,26 @@ BlazeComponent.extendComponent({
           boardId,
         });
       },
+      '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 boardId = Session.get('currentBoard');
+        const desc = Utils.getTriggerActionDesc(event, this);
+        const triggerId = Triggers.insert(trigger);
+        const actionId = Actions.insert({
+          actionType: 'setColor',
+          selectedColor,
+          boardId,
+          desc,
+        });
+        Rules.insert({
+          title: ruleName,
+          triggerId,
+          actionId,
+          boardId,
+        });
+      },
     }];
   },
 

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.",
@@ -581,6 +597,7 @@
     "r-label": "label",
     "r-member": "member",
     "r-remove-all": "Remove all members from the card",
+    "r-set-color": "Set color to",
     "r-checklist": "checklist",
     "r-check-all": "Check all",
     "r-uncheck-all": "Uncheck all",

models/cards.js

@@ -65,6 +65,17 @@ Cards.attachSchema(new SimpleSchema({
     defaultValue: '',
 
   },
+  color: {
+    type: String,
+    optional: true,
+    allowedValues: [
+      'green', 'yellow', 'orange', 'red', 'purple',
+      'blue', 'sky', 'lime', 'pink', 'black',
+      'silver', 'peachpuff', 'crimson', 'plum', 'darkgreen',
+      'slateblue', 'magenta', 'gold', 'navy', 'gray',
+      'saddlebrown', 'paleturquoise', 'mistyrose', 'indigo',
+    ],
+  },
   createdAt: {
     /**
      * creation date
@@ -435,7 +446,12 @@ Cards.helpers({
         definition,
       };
     });
+  },
 
+  colorClass() {
+    if (this.color)
+      return this.color;
+    return '';
   },
 
   absoluteUrl() {
@@ -1017,6 +1033,17 @@ Cards.mutations({
     }
   },
 
+  setColor(newColor) {
+    if (newColor === 'white') {
+      newColor = null;
+    }
+    return {
+      $set: {
+        color: newColor,
+      },
+    };
+  },
+
   assignMember(memberId) {
     return {
       $addToSet: {
@@ -1542,6 +1569,15 @@ if (Meteor.isServer) {
    * @operation edit_card
    * @summary Edit Fields in a Card
    *
+   * @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`:
+   *
+   * <img src="/card-colors.png" width="40%" alt="Wekan card colors" />
+   *
    * @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
@@ -1562,6 +1598,8 @@ if (Meteor.isServer) {
    * @param {string} [spentTime] the new spentTime field of the card
    * @param {boolean} [isOverTime] the new isOverTime field of the card
    * @param {string} [customFields] the new customFields value of the card
+   * @param {string} [color] the new color of the card
+   * @return_type {_id: string}
    */
   JsonRoutes.add('PUT', '/api/boards/:boardId/lists/:listId/cards/:cardId', function(req, res) {
     Authentication.checkUserId(req.userId);
@@ -1616,6 +1654,11 @@ if (Meteor.isServer) {
         },
       });
     }
+    if (req.body.hasOwnProperty('color')) {
+      const newColor = req.body.color;
+      Cards.direct.update({_id: paramCardId, listId: paramListId, boardId: paramBoardId, archived: false},
+        {$set: {color: newColor}});
+    }
     if (req.body.hasOwnProperty('labelIds')) {
       let newlabelIds = req.body.labelIds;
       if (_.isString(newlabelIds)) {

server/rulesHelper.js

@@ -87,6 +87,9 @@ RulesHelper = {
     if(action.actionType === 'unarchive'){
       card.restore();
     }
+    if(action.actionType === 'setColor'){
+      card.setColor(action.selectedColor);
+    }
     if(action.actionType === 'addLabel'){
       card.addLabel(action.labelId);
     }