admin: add handles to sortable items (#11015)

This commit is contained in:
Frédéric Péters 2016-05-20 20:01:47 +02:00
parent fe688437e0
commit 81908abd75
5 changed files with 59 additions and 12 deletions

View File

@ -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')

View File

@ -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')

View File

@ -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:

View File

@ -21,6 +21,14 @@ ul.biglist {
padding: 0.5em 0;
}
ul.biglist span.handle {
cursor: move;
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,14 @@ 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 - 1ex);
box-sizing: border-box;
}
div.bo-block ul.biglist li > a,
div.bo-block ul.biglist strong a {
display: block;
@ -642,7 +677,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 +700,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;

View File

@ -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',