From bd9c73a00f7bb7d0cb9ca0981d67e16e42d29818 Mon Sep 17 00:00:00 2001 From: Karl Hobley Date: Thu, 25 Jun 2020 16:52:40 +0100 Subject: [PATCH] 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 --- client/scss/components/_workflow-tasks.scss | 42 ++++++ client/scss/styles.scss | 1 + wagtail/admin/forms/workflows.py | 2 +- .../wagtailadmin/workflows/edit.html | 27 ++-- .../wagtailadmin/workflows/index.html | 127 ++++++++++++------ .../wagtailadmin/workflows/task_index.html | 93 +++++++------ wagtail/admin/tests/test_workflows.py | 4 +- wagtail/admin/urls/workflows.py | 2 +- wagtail/admin/views/workflows.py | 16 ++- wagtail/admin/wagtail_hooks.py | 5 + 10 files changed, 215 insertions(+), 104 deletions(-) create mode 100644 client/scss/components/_workflow-tasks.scss diff --git a/client/scss/components/_workflow-tasks.scss b/client/scss/components/_workflow-tasks.scss new file mode 100644 index 0000000000..5a5ea9627a --- /dev/null +++ b/client/scss/components/_workflow-tasks.scss @@ -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; + } +} diff --git a/client/scss/styles.scss b/client/scss/styles.scss index f18e9195b0..ddf4c8e1a0 100644 --- a/client/scss/styles.scss +++ b/client/scss/styles.scss @@ -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 diff --git a/wagtail/admin/forms/workflows.py b/wagtail/admin/forms/workflows.py index e0ae865410..386878b0dd 100644 --- a/wagtail/admin/forms/workflows.py +++ b/wagtail/admin/forms/workflows.py @@ -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")), diff --git a/wagtail/admin/templates/wagtailadmin/workflows/edit.html b/wagtail/admin/templates/wagtailadmin/workflows/edit.html index e8e19dc6a3..596dc4388c 100644 --- a/wagtail/admin/templates/wagtailadmin/workflows/edit.html +++ b/wagtail/admin/templates/wagtailadmin/workflows/edit.html @@ -25,7 +25,6 @@ {% include "wagtailadmin/shared/header.html" with title=view.page_title icon=view.header_icon merged=1 %} -
{% csrf_token %} @@ -54,17 +53,21 @@ -
-
    -
  • -

    - -

    -
    • -
-
+ {% block footer %} +
+
    +
  • + {% block form_actions %} +
    + +
    + {% endblock %} +
    • +
+
+ {% endblock %}
{% if can_enable or can_disable %} diff --git a/wagtail/admin/templates/wagtailadmin/workflows/index.html b/wagtail/admin/templates/wagtailadmin/workflows/index.html index a3a5fb1564..7b86a54bfa 100644 --- a/wagtail/admin/templates/wagtailadmin/workflows/index.html +++ b/wagtail/admin/templates/wagtailadmin/workflows/index.html @@ -13,49 +13,61 @@
{{ view.add_item_label }} - {% trans 'Edit workflow tasks' %}
-
- {% if workflows %} -
- - - - - - - - - {% for workflow in workflows %} - - - - - {% endfor %} - -
- {% trans "Name" %} - - {% trans "Tasks" %} -
-
- {{ workflow }} - {% if not workflow.active %} - Disabled - {% endif %} -
- 		-
- {% for task in workflow.tasks %} - - {% endfor %} -
-
-
+
+ + + {% if workflows %} + + + + + + + + + {% for workflow in workflows %} + + + + + {% endfor %} + +
+ {% trans "Name" %} + + {% trans "Tasks" %} +
+
+ {{ workflow }} + {% if not workflow.active %} + Disabled + {% endif %} +
+ 		+ +
{% else %} {% url view.add_url_name as add_url %} {% if showing_disabled %} @@ -64,11 +76,38 @@

{% blocktrans %}There are no enabled workflows. Why not add one?{% endblocktrans %}

{% endif %} {% endif %} - {% if showing_disabled %} - {% trans "Hide disabled workflows" %} - {% else %} - {% trans "Show disabled workflows" %} - {% endif %} - {% trans "Edit workflow tasks" %}
{% endblock %} + +{% block extra_css %} + {{ block.super }} + {% include "wagtailadmin/pages/_editor_css.html" %} +{% endblock %} + +{% block extra_js %} + {{ block.super }} + {% include "wagtailadmin/pages/_editor_js.html" %} + + +{% endblock %} diff --git a/wagtail/admin/templates/wagtailadmin/workflows/task_index.html b/wagtail/admin/templates/wagtailadmin/workflows/task_index.html index 46258cfdec..1397a7491e 100644 --- a/wagtail/admin/templates/wagtailadmin/workflows/task_index.html +++ b/wagtail/admin/templates/wagtailadmin/workflows/task_index.html @@ -13,45 +13,47 @@
{{ view.add_item_label }} - Workflows
-
- {% if tasks %} -
- - - - - - - - - {% for task in tasks %} - - - - - {% endfor %} - -
- {% trans "Name" %} - - {% trans "Type" %} -
-
- {{ task }} - {% if not task.active %} - Disabled - {% endif %} -
- 		- {{ task.specific.get_verbose_name }} -
-
+
+ + + {% if tasks %} + + + + + + + + + {% for task in tasks %} + + + + + {% endfor %} + +
+ {% trans "Name" %} + + {% trans "Type" %} +
+
+ {{ task }} + {% if not task.active %} + Disabled + {% endif %} +
+ 		+ {{ task.specific.get_verbose_name }} +
{% else %} {% url view.add_url_name as add_url %} {% if showing_disabled %} @@ -60,10 +62,23 @@

{% blocktrans %}There are no enabled tasks. Why not add one?{% endblocktrans %}

{% endif %} {% endif %} - {% if showing_disabled %} - {% trans "Hide disabled tasks" %} - {% else %} - {% trans "Show disabled tasks" %} - {% endif %}
{% endblock %} + +{% block extra_js %} + {{ block.super }} + + +{% endblock %} diff --git a/wagtail/admin/tests/test_workflows.py b/wagtail/admin/tests/test_workflows.py index ec3ab45a44..844cccd591 100644 --- a/wagtail/admin/tests/test_workflows.py +++ b/wagtail/admin/tests/test_workflows.py @@ -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") diff --git a/wagtail/admin/urls/workflows.py b/wagtail/admin/urls/workflows.py index cccd406fe8..4a4d918190 100644 --- a/wagtail/admin/urls/workflows.py +++ b/wagtail/admin/urls/workflows.py @@ -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//', workflows.enable_workflow, name='enable'), path('disable//', workflows.Disable.as_view(), name='disable'), diff --git a/wagtail/admin/views/workflows.py b/wagtail/admin/views/workflows.py index 373bac31f8..1bd7431051 100644 --- a/wagtail/admin/views/workflows.py +++ b/wagtail/admin/views/workflows.py @@ -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 diff --git a/wagtail/admin/wagtail_hooks.py b/wagtail/admin/wagtail_hooks.py index 9ce97af287..ebbaf5258d 100644 --- a/wagtail/admin/wagtail_hooks.py +++ b/wagtail/admin/wagtail_hooks.py @@ -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():