From ee2a43dd5b4b5296f61f68b46fd85521224f571d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Manelli?= Date: Fri, 19 Jan 2018 16:00:02 -0300 Subject: Add siwmlane button. Allow card drop between swimlanes --- client/components/boards/boardBody.jade | 16 -------- client/components/boards/boardBody.styl | 4 -- client/components/lists/list.js | 5 ++- client/components/lists/list.styl | 1 - client/components/swimlanes/swimlanes.jade | 40 +++++++++++++++++++ client/components/swimlanes/swimlanes.js | 63 ++++++++++++++++++++++++++++++ client/components/swimlanes/swimlanes.styl | 1 - 7 files changed, 106 insertions(+), 24 deletions(-) (limited to 'client/components') diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade index 98384c84..e00794f3 100644 --- a/client/components/boards/boardBody.jade +++ b/client/components/boards/boardBody.jade @@ -22,19 +22,3 @@ template(name="boardBody") .board-overlay each currentBoard.swimlanes +swimlane(this) -// if currentUser.isBoardMember -// +addSwimlaneForm - -template(name="addListForm") - .list.js-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'}} diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl index 7d3c8f71..f5ecc08e 100644 --- a/client/components/boards/boardBody.styl +++ b/client/components/boards/boardBody.styl @@ -22,14 +22,12 @@ position() .swimlane border-bottom: 1px solid #CCC - align-items: flex-start display: flex flex-direction: row margin: 0 0 10px padding: 0 40px 5px 0 overflow-x: auto overflow-y: hidden - position: cover .board-overlay position: cover @@ -51,7 +49,6 @@ position() .board-canvas .swimlane - align-items: flex-start border-bottom: 1px solid #CCC display: flex flex-direction: column @@ -59,4 +56,3 @@ position() padding: 0 40px 0px 0 overflow-x: hidden overflow-y: auto - position: cover diff --git a/client/components/lists/list.js b/client/components/lists/list.js index 1d38f8f6..e922a3fd 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -55,6 +55,7 @@ BlazeComponent.extendComponent({ const nCards = MultiSelection.isActive() ? MultiSelection.count() : 1; const sortIndex = calculateIndex(prevCardDom, nextCardDom, nCards); const listId = Blaze.getData(ui.item.parents('.list').get(0))._id; + const swimlaneId = Blaze.getData(ui.item.parents('.swimlane').get(0))._id; // Normally the jquery-ui sortable library moves the dragged DOM element // to its new position, which disrupts Blaze reactive updates mechanism @@ -67,12 +68,12 @@ BlazeComponent.extendComponent({ if (MultiSelection.isActive()) { Cards.find(MultiSelection.getMongoSelector()).forEach((card, i) => { - card.move(listId, sortIndex.base + i * sortIndex.increment); + card.move(swimlaneId, listId, sortIndex.base + i * sortIndex.increment); }); } else { const cardDomElement = ui.item.get(0); const card = Blaze.getData(cardDomElement); - card.move(listId, sortIndex.base); + card.move(swimlaneId, listId, sortIndex.base); } boardComponent.setIsDragging(false); }, diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl index 21d267ca..c3753360 100644 --- a/client/components/lists/list.styl +++ b/client/components/lists/list.styl @@ -9,7 +9,6 @@ // Even if this background color is the same as the body we can't leave it // transparent, because that won't work during a list drag. background: darken(white, 13%) - height: 100% border-left: 1px solid darken(white, 20%) padding: 0 float: left diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade index 8dbef116..e3b6b6d7 100644 --- a/client/components/swimlanes/swimlanes.jade +++ b/client/components/swimlanes/swimlanes.jade @@ -18,3 +18,43 @@ template(name="swimlane") +cardDetails(currentCard) if currentUser.isBoardMember +addListForm + +addListAndSwimlaneForm + +template(name="addListAndSwimlaneForm") + .list.js-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'}}" + 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.js-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'}} diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index 9388be3a..5c2429dd 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -174,6 +174,69 @@ BlazeComponent.extendComponent({ }, }).register('addListForm'); +BlazeComponent.extendComponent({ + // Proxy + open() { + this.childComponents('inlinedForm')[0].open(); + }, + + events() { + return [{ + submit(evt) { + evt.preventDefault(); + var 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(); + console.log(title); + if (title) { + Swimlanes.insert({ + title, + boardId: Session.get('currentBoard'), + sort: $('.swimlane').length, + }); + + titleInput.value = ''; + titleInput.focus(); + } + } + }, + }]; + },/* + 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'); + console.log(titleInput); + } + }, + }]; + }, + */ +}).register('addListAndSwimlaneForm'); + 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 e9397594..48bc495c 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/client/components/swimlanes/swimlanes.styl @@ -7,7 +7,6 @@ .swimlane-header writing-mode: sideways-lr; - height: 100%; font-size: 14px; line-height: 50px; margin: 0; -- cgit v1.2.3-1-g7c22