From e88969cd6aa550af6bdfe587bc6b1642b6168f4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Fri, 20 May 2016 20:01:47 +0200
Subject: [PATCH] admin: add handles to sortable items (#11015)

---
 tests/test_admin_pages.py           |  8 ++++----
 wcs/admin/fields.py                 |  4 +++-
 wcs/admin/workflows.py              | 14 +++++++------
 wcs/qommon/static/css/dc2/admin.css | 40 ++++++++++++++++++++++++++++++++++++-
 wcs/qommon/static/js/biglist.js     |  4 ++++
 5 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/tests/test_admin_pages.py b/tests/test_admin_pages.py
index a8e32ef..9abeb00 100644
--- a/tests/test_admin_pages.py
+++ b/tests/test_admin_pages.py
@@ -766,7 +766,7 @@ def test_form_new_field(pub):
     assert resp.location == 'http://example.net/backoffice/forms/1/fields/'
     resp = resp.follow()
     assert 'foobar' in resp.body
-    assert 'Use drag and drop to reorder fields.' in resp.body
+    assert 'Use drag and drop' in resp.body
 
     assert len(FormDef.get(1).fields) == 1
     assert FormDef.get(1).fields[0].key == 'string'
@@ -796,7 +796,7 @@ def test_form_delete_field(pub):
     resp = app.get('/backoffice/forms/1/')
     resp = resp.click(href='fields/')
     assert '1st field' in resp.body
-    assert 'Use drag and drop to reorder fields.' in resp.body
+    assert 'Use drag and drop' in resp.body
 
     resp = resp.click(href='1/delete')
     resp = resp.forms[0].submit()
@@ -960,7 +960,7 @@ def test_form_edit_page_field(pub):
     assert resp.location == 'http://example.net/backoffice/forms/1/fields/'
     resp = resp.follow()
     assert 'foobar' in resp.body
-    assert 'Use drag and drop to reorder fields.' in resp.body
+    assert 'Use drag and drop' in resp.body
 
     assert len(FormDef.get(1).fields) == 1
     assert FormDef.get(1).fields[0].key == 'page'
@@ -1306,7 +1306,7 @@ def test_workflows_new(pub):
     resp = resp.forms[0].submit()
     assert resp.location == 'http://example.net/backoffice/workflows/1/status/1/'
     resp = resp.follow()
-    assert 'Use drag and drop to reorder items' in resp.body
+    assert 'Use drag and drop' in resp.body
 
     # fill action
     resp = resp.click('Display message')
diff --git a/wcs/admin/fields.py b/wcs/admin/fields.py
index a1749c3..f9e98f8 100644
--- a/wcs/admin/fields.py
+++ b/wcs/admin/fields.py
@@ -1,3 +1,5 @@
+# -*- coding: utf-8 -*-
+#
 # w.c.s. - web application for online forms
 # Copyright (C) 2005-2010  Entr'ouvert
 #
@@ -201,7 +203,7 @@ class FieldsDirectory(Directory):
                     r += htmltext(_('In a multipage form, the first field should be of type "page".'))
                     r += htmltext('</div>')
 
-            r += htmltext('<p>%s</p>') % _('Use drag and drop to reorder fields.')
+            r += htmltext('<p class="hint">%s</p>') % _('Use drag and drop with the ⠿ handles to reorder items.')
             if self.page_no is not None:
                 r += htmltext('<p>')
                 r += htmltext('<a href="../../">%s</a>') % _('Display all pages')
diff --git a/wcs/admin/workflows.py b/wcs/admin/workflows.py
index 2eedd28..26c671b 100644
--- a/wcs/admin/workflows.py
+++ b/wcs/admin/workflows.py
@@ -1,3 +1,5 @@
+# -*- coding: utf-8 -*-
+#
 # w.c.s. - web application for online forms
 # Copyright (C) 2005-2010  Entr'ouvert
 #
@@ -422,8 +424,8 @@ class WorkflowStatusPage(Directory):
             if str(self.workflow.id).startswith(str('_')):
                 r += htmltext('<ul id="items-list" class="biglist">')
             else:
-                r += htmltext('<p>')
-                r += _('Use drag and drop to reorder items.')
+                r += htmltext('<p class="hint">')
+                r += _('Use drag and drop with the ⠿ handles to reorder items.')
                 r += htmltext('</p>')
                 r += htmltext('<ul id="items-list" class="biglist sortable">')
             for i, item in enumerate(self.status.items):
@@ -1077,8 +1079,8 @@ class GlobalActionPage(WorkflowStatusPage):
             if str(self.workflow.id).startswith('_'):
                 r += htmltext('<ul id="items-list" class="biglist">')
             else:
-                r += htmltext('<p>')
-                r += _('Use drag and drop to reorder items.')
+                r += htmltext('<p class="items">')
+                r += _('Use drag and drop with the ⠿ handles to reorder items.')
                 r += htmltext('</p>')
                 r += htmltext('<ul id="items-list" class="biglist sortable">')
             for i, item in enumerate(self.action.items):
@@ -1323,8 +1325,8 @@ class WorkflowPage(Directory):
             r += htmltext('<p>%s</p>') % _('There are not yet any status defined in this workflow.')
         else:
             if not str(self.workflow.id).startswith(str('_')):
-                r += htmltext('<p>')
-                r += _('Use drag and drop to reorder status.')
+                r += htmltext('<p class="hint">')
+                r += _('Use drag and drop with the ⠿ handles to reorder status.')
                 r += htmltext('</p>')
                 r += htmltext('<ul id="status-list" class="biglist sortable">')
             else:
diff --git a/wcs/qommon/static/css/dc2/admin.css b/wcs/qommon/static/css/dc2/admin.css
index 3f641a4..3b9fcb7 100644
--- a/wcs/qommon/static/css/dc2/admin.css
+++ b/wcs/qommon/static/css/dc2/admin.css
@@ -21,6 +21,14 @@ ul.biglist {
 	padding: 0.5em 0;
 }
 
+ul.biglist span.handle {
+	cursor: grab;
+	display: inline-block;
+	padding: 0.5ex;
+	text-align: center;
+	width: 1em;
+}
+
 ul.biglist li,
 li.biglistitem {
 	list-style-type: none;
@@ -35,6 +43,10 @@ li.biglistitem {
 	line-height: 2.5em;
 }
 
+ul.biglist.sortable li {
+	padding-left: 0;
+}
+
 ul.biglist li.smallitem {
 	font-size: 80%;
 	background: #fffff4;
@@ -62,6 +74,20 @@ li.biglistitem p.commands img {
 	padding-right: 5px;
 }
 
+p.hint {
+	color: #aaa;
+}
+
+div.bo-block p.hint {
+	color: inherit;
+}
+
+p.hint::before {
+	content: "\f05a";
+	font-family: FontAwesome;
+	padding-right: 1ex;
+}
+
 td.time {
 	text-align: right;
 }
@@ -612,6 +638,7 @@ div.bo-block ul.biglist li {
 	border-width: 1px 0 0 0;
 	border-color: #e4e4e4;
 	padding: 0;
+	transition: background 0.25s ease 0s;
 }
 
 div.bo-block ul.biglist h3 {
@@ -635,6 +662,13 @@ div.bo-block ul.biglist li.disabled a {
 	color: #888;
 }
 
+div.bo-block ul.biglist.sortable li strong a,
+div.bo-block ul.biglist.sortable li > a,
+ul.biglist.sortable a {
+	display: inline-block;
+	width: calc(100% - 1em - 3ex);
+}
+
 div.bo-block ul.biglist li > a,
 div.bo-block ul.biglist strong a {
 	display: block;
@@ -642,7 +676,6 @@ div.bo-block ul.biglist strong a {
 	border: none;
 	font-weight: normal;
 	color: #215D9C;
-	transition: all 0.25s ease 0s;
 }
 
 div.bo-block ul.biglist strong a.fake {
@@ -666,10 +699,15 @@ div.bo-block ul.biglist p.details.badge {
 	color: white;
 }
 
+div.bo-block ul.biglist.sortable li:hover,
 div.bo-block ul.biglist a:hover {
 	background: #ccc;
 }
 
+div.bo-block ul.biglist.sortable li:hover a:hover {
+	background: transparent;
+}
+
 div.bo-block span.disabled a {
 	color: #666;
 	text-decoration: none;
diff --git a/wcs/qommon/static/js/biglist.js b/wcs/qommon/static/js/biglist.js
index 8b2a464..e26bcff 100644
--- a/wcs/qommon/static/js/biglist.js
+++ b/wcs/qommon/static/js/biglist.js
@@ -5,8 +5,12 @@ $(document).ready(
              * set with position: relative and overflow properties */
             $('#main-content').css('overflow', 'inherit');
         }
+        $('ul.biglist.sortable li').each(function(i, elem) {
+            $('<span class="handle">⠿</span>').prependTo(elem);
+        });
         $('ul.biglist.sortable').sortable(
             {
+                handle: '.handle',
                 accept: 'biglistitem',
                 scroll: true,
                 helper: 'clone',
-- 
2.8.1