From 0782c97d4f0ad7f5f22c632927a9484edffe7b93 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Tue, 22 Jan 2019 23:33:59 +0100 Subject: card colors: force overwrite of text color This allows to show checks on the color with the correct color instead of plain white. --- client/components/cards/cardDetails.styl | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'client/components') diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index 5a486d84..c18e1d2d 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -144,16 +144,16 @@ input[type="submit"].attachment-add-link-submit card-details-color(background, color...) background: background !important if color - color: color //overwrite text for better visibility + color: color !important //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-color(#fad900, #000) //Black text for better visibility .card-details-orange - card-details-color(#ff9f19) + card-details-color(#ff9f19, #000) //Black text for better visibility .card-details-red card-details-color(#eb4646, #ffffff) //White text for better visibility @@ -165,7 +165,7 @@ card-details-color(background, color...) card-details-color(#0079bf, #ffffff) //White text for better visibility .card-details-pink - card-details-color(#ff78cb) + card-details-color(#ff78cb, #000) //Black text for better visibility .card-details-sky card-details-color(#00c2e0, #ffffff) //White text for better visibility @@ -174,19 +174,19 @@ card-details-color(background, color...) card-details-color(#4d4d4d, #ffffff) //White text for better visibility .card-details-lime - card-details-color(#51e898) + card-details-color(#51e898, #000) //Black text for better visibility .card-details-silver - card-details-color(#c0c0c0) + card-details-color(#c0c0c0, #000) //Black text for better visibility .card-details-peachpuff - card-details-color(#ffdab9) + card-details-color(#ffdab9, #000) //Black text for better visibility .card-details-crimson card-details-color(#dc143c, #ffffff) //White text for better visibility .card-details-plum - card-details-color(#dda0dd) + card-details-color(#dda0dd, #000) //Black text for better visibility .card-details-darkgreen card-details-color(#006400, #ffffff) //White text for better visibility @@ -198,7 +198,7 @@ card-details-color(background, color...) card-details-color(#ff00ff, #ffffff) //White text for better visibility .card-details-gold - card-details-color(#ffd700) + card-details-color(#ffd700, #000) //Black text for better visibility .card-details-navy card-details-color(#000080, #ffffff) //White text for better visibility @@ -210,10 +210,10 @@ card-details-color(background, color...) card-details-color(#8b4513, #ffffff) //White text for better visibility .card-details-paleturquoise - card-details-color(#afeeee) + card-details-color(#afeeee, #000) //Black text for better visibility .card-details-mistyrose - card-details-color(#ffe4e1) + card-details-color(#ffe4e1, #000) //Black text for better visibility .card-details-indigo card-details-color(#4b0082, #ffffff) //White text for better visibility -- cgit v1.2.3-1-g7c22 From 8a48ff96efc29687c8a8c58d02d6741b50c83424 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Thu, 24 Jan 2019 15:24:55 +0100 Subject: set card colors: properly set the title of the popups --- client/components/cards/cardDetails.jade | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'client/components') diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index c1e771cb..f6cbbba6 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -234,7 +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'}} + li: a.js-set-card-color {{_ 'setCardColorPopup-title'}} hr ul.pop-over-list li: a.js-move-card-to-top {{_ 'moveCardToTop-title'}} @@ -337,9 +337,6 @@ template(name="cardMorePopup") 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}}") -- cgit v1.2.3-1-g7c22 From 5769d438a05d01bd5f35cd5830b7ad3c03a21ed2 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Tue, 22 Jan 2019 23:36:43 +0100 Subject: rules: set card color: use the color picker --- client/components/rules/actions/cardActions.jade | 37 +++++------------- client/components/rules/actions/cardActions.js | 50 +++++++++++++++++++++++- client/components/rules/rules.styl | 9 +++++ 3 files changed, 68 insertions(+), 28 deletions(-) (limited to 'client/components') diff --git a/client/components/rules/actions/cardActions.jade b/client/components/rules/actions/cardActions.jade index dd92d8fe..1fee5231 100644 --- a/client/components/rules/actions/cardActions.jade +++ b/client/components/rules/actions/cardActions.jade @@ -39,32 +39,15 @@ template(name="cardActions") div.trigger-content div.trigger-text | {{{_'r-set-color'}}} - div.trigger-dropdown - select(id="color-action") - 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'}}} + button.trigger-button.trigger-button-color.card-details-green.js-show-color-palette(id="color-action") + | {{{_'color-green'}}} div.trigger-button.js-set-color-action.js-goto-rules i.fa.fa-plus + +template(name="setCardActionsColorPopup") + 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'}} diff --git a/client/components/rules/actions/cardActions.js b/client/components/rules/actions/cardActions.js index b66556b4..6c858358 100644 --- a/client/components/rules/actions/cardActions.js +++ b/client/components/rules/actions/cardActions.js @@ -1,3 +1,8 @@ +let cardColors; +Meteor.startup(() => { + cardColors = Cards.simpleSchema()._schema.color.allowedValues; +}); + BlazeComponent.extendComponent({ onCreated() { this.subscribe('allRules'); @@ -112,10 +117,22 @@ BlazeComponent.extendComponent({ boardId, }); }, + 'click .js-show-color-palette'(event){ + const funct = Popup.open('setCardActionsColor'); + const colorButton = this.find('#color-action'); + if (colorButton.value === '') { + colorButton.value = 'green'; + } + funct.call(this, event); + }, 'click .js-set-color-action' (event) { const ruleName = this.data().ruleName.get(); const trigger = this.data().triggerVar.get(); - const selectedColor = this.find('#color-action').value; + const colorButton = this.find('#color-action'); + if (colorButton.value === '') { + colorButton.value = 'green'; + } + const selectedColor = colorButton.value; const boardId = Session.get('currentBoard'); const desc = Utils.getTriggerActionDesc(event, this); const triggerId = Triggers.insert(trigger); @@ -136,3 +153,34 @@ BlazeComponent.extendComponent({ }, }).register('cardActions'); + +BlazeComponent.extendComponent({ + onCreated() { + this.currentAction = this.currentData(); + this.colorButton = Popup.getOpenerComponent().find('#color-action'); + this.currentColor = new ReactiveVar(this.colorButton.value); + }, + + 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.colorButton.classList.remove(`card-details-${ this.colorButton.value }`); + this.colorButton.value = this.currentColor.get(); + this.colorButton.innerText = `${TAPi18n.__(`color-${ this.currentColor.get() }`)}`; + this.colorButton.classList.add(`card-details-${ this.colorButton.value }`); + Popup.close(); + }, + }]; + }, +}).register('setCardActionsColorPopup'); diff --git a/client/components/rules/rules.styl b/client/components/rules/rules.styl index 27463d12..05302f7f 100644 --- a/client/components/rules/rules.styl +++ b/client/components/rules/rules.styl @@ -174,6 +174,15 @@ top:30px .trigger-button.trigger-button-person right:-40px + .trigger-button.trigger-button-color + top: unset + position: unset + transform: unset + font-size: 16px + width:auto + padding-left: 10px + padding-right: 10px + height:40px .trigger-item.trigger-item-mail height:300px -- cgit v1.2.3-1-g7c22 From 6e9bad57723919dc3fd63a5748902e9049320603 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Tue, 22 Jan 2019 23:35:12 +0100 Subject: IFTTT: card colors: add an actual white entry To unset the color through the IFTTT, we need a white entry. However, we do not want to show the white enry in the hamburger `Set Color` entry. We can also give the `white` capability to the API, it won't hurt and be more straightforward. --- client/components/cards/cardDetails.jade | 7 ++++--- client/components/cards/cardDetails.js | 3 +++ client/components/cards/cardDetails.styl | 4 ++++ 3 files changed, 11 insertions(+), 3 deletions(-) (limited to 'client/components') diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index f6cbbba6..25316d04 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -339,9 +339,10 @@ template(name="cardMorePopup") template(name="setCardColorPopup") 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 + unless $eq color 'white' + 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'}} diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index cc04b830..04620084 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -601,6 +601,9 @@ BlazeComponent.extendComponent({ }, isSelected(color) { + if (this.currentColor.get() === null) { + return color === 'white'; + } return this.currentColor.get() === color; }, diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index c18e1d2d..bf50c071 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -146,6 +146,10 @@ card-details-color(background, color...) if color color: color !important //overwrite text for better visibility +.card-details-white + card-details-color(unset, #000) //Black text for better visibility + border: 1px solid #eee + .card-details-green card-details-color(#3cb500, #ffffff) //White text for better visibility -- cgit v1.2.3-1-g7c22