summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorLauri Ojansivu <x@xet7.org>2019-01-22 13:02:14 +0200
committerGitHub <noreply@github.com>2019-01-22 13:02:14 +0200
commit0c5052ebaee74d6357634e28919ff81c52a0a0e8 (patch)
tree09342c3b76d839c9836d72ae0fb9f0559c2fe9d3
parentd3b2ae1975a72b3be816538059d9c3dc6684a59d (diff)
parentf4f0f489ebf9e23dc8150d5a94239484256b0beb (diff)
downloadwekan-0c5052ebaee74d6357634e28919ff81c52a0a0e8.tar.gz
wekan-0c5052ebaee74d6357634e28919ff81c52a0a0e8.tar.bz2
wekan-0c5052ebaee74d6357634e28919ff81c52a0a0e8.zip
Merge pull request #2116 from bentiss/color
Add per card color
-rw-r--r--client/components/cards/cardDetails.jade36
-rw-r--r--client/components/cards/cardDetails.js14
-rw-r--r--client/components/cards/cardDetails.styl77
-rw-r--r--client/components/cards/minicard.jade3
-rw-r--r--client/components/cards/minicard.js4
-rw-r--r--client/components/cards/minicard.styl83
-rw-r--r--client/components/rules/actions/cardActions.jade39
-rw-r--r--client/components/rules/actions/cardActions.js20
-rw-r--r--i18n/en.i18n.json17
-rw-r--r--models/cards.js43
-rw-r--r--public/card-colors.pngbin0 -> 54127 bytes
-rw-r--r--server/rulesHelper.js3
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
new file mode 100644
index 00000000..91d3a587
--- /dev/null
+++ b/public/card-colors.png
Binary files differ
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);
}