Various UI tweaks to workflow management (#6177)

* Make workflow tasks management into a separate settings menu item
* UI improvements to make it match the design
pull/6257/head
Karl Hobley 2020-06-25 16:52:40 +01:00 zatwierdzone przez Matt Westcott
rodzic edfd17a1f1
commit bd9c73a00f
10 zmienionych plików z 215 dodań i 104 usunięć

Wyświetl plik

@ -0,0 +1,42 @@
.workflow-tasks {
$task-width: 117px;
$task-height: 56px;
list-style-type: none;
&__task {
display: inline-block;
background-color: #f8ffff;
border: 2px solid #7ebebe;
border-radius: 5px;
color: #007d7e;
box-sizing: border-box;
width: $task-width;
height: $task-height;
margin: 7px;
padding-left: 9px;
padding-right: 9px;
}
&__step {
font-size: 10px;
text-transform: uppercase;
margin-top: 3px;
}
&__name {
font-size: 16px;
font-weight: bold;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&__extra-tasks {
display: inline-block;
height: $task-height;
vertical-align: middle;
}
}

Wyświetl plik

@ -130,6 +130,7 @@ These are classes for components.
@import 'components/status-tag';
@import 'components/button-select';
@import 'components/skiplink';
@import 'components/workflow-tasks';
/* OVERRIDES

Wyświetl plik

@ -191,7 +191,7 @@ def get_workflow_edit_handler():
# this decision later if we decide to allow custom fields on Workflows.
panels = [
FieldPanel("name", heading=_("Give your workflow a name")),
FieldPanel("name", heading=_("Give your workflow a name"), classname="full title"),
InlinePanel("workflow_tasks", [
FieldPanel('task', widget=AdminTaskChooser(show_clear_link=False)),
], heading=_("Add tasks to your workflow")),

Wyświetl plik

@ -25,7 +25,6 @@
{% include "wagtailadmin/shared/header.html" with title=view.page_title icon=view.header_icon merged=1 %}
<form action="{% block form_action %}{{ view.edit_url }}{% endblock %}"{% if is_multipart %} enctype="multipart/form-data"{% endif %} method="POST" novalidate>
{% csrf_token %}
@ -54,17 +53,21 @@
</li>
</ul>
<div class="object">
<ul class="object-layout">
<li class="object-layout_big-part">
<p class="actions">
<button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Saving…' %}">
<span class="icon icon-spinner"></span><em>{% trans 'Save' %}</em>
</button>
</p>
</li>
</ul>
</div>
{% block footer %}
<footer role="contentinfo">
<ul>
<li class="actions">
{% block form_actions %}
<div class="dropdown dropup dropdown-button match-width">
<button type="submit" class="button action-save button-longrunning" data-clicked-text="{% trans 'Saving…' %}">
<span class="icon icon-spinner"></span><em>{% trans 'Save' %}</em>
</button>
</div>
{% endblock %}
</li>
</ul>
</footer>
{% endblock %}
</form>
{% if can_enable or can_disable %}

Wyświetl plik

@ -13,49 +13,61 @@
<div class="right">
<div class="addbutton">
<a href="{% url view.add_url_name %}" class="button bicolor icon icon-plus">{{ view.add_item_label }}</a>
<a href="{% url 'wagtailadmin_workflows:task_index' %}" class="button">{% trans 'Edit workflow tasks' %}</a>
</div>
</div>
</div>
</header>
<div class="nice-padding">
{% if workflows %}
<div id="sites-list">
<table class="listing">
<thead>
<tr>
<th>
{% trans "Name" %}
</th>
<th>
{% trans "Tasks" %}
</th>
</tr>
</thead>
<tbody>
{% for workflow in workflows %}
<tr>
<td class="title">
<div class="title-wrapper">
<a href="{% url view.edit_url_name workflow.pk %}">{{ workflow }}</a>
{% if not workflow.active %}
<span class="status-tag">Disabled</span>
{% endif %}
</div>
</td>
<td class="tasks">
<div class="task-wrapper">
{% for task in workflow.tasks %}
<button class="status-tag primary" >{{ task }}</button>
{% endfor %}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="nice-padding">
<label>
<input class="js-show-disabled" type="checkbox"{% if showing_disabled %} checked{% endif %}>
{% trans "Show disabled workflows" %}
</label>
{% if workflows %}
<table class="listing">
<thead>
<tr>
<th>
{% trans "Name" %}
</th>
<th>
{% trans "Tasks" %}
</th>
</tr>
</thead>
<tbody>
{% for workflow in workflows %}
<tr>
<td class="title">
<div class="title-wrapper">
<a href="{% url view.edit_url_name workflow.pk %}">{{ workflow }}</a>
{% if not workflow.active %}
<span class="status-tag">Disabled</span>
{% endif %}
</div>
</td>
<td>
<ul class="workflow-tasks">
{% for task in workflow.tasks|slice:":5" %}
<a href="{% url 'wagtailadmin_workflows:edit_task' task.pk %}">
<li class="workflow-tasks__task" data-wagtail-tooltip="{% blocktrans with forloop.counter as step_number %}Step {{ step_number }}{% endblocktrans %}: {{ task.name }}">
<div class="workflow-tasks__step">{% blocktrans with forloop.counter as step_number %}Step {{ step_number }}{% endblocktrans %}</div>
<h4 class="workflow-tasks__name">{{ task.name }}</h4>
</li>
</a>
{% endfor %}
{% if workflow.tasks.count > 5 %}
<li class="workflow-tasks__extra-tasks">
{% blocktrans count counter=workflow.tasks.count|add:-5 %}+{{ counter }} more{% plural %}+{{ counter }} more{% endblocktrans %}
</li>
{% endif %}
</ul>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
{% url view.add_url_name as add_url %}
{% if showing_disabled %}
@ -64,11 +76,38 @@
<p>{% blocktrans %}There are no enabled workflows. Why not <a href="{{ add_url }}">add one</a>?{% endblocktrans %}</p>
{% endif %}
{% endif %}
{% if showing_disabled %}
<a href="." class="button secondary">{% trans "Hide disabled workflows" %}</a>
{% else %}
<a href="?show_disabled" class="button secondary">{% trans "Show disabled workflows" %}</a>
{% endif %}
<a href="{% url 'wagtailadmin_workflows:task_index' %}" class="button">{% trans "Edit workflow tasks" %}</a>
</div>
{% endblock %}
{% block extra_css %}
{{ block.super }}
{% include "wagtailadmin/pages/_editor_css.html" %}
{% endblock %}
{% block extra_js %}
{{ block.super }}
{% include "wagtailadmin/pages/_editor_js.html" %}
<script type="text/javascript">
$(function() {
$('[data-wagtail-tooltip]').tooltip({
animation: false,
title: function() {
return $(this).attr('data-wagtail-tooltip');
},
trigger: 'hover',
placement: 'bottom',
});
$('.js-show-disabled').change(function() {
this.setAttribute('disabled', 'true');
if (this.checked) {
window.location.href = '?show_disabled=true';
} else {
window.location.href = '?show_disabled=false';
}
});
});
</script>
{% endblock %}

Wyświetl plik

@ -13,45 +13,47 @@
<div class="right">
<div class="addbutton">
<a href="{% url view.add_url_name %}" class="button bicolor icon icon-plus">{{ view.add_item_label }}</a>
<a href="{% url 'wagtailadmin_workflows:index' %}" class="button">Workflows</a>
</div>
</div>
</div>
</header>
<div class="nice-padding">
{% if tasks %}
<div id="sites-list">
<table class="listing">
<thead>
<tr>
<th>
{% trans "Name" %}
</th>
<th>
{% trans "Type" %}
</th>
</tr>
</thead>
<tbody>
{% for task in tasks %}
<tr>
<td class="title">
<div class="title-wrapper">
<a href="{% url view.edit_url_name task.pk %}">{{ task }}</a>
{% if not task.active %}
<span class="status-tag">Disabled</span>
{% endif %}
</div>
</td>
<td>
{{ task.specific.get_verbose_name }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="nice-padding">
<label>
<input class="js-show-disabled" type="checkbox"{% if showing_disabled %} checked{% endif %}>
{% trans "Show disabled tasks" %}
</label>
{% if tasks %}
<table class="listing">
<thead>
<tr>
<th>
{% trans "Name" %}
</th>
<th>
{% trans "Type" %}
</th>
</tr>
</thead>
<tbody>
{% for task in tasks %}
<tr>
<td class="title">
<div class="title-wrapper">
<a href="{% url view.edit_url_name task.pk %}">{{ task }}</a>
{% if not task.active %}
<span class="status-tag">Disabled</span>
{% endif %}
</div>
</td>
<td>
{{ task.specific.get_verbose_name }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
{% url view.add_url_name as add_url %}
{% if showing_disabled %}
@ -60,10 +62,23 @@
<p>{% blocktrans %}There are no enabled tasks. Why not <a href="{{ add_url }}">add one</a>?{% endblocktrans %}</p>
{% endif %}
{% endif %}
{% if showing_disabled %}
<a href="." class="button secondary">{% trans "Hide disabled tasks" %}</a>
{% else %}
<a href="?show_disabled" class="button secondary">{% trans "Show disabled tasks" %}</a>
{% endif %}
</div>
{% endblock %}
{% block extra_js %}
{{ block.super }}
<script type="text/javascript">
$(function() {
$('.js-show-disabled').change(function() {
this.setAttribute('disabled', 'true');
if (this.checked) {
window.location.href = '?show_disabled=true';
} else {
window.location.href = '?show_disabled=false';
}
});
});
</script>
{% endblock %}

Wyświetl plik

@ -73,7 +73,7 @@ class TestWorkflowsIndexView(TestCase, WagtailTestUtils):
Workflow.objects.create(name="test_workflow", active=False)
# The listing should contain our workflow, as well as marking it as disabled
response = self.get(params={'show_disabled': 'True'})
response = self.get(params={'show_disabled': 'true'})
self.assertEqual(response.status_code, 200)
self.assertNotContains(response, "No workflows have been created.")
self.assertContains(response, "test_workflow")
@ -480,7 +480,7 @@ class TestTaskIndexView(TestCase, WagtailTestUtils):
Task.objects.create(name="test_task", active=False)
# The listing should contain our task, as well as marking it as disabled
response = self.get(params={'show_disabled': 'True'})
response = self.get(params={'show_disabled': 'true'})
self.assertEqual(response.status_code, 200)
self.assertNotContains(response, "No tasks have been created.")
self.assertContains(response, "test_task")

Wyświetl plik

@ -5,7 +5,7 @@ from wagtail.admin.views import workflows
app_name = 'wagtailadmin_workflows'
urlpatterns = [
path('', workflows.Index.as_view(), name='index'),
path('list/', workflows.Index.as_view(), name='index'),
path('add/', workflows.Create.as_view(), name='add'),
path('enable/<int:pk>/', workflows.enable_workflow, name='enable'),
path('disable/<int:pk>/', workflows.Disable.as_view(), name='disable'),

Wyświetl plik

@ -36,18 +36,21 @@ class Index(IndexView):
add_url_name = 'wagtailadmin_workflows:add'
edit_url_name = 'wagtailadmin_workflows:edit'
page_title = _("Workflows")
add_item_label = _("Create a new workflow")
add_item_label = _("Add a workflow")
header_icon = 'clipboard-list'
def show_disabled(self):
return self.request.GET.get('show_disabled', 'false') == 'true'
def get_queryset(self):
queryset = super().get_queryset()
if 'show_disabled' not in self.request.GET:
if not self.show_disabled():
queryset = queryset.filter(active=True)
return queryset
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['showing_disabled'] = 'show_disabled' in self.request.GET
context['showing_disabled'] = self.show_disabled()
return context
@ -292,15 +295,18 @@ class TaskIndex(IndexView):
add_item_label = _("Create a workflow task")
header_icon = 'clipboard-list'
def show_disabled(self):
return self.request.GET.get('show_disabled', 'false') == 'true'
def get_queryset(self):
queryset = super().get_queryset()
if 'show_disabled' not in self.request.GET:
if not self.show_disabled():
queryset = queryset.filter(active=True)
return queryset
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['showing_disabled'] = 'show_disabled' in self.request.GET
context['showing_disabled'] = self.show_disabled()
return context

Wyświetl plik

@ -113,6 +113,11 @@ def register_workflows_menu_item():
return WorkflowsMenuItem(_('Workflows'), reverse('wagtailadmin_workflows:index'), icon_name='clipboard-list', order=100)
@hooks.register('register_settings_menu_item')
def register_workflow_tasks_menu_item():
return MenuItem(_('Workflow tasks'), reverse('wagtailadmin_workflows:task_index'), icon_name='clipboard-list', order=150)
@hooks.register('register_page_listing_buttons')
def page_listing_buttons(page, page_perms, is_parent=False, next_url=None):
if page_perms.can_edit():