diff options
Diffstat (limited to 'client/components/cards')
-rw-r--r-- | client/components/cards/cardDetails.jade | 15 | ||||
-rw-r--r-- | client/components/cards/cardDetails.js | 38 | ||||
-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 |
6 files changed, 217 insertions, 3 deletions
diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index a6dc3dde..c1e771cb 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,17 @@ 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"}} + form.edit-label + .palette-colors: each colors + span.card-label.palette-color.js-palette-color(class="card-details-{{color}}") + if(isSelected color) + i.fa.fa-check + button.primary.confirm.js-submit {{_ 'save'}} + button.js-remove-color.negate.wide.right {{_ 'unset-color'}} template(name="cardDeletePopup") p {{_ "card-delete-pop"}} diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index e17e7467..cc04b830 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -1,6 +1,11 @@ const subManager = new SubsManager(); const { calculateIndexData, enableClickOnTouch } = Utils; +let cardColors; +Meteor.startup(() => { + cardColors = Cards.simpleSchema()._schema.color.allowedValues; +}); + BlazeComponent.extendComponent({ mixins() { return [Mixins.InfiniteScrolling, Mixins.PerfectScrollbar]; @@ -22,6 +27,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 +343,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)); @@ -586,6 +593,37 @@ Template.copyChecklistToManyCardsPopup.events({ BlazeComponent.extendComponent({ onCreated() { this.currentCard = this.currentData(); + this.currentColor = new ReactiveVar(this.currentCard.color); + }, + + colors() { + return cardColors.map((color) => ({ color, name: '' })); + }, + + isSelected(color) { + return this.currentColor.get() === color; + }, + + events() { + return [{ + 'click .js-palette-color'() { + this.currentColor.set(this.currentData().color); + }, + 'click .js-submit' () { + this.currentCard.setColor(this.currentColor.get()); + Popup.close(); + }, + 'click .js-remove-color'() { + this.currentCard.setColor(null); + Popup.close(); + }, + }]; + }, +}).register('setCardColorPopup'); + +BlazeComponent.extendComponent({ + onCreated() { + this.currentCard = this.currentData(); this.parentCard = this.currentCard.parentCard(); if (this.parentCard) { this.parentBoard = this.parentCard.board(); 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 |