Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2026-02-28 10:54:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add the ability to change the card background

Browse source 
Currently the only way to set it is via the REST API
This commit is contained in:
Benjamin Tissoires 2018-07-24 18:18:40 +02:00
parent c87a8b86ae
commit b0ac10d94a
8 changed files with 200 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/components/cards/cardDetails.jade
View file

@ -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

1
client/components/cards/cardDetails.js
View file

@ -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) {

77
client/components/cards/cardDetails.styl
View file

@ -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

3
client/components/cards/minicard.jade
View file

@ -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

4
client/components/cards/minicard.js
View file

@ -3,6 +3,10 @@
// });
BlazeComponent.extendComponent({
onCreated() {
this.currentColor = new ReactiveVar(this.data().color);
},
template() {
return 'minicard';
},

83
client/components/cards/minicard.styl
View file

@ -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