From bf78b093bad7d463ee325ad96e8b485264d4a3be Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Fri, 7 Feb 2020 03:16:16 +0200 Subject: Try to disable dragging Swimlanes/Lists/Cards/Checklists/Subtasks on small mobile smartphones webbrowsers, and hide drag handles on mobile web. Thanks to xet7 ! --- client/components/boards/boardBody.js | 10 ++++------ client/components/cards/cardDetails.js | 6 ++++++ client/components/cards/checklists.js | 3 +++ client/components/cards/minicard.jade | 4 ++-- client/components/lists/list.js | 25 +++++++++++++++++++++--- client/components/lists/listHeader.jade | 4 ++-- client/components/swimlanes/swimlanes.js | 33 ++++++++++++++++++++++---------- 7 files changed, 62 insertions(+), 23 deletions(-) (limited to 'client/components') diff --git a/client/components/boards/boardBody.js b/client/components/boards/boardBody.js index 55b8c0a1..e70a9f67 100644 --- a/client/components/boards/boardBody.js +++ b/client/components/boards/boardBody.js @@ -205,21 +205,19 @@ BlazeComponent.extendComponent({ } else { showDesktopDragHandles = false; } - if ( - Utils.isMiniScreen() || - (!Utils.isMiniScreen() && showDesktopDragHandles) - ) { + if (!Utils.isMiniScreen() && showDesktopDragHandles) { $swimlanesDom.sortable({ handle: '.js-swimlane-header-handle', }); - } else { + } else if (!Utils.isMiniScreen() && !showDesktopDragHandles) { $swimlanesDom.sortable({ handle: '.swimlane-header', }); } - // Disable drag-dropping if the current user is not a board member or is comment only + // Disable drag-dropping if the current user is not a board member or is miniscreen $swimlanesDom.sortable('option', 'disabled', !userIsMember()); + $swimlanesDom.sortable('option', 'disabled', Utils.isMiniScreen()); }); function userIsMember() { diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 92edec38..5fdc5579 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -253,6 +253,12 @@ BlazeComponent.extendComponent({ 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()); + } }); }, diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js index 27d1b1c9..c88fdd82 100644 --- a/client/components/cards/checklists.js +++ b/client/components/cards/checklists.js @@ -60,6 +60,9 @@ BlazeComponent.extendComponent({ if ($itemsDom.data('sortable')) { $(self.itemsDom).sortable('option', 'disabled', !userIsMember()); } + if ($itemsDom.data('sortable')) { + $(self.itemsDom).sortable('option', 'disabled', Utils.isMiniScreen()); + } }); }, diff --git a/client/components/cards/minicard.jade b/client/components/cards/minicard.jade index 7dd220ee..a895c0a3 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 0513f90f..8574caf7 100644 --- a/client/components/lists/list.js +++ b/client/components/lists/list.js @@ -133,14 +133,33 @@ BlazeComponent.extendComponent({ $cards.sortable({ handle: '.handle', }); - } else { + } else if (!Utils.isMiniScreen() && !showDesktopDragHandles) { $cards.sortable({ handle: '.minicard', }); } - // Disable drag-dropping if the current user is not a board member or is comment only - $cards.sortable('option', 'disabled', !userIsMember()); + if ($cards.data('sortable')) { + $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(), + // Not disable drag-dropping while in multi-selection mode + // MultiSelection.isActive() || !userIsMember(), + ); + } }); // We want to re-run this function any time a card is added. diff --git a/client/components/lists/listHeader.jade b/client/components/lists/listHeader.jade index ec2c556f..182fee9e 100644 --- a/client/components/lists/listHeader.jade +++ b/client/components/lists/listHeader.jade @@ -30,10 +30,10 @@ 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 + //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 a379113d..b7a55ce6 100644 --- a/client/components/swimlanes/swimlanes.js +++ b/client/components/swimlanes/swimlanes.js @@ -115,7 +115,7 @@ function initSortable(boardComponent, $listsDom) { $listsDom.sortable({ handle: '.js-list-handle', }); - } else { + } else if (!Utils.isMiniScreen() && !showDesktopDragHandles) { $listsDom.sortable({ handle: '.js-list-header', }); @@ -126,21 +126,34 @@ function initSortable(boardComponent, $listsDom) { $listsDom.sortable( 'option', 'disabled', - // Disable drag-dropping when user is not member + // 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(), ); } - $listsDom.sortable( - 'option', - 'disabled', - // Disable drag-dropping when user is not member - 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 + 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(), + // Not disable drag-dropping while in multi-selection mode + // MultiSelection.isActive() || !userIsMember(), + ); + } }); } -- cgit v1.2.3-1-g7c22