From c1287248a6a4975133790deab6747530e5ece3cb Mon Sep 17 00:00:00 2001 From: Marc Hartmayer Date: Wed, 22 Apr 2020 00:24:32 +0200 Subject: [PATCH 1/3] Mobile device layout fix --- client/components/main/popup.styl | 1 + 1 file changed, 1 insertion(+) diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl index f1db3927a..b4815ca61 100644 --- a/client/components/main/popup.styl +++ b/client/components/main/popup.styl @@ -320,6 +320,7 @@ $popupWidth = 300px input[type="file"] margin: 4px 0 12px width: 100% + box-sizing: border-box .pop-over-list li > a From 981ed546f1cae45ad8b92b393ee29c1a26277f32 Mon Sep 17 00:00:00 2001 From: Marc Hartmayer Date: Thu, 23 Apr 2020 00:54:39 +0200 Subject: [PATCH 2/3] Newer versions of jQuery sortable use `uiSortable` key Newer versions of jQuery sortable use `uiSortable` as key to store the data. Let's adapt the code. While at it, refactor the code. --- client/components/cards/cardDetails.js | 15 +++++--------- client/components/cards/checklists.js | 7 ++----- client/components/lists/list.js | 15 ++------------ client/components/swimlanes/swimlanes.js | 26 ++---------------------- 4 files changed, 11 insertions(+), 52 deletions(-) diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index b958d5bf9..8fc3c12a1 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -278,17 +278,12 @@ BlazeComponent.extendComponent({ // Disable sorting if the current user is not a board member this.autorun(() => { - if ($checklistsDom.data('sortable')) { - $checklistsDom.sortable('option', 'disabled', !userIsMember()); + const disabled = !userIsMember() || Utils.isMiniScreen(); + if ($checklistsDom.data('uiSortable')) { + $checklistsDom.sortable('option', 'disabled', disabled); } - if ($subtasksDom.data('sortable')) { - $subtasksDom.sortable('option', 'disabled', !userIsMember()); - } - if ($checklistsDom.data('sortable')) { - $checklistsDom.sortable('option', 'disabled', Utils.isMiniScreen()); - } - if ($subtasksDom.data('sortable')) { - $subtasksDom.sortable('option', 'disabled', Utils.isMiniScreen()); + if ($subtasksDom.data('uiSortable')) { + $subtasksDom.sortable('option', 'disabled', disabled); } }); }, diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 5acab536c..8daf6ee7a 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -57,11 +57,8 @@ BlazeComponent.extendComponent({ // Disable sorting if the current user is not a board member self.autorun(() => { const $itemsDom = $(self.itemsDom); - if ($itemsDom.data('sortable')) { - $(self.itemsDom).sortable('option', 'disabled', !userIsMember()); - } - if ($itemsDom.data('sortable')) { - $(self.itemsDom).sortable('option', 'disabled', Utils.isMiniScreen()); + if ($itemsDom.data('uiSortable')) { + $(self.itemsDom).sortable('option', 'disabled', !userIsMember() || Utils.isMiniScreen()); } }); }, diff --git a/client/components/lists/list.js b/client/components/lists/list.js index 8574caf76..7ce520dce 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -139,23 +139,12 @@ BlazeComponent.extendComponent({ }); } - if ($cards.data('sortable')) { + if ($cards.data('uiSortable')) { $cards.sortable( 'option', 'disabled', // Disable drag-dropping when user is not member/is miniscreen - !userIsMember(), - // Not disable drag-dropping while in multi-selection mode - // MultiSelection.isActive() || !userIsMember(), - ); - } - - if ($cards.data('sortable')) { - $cards.sortable( - 'option', - 'disabled', - // Disable drag-dropping when user is not member/is miniscreen - Utils.isMiniScreen(), + !userIsMember() || Utils.isMiniScreen(), // Not disable drag-dropping while in multi-selection mode // MultiSelection.isActive() || !userIsMember(), ); diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index b7a55ce6e..577bf6d27 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -122,34 +122,12 @@ function initSortable(boardComponent, $listsDom) { } const $listDom = $listsDom; - if ($listDom.data('sortable')) { + if ($listDom.data('uiSortable')) { $listsDom.sortable( 'option', 'disabled', // Disable drag-dropping when user is not member/is worker/is miniscreen - !userIsMember(), - // Not disable drag-dropping while in multi-selection mode - // MultiSelection.isActive() || !userIsMember(), - ); - } - - if ($listDom.data('sortable')) { - $listsDom.sortable( - 'option', - 'disabled', - // Disable drag-dropping when user is not member/is worker/is miniscreen - Meteor.user().isWorker(), - // Not disable drag-dropping while in multi-selection mode - // MultiSelection.isActive() || !userIsMember(), - ); - } - - if ($listDom.data('sortable')) { - $listsDom.sortable( - 'option', - 'disabled', - // Disable drag-dropping when user is not member/is worker/is miniscreen - Utils.isMiniScreen(), + !userIsMember() || Meteor.user().isWorker() || Utils.isMiniScreen(), // Not disable drag-dropping while in multi-selection mode // MultiSelection.isActive() || !userIsMember(), ); From 6476503137fc41cf52e913aa33aed6bb1abaac6a Mon Sep 17 00:00:00 2001 From: Marc Hartmayer Date: Thu, 23 Apr 2020 02:09:01 +0200 Subject: [PATCH 3/3] Fix drag-and-drop and scrolling on mobile devices Use drag handles on "miniscreens" whenever useful, this is especially useful on mobile device. This should hopefully fix https://github.com/wekan/wekan/issues/2947. While at it, simplify the condition Utils.isMiniScreen() || (!Utils.isMiniScreen() && showDesktopDragHandles) to Utils.isMiniScreen() || showDesktopDragHandle --- client/components/boards/boardBody.js | 5 ++--- client/components/cards/minicard.jade | 4 ++-- client/components/lists/list.js | 6 +++--- client/components/lists/listHeader.jade | 3 +-- client/components/swimlanes/swimlanes.js | 9 ++++----- 5 files changed, 12 insertions(+), 15 deletions(-) diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index e70a9f67a..29922fccd 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -205,7 +205,7 @@ BlazeComponent.extendComponent({ } else { showDesktopDragHandles = false; } - if (!Utils.isMiniScreen() && showDesktopDragHandles) { + if (Utils.isMiniScreen() || showDesktopDragHandles) { $swimlanesDom.sortable({ handle: '.js-swimlane-header-handle', }); @@ -215,9 +215,8 @@ BlazeComponent.extendComponent({ }); } - // Disable drag-dropping if the current user is not a board member or is miniscreen + // Disable drag-dropping if the current user is not a board member $swimlanesDom.sortable('option', 'disabled', !userIsMember()); - $swimlanesDom.sortable('option', 'disabled', Utils.isMiniScreen()); }); function userIsMember() { diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade index 0b881a547..b6ccd4d74 100644 --- a/client/components/cards/minicard.jade +++ b/client/components/cards/minicard.jade @@ -4,8 +4,8 @@ template(name="minicard") class="{{#if isLinkedBoard}}linked-board{{/if}}" class="minicard-{{colorClass}}") if isMiniScreen - //.handle - // .fa.fa-arrows + .handle + .fa.fa-arrows unless isMiniScreen if showDesktopDragHandles .handle diff --git a/client/components/lists/list.js b/client/components/lists/list.js index 7ce520dce..a0031b2fb 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -129,7 +129,7 @@ BlazeComponent.extendComponent({ showDesktopDragHandles = false; } - if (!Utils.isMiniScreen() && showDesktopDragHandles) { + if (Utils.isMiniScreen() || showDesktopDragHandles) { $cards.sortable({ handle: '.handle', }); @@ -143,8 +143,8 @@ BlazeComponent.extendComponent({ $cards.sortable( 'option', 'disabled', - // Disable drag-dropping when user is not member/is miniscreen - !userIsMember() || Utils.isMiniScreen(), + // Disable drag-dropping when user is not member + !userIsMember(), // Not disable drag-dropping while in multi-selection mode // MultiSelection.isActive() || !userIsMember(), ); diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index 182fee9e7..fa1faf34e 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -30,10 +30,9 @@ template(name="listHeader") if canSeeAddCard a.js-add-card.fa.fa-plus.list-header-plus-icon a.fa.fa-navicon.js-open-list-menu - //a.list-header-handle.handle.fa.fa-arrows.js-list-handle else a.list-header-menu-icon.fa.fa-angle-right.js-select-list - //a.list-header-handle.handle.fa.fa-arrows.js-list-handle + a.list-header-handle.handle.fa.fa-arrows.js-list-handle else if currentUser.isBoardMember if isWatching i.list-header-watch-icon.fa.fa-eye diff --git a/client/components/swimlanes/swimlanes.js b/client/components/swimlanes/swimlanes.js index 577bf6d27..2d299ddc8 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -111,7 +111,7 @@ function initSortable(boardComponent, $listsDom) { showDesktopDragHandles = false; } - if (!Utils.isMiniScreen() && showDesktopDragHandles) { + if (Utils.isMiniScreen() || showDesktopDragHandles) { $listsDom.sortable({ handle: '.js-list-handle', }); @@ -126,8 +126,8 @@ function initSortable(boardComponent, $listsDom) { $listsDom.sortable( 'option', 'disabled', - // Disable drag-dropping when user is not member/is worker/is miniscreen - !userIsMember() || Meteor.user().isWorker() || Utils.isMiniScreen(), + // Disable drag-dropping when user is not member/is worker + !userIsMember() || Meteor.user().isWorker(), // Not disable drag-dropping while in multi-selection mode // MultiSelection.isActive() || !userIsMember(), ); @@ -188,8 +188,7 @@ BlazeComponent.extendComponent({ } const noDragInside = ['a', 'input', 'textarea', 'p'].concat( - Utils.isMiniScreen() || - (!Utils.isMiniScreen() && showDesktopDragHandles) + Utils.isMiniScreen() || showDesktopDragHandles ? ['.js-list-handle', '.js-swimlane-header-handle'] : ['.js-list-header'], );