mirror of
https://github.com/wekan/wekan.git
synced 2025-04-24 05:57:13 -04:00
Add the ability to change the card background
Currently the only way to set it is via the REST API
This commit is contained in:
Benjamin Tissoires
parent
c87a8b86ae
commit
b0ac10d94a
8 changed files with 200 additions and 2 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@
|
|||
// });
|
||||
|
||||
BlazeComponent.extendComponent({
|
||||
onCreated() {
|
||||
this.currentColor = new ReactiveVar(this.data().color);
|
||||
},
|
||||
|
||||
template() {
|
||||
return 'minicard';
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
BIN
public/card-colors.png
Normal file
BIN
public/card-colors.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Loading…
Add table
Add a link
Reference in a new issue