diff options
author | Lauri Ojansivu <x@xet7.org> | 2018-01-28 00:02:35 +0200 |
---|---|---|
committer | Lauri Ojansivu <x@xet7.org> | 2018-01-28 00:02:35 +0200 |
commit | 6aca70f0d11cd93355f65356c5550e7071f42aaa (patch) | |
tree | 62f9fb26fb52ae9f71c1f09d37af9058fa00ed75 /client/components/swimlanes | |
parent | 963e3193451327cec89da2abc1f4aee7ee308f08 (diff) | |
parent | 081c1fdf835c6f1d2030b3b9e23229378d4f8cce (diff) | |
download | wekan-6aca70f0d11cd93355f65356c5550e7071f42aaa.tar.gz wekan-6aca70f0d11cd93355f65356c5550e7071f42aaa.tar.bz2 wekan-6aca70f0d11cd93355f65356c5550e7071f42aaa.zip |
Merge branch 'devel'
Diffstat (limited to 'client/components/swimlanes')
-rw-r--r-- | client/components/swimlanes/swimlanes.jade | 78 | ||||
-rw-r--r-- | client/components/swimlanes/swimlanes.js | 223 | ||||
-rw-r--r-- | client/components/swimlanes/swimlanes.styl | 20 |
3 files changed, 321 insertions, 0 deletions
diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade new file mode 100644 index 00000000..77afa399 --- /dev/null +++ b/client/components/swimlanes/swimlanes.jade @@ -0,0 +1,78 @@ +template(name="swimlane") + .swimlane.js-lists + .swimlane-header-wrap + .swimlane-header + = title + if isMiniScreen + if currentList + +list(currentList) + else + each currentBoard.lists + +miniList(this) + if currentUser.isBoardMember + +addListForm + else + each currentBoard.lists + +list(this) + if currentCardIsInThisList + +cardDetails(currentCard) + if currentUser.isBoardMember + +addListForm + +addListAndSwimlaneForm + +template(name="listsGroup") + .swimlane.js-lists + if isMiniScreen + if currentList + +list(currentList) + else + each currentBoard.lists + +miniList(this) + if currentUser.isBoardMember + +addListForm + else + each currentBoard.lists + +list(this) + if currentCardIsInThisList + +cardDetails(currentCard) + if currentUser.isBoardMember + +addListForm + +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 new file mode 100644 index 00000000..397f9e9b --- /dev/null +++ b/client/components/swimlanes/swimlanes.js @@ -0,0 +1,223 @@ +BlazeComponent.extendComponent({ + onCreated() { + this.draggingActive = new ReactiveVar(false); + + this._isDragging = false; + this._lastDragPositionX = 0; + }, + + openNewListForm() { + this.childComponents('addListForm')[0].open(); + }, + + id() { + return this._id; + }, + + // XXX Flow components allow us to avoid creating these two setter methods by + // exposing a public API to modify the component state. We need to investigate + // best practices here. + setIsDragging(bool) { + this.draggingActive.set(bool); + }, + + scrollLeft(position = 0) { + const lists = this.$('.js-lists'); + lists && lists.animate({ + scrollLeft: position, + }); + }, + + currentCardIsInThisList() { + const currentCard = Cards.findOne(Session.get('currentCard')); + const listId = this.currentData()._id; + return currentCard && currentCard.listId === listId; //TODO: AND IN THIS SWIMLANE + }, + + events() { + return [{ + // Click-and-drag action + 'mousedown .board-canvas'(evt) { + // Translating the board canvas using the click-and-drag action can + // conflict with the build-in browser mechanism to select text. We + // define a list of elements in which we disable the dragging because + // the user will legitimately expect to be able to select some text with + // his mouse. + const noDragInside = ['a', 'input', 'textarea', 'p', '.js-list-header']; + if ($(evt.target).closest(noDragInside.join(',')).length === 0 && this.$('.swimlane').prop('clientHeight') > evt.offsetY) { + this._isDragging = true; + this._lastDragPositionX = evt.clientX; + } + }, + 'mouseup'() { + if (this._isDragging) { + this._isDragging = false; + } + }, + 'mousemove'(evt) { + if (this._isDragging) { + // Update the canvas position + this.listsDom.scrollLeft -= evt.clientX - this._lastDragPositionX; + this._lastDragPositionX = evt.clientX; + // Disable browser text selection while dragging + evt.stopPropagation(); + evt.preventDefault(); + // Don't close opened card or inlined form at the end of the + // click-and-drag. + EscapeActions.executeUpTo('popup-close'); + EscapeActions.preventNextClick(); + } + }, + }]; + }, +}).register('swimlane'); + +Template.swimlane.onRendered(function() { + const self = BlazeComponent.getComponentForElement(this.firstNode); + + self.listsDom = this.find('.js-lists'); + + if (!Session.get('currentCard')) { + self.scrollLeft(); + } + + // We want to animate the card details window closing. We rely on CSS + // transition for the actual animation. + self.listsDom._uihooks = { + removeElement(node) { + const removeNode = _.once(() => { + node.parentNode.removeChild(node); + }); + if ($(node).hasClass('js-card-details')) { + $(node).css({ + flexBasis: 0, + padding: 0, + }); + $(self.listsDom).one(CSSEvents.transitionend, removeNode); + } else { + removeNode(); + } + }, + }; + + $(self.listsDom).sortable({ + tolerance: 'pointer', + helper: 'clone', + handle: '.js-list-header', + items: '.js-list:not(.js-list-composer)', + placeholder: 'list placeholder', + distance: 7, + start(evt, ui) { + ui.placeholder.height(ui.helper.height()); + Popup.close(); + }, + stop() { + $(self.listsDom).find('.js-list:not(.js-list-composer)').each( + (i, list) => { + const data = Blaze.getData(list); + Lists.update(data._id, { + $set: { + sort: i, + }, + }); + } + ); + }, + }); + + function userIsMember() { + return Meteor.user() && Meteor.user().isBoardMember(); + } + + // Disable drag-dropping while in multi-selection mode, or if the current user + // is not a board member + self.autorun(() => { + const $listDom = $(self.listsDom); + if ($listDom.data('sortable')) { + $(self.listsDom).sortable('option', 'disabled', + MultiSelection.isActive() || !userIsMember()); + } + }); + + // If there is no data in the board (ie, no lists) we autofocus the list + // creation form by clicking on the corresponding element. + const currentBoard = Boards.findOne(Session.get('currentBoard')); + if (userIsMember() && currentBoard.lists().count() === 0) { + self.openNewListForm(); + } +}); + +BlazeComponent.extendComponent({ + // Proxy + open() { + this.childComponents('inlinedForm')[0].open(); + }, + + events() { + return [{ + submit(evt) { + evt.preventDefault(); + const titleInput = this.find('.list-name-input'); + const title = titleInput.value.trim(); + if (title) { + Lists.insert({ + title, + boardId: Session.get('currentBoard'), + sort: $('.list').length, + }); + + titleInput.value = ''; + titleInput.focus(); + } + }, + }]; + }, +}).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 new file mode 100644 index 00000000..48bc495c --- /dev/null +++ b/client/components/swimlanes/swimlanes.styl @@ -0,0 +1,20 @@ +@import 'nib' + +.swimlane-header-wrap + display: flex; + flex-direction: column; + flex: 0 0 50px; + + .swimlane-header + writing-mode: sideways-lr; + font-size: 14px; + line-height: 50px; + margin: 0; + font-weight: bold; + min-height: 9px; + min-width: 30px; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + word-wrap: break-word; + text-align: center; |