diff options
Diffstat (limited to 'client/components/cards')
| -rw-r--r-- | client/components/cards/cardDetails.jade | 36 | ||||
| -rw-r--r-- | client/components/cards/cardDetails.js | 14 | ||||
| -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, 214 insertions, 3 deletions
diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index a6dc3dde..4838d82c 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,38 @@ 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"}} + select.js-select-colors + option(value="white") {{{_'color-white'}}} + option(value="green") {{{_'color-green'}}} + option(value="yellow") {{{_'color-yellow'}}} + option(value="orange") {{{_'color-orange'}}} + option(value="red") {{{_'color-red'}}} + option(value="purple") {{{_'color-purple'}}} + option(value="blue") {{{_'color-blue'}}} + option(value="sky") {{{_'color-sky'}}} + option(value="lime") {{{_'color-lime'}}} + option(value="pink") {{{_'color-pink'}}} + option(value="black") {{{_'color-black'}}} + option(value="silver") {{{_'color-silver'}}} + option(value="peachpuff") {{{_'color-peachpuff'}}} + option(value="crimson") {{{_'color-crimson'}}} + option(value="plum") {{{_'color-plum'}}} + option(value="darkgreen") {{{_'color-darkgreen'}}} + option(value="slateblue") {{{_'color-slateblue'}}} + option(value="magenta") {{{_'color-magenta'}}} + option(value="gold") {{{_'color-gold'}}} + option(value="navy") {{{_'color-navy'}}} + option(value="gray") {{{_'color-gray'}}} + option(value="saddlebrown") {{{_'color-saddlebrown'}}} + option(value="paleturquoise") {{{_'color-paleturquoise'}}} + option(value="mistyrose") {{{_'color-mistyrose'}}} + option(value="indigo") {{{_'color-indigo'}}} + .edit-controls.clearfix + button.primary.confirm.js-submit {{_ 'save'}} template(name="cardDeletePopup") p {{_ "card-delete-pop"}} diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index e17e7467..7883f129 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) { @@ -337,6 +338,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)); @@ -583,6 +585,18 @@ Template.copyChecklistToManyCardsPopup.events({ }, }); +Template.setCardColorPopup.events({ + 'click .js-submit' () { + // XXX We should *not* get the currentCard from the global state, but + // instead from a “component” state. + const card = Cards.findOne(Session.get('currentCard')); + const colorSelect = $('.js-select-colors')[0]; + newColor = colorSelect.options[colorSelect.selectedIndex].value; + card.setColor(newColor); + Popup.close(); + }, +}); + BlazeComponent.extendComponent({ onCreated() { this.currentCard = this.currentData(); 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 |