diff options
Diffstat (limited to 'client/components/swimlanes')
| -rw-r--r-- | client/components/swimlanes/miniswimlane.jade | 8 | ||||
| -rw-r--r-- | client/components/swimlanes/swimlaneHeader.jade | 57 | ||||
| -rw-r--r-- | client/components/swimlanes/swimlaneHeader.js | 77 | ||||
| -rw-r--r-- | client/components/swimlanes/swimlanes.jade | 50 | ||||
| -rw-r--r-- | client/components/swimlanes/swimlanes.js | 81 | ||||
| -rw-r--r-- | client/components/swimlanes/swimlanes.styl | 104 |
6 files changed, 274 insertions, 103 deletions
diff --git a/client/components/swimlanes/miniswimlane.jade b/client/components/swimlanes/miniswimlane.jade new file mode 100644 index 00000000..d4be8599 --- /dev/null +++ b/client/components/swimlanes/miniswimlane.jade @@ -0,0 +1,8 @@ +template(name="miniswimlane") + .minicard( + class="minicard-{{colorClass}}") + .minicard-title + .handle + .fa.fa-arrows + +viewer + = title diff --git a/client/components/swimlanes/swimlaneHeader.jade b/client/components/swimlanes/swimlaneHeader.jade index 483de06f..8c6aa5a3 100644 --- a/client/components/swimlanes/swimlaneHeader.jade +++ b/client/components/swimlanes/swimlaneHeader.jade @@ -1,14 +1,21 @@ template(name="swimlaneHeader") - .swimlane-header-wrap.js-swimlane-header - +inlinedForm - +editSwimlaneTitleForm + .swimlane-header-wrap.js-swimlane-header(class='{{#if colorClass}}swimlane-{{colorClass}}{{/if}}') + if this.isTemplateContainer + +swimlaneFixedHeader(this) else - .swimlane-header( - class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}") - = title - .swimlane-header-menu - unless currentUser.isCommentOnly - a.fa.fa-navicon.js-open-swimlane-menu + +inlinedForm + +editSwimlaneTitleForm + else + +swimlaneFixedHeader(this) + +template(name="swimlaneFixedHeader") + .swimlane-header( + class="{{#if currentUser.isBoardMember}}js-open-inlined-form is-editable{{/if}}") + = 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") .list-composer @@ -20,4 +27,34 @@ template(name="editSwimlaneTitleForm") template(name="swimlaneActionPopup") unless currentUser.isCommentOnly ul.pop-over-list - li: a.js-close-swimlane {{_ 'archive-swimlane'}} + li: a.js-set-swimlane-color {{_ 'select-color'}} + unless this.isTemplateContainer + hr + 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'}} + unless currentBoard.isTemplatesBoard + unless currentBoard.isTemplateBoard + span.quiet + | {{_ 'or'}} + a.js-swimlane-template {{_ 'template'}} + +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'}} + +template(name="swimlaneDeletePopup") + p {{_ "swimlane-delete-pop"}} + button.js-confirm.negate.full(type="submit") {{_ 'delete'}} diff --git a/client/components/swimlanes/swimlaneHeader.js b/client/components/swimlanes/swimlaneHeader.js index 50635f86..e7f3cc76 100644 --- a/client/components/swimlanes/swimlaneHeader.js +++ b/client/components/swimlanes/swimlaneHeader.js @@ -1,3 +1,10 @@ +const { calculateIndexData } = Utils; + +let swimlaneColors; +Meteor.startup(() => { + swimlaneColors = Swimlanes.simpleSchema()._schema.color.allowedValues; +}); + BlazeComponent.extendComponent({ editTitle(evt) { evt.preventDefault(); @@ -11,15 +18,85 @@ BlazeComponent.extendComponent({ events() { return [{ 'click .js-open-swimlane-menu': Popup.open('swimlaneAction'), + 'click .js-open-add-swimlane-menu': Popup.open('swimlaneAdd'), submit: this.editTitle, }]; }, }).register('swimlaneHeader'); Template.swimlaneActionPopup.events({ + 'click .js-set-swimlane-color': Popup.open('setSwimlaneColor'), 'click .js-close-swimlane' (evt) { evt.preventDefault(); this.archive(); Popup.close(); }, }); + +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); + const swimlaneType = (currentBoard.isTemplatesBoard())?'template-swimlane':'swimlane'; + + if (title) { + Swimlanes.insert({ + title, + boardId: Session.get('currentBoard'), + sort: sortValue.base, + type: swimlaneType, + }); + + 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(); + }, + 'click .js-swimlane-template': Popup.open('searchElement'), + }]; + }, +}).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.jade b/client/components/swimlanes/swimlanes.jade index 76f54c66..c56834df 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 + .swimlane +swimlaneHeader + .swimlane.js-lists.js-swimlane if isMiniScreen - if currentList + if currentListIsInThisSwimlane _id +list(currentList) - else - each currentBoard.lists + unless currentList + each lists +miniList(this) if currentUser.isBoardMember +addListForm else - each currentBoard.lists + each lists +list(this) if currentCardIsInThisList _id ../_id +cardDetails(currentCard) if currentUser.isBoardMember - +addListAndSwimlaneForm + +addListForm template(name="listsGroup") .swimlane.list-group.js-lists @@ -23,52 +24,31 @@ template(name="listsGroup") if currentList +list(currentList) else - each currentBoard.lists + each lists +miniList(this) if currentUser.isBoardMember +addListForm else - each currentBoard.lists + each lists +list(this) if currentCardIsInThisList _id null +cardDetails(currentCard) if currentUser.isBoardMember +addListForm -template(name="addListAndSwimlaneForm") - .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.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) .edit-controls.clearfix button.primary.confirm(type="submit") {{_ 'save'}} - a.fa.fa-times-thin.js-close-inlined-form + unless currentBoard.isTemplatesBoard + unless currentBoard.isTemplateBoard + span.quiet + | {{_ 'or'}} + a.js-list-template {{_ 'template'}} else a.open-list-composer.js-open-inlined-form i.fa.fa-plus diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index 7965c2bc..d0ec3f4a 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -1,14 +1,25 @@ -const { calculateIndex } = Utils; +const { calculateIndex, enableClickOnTouch } = Utils; + +function currentListIsInThisSwimlane(swimlaneId) { + const currentList = Lists.findOne(Session.get('currentList')); + return currentList && (currentList.swimlaneId === swimlaneId || currentList.swimlaneId === ''); +} function currentCardIsInThisList(listId, swimlaneId) { const currentCard = Cards.findOne(Session.get('currentCard')); const currentUser = Meteor.user(); - if (currentUser.profile.boardView === 'board-view-lists') - return currentCard && currentCard.listId === listId; - else if (currentUser.profile.boardView === 'board-view-swimlanes') + if (currentUser && currentUser.profile && currentUser.profile.boardView === 'board-view-swimlanes') return currentCard && currentCard.listId === listId && currentCard.swimlaneId === swimlaneId; - else - return false; + else // Default view: board-view-lists + return currentCard && currentCard.listId === listId; + // https://github.com/wekan/wekan/issues/1623 + // https://github.com/ChronikEwok/wekan/commit/cad9b20451bb6149bfb527a99b5001873b06c3de + // TODO: In public board, if you would like to switch between List/Swimlane view, you could + // 1) If there is no view cookie, save to cookie board-view-lists + // board-view-lists / board-view-swimlanes / board-view-cal + // 2) If public user changes clicks board-view-lists then change view and + // then change view and save cookie with view value + // without using currentuser above, because currentuser is null. } function initSortable(boardComponent, $listsDom) { @@ -64,6 +75,9 @@ function initSortable(boardComponent, $listsDom) { }, }); + // ugly touch event hotfix + enableClickOnTouch('.js-list:not(.js-list-composer)'); + function userIsMember() { return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly(); } @@ -105,6 +119,10 @@ BlazeComponent.extendComponent({ return currentCardIsInThisList(listId, swimlaneId); }, + currentListIsInThisSwimlane(swimlaneId) { + return currentListIsInThisSwimlane(swimlaneId); + }, + events() { return [{ // Click-and-drag action @@ -144,6 +162,12 @@ BlazeComponent.extendComponent({ }).register('swimlane'); BlazeComponent.extendComponent({ + onCreated() { + this.currentBoard = Boards.findOne(Session.get('currentBoard')); + this.isListTemplatesSwimlane = this.currentBoard.isTemplatesBoard() && this.currentData().isListTemplatesSwimlane(); + this.currentSwimlane = this.currentData(); + }, + // Proxy open() { this.childComponents('inlinedForm')[0].open(); @@ -160,58 +184,19 @@ BlazeComponent.extendComponent({ title, boardId: Session.get('currentBoard'), sort: $('.list').length, + type: (this.isListTemplatesSwimlane)?'template-list':'list', + swimlaneId: (this.currentBoard.isTemplatesBoard())?this.currentSwimlane._id:'', }); titleInput.value = ''; titleInput.focus(); } }, + 'click .js-list-template': Popup.open('searchElement'), }]; }, }).register('addListForm'); -BlazeComponent.extendComponent({ - // Proxy - open() { - this.childComponents('inlinedForm')[0].open(); - }, - - events() { - 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(); - } - } - }, - }]; - }, -}).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 dce298b0..1056e1e3 100644 --- a/client/components/swimlanes/swimlanes.styl +++ b/client/components/swimlanes/swimlanes.styl @@ -7,7 +7,7 @@ display: flex flex-direction: row overflow: 0; - max-height: 100% + max-height: calc(100% - 26px) &.placeholder background-color: rgba(0, 0, 0, .2) @@ -27,19 +27,15 @@ .swimlane-header-wrap display: flex; flex-direction: row; - flex: 0 0 50px; - padding-bottom: 30px; - border-bottom: 1px solid #CCC + flex: 1 0 100%; + background-color: #ccc; .swimlane-header - 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; @@ -48,7 +44,95 @@ .swimlane-header-menu position: absolute - padding: 20px 20px + padding: 5px 5px + + .swimlane-header-plus-icon + margin-left: 5px + margin-right: 10px .list-group height: 100% + +.moving-swimlane + display: none + +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 |