summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorBenjamin Tissoires <benjamin.tissoires@redhat.com>2018-07-24 18:18:40 +0200
committerBenjamin Tissoires <benjamin.tissoires@redhat.com>2019-01-22 11:10:29 +0100
commitb0ac10d94a8200a1ad0199a82c3f9d9be7ac9882 (patch)
treedbcfd3209358fd31a8bd7aeb79a54733bfe514f2
parentc87a8b86aed70593bf8a9628df830ca5f03d50d5 (diff)
downloadwekan-b0ac10d94a8200a1ad0199a82c3f9d9be7ac9882.tar.gz
wekan-b0ac10d94a8200a1ad0199a82c3f9d9be7ac9882.tar.bz2
wekan-b0ac10d94a8200a1ad0199a82c3f9d9be7ac9882.zip
Add the ability to change the card background
Currently the only way to set it is via the REST API
-rw-r--r--client/components/cards/cardDetails.jade2
-rw-r--r--client/components/cards/cardDetails.js1
-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--models/cards.js32
-rw-r--r--public/card-colors.pngbin0 -> 54127 bytes
8 files changed, 200 insertions, 2 deletions
diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade
index a6dc3dde..f83c3526 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
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index e17e7467..060ded5a 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) {
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/models/cards.js b/models/cards.js
index a20da5ec..7251faeb 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() {
@@ -1542,6 +1558,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 +1587,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 +1643,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