summaryrefslogtreecommitdiffstats
path: root/client
diff options
context:
space:
mode:
authorLauri Ojansivu <x@xet7.org>2018-03-31 19:38:33 +0300
committerLauri Ojansivu <x@xet7.org>2018-03-31 19:38:33 +0300
commit4505495762ba4db3604c45a6dc628c4a2e6cdf2c (patch)
treef4c2053f187dc5f3da328f96f575fb26de5b05bb /client
parent5e88cb24cb6a3c4a0028bde7a7bff7fa5239f3f4 (diff)
parent679e50af6449a680f958256570e8b9f1944a3a92 (diff)
downloadwekan-4505495762ba4db3604c45a6dc628c4a2e6cdf2c.tar.gz
wekan-4505495762ba4db3604c45a6dc628c4a2e6cdf2c.tar.bz2
wekan-4505495762ba4db3604c45a6dc628c4a2e6cdf2c.zip
Merge branch 'fixDragInListsView' of https://github.com/andresmanelli/wekan into andresmanelli-fixDragInListsView
Diffstat (limited to 'client')
-rw-r--r--client/components/lists/listsGroup.js13
-rw-r--r--client/components/swimlanes/swimlanes.js172
-rw-r--r--client/components/swimlanes/swimlanes.styl2
3 files changed, 99 insertions, 88 deletions
diff --git a/client/components/lists/listsGroup.js b/client/components/lists/listsGroup.js
deleted file mode 100644
index f94f681f..00000000
--- a/client/components/lists/listsGroup.js
+++ /dev/null
@@ -1,13 +0,0 @@
-BlazeComponent.extendComponent({
- currentCardIsInThisList(listId, swimlaneId) {
- const currentCard = Cards.findOne(Session.get('currentCard'));
- const currentBoardId = Session.get('currentBoard');
- const board = Boards.findOne(currentBoardId);
- if (board.view === 'board-view-lists')
- return currentCard && currentCard.listId === listId;
- else if (board.view === 'board-view-swimlanes')
- return currentCard && currentCard.listId === listId && currentCard.swimlaneId === swimlaneId;
- else
- return false;
- },
-}).register('listsGroup');
diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js
index 3dd7f208..4f6bcf76 100644
--- a/client/components/swimlanes/swimlanes.js
+++ b/client/components/swimlanes/swimlanes.js
@@ -1,5 +1,85 @@
const { calculateIndex } = Utils;
+function currentCardIsInThisList(listId, swimlaneId) {
+ const currentCard = Cards.findOne(Session.get('currentCard'));
+ const currentBoardId = Session.get('currentBoard');
+ const board = Boards.findOne(currentBoardId);
+ if (board.view === 'board-view-lists')
+ return currentCard && currentCard.listId === listId;
+ else if (board.view === 'board-view-swimlanes')
+ return currentCard && currentCard.listId === listId && currentCard.swimlaneId === swimlaneId;
+ else
+ return false;
+};
+
+function initSortable(boardComponent, $listsDom) {
+ // We want to animate the card details window closing. We rely on CSS
+ // transition for the actual animation.
+ $listsDom._uihooks = {
+ removeElement(node) {
+ const removeNode = _.once(() => {
+ node.parentNode.removeChild(node);
+ });
+ if ($(node).hasClass('js-card-details')) {
+ $(node).css({
+ flexBasis: 0,
+ padding: 0,
+ });
+ $listsDom.one(CSSEvents.transitionend, removeNode);
+ } else {
+ removeNode();
+ }
+ },
+ };
+
+ $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());
+ EscapeActions.executeUpTo('popup-close');
+ boardComponent.setIsDragging(true);
+ },
+ stop(evt, ui) {
+ // To attribute the new index number, we need to get the DOM element
+ // of the previous and the following card -- if any.
+ const prevListDom = ui.item.prev('.js-list').get(0);
+ const nextListDom = ui.item.next('.js-list').get(0);
+ const sortIndex = calculateIndex(prevListDom, nextListDom, 1);
+
+ $listsDom.sortable('cancel');
+ const listDomElement = ui.item.get(0);
+ const list = Blaze.getData(listDomElement);
+
+ Lists.update(list._id, {
+ $set: {
+ sort: sortIndex.base,
+ },
+ });
+
+ boardComponent.setIsDragging(false);
+ },
+ });
+
+ function userIsMember() {
+ return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
+ }
+
+ // Disable drag-dropping while in multi-selection mode, or if the current user
+ // is not a board member
+ boardComponent.autorun(() => {
+ const $listDom = $listsDom;
+ if ($listDom.data('sortable')) {
+ $listsDom.sortable('option', 'disabled',
+ MultiSelection.isActive() || !userIsMember());
+ }
+ });
+};
+
BlazeComponent.extendComponent({
onRendered() {
const boardComponent = this.parentComponent();
@@ -9,71 +89,7 @@ BlazeComponent.extendComponent({
boardComponent.scrollLeft();
}
- // We want to animate the card details window closing. We rely on CSS
- // transition for the actual animation.
- $listsDom._uihooks = {
- removeElement(node) {
- const removeNode = _.once(() => {
- node.parentNode.removeChild(node);
- });
- if ($(node).hasClass('js-card-details')) {
- $(node).css({
- flexBasis: 0,
- padding: 0,
- });
- $listsDom.one(CSSEvents.transitionend, removeNode);
- } else {
- removeNode();
- }
- },
- };
-
- $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());
- EscapeActions.executeUpTo('popup-close');
- boardComponent.setIsDragging(true);
- },
- stop(evt, ui) {
- // To attribute the new index number, we need to get the DOM element
- // of the previous and the following card -- if any.
- const prevListDom = ui.item.prev('.js-list').get(0);
- const nextListDom = ui.item.next('.js-list').get(0);
- const sortIndex = calculateIndex(prevListDom, nextListDom, 1);
-
- $listsDom.sortable('cancel');
- const listDomElement = ui.item.get(0);
- const list = Blaze.getData(listDomElement);
-
- Lists.update(list._id, {
- $set: {
- sort: sortIndex.base,
- },
- });
-
- boardComponent.setIsDragging(false);
- },
- });
-
- function userIsMember() {
- return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
- }
-
- // Disable drag-dropping while in multi-selection mode, or if the current user
- // is not a board member
- boardComponent.autorun(() => {
- const $listDom = $listsDom;
- if ($listDom.data('sortable')) {
- $listsDom.sortable('option', 'disabled',
- MultiSelection.isActive() || !userIsMember());
- }
- });
+ initSortable(boardComponent, $listsDom);
},
onCreated() {
this.draggingActive = new ReactiveVar(false);
@@ -87,15 +103,7 @@ BlazeComponent.extendComponent({
},
currentCardIsInThisList(listId, swimlaneId) {
- const currentCard = Cards.findOne(Session.get('currentCard'));
- const currentBoardId = Session.get('currentBoard');
- const board = Boards.findOne(currentBoardId);
- if (board.view === 'board-view-lists')
- return currentCard && currentCard.listId === listId;
- else if (board.view === 'board-view-swimlanes')
- return currentCard && currentCard.listId === listId && currentCard.swimlaneId === swimlaneId;
- else
- return false;
+ return currentCardIsInThisList(listId, swimlaneId);
},
events() {
@@ -210,3 +218,19 @@ Template.swimlane.helpers({
return Meteor.user() && Meteor.user().isBoardMember() && !Meteor.user().isCommentOnly();
},
});
+
+BlazeComponent.extendComponent({
+ currentCardIsInThisList(listId, swimlaneId) {
+ return currentCardIsInThisList(listId, swimlaneId);
+ },
+ onRendered() {
+ const boardComponent = this.parentComponent();
+ const $listsDom = this.$('.js-lists');
+
+ if (!Session.get('currentCard')) {
+ boardComponent.scrollLeft();
+ }
+
+ initSortable(boardComponent, $listsDom);
+ },
+}).register('listsGroup');
diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl
index 555bcd3b..dce298b0 100644
--- a/client/components/swimlanes/swimlanes.styl
+++ b/client/components/swimlanes/swimlanes.styl
@@ -39,7 +39,7 @@
margin-top: 50px;
font-weight: bold;
min-height: 9px;
- min-width: 30px;
+ width: 50px;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;