diff options
| -rw-r--r-- | client/components/cards/cardDetails.jade | 36 | ||||
| -rw-r--r-- | client/components/cards/cardDetails.js | 14 | ||||
| -rw-r--r-- | client/components/cards/cardDetails.styl | 77 | ||||
| -rw-r--r-- | client/components/cards/minicard.jade | 3 | ||||
| -rw-r--r-- | client/components/cards/minicard.js | 4 | ||||
| -rw-r--r-- | client/components/cards/minicard.styl | 83 | ||||
| -rw-r--r-- | client/components/rules/actions/cardActions.jade | 39 | ||||
| -rw-r--r-- | client/components/rules/actions/cardActions.js | 20 | ||||
| -rw-r--r-- | i18n/en.i18n.json | 17 | ||||
| -rw-r--r-- | models/cards.js | 43 | ||||
| -rw-r--r-- | public/card-colors.png | bin | 0 -> 54127 bytes | |||
| -rw-r--r-- | server/rulesHelper.js | 3 |
12 files changed, 330 insertions, 9 deletions
diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index a6dc3dde..4838d82c 100644 --- a/client/components/cards/cardDetails.jade +++ b/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"}} diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index e17e7467..7883f129 100644 --- a/client/components/cards/cardDetails.js +++ b/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(); diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index 1dc56f58..5a486d84 100644 --- a/client/components/cards/cardDetails.styl +++ b/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 diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade index 0dfcee44..f47ae0c9 100644 --- a/client/components/cards/minicard.jade +++ b/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 diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js index da7f9e01..e468ec56 100644 --- a/client/components/cards/minicard.js +++ b/client/components/cards/minicard.js @@ -3,6 +3,10 @@ // }); BlazeComponent.extendComponent({ + onCreated() { + this.currentColor = new ReactiveVar(this.data().color); + }, + template() { return 'minicard'; }, diff --git a/client/components/cards/minicard.styl b/client/components/cards/minicard.styl index 7ad51161..e3d1ff20 100644 --- a/client/components/cards/minicard.styl +++ b/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 diff --git a/client/components/rules/actions/cardActions.jade b/client/components/rules/actions/cardActions.jade index 74ad9ab5..dd92d8fe 100644 --- a/client/components/rules/actions/cardActions.jade +++ b/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 diff --git a/client/components/rules/actions/cardActions.js b/client/components/rules/actions/cardActions.js index b04440bd..b66556b4 100644 --- a/client/components/rules/actions/cardActions.js +++ b/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, + }); + }, }]; }, diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index c59f10b3..a4338363 100644 --- a/i18n/en.i18n.json +++ b/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", diff --git a/models/cards.js b/models/cards.js index a20da5ec..c5d9bf05 100644 --- a/models/cards.js +++ b/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)) { diff --git a/public/card-colors.png b/public/card-colors.png Binary files differnew file mode 100644 index 00000000..91d3a587 --- /dev/null +++ b/public/card-colors.png diff --git a/server/rulesHelper.js b/server/rulesHelper.js index ccb5cb3b..163bd41e 100644 --- a/server/rulesHelper.js +++ b/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); } |
