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') 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') 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') 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') 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 From 5fa0821e078ff03647d23909517ddf6984f8baf5 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Thu, 24 Jan 2019 16:41:23 +0100 Subject: card colors: remove unused variables --- client/components/cards/cardDetails.js | 1 - client/components/cards/minicard.js | 4 ---- 2 files changed, 5 deletions(-) (limited to 'client') diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 04620084..79a686a7 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -27,7 +27,6 @@ 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) { diff --git a/client/components/cards/minicard.js b/client/components/cards/minicard.js index e468ec56..da7f9e01 100644 --- a/client/components/cards/minicard.js +++ b/client/components/cards/minicard.js @@ -3,10 +3,6 @@ // }); BlazeComponent.extendComponent({ - onCreated() { - this.currentColor = new ReactiveVar(this.data().color); - }, - template() { return 'minicard'; }, -- cgit v1.2.3-1-g7c22 From dd88eb4cc191a06f7eb84213b026dfb93546f245 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Thu, 24 Jan 2019 12:09:23 +0100 Subject: swimlane-view: have the swimlane header horizontal This allows to use the header as a separator between swimlanes. This will be most useful when we can set the background color of these headers. --- client/components/boards/boardBody.jade | 2 ++ client/components/lists/list.styl | 1 - client/components/swimlanes/swimlanes.jade | 36 ++++++++++----------------- client/components/swimlanes/swimlanes.js | 39 +++++++++--------------------- client/components/swimlanes/swimlanes.styl | 18 ++++++-------- 5 files changed, 34 insertions(+), 62 deletions(-) (limited to 'client') diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index 9e4b9c61..382c04f3 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -23,6 +23,8 @@ template(name="boardBody") if isViewSwimlanes each currentBoard.swimlanes +swimlane(this) + if currentUser.isBoardMember + +addSwimlaneForm if isViewLists +listsGroup if isViewCalendar diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 72cb19f4..ec835961 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -10,7 +10,6 @@ // transparent, because that won't work during a list drag. background: darken(white, 13%) border-left: 1px solid darken(white, 20%) - border-bottom: 1px solid #CCC padding: 0 float: left diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade index 76f54c66..4380de2b 100644 --- a/client/components/swimlanes/swimlanes.jade +++ b/client/components/swimlanes/swimlanes.jade @@ -1,21 +1,22 @@ template(name="swimlane") .swimlane.js-lists.js-swimlane +swimlaneHeader - if isMiniScreen - if currentList - +list(currentList) + .swimlane.list-group.js-lists + if isMiniScreen + if currentList + +list(currentList) + else + each currentBoard.lists + +miniList(this) + if currentUser.isBoardMember + +addListForm else each currentBoard.lists - +miniList(this) + +list(this) + if currentCardIsInThisList _id ../_id + +cardDetails(currentCard) if currentUser.isBoardMember +addListForm - else - each currentBoard.lists - +list(this) - if currentCardIsInThisList _id ../_id - +cardDetails(currentCard) - if currentUser.isBoardMember - +addListAndSwimlaneForm template(name="listsGroup") .swimlane.list-group.js-lists @@ -35,19 +36,8 @@ template(name="listsGroup") if currentUser.isBoardMember +addListForm -template(name="addListAndSwimlaneForm") +template(name="addSwimlaneForm") .list.list-composer.js-list-composer - .list-header - +inlinedForm(autoclose=false) - input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}" - autocomplete="off" autofocus) - .edit-controls.clearfix - button.primary.confirm(type="submit") {{_ 'save'}} - a.fa.fa-times-thin.js-close-inlined-form - else - a.open-list-composer.js-open-inlined-form - i.fa.fa-plus - | {{_ 'add-list'}} .list-header +inlinedForm(autoclose=false) input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}" diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index 865895a9..a7743ec7 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -185,37 +185,22 @@ BlazeComponent.extendComponent({ return [{ submit(evt) { evt.preventDefault(); - let titleInput = this.find('.list-name-input'); - if (titleInput) { - const title = titleInput.value.trim(); - if (title) { - Lists.insert({ - title, - boardId: Session.get('currentBoard'), - sort: $('.list').length, - }); - - titleInput.value = ''; - titleInput.focus(); - } - } else { - titleInput = this.find('.swimlane-name-input'); - const title = titleInput.value.trim(); - if (title) { - Swimlanes.insert({ - title, - boardId: Session.get('currentBoard'), - sort: $('.swimlane').length, - }); - - titleInput.value = ''; - titleInput.focus(); - } + let titleInput = this.find('.swimlane-name-input'); + const title = titleInput.value.trim(); + if (title) { + Swimlanes.insert({ + title, + boardId: Session.get('currentBoard'), + sort: $('.swimlane').length, + }); + + titleInput.value = ''; + titleInput.focus(); } }, }]; }, -}).register('addListAndSwimlaneForm'); +}).register('addSwimlaneForm'); Template.swimlane.helpers({ canSeeAddList() { diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl index abcc90d4..fe7f5e53 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/client/components/swimlanes/swimlanes.styl @@ -5,7 +5,7 @@ // transparent, because that won't work during a swimlane drag. background: darken(white, 13%) display: flex - flex-direction: row + flex-direction: column overflow: 0; max-height: 100% @@ -27,20 +27,15 @@ .swimlane-header-wrap display: flex; flex-direction: row; - flex: 0 0 50px; - padding-bottom: 30px; - border-bottom: 1px solid #CCC + flex: 0 0 24px; + background-color: #ccc; .swimlane-header - -ms-writing-mode: tb-rl; - writing-mode: vertical-rl; - transform: rotate(180deg); font-size: 14px; - line-height: 50px; - margin-top: 50px; + padding: 5px 5px font-weight: bold; min-height: 9px; - width: 50px; + width: 100%; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; @@ -49,7 +44,8 @@ .swimlane-header-menu position: absolute - padding: 20px 20px + padding: 5px 5px .list-group + flex-direction: row height: 100% -- cgit v1.2.3-1-g7c22 From 416b17062e57f215206e93a85b02ef9eb1ab4902 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Thu, 24 Jan 2019 15:16:13 +0100 Subject: Remove the 'Add Swimlane' entry and replace it by a plus sign Still need to create the swimlane right after the one that has been created --- client/components/boards/boardBody.jade | 2 -- client/components/swimlanes/swimlaneHeader.jade | 9 ++++++++ client/components/swimlanes/swimlaneHeader.js | 28 +++++++++++++++++++++++++ client/components/swimlanes/swimlanes.jade | 14 ------------- client/components/swimlanes/swimlanes.js | 27 ------------------------ client/components/swimlanes/swimlanes.styl | 4 ++++ 6 files changed, 41 insertions(+), 43 deletions(-) (limited to 'client') diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index 382c04f3..9e4b9c61 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -23,8 +23,6 @@ template(name="boardBody") if isViewSwimlanes each currentBoard.swimlanes +swimlane(this) - if currentUser.isBoardMember - +addSwimlaneForm if isViewLists +listsGroup if isViewCalendar diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade index 483de06f..3e20e2d0 100644 --- a/client/components/swimlanes/swimlaneHeader.jade +++ b/client/components/swimlanes/swimlaneHeader.jade @@ -8,6 +8,7 @@ template(name="swimlaneHeader") = title .swimlane-header-menu unless currentUser.isCommentOnly + a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon a.fa.fa-navicon.js-open-swimlane-menu template(name="editSwimlaneTitleForm") @@ -21,3 +22,11 @@ template(name="swimlaneActionPopup") unless currentUser.isCommentOnly ul.pop-over-list li: a.js-close-swimlane {{_ 'archive-swimlane'}} + +template(name="swimlaneAddPopup") + unless currentUser.isCommentOnly + form + input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}" + autocomplete="off" autofocus) + .edit-controls.clearfix + button.primary.confirm(type="submit") {{_ 'add'}} diff --git a/client/components/swimlanes/swimlaneHeader.js b/client/components/swimlanes/swimlaneHeader.js index 50635f86..72437ba4 100644 --- a/client/components/swimlanes/swimlaneHeader.js +++ b/client/components/swimlanes/swimlaneHeader.js @@ -11,6 +11,7 @@ BlazeComponent.extendComponent({ events() { return [{ 'click .js-open-swimlane-menu': Popup.open('swimlaneAction'), + 'click .js-open-add-swimlane-menu': Popup.open('swimlaneAdd'), submit: this.editTitle, }]; }, @@ -23,3 +24,30 @@ Template.swimlaneActionPopup.events({ Popup.close(); }, }); + +BlazeComponent.extendComponent({ + events() { + return [{ + submit(evt) { + evt.preventDefault(); + const titleInput = this.find('.swimlane-name-input'); + const title = titleInput.value.trim(); + if (title) { + Swimlanes.insert({ + title, + boardId: Session.get('currentBoard'), + // XXX we should insert the swimlane right after the caller + sort: $('.swimlane').length, + }); + + titleInput.value = ''; + titleInput.focus(); + } + // XXX ideally, we should move the popup to the newly + // created swimlane so a user can add more than one swimlane + // with a minimum of interactions + Popup.close(); + }, + }]; + }, +}).register('swimlaneAddPopup'); diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade index 4380de2b..cd864a7c 100644 --- a/client/components/swimlanes/swimlanes.jade +++ b/client/components/swimlanes/swimlanes.jade @@ -36,20 +36,6 @@ template(name="listsGroup") if currentUser.isBoardMember +addListForm -template(name="addSwimlaneForm") - .list.list-composer.js-list-composer - .list-header - +inlinedForm(autoclose=false) - input.swimlane-name-input.full-line(type="text" placeholder="{{_ 'add-swimlane'}}" - autocomplete="off" autofocus) - .edit-controls.clearfix - button.primary.confirm(type="submit") {{_ 'save'}} - a.fa.fa-times-thin.js-close-inlined-form - else - a.open-list-composer.js-open-inlined-form - i.fa.fa-plus - | {{_ 'add-swimlane'}} - template(name="addListForm") .list.list-composer.js-list-composer .list-header diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index a7743ec7..71317714 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -175,33 +175,6 @@ BlazeComponent.extendComponent({ }, }).register('addListForm'); -BlazeComponent.extendComponent({ - // Proxy - open() { - this.childComponents('inlinedForm')[0].open(); - }, - - events() { - return [{ - submit(evt) { - evt.preventDefault(); - let titleInput = this.find('.swimlane-name-input'); - const title = titleInput.value.trim(); - if (title) { - Swimlanes.insert({ - title, - boardId: Session.get('currentBoard'), - sort: $('.swimlane').length, - }); - - titleInput.value = ''; - titleInput.focus(); - } - }, - }]; - }, -}).register('addSwimlaneForm'); - Template.swimlane.helpers({ canSeeAddList() { return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl index fe7f5e53..71089bb4 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/client/components/swimlanes/swimlanes.styl @@ -46,6 +46,10 @@ position: absolute padding: 5px 5px + .swimlane-header-plus-icon + margin-left: 5px + margin-right: 10px + .list-group flex-direction: row height: 100% -- cgit v1.2.3-1-g7c22 From c075187088e69d30db31489d75b22f991e1972ff Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Thu, 24 Jan 2019 20:45:52 +0100 Subject: swimlane: insert the new swimlane after the one we clicked on --- client/components/swimlanes/swimlaneHeader.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) (limited to 'client') diff --git a/client/components/swimlanes/swimlaneHeader.js b/client/components/swimlanes/swimlaneHeader.js index 72437ba4..632a0f50 100644 --- a/client/components/swimlanes/swimlaneHeader.js +++ b/client/components/swimlanes/swimlaneHeader.js @@ -1,3 +1,5 @@ +const { calculateIndexData } = Utils; + BlazeComponent.extendComponent({ editTitle(evt) { evt.preventDefault(); @@ -26,18 +28,25 @@ Template.swimlaneActionPopup.events({ }); BlazeComponent.extendComponent({ + onCreated() { + this.currentSwimlane = this.currentData(); + }, + events() { return [{ submit(evt) { evt.preventDefault(); + const currentBoard = Boards.findOne(Session.get('currentBoard')); + const nextSwimlane = currentBoard.nextSwimlane(this.currentSwimlane); const titleInput = this.find('.swimlane-name-input'); const title = titleInput.value.trim(); + const sortValue = calculateIndexData(this.currentSwimlane, nextSwimlane, 1); + if (title) { Swimlanes.insert({ title, boardId: Session.get('currentBoard'), - // XXX we should insert the swimlane right after the caller - sort: $('.swimlane').length, + sort: sortValue.base, }); titleInput.value = ''; -- cgit v1.2.3-1-g7c22 From 03efeaeb1abae0c8c39ad5644d44bad36f415d99 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Thu, 24 Jan 2019 16:47:09 +0100 Subject: Add colors to swimlanes fixes #1688 --- client/components/swimlanes/swimlaneHeader.jade | 14 ++++- client/components/swimlanes/swimlaneHeader.js | 37 +++++++++++ client/components/swimlanes/swimlanes.styl | 81 +++++++++++++++++++++++++ 3 files changed, 131 insertions(+), 1 deletion(-) (limited to 'client') diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade index 3e20e2d0..33eb5731 100644 --- a/client/components/swimlanes/swimlaneHeader.jade +++ b/client/components/swimlanes/swimlaneHeader.jade @@ -1,5 +1,5 @@ template(name="swimlaneHeader") - .swimlane-header-wrap.js-swimlane-header + .swimlane-header-wrap.js-swimlane-header(class='{{#if colorClass}}swimlane-{{colorClass}}{{/if}}') +inlinedForm +editSwimlaneTitleForm else @@ -20,6 +20,9 @@ template(name="editSwimlaneTitleForm") template(name="swimlaneActionPopup") unless currentUser.isCommentOnly + ul.pop-over-list + li: a.js-set-swimlane-color {{_ 'select-color'}} + hr ul.pop-over-list li: a.js-close-swimlane {{_ 'archive-swimlane'}} @@ -30,3 +33,12 @@ template(name="swimlaneAddPopup") autocomplete="off" autofocus) .edit-controls.clearfix button.primary.confirm(type="submit") {{_ 'add'}} + +template(name="setSwimlaneColorPopup") + 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'}} diff --git a/client/components/swimlanes/swimlaneHeader.js b/client/components/swimlanes/swimlaneHeader.js index 632a0f50..1004cb25 100644 --- a/client/components/swimlanes/swimlaneHeader.js +++ b/client/components/swimlanes/swimlaneHeader.js @@ -1,5 +1,10 @@ const { calculateIndexData } = Utils; +let swimlaneColors; +Meteor.startup(() => { + swimlaneColors = Swimlanes.simpleSchema()._schema.color.allowedValues; +}); + BlazeComponent.extendComponent({ editTitle(evt) { evt.preventDefault(); @@ -20,6 +25,7 @@ BlazeComponent.extendComponent({ }).register('swimlaneHeader'); Template.swimlaneActionPopup.events({ + 'click .js-set-swimlane-color': Popup.open('setSwimlaneColor'), 'click .js-close-swimlane' (evt) { evt.preventDefault(); this.archive(); @@ -60,3 +66,34 @@ BlazeComponent.extendComponent({ }]; }, }).register('swimlaneAddPopup'); + +BlazeComponent.extendComponent({ + onCreated() { + this.currentSwimlane = this.currentData(); + this.currentColor = new ReactiveVar(this.currentSwimlane.color); + }, + + colors() { + return swimlaneColors.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.currentSwimlane.setColor(this.currentColor.get()); + Popup.close(); + }, + 'click .js-remove-color'() { + this.currentSwimlane.setColor(null); + Popup.close(); + }, + }]; + }, +}).register('setSwimlaneColorPopup'); diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl index 71089bb4..e4e2cd3b 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/client/components/swimlanes/swimlanes.styl @@ -53,3 +53,84 @@ .list-group flex-direction: row height: 100% + +swimlane-color(background, color...) + background: background !important + if color + color: color !important //overwrite text for better visibility + +.swimlane-white + swimlane-color(#ffffff, #4d4d4d) //Black text for better visibility + border: 1px solid #eee + +.swimlane-green + swimlane-color(#3cb500, #ffffff) //White text for better visibility + +.swimlane-yellow + swimlane-color(#fad900, #4d4d4d) //Black text for better visibility + +.swimlane-orange + swimlane-color(#ff9f19, #4d4d4d) //Black text for better visibility + +.swimlane-red + swimlane-color(#eb4646, #ffffff) //White text for better visibility + +.swimlane-purple + swimlane-color(#a632db, #ffffff) //White text for better visibility + +.swimlane-blue + swimlane-color(#0079bf, #ffffff) //White text for better visibility + +.swimlane-pink + swimlane-color(#ff78cb, #4d4d4d) //Black text for better visibility + +.swimlane-sky + swimlane-color(#00c2e0, #ffffff) //White text for better visibility + +.swimlane-black + swimlane-color(#4d4d4d, #ffffff) //White text for better visibility + +.swimlane-lime + swimlane-color(#51e898, #4d4d4d) //Black text for better visibility + +.swimlane-silver + swimlane-color(unset, #4d4d4d) //Black text for better visibility + +.swimlane-peachpuff + swimlane-color(#ffdab9, #4d4d4d) //Black text for better visibility + +.swimlane-crimson + swimlane-color(#dc143c, #ffffff) //White text for better visibility + +.swimlane-plum + swimlane-color(#dda0dd, #4d4d4d) //Black text for better visibility + +.swimlane-darkgreen + swimlane-color(#006400, #ffffff) //White text for better visibility + +.swimlane-slateblue + swimlane-color(#6a5acd, #ffffff) //White text for better visibility + +.swimlane-magenta + swimlane-color(#ff00ff, #ffffff) //White text for better visibility + +.swimlane-gold + swimlane-color(#ffd700, #4d4d4d) //Black text for better visibility + +.swimlane-navy + swimlane-color(#000080, #ffffff) //White text for better visibility + +.swimlane-gray + swimlane-color(#808080, #ffffff) //White text for better visibility + +.swimlane-saddlebrown + swimlane-color(#8b4513, #ffffff) //White text for better visibility + +.swimlane-paleturquoise + swimlane-color(#afeeee, #4d4d4d) //Black text for better visibility + +.swimlane-mistyrose + swimlane-color(#ffe4e1, #4d4d4d) //Black text for better visibility + +.swimlane-indigo + swimlane-color(#4b0082, #ffffff) //White text for better visibility -- cgit v1.2.3-1-g7c22 From 5c6a725712a443b4d03b4f86262033ddfb66bc3d Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Fri, 25 Jan 2019 10:47:36 +0100 Subject: Make sure Swimlanes and Lists have a populated sort field When moving around the swimlanes or the lists, if one element has a sort with a null value, the computation of the new sort value is aborted, meaning that there are glitches in the UI. This happens on the first swimlane created with the new board, or when a swimlane or a list gets added through the API. --- client/components/boards/boardBody.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) (limited to 'client') diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index ccbd0f23..ae5b67fd 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -35,6 +35,37 @@ BlazeComponent.extendComponent({ this._isDragging = false; // Used to set the overlay this.mouseHasEnterCardDetails = false; + + // fix swimlanes sort field if there are null values + const currentBoardData = Boards.findOne(Session.get('currentBoard')); + const nullSortSwimlanes = currentBoardData.nullSortSwimlanes(); + if (nullSortSwimlanes.count() > 0) { + const swimlanes = currentBoardData.swimlanes(); + let count = 0; + swimlanes.forEach((s) => { + Swimlanes.update(s._id, { + $set: { + sort: count, + }, + }); + count += 1; + }); + } + + // fix lists sort field if there are null values + const nullSortLists = currentBoardData.nullSortLists(); + if (nullSortLists.count() > 0) { + const lists = currentBoardData.lists(); + let count = 0; + lists.forEach((l) => { + Lists.update(l._id, { + $set: { + sort: count, + }, + }); + count += 1; + }); + } }, onRendered() { const boardComponent = this; -- cgit v1.2.3-1-g7c22 From 78c779faafad2010842bfccca9ef5c483530c892 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Thu, 24 Jan 2019 09:13:49 +0100 Subject: client: lists headers: use padding instead of margin No visual changes but allows to set a background color to the list header. --- client/components/lists/list.styl | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'client') diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index ec835961..c2bfa3db 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -45,7 +45,7 @@ .list-header flex: 0 0 auto - margin: 20px 12px 4px + padding: 20px 12px 4px position: relative min-height: 20px @@ -73,10 +73,10 @@ .list-header-menu position: absolute - padding: 7px + padding: 27px 19px margin-top: 1px - top: -@padding - right: -@padding + top: -7px + right: -7px .list-header-plus-icon color: #a6a6a6 -- cgit v1.2.3-1-g7c22 From d0a9d8c581f9356f5e72ccb698fc3963c59e96cd Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Fri, 25 Jan 2019 15:56:40 +0100 Subject: colors: add per list color Hamburger menu only. Note that I am definitively not responsible for the resulting Christmas tree. fixes #328 --- client/components/lists/list.styl | 81 +++++++++++++++++++++++++++++++++ client/components/lists/listHeader.jade | 15 +++++- client/components/lists/listHeader.js | 37 +++++++++++++++ 3 files changed, 132 insertions(+), 1 deletion(-) (limited to 'client') diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index c2bfa3db..91823bdb 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -197,3 +197,84 @@ .search-card-results max-height: 250px overflow: hidden + +list-header-color(background, color...) + background: background !important + if color + color: color !important //overwrite text for better visibility + +.list-header-white + list-header-color(#ffffff, #4d4d4d) //Black text for better visibility + border: 1px solid #eee + +.list-header-green + list-header-color(#3cb500, #ffffff) //White text for better visibility + +.list-header-yellow + list-header-color(#fad900, #4d4d4d) //Black text for better visibility + +.list-header-orange + list-header-color(#ff9f19, #4d4d4d) //Black text for better visibility + +.list-header-red + list-header-color(#eb4646, #ffffff) //White text for better visibility + +.list-header-purple + list-header-color(#a632db, #ffffff) //White text for better visibility + +.list-header-blue + list-header-color(#0079bf, #ffffff) //White text for better visibility + +.list-header-pink + list-header-color(#ff78cb, #4d4d4d) //Black text for better visibility + +.list-header-sky + list-header-color(#00c2e0, #ffffff) //White text for better visibility + +.list-header-black + list-header-color(#4d4d4d, #ffffff) //White text for better visibility + +.list-header-lime + list-header-color(#51e898, #4d4d4d) //Black text for better visibility + +.list-header-silver + list-header-color(unset, #4d4d4d) //Black text for better visibility + +.list-header-peachpuff + list-header-color(#ffdab9, #4d4d4d) //Black text for better visibility + +.list-header-crimson + list-header-color(#dc143c, #ffffff) //White text for better visibility + +.list-header-plum + list-header-color(#dda0dd, #4d4d4d) //Black text for better visibility + +.list-header-darkgreen + list-header-color(#006400, #ffffff) //White text for better visibility + +.list-header-slateblue + list-header-color(#6a5acd, #ffffff) //White text for better visibility + +.list-header-magenta + list-header-color(#ff00ff, #ffffff) //White text for better visibility + +.list-header-gold + list-header-color(#ffd700, #4d4d4d) //Black text for better visibility + +.list-header-navy + list-header-color(#000080, #ffffff) //White text for better visibility + +.list-header-gray + list-header-color(#808080, #ffffff) //White text for better visibility + +.list-header-saddlebrown + list-header-color(#8b4513, #ffffff) //White text for better visibility + +.list-header-paleturquoise + list-header-color(#afeeee, #4d4d4d) //Black text for better visibility + +.list-header-mistyrose + list-header-color(#ffe4e1, #4d4d4d) //Black text for better visibility + +.list-header-indigo + list-header-color(#4b0082, #ffffff) //White text for better visibility diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 25ab8c20..48005eaf 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -1,5 +1,6 @@ template(name="listHeader") - .list-header.js-list-header + .list-header.js-list-header( + class="{{#if colorClass}}list-header-{{colorClass}}{{/if}}") +inlinedForm +editListTitleForm else @@ -49,6 +50,9 @@ template(name="listActionPopup") li: a.js-toggle-watch-list {{#if isWatching}}{{_ 'unwatch'}}{{else}}{{_ 'watch'}}{{/if}} unless currentUser.isCommentOnly hr + ul.pop-over-list + li: a.js-set-color-list {{_ 'set-color-list'}} + hr ul.pop-over-list if cards.count li: a.js-select-cards {{_ 'list-select-cards'}} @@ -111,3 +115,12 @@ template(name="wipLimitErrorPopup") p {{_ 'wipLimitErrorPopup-dialog-pt1'}} p {{_ 'wipLimitErrorPopup-dialog-pt2'}} button.full.js-back-view(type="submit") {{_ 'cancel'}} + +template(name="setListColorPopup") + form.edit-label + .palette-colors: each colors + span.card-label.palette-color.js-palette-color(class="list-header-{{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/lists/listHeader.js b/client/components/lists/listHeader.js index abcc4639..25e6cb69 100644 --- a/client/components/lists/listHeader.js +++ b/client/components/lists/listHeader.js @@ -1,3 +1,8 @@ +let listsColors; +Meteor.startup(() => { + listsColors = Lists.simpleSchema()._schema.color.allowedValues; +}); + BlazeComponent.extendComponent({ canSeeAddCard() { const list = Template.currentData(); @@ -72,6 +77,7 @@ Template.listActionPopup.helpers({ Template.listActionPopup.events({ 'click .js-list-subscribe' () {}, + 'click .js-set-color-list': Popup.open('setListColor'), 'click .js-select-cards' () { const cardIds = this.allCards().map((card) => card._id); MultiSelection.add(cardIds); @@ -154,3 +160,34 @@ Template.listMorePopup.events({ Utils.goBoardId(this.boardId); }), }); + +BlazeComponent.extendComponent({ + onCreated() { + this.currentList = this.currentData(); + this.currentColor = new ReactiveVar(this.currentList.color); + }, + + colors() { + return listsColors.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.currentList.setColor(this.currentColor.get()); + Popup.close(); + }, + 'click .js-remove-color'() { + this.currentList.setColor(null); + Popup.close(); + }, + }]; + }, +}).register('setListColorPopup'); -- cgit v1.2.3-1-g7c22 From 97d95b4bcbcab86629e368ea41bb9f00450b21f6 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Fri, 25 Jan 2019 15:58:52 +0100 Subject: ui: lists: make sure all lists boxes are the same height When `Show card count` is enabled, the lists with the card counts have two lines of text while the lists without have only one. This results in the box around the list headers are not of the same size and this is visible when setting a color to the list. --- client/components/lists/list.styl | 5 +++++ client/components/lists/listHeader.jade | 1 + 2 files changed, 6 insertions(+) (limited to 'client') diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 91823bdb..c12a2c73 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -43,12 +43,16 @@ background: white margin: -3px 0 8px +.list-header-card-count + height: 35px + .list-header flex: 0 0 auto padding: 20px 12px 4px position: relative min-height: 20px + &.ui-sortable-handle cursor: grab @@ -67,6 +71,7 @@ text-overflow: ellipsis word-wrap: break-word + .list-header-watch-icon padding-left: 10px color: #a6a6a6 diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 48005eaf..eafcc510 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -1,5 +1,6 @@ template(name="listHeader") .list-header.js-list-header( + class="{{#if limitToShowCardsCount}}list-header-card-count{{/if}}" class="{{#if colorClass}}list-header-{{colorClass}}{{/if}}") +inlinedForm +editListTitleForm -- cgit v1.2.3-1-g7c22 From 33977b2282d8891bf507c4d9a1502c644afd6352 Mon Sep 17 00:00:00 2001 From: Benjamin Tissoires Date: Fri, 25 Jan 2019 18:11:40 +0100 Subject: lists-color: only colorize the bottom border And make the background clearer to visually separate the header from the list of cards --- client/components/lists/list.styl | 12 +++++++++--- client/components/lists/listHeader.jade | 3 ++- client/components/swimlanes/swimlanes.jade | 2 +- 3 files changed, 12 insertions(+), 5 deletions(-) (limited to 'client') diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index c12a2c73..51ade73c 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -46,11 +46,19 @@ .list-header-card-count height: 35px +.list-header-add + flex: 0 0 auto + padding: 20px 12px 4px + position: relative + min-height: 20px + .list-header flex: 0 0 auto padding: 20px 12px 4px position: relative min-height: 20px + background-color: #e4e4e4; + border-bottom: 6px solid #e4e4e4; &.ui-sortable-handle @@ -204,9 +212,7 @@ overflow: hidden list-header-color(background, color...) - background: background !important - if color - color: color !important //overwrite text for better visibility + border-bottom: 6px solid background .list-header-white list-header-color(#ffffff, #4d4d4d) //Black text for better visibility diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index eafcc510..aa6d3786 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -120,7 +120,8 @@ template(name="wipLimitErrorPopup") template(name="setListColorPopup") form.edit-label .palette-colors: each colors - span.card-label.palette-color.js-palette-color(class="list-header-{{color}}") + // note: we use the swimlane palette to have more than just the border + span.card-label.palette-color.js-palette-color(class="swimlane-{{color}}") if(isSelected color) i.fa.fa-check button.primary.confirm.js-submit {{_ 'save'}} diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade index cd864a7c..ad61466e 100644 --- a/client/components/swimlanes/swimlanes.jade +++ b/client/components/swimlanes/swimlanes.jade @@ -38,7 +38,7 @@ template(name="listsGroup") template(name="addListForm") .list.list-composer.js-list-composer - .list-header + .list-header-add +inlinedForm(autoclose=false) input.list-name-input.full-line(type="text" placeholder="{{_ 'add-list'}}" autocomplete="off" autofocus) -- cgit v1.2.3-1-g7c22