From 3368ebf067779d1f306a2447e2357e34213f0126 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Tue, 22 Jan 2019 10:35:09 +0100 Subject: color: add option in hamburger to change the card color Currently only dropdown, no palette Fixes: #428 --- client/components/cards/cardDetails.jade | 34 +++++++++++++++++++++++++++++++- client/components/cards/cardDetails.js | 13 ++++++++++++ i18n/en.i18n.json | 16 +++++++++++++++ models/cards.js | 11 +++++++++++ 4 files changed, 73 insertions(+), 1 deletion(-) diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index f83c3526..4838d82c 100644 --- a/client/components/cards/cardDetails.jade +++ b/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"}} diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 060ded5a..7883f129 100644 --- a/client/components/cards/cardDetails.js +++ b/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(); diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index c59f10b3..36153ff7 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.", diff --git a/models/cards.js b/models/cards.js index 7251faeb..c5d9bf05 100644 --- a/models/cards.js +++ b/models/cards.js @@ -1033,6 +1033,17 @@ Cards.mutations({ } }, + setColor(newColor) { + if (newColor === 'white') { + newColor = null; + } + return { + $set: { + color: newColor, + }, + }; + }, + assignMember(memberId) { return { $addToSet: { -- cgit v1.2.3-1-g7c22