summaryrefslogtreecommitdiffstats
path: root/client
diff options
context:
space:
mode:
authorBenjamin Tissoires <benjamin.tissoires@redhat.com>2019-02-08 17:16:27 +0100
committerBenjamin Tissoires <benjamin.tissoires@redhat.com>2019-02-08 17:37:20 +0100
commita2e6f621a2f440344f581a3edf04df81241b6bc1 (patch)
tree662570030b0b60ef53fa9cc2c310127c9443905e /client
parent96e97143f26bfcf1fa56394f386846f94aaacec1 (diff)
downloadwekan-a2e6f621a2f440344f581a3edf04df81241b6bc1.tar.gz
wekan-a2e6f621a2f440344f581a3edf04df81241b6bc1.tar.bz2
wekan-a2e6f621a2f440344f581a3edf04df81241b6bc1.zip
Fix swimlanes sorting
Since 7cc185ac "Properly fix horizontal rendering on Chrome and Firefox" The rendering of the new design of the swimlanes was correct, but this commit broke the reordering capability. Having the swimlane header at the same level than the lists of cards makes the whole sortable pattern fail. 2 solutions: - revert to only have 1 div per swimlane. But this introduces the firefox bug mentioned in 7cc185ac, so not ideal - force the sortable pattern to do what we want. To force the sortable pattern, we need: - add in the helper a clone of the list of cards (to not just move the header) - make sure the placeholder never get placed between the header and the list of cards in a swimlane - fix the finding of the next and previous list of cards. For all of this to be successful, we need to resize the swimlanes to a known value. This can lead to some visual jumps with scrolling when you drag or drop the swimlanea. I tried to remedy that by computing the new scroll value. Still not ideal however, as there are still some jumps when dropping. Fixes #2159
Diffstat (limited to 'client')
-rw-r--r--client/components/boards/boardBody.js76
-rw-r--r--client/components/swimlanes/swimlanes.styl3
2 files changed, 75 insertions, 4 deletions
diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js
index 2de8777a..9105e624 100644
--- a/client/components/boards/boardBody.js
+++ b/client/components/boards/boardBody.js
@@ -1,5 +1,6 @@
const subManager = new SubsManager();
const { calculateIndex, enableClickOnTouch } = Utils;
+const swimlaneWhileSortingHeight = 150;
BlazeComponent.extendComponent({
onCreated() {
@@ -74,21 +75,64 @@ BlazeComponent.extendComponent({
$swimlanesDom.sortable({
tolerance: 'pointer',
appendTo: '.board-canvas',
- helper: 'clone',
+ helper(evt, item) {
+ const helper = $(`<div class="swimlane"
+ style="flex-direction: column;
+ height: ${swimlaneWhileSortingHeight}px;
+ width: $(boardComponent.width)px;
+ overflow: hidden;"/>`);
+ helper.append(item.clone());
+ // Also grab the list of lists of cards
+ const list = item.next();
+ helper.append(list.clone());
+ return helper;
+ },
handle: '.js-swimlane-header',
- items: '.js-swimlane:not(.placeholder)',
+ items: '.swimlane:not(.placeholder)',
placeholder: 'swimlane placeholder',
distance: 7,
start(evt, ui) {
+ const listDom = ui.placeholder.next('.js-swimlane');
+ const parentOffset = ui.item.parent().offset();
+
ui.placeholder.height(ui.helper.height());
EscapeActions.executeUpTo('popup-close');
+ listDom.addClass('moving-swimlane');
boardComponent.setIsDragging(true);
+
+ ui.placeholder.insertAfter(ui.placeholder.next());
+ boardComponent.origPlaceholderIndex = ui.placeholder.index();
+
+ // resize all swimlanes + headers to be a total of 150 px per row
+ // this could be achieved by setIsDragging(true) but we want immediate
+ // result
+ ui.item.siblings('.js-swimlane').css('height', `${swimlaneWhileSortingHeight - 26}px`);
+
+ // set the new scroll height after the resize and insertion of
+ // the placeholder. We want the element under the cursor to stay
+ // at the same place on the screen
+ ui.item.parent().get(0).scrollTop = ui.placeholder.get(0).offsetTop + parentOffset.top - evt.pageY;
+ },
+ beforeStop(evt, ui) {
+ const parentOffset = ui.item.parent().offset();
+ const siblings = ui.item.siblings('.js-swimlane');
+ siblings.css('height', '');
+
+ // compute the new scroll height after the resize and removal of
+ // the placeholder
+ const scrollTop = ui.placeholder.get(0).offsetTop + parentOffset.top - evt.pageY;
+
+ // then reset the original view of the swimlane
+ siblings.removeClass('moving-swimlane');
+
+ // and apply the computed scrollheight
+ ui.item.parent().get(0).scrollTop = scrollTop;
},
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 prevSwimlaneDom = ui.item.prev('.js-swimlane').get(0);
- const nextSwimlaneDom = ui.item.next('.js-swimlane').get(0);
+ const prevSwimlaneDom = ui.item.prevAll('.js-swimlane').get(0);
+ const nextSwimlaneDom = ui.item.nextAll('.js-swimlane').get(0);
const sortIndex = calculateIndex(prevSwimlaneDom, nextSwimlaneDom, 1);
$swimlanesDom.sortable('cancel');
@@ -103,6 +147,30 @@ BlazeComponent.extendComponent({
boardComponent.setIsDragging(false);
},
+ sort(evt, ui) {
+ // get the mouse position in the sortable
+ const parentOffset = ui.item.parent().offset();
+ const cursorY = evt.pageY - parentOffset.top + ui.item.parent().scrollTop();
+
+ // compute the intended index of the placeholder (we need to skip the
+ // slots between the headers and the list of cards)
+ const newplaceholderIndex = Math.floor(cursorY / swimlaneWhileSortingHeight);
+ let destPlaceholderIndex = (newplaceholderIndex + 1) * 2;
+
+ // if we are scrolling far away from the bottom of the list
+ if (destPlaceholderIndex >= ui.item.parent().get(0).childElementCount) {
+ destPlaceholderIndex = ui.item.parent().get(0).childElementCount - 1;
+ }
+
+ // update the placeholder position in the DOM tree
+ if (destPlaceholderIndex !== ui.placeholder.index()) {
+ if (destPlaceholderIndex < boardComponent.origPlaceholderIndex) {
+ ui.placeholder.insertBefore(ui.placeholder.siblings().slice(destPlaceholderIndex - 2, destPlaceholderIndex - 1));
+ } else {
+ ui.placeholder.insertAfter(ui.placeholder.siblings().slice(destPlaceholderIndex - 1, destPlaceholderIndex));
+ }
+ }
+ },
});
// ugly touch event hotfix
diff --git a/client/components/swimlanes/swimlanes.styl b/client/components/swimlanes/swimlanes.styl
index 77a7a413..1056e1e3 100644
--- a/client/components/swimlanes/swimlanes.styl
+++ b/client/components/swimlanes/swimlanes.styl
@@ -53,6 +53,9 @@
.list-group
height: 100%
+.moving-swimlane
+ display: none
+
swimlane-color(background, color...)
background: background !important
if color