diff options
author | Benjamin Tissoires <benjamin.tissoires@redhat.com> | 2018-07-24 18:18:40 +0200 |
---|---|---|
committer | Benjamin Tissoires <benjamin.tissoires@redhat.com> | 2019-01-22 11:10:29 +0100 |
commit | b0ac10d94a8200a1ad0199a82c3f9d9be7ac9882 (patch) | |
tree | dbcfd3209358fd31a8bd7aeb79a54733bfe514f2 | |
parent | c87a8b86aed70593bf8a9628df830ca5f03d50d5 (diff) | |
download | wekan-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.jade | 2 | ||||
-rw-r--r-- | client/components/cards/cardDetails.js | 1 | ||||
-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-- | models/cards.js | 32 | ||||
-rw-r--r-- | public/card-colors.png | bin | 0 -> 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 Binary files differnew file mode 100644 index 00000000..91d3a587 --- /dev/null +++ b/public/card-colors.png |