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/components') 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