summaryrefslogtreecommitdiffstats
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/components/boards/boardBody.jade20
-rw-r--r--client/components/boards/boardBody.js146
-rw-r--r--client/components/boards/boardBody.styl6
-rw-r--r--client/components/boards/boardHeader.js5
-rw-r--r--client/components/cards/cardDetails.js12
-rw-r--r--client/components/lists/list.js2
-rw-r--r--client/components/lists/listBody.jade2
-rw-r--r--client/components/lists/listBody.js2
-rw-r--r--client/components/swimlanes/swimlanes.jade20
-rw-r--r--client/components/swimlanes/swimlanes.js181
-rw-r--r--client/components/swimlanes/swimlanes.styl21
11 files changed, 245 insertions, 172 deletions
diff --git a/client/components/boards/boardBody.jade b/client/components/boards/boardBody.jade
index bb3d2906..98384c84 100644
--- a/client/components/boards/boardBody.jade
+++ b/client/components/boards/boardBody.jade
@@ -20,22 +20,10 @@ template(name="boardBody")
class="{{#if draggingActive.get}}is-dragging-active{{/if}}")
if showOverlay.get
.board-overlay
- .lists.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
+ each currentBoard.swimlanes
+ +swimlane(this)
+// if currentUser.isBoardMember
+// +addSwimlaneForm
template(name="addListForm")
.list.js-list.list-composer.js-list-composer
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index b3880c61..02174849 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -29,10 +29,6 @@ BlazeComponent.extendComponent({
this.mouseHasEnterCardDetails = false;
},
- openNewListForm() {
- this.childComponents('addListForm')[0].open();
- },
-
// 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.
@@ -47,12 +43,6 @@ BlazeComponent.extendComponent({
});
},
- currentCardIsInThisList() {
- const currentCard = Cards.findOne(Session.get('currentCard'));
- const listId = this.currentData()._id;
- return currentCard && currentCard.listId === listId;
- },
-
onlyShowCurrentCard() {
return Utils.isMiniScreen() && Session.get('currentCard');
},
@@ -66,147 +56,11 @@ BlazeComponent.extendComponent({
this.showOverlay.set(false);
}
},
-
- // 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 && $('.lists').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('board');
-
-Template.boardBody.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');
-
-Template.boardBody.helpers({
- canSeeAddList() {
- return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
- },
-});
diff --git a/client/components/boards/boardBody.styl b/client/components/boards/boardBody.styl
index bb9beb19..7d3c8f71 100644
--- a/client/components/boards/boardBody.styl
+++ b/client/components/boards/boardBody.styl
@@ -20,7 +20,8 @@ position()
&.is-sibling-sidebar-open
margin-right: 248px
- .lists
+ .swimlane
+ border-bottom: 1px solid #CCC
align-items: flex-start
display: flex
flex-direction: row
@@ -49,8 +50,9 @@ position()
.board-canvas
- .lists
+ .swimlane
align-items: flex-start
+ border-bottom: 1px solid #CCC
display: flex
flex-direction: column
margin: 0
diff --git a/client/components/boards/boardHeader.js b/client/components/boards/boardHeader.js
index fe10dab1..e6943b40 100644
--- a/client/components/boards/boardHeader.js
+++ b/client/components/boards/boardHeader.js
@@ -164,6 +164,11 @@ const CreateBoard = BlazeComponent.extendComponent({
permission: visibility,
}));
+ Swimlanes.insert({
+ title: 'Default',
+ boardId: this.boardId.get(),
+ });
+
Utils.goBoardId(this.boardId.get());
},
diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index f4e6e773..94a938f0 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -20,8 +20,8 @@ BlazeComponent.extendComponent({
onCreated() {
this.isLoaded = new ReactiveVar(false);
- this.parentComponent().showOverlay.set(true);
- this.parentComponent().mouseHasEnterCardDetails = false;
+ this.parentComponent().parentComponent().showOverlay.set(true);
+ this.parentComponent().parentComponent().mouseHasEnterCardDetails = false;
this.calculateNextPeak();
Meteor.subscribe('unsaved-edits');
@@ -42,7 +42,7 @@ BlazeComponent.extendComponent({
scrollParentContainer() {
const cardPanelWidth = 510;
- const bodyBoardComponent = this.parentComponent();
+ const bodyBoardComponent = this.parentComponent().parentComponent();
const $cardContainer = bodyBoardComponent.$('.js-lists');
const $cardView = this.$(this.firstNode());
@@ -69,7 +69,7 @@ BlazeComponent.extendComponent({
},
onDestroyed() {
- this.parentComponent().showOverlay.set(false);
+ this.parentComponent().parentComponent().showOverlay.set(false);
},
events() {
@@ -104,8 +104,8 @@ BlazeComponent.extendComponent({
'click .js-add-members': Popup.open('cardMembers'),
'click .js-add-labels': Popup.open('cardLabels'),
'mouseenter .js-card-details' () {
- this.parentComponent().showOverlay.set(true);
- this.parentComponent().mouseHasEnterCardDetails = true;
+ this.parentComponent().parentComponent().showOverlay.set(true);
+ this.parentComponent().parentComponent().mouseHasEnterCardDetails = true;
},
'click #toggleButton'() {
Meteor.call('toggleSystemMessages');
diff --git a/client/components/lists/list.js b/client/components/lists/list.js
index a65ccc56..1d38f8f6 100644
--- a/client/components/lists/list.js
+++ b/client/components/lists/list.js
@@ -18,7 +18,7 @@ BlazeComponent.extendComponent({
// callback, we basically solve all issues related to reactive updates. A
// comment below provides further details.
onRendered() {
- const boardComponent = this.parentComponent();
+ const boardComponent = this.parentComponent().parentComponent();
const itemsSelector = '.js-minicard:not(.placeholder, .js-card-composer)';
const $cards = this.$('.js-minicards');
$cards.sortable({
diff --git a/client/components/lists/listBody.jade b/client/components/lists/listBody.jade
index 840fd801..abe0298b 100644
--- a/client/components/lists/listBody.jade
+++ b/client/components/lists/listBody.jade
@@ -4,7 +4,7 @@ template(name="listBody")
if cards.count
+inlinedForm(autoclose=false position="top")
+addCardForm(listId=_id position="top")
- each cards
+ each cards ../../_id
a.minicard-wrapper.js-minicard(href=absoluteUrl
class="{{#if cardIsSelected}}is-selected{{/if}}"
class="{{#if MultiSelection.isSelected _id}}is-checked{{/if}}")
diff --git a/client/components/lists/listBody.js b/client/components/lists/listBody.js
index fe2f1630..7a63eab6 100644
--- a/client/components/lists/listBody.js
+++ b/client/components/lists/listBody.js
@@ -36,6 +36,7 @@ BlazeComponent.extendComponent({
const members = formComponent.members.get();
const labelIds = formComponent.labels.get();
+ const swimlaneId = this.parentComponent().parentComponent().data()._id;
if (title) {
const _id = Cards.insert({
title,
@@ -44,6 +45,7 @@ BlazeComponent.extendComponent({
listId: this.data()._id,
boardId: this.data().board()._id,
sort: sortIndex,
+ swimlaneId: swimlaneId,
});
// In case the filter is active we need to add the newly inserted card in
// the list of exceptions -- cards that are not filtered. Otherwise the
diff --git a/client/components/swimlanes/swimlanes.jade b/client/components/swimlanes/swimlanes.jade
new file mode 100644
index 00000000..8dbef116
--- /dev/null
+++ b/client/components/swimlanes/swimlanes.jade
@@ -0,0 +1,20 @@
+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
diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js
new file mode 100644
index 00000000..9388be3a
--- /dev/null
+++ b/client/components/swimlanes/swimlanes.js
@@ -0,0 +1,181 @@
+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');
+
+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..e9397594
--- /dev/null
+++ b/client/components/swimlanes/swimlanes.styl
@@ -0,0 +1,21 @@
+@import 'nib'
+
+.swimlane-header-wrap
+ display: flex;
+ flex-direction: column;
+ flex: 0 0 50px;
+
+ .swimlane-header
+ writing-mode: sideways-lr;
+ height: 100%;
+ 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;
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-31 09:33:53 +0000