From 8005640b77d66dfe9350ac12993408902ba43ec1 Mon Sep 17 00:00:00 2001
From: Martin Filser <github-wekan@linux-email.de>
Date: Wed, 11 Nov 2020 00:28:56 +0100
Subject: [PATCH] Drag handles at checklist items on mobile view #3240

---
 client/components/cards/checklists.jade | 2 ++
 client/components/cards/checklists.js   | 8 +++++++-
 client/components/cards/checklists.styl | 3 +++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/components/cards/checklists.jade b/client/components/cards/checklists.jade
index bbdcb7a37..a3695a5ea 100644
--- a/client/components/cards/checklists.jade
+++ b/client/components/cards/checklists.jade
@@ -103,6 +103,8 @@ template(name='checklistItemDetail')
       .check-box-container
         .check-box.materialCheckBox(class="{{#if item.isFinished }}is-checked{{/if}}")
       .item-title.js-open-inlined-form.is-editable(class="{{#if item.isFinished }}is-checked{{/if}}")
+        if isMiniScreenOrShowDesktopDragHandles
+          span.fa.checklistitem-handle(class="fa-arrows" title="{{_ 'dragChecklistItem'}}")
         +viewer
           = item.title
     else
diff --git a/client/components/cards/checklists.js b/client/components/cards/checklists.js
index 17faa7734..9dd5893c3 100644
--- a/client/components/cards/checklists.js
+++ b/client/components/cards/checklists.js
@@ -58,8 +58,14 @@ BlazeComponent.extendComponent({
         $(self.itemsDom).sortable(
           'option',
           'disabled',
-          !userIsMember() || Utils.isMiniScreen(),
+          !userIsMember(),
         );
+        if (Utils.isMiniScreenOrShowDesktopDragHandles()) {
+          $(self.itemsDom).sortable({
+            handle: 'span.fa.checklistitem-handle',
+            appendTo: 'parent',
+          });
+        }
       }
     });
   },
diff --git a/client/components/cards/checklists.styl b/client/components/cards/checklists.styl
index 6b8f764c0..337aaa894 100644
--- a/client/components/cards/checklists.styl
+++ b/client/components/cards/checklists.styl
@@ -156,6 +156,9 @@ textarea.js-add-checklist-item, textarea.js-edit-checklist-item
         word-wrap: break-word
         max-width: 420px
 
+  span.fa.checklistitem-handle
+    float: right
+
 .js-delete-checklist-item
   margin: 0 0 0.5em 1.33em
   @extends .delete-text