Implement new designs for header/breadcrumbs in slim_header.html #11332

laymonage · 2023-12-12T15:25:15Z

Old description

WIP

The snippets views still look a bit funny atm as they still use both slim_header.html and header.html. Will work on porting features over from header.html to slim_header.html and remove/reduce header.html usage.

Please check the following:

Do the tests still pass?¹
Does the code comply with the style guide?
- Run make lint from the Wagtail root.
For Python changes: Have you added tests to cover the new/fixed behaviour?
For front-end changes: Did you test on all of Wagtail’s supported environments?²
- Please list the exact browser and operating system versions you tested:
- Please list which assistive technologies ³ you tested:
For new features: Has the documentation been updated accordingly?

Please describe additional details for testing this change.

squash-labs · 2023-12-12T15:25:22Z

Manage this branch in Squash

Test this branch here: https://laymonageheaders-new-design-04on0.squash.io

laymonage · 2023-12-14T16:43:13Z

Progress update

thibaudcolas

@laymonage looking pretty solid, could you take some time to move more of your TODO comments to a GitHub issue or similar? They seem valuable to track future progress but not critical enough for us to get to on short notice.

I’ll review this later in more depth.

wagtail/admin/templates/wagtailadmin/shared/header.html

laymonage · 2023-12-19T17:16:39Z

client/scss/components/_breadcrumbs.scss

@@ -1,4 +1,4 @@
-.page-explorer .w-breadcrumbs {
+.w-breadcrumbs:not(.editor-view .w-breadcrumbs) {


From commit message:

We want to make the slim_header.html as the basis for the modern header
template that will be used everywhere, eventually replacing header.html.

Rather than making the page explorer be the special case where we want
the last item to be bigger, do it the other way around i.e. use the
smaller font size on the create/edit views. This ensures that the big
font size is used on all other views e.g. Inspect view.

laymonage · 2023-12-19T17:18:02Z

wagtail/snippets/templates/wagtailsnippets/snippets/create.html

@@ -2,7 +2,7 @@
 {% load i18n wagtailadmin_tags %}
 {% block titletag %}{% blocktrans trimmed with snippet_type_name=model_opts.verbose_name %}New  {{ snippet_type_name }}{% endblocktrans %}{% endblock %}
 {% block content %}
-    {% include 'wagtailadmin/shared/headers/slim_header.html' %}
+    {% include 'wagtailadmin/shared/headers/slim_header.html' with breadcrumbs_items=breadcrumbs_items side_panels=side_panels history_url=history_url %}


We can't use only yet for snippets and pages due to #11358

laymonage · 2023-12-19T17:24:45Z

wagtail/admin/templates/wagtailadmin/generic/base.html

@@ -7,9 +8,34 @@
    {% block header %}
        {% block slim_header %}
            {% if breadcrumbs_items %}
+                {% fragment stripped as actions %}


Use the stripped option so that if both blocks are empty, the resulting fragment is actually empty instead of being a string consisting of only whitespaces. This ensures that when the fragment is passed down to the slim_header.html, you can check its emptiness with if

(horrible, I know, but give me something better?)

Indeed pretty horrible! This doesn’t strike me as a dealbreaker but definitely one for a list of refactorings.

laymonage · 2023-12-19T17:27:13Z

wagtail/snippets/tests/test_viewset.py

@@ -69,6 +69,8 @@ def get_url(self, url_name, args=()):


 class TestCustomIcon(BaseSnippetViewSetTests):
+    # TODO: decide what to do with this test, since the new designs after


To be addressed with #11366

laymonage · 2023-12-19T17:30:30Z

wagtail/snippets/views/snippets.py

@@ -156,7 +155,6 @@ def get_template_names(self):

 class IndexView(generic.IndexViewOptionalFeaturesMixin, generic.IndexView):
    view_name = "list"
-    table_class = InlineActionsTable


This is a leftover I forgot to cleanup in #11295

laymonage · 2023-12-19T17:32:10Z

wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html

+                {% if not search_url %}
+                {% elif search_form or filters %}


Empty if, to avoid extra indent

The <form> now works with search_form or filters (or both). You can have filters without search and vice versa, but use the same URL in general (the index results URL)

laymonage · 2023-12-19T17:36:38Z

wagtail/snippets/views/snippets.py

@@ -858,6 +857,7 @@ def workflow_history_detail_view(self):
            object_icon=self.icon,
            header_icon="list-ul",
            workflow_history_url_name=self.get_url_name("workflow_history"),
+            _show_breadcrumbs=False,


See https://static-wagtail-v5-2.netlify.app/admin/snippets/base/person/workflow_history/4/detail/3/ for why I added this, it's not ready to use breadcrumbs yet and I should've done this in 5.2

…l alignment

…blabel

page_title and page_subtitle are not meant to be read as one phrase

…e_buttons To follow the pattern for get_list_buttons and get_list_more_buttons This will be made clearer in the next commit

And rename get_results_url() in pages' BaseIndexView to get_index_results_url to match the method in generic IndexView

10px was never the right width. Using CSS instead of the column's width attribute allows us to use media queries to change the width responsively

…tables The added CSS handles the case when nice padding is removed (to make the listing go full-width) and no bulk actions are available (e.g. a ModelViewSet index view or some other view that extends generic listing view). This allows us to not rely on the full-width class (which should eventually be removed) while correctly apply the spacing regardless whether nice-padding is used or not, and whether bulk actions are available or not. If nice-padding is used, then the listing view will look as they previously do.

Report pages have styles for .report that adds margins similar to nice-padding

…form Also make the search form optional. The <form> element may still be rendered as if there is either the search form or the filters, or both.

Before c8edfd1, empty q is considered invalid, so is_searching is False. After that commit, empty q is valid so set is_searching based on the truthiness of the search_query instead

…_results.html template Missed this in 4082acc

Even though they have tooltips on hover/focus, axe will complain if they don't have aria-label

thibaudcolas

Looking good @laymonage!

I noted an issue with the snippets’ "mode index" view which was displaying an "Add" button when it’s not meant to, so took the liberty to override header_buttons there too.

Other than that, follow-up changes needed:

Locale selector, wagtail/admin/templates/wagtailadmin/generic/form.html, possibly elsewhere
Copy-pasted w-header, wagtail/admin/templates/wagtailadmin/generic/form.html
TODO comments, wagtail/snippets/tests/test_viewset.py
TODO comment, wagtail/admin/views/pages/revisions.py
A better approach to snippets

Tested in Chrome 120, Firefox 121, Firefox 115 ESR

thibaudcolas · 2024-01-02T06:59:39Z

client/scss/components/_listing.scss

-
-    input[type='checkbox'] {
-      margin-inline-end: 0;
+  &:has(.bulk-action-checkbox) {


:has browser support isn’t good enough for us to use it for any critical styles. In this case I’ve confirmed the only issue would be the checkboxes being placed too far to the left so this seems acceptable.

thibaudcolas · 2024-01-02T07:00:35Z

wagtail/admin/wagtail_hooks.py

@@ -1091,6 +1091,7 @@ def register_icons(icons):
        "rotate.svg",
        "search.svg",
        "site.svg",
+        "sliders.svg",


This will also need adding to our wagtail_icons_table.txt when merging. I can take care of that.

thibaudcolas · 2024-01-02T07:01:43Z

wagtail/admin/templates/wagtailadmin/generic/index.html

        <div id="listing-results">
+            {% if breadcrumbs_items and locale %}
+                {# TODO: temporarily put the locale selector here since we no longer use the legacy header #}


Yes this needs adjusting. Seems reasonable enough to me as long as we do complete this in time for the release.

thibaudcolas · 2024-01-02T07:02:12Z

wagtail/admin/templates/wagtailadmin/generic/base.html

@@ -7,9 +8,34 @@
    {% block header %}
        {% block slim_header %}
            {% if breadcrumbs_items %}
+                {% fragment stripped as actions %}


Indeed pretty horrible! This doesn’t strike me as a dealbreaker but definitely one for a list of refactorings.

lb- · 2024-02-28T10:41:52Z

I think this PR may have introduced an issue - see #11704

laymonage force-pushed the headers-new-design branch 2 times, most recently from 417c028 to 9fea602 Compare December 14, 2023 16:40

laymonage self-assigned this Dec 14, 2023

laymonage changed the title ~~Implement new designs for header/breadcrumbs in slim_header.html~~ WIP: Implement new designs for header/breadcrumbs in slim_header.html Dec 14, 2023

laymonage force-pushed the headers-new-design branch 5 times, most recently from 1bb653e to 3fac354 Compare December 18, 2023 15:21

laymonage mentioned this pull request Dec 18, 2023

Ensure side panel components do not rely on the parent context #11358

Open

laymonage force-pushed the headers-new-design branch 2 times, most recently from 3330e57 to bc9d16c Compare December 19, 2023 15:05

laymonage marked this pull request as ready for review December 19, 2023 15:09

laymonage changed the title ~~WIP: Implement new designs for header/breadcrumbs in slim_header.html~~ Implement new designs for header/breadcrumbs in slim_header.html Dec 19, 2023

laymonage requested a review from thibaudcolas December 19, 2023 15:09

thibaudcolas reviewed Dec 19, 2023

View reviewed changes

wagtail/admin/templates/wagtailadmin/shared/header.html Outdated Show resolved Hide resolved

laymonage force-pushed the headers-new-design branch 2 times, most recently from 736fc75 to dadc272 Compare December 19, 2023 17:14

laymonage commented Dec 19, 2023

View reviewed changes

thibaudcolas mentioned this pull request Dec 22, 2023

Horizontal Filters #10439

Closed

thibaudcolas added this to the 6.0 milestone Jan 2, 2024

thibaudcolas added type:Enhancement component:Snippets component:Page labels Jan 2, 2024

laymonage added 3 commits January 2, 2024 06:53

Standardise search form placeholder to 'Search…'

9cb82a8

Move page listing search form to be in the same row as the breadcrumbs

7769c69

Change page listing's add button to icon-only

f37f60e

laymonage added 20 commits January 2, 2024 06:53

Improve styles of slim header's search and filters for better vertica…

f91acb1

…l alignment

Add sublabel support to breadcrumbs

d2b01ee

Add sublabel to history, usage, and inspect breadcrumb items

068fbe4

Use border instead of underline in breadcrumbs to prevent gap with su…

052ac34

…blabel

Change 'Usage of' page title to 'Usage'

7242501

page_title and page_subtitle are not meant to be read as one phrase

Show edit as a main action in generic history and usage views

968703e

Don't use legacy header when breadcrumbs are used

061714a

Reduce slim header search bar height to match filter button

64869f1

Rename main_actions and more_actions to header_buttons and header_mor…

99d2d71

…e_buttons To follow the pattern for get_list_buttons and get_list_more_buttons This will be made clearer in the next commit

Add default template for Button component

e63a3d4

Use button components pattern for slim header buttons

4c4e68b

Make styles for header buttons consistent

bb19d5c

Reuse search_form block from slim_header in page_listing_header.html

92e74dc

And rename get_results_url() in pages' BaseIndexView to get_index_results_url to match the method in generic IndexView

Enforce bulk action checkbox column via CSS

06ac1fa

10px was never the right width. Using CSS instead of the column's width attribute allows us to use media queries to change the width responsively

Don't add padding to first column on report pages

8a290ec

Report pages have styles for .report that adds margins similar to nice-padding

Move filters to be inside the search form and use AJAX to submit the …

2e98d43

…form Also make the search form optional. The <form> element may still be rendered as if there is either the search form or the filters, or both.

Fix is_searching value when an empty query string is used

0f53157

Before c8edfd1, empty q is considered invalid, so is_searching is False. After that commit, empty q is valid so set is_searching based on the truthiness of the search_query instead

Refactor snippets index_results.html template to extend generic index…

e12b393

…_results.html template Missed this in 4082acc

Add aria-label to icon-only header buttons

fd24ffa

Even though they have tooltips on hover/focus, axe will complain if they don't have aria-label

thibaudcolas approved these changes Jan 2, 2024

View reviewed changes

thibaudcolas force-pushed the headers-new-design branch from dadc272 to d866d7d Compare January 2, 2024 07:05

thibaudcolas added 3 commits January 2, 2024 07:10

Add missing sliders icon to icon table

7c88c9e

Disable header buttons for snippet models index

47292a4

Release notes for wagtail#11332

571c198

thibaudcolas force-pushed the headers-new-design branch from d866d7d to 571c198 Compare January 2, 2024 09:00

thibaudcolas merged commit 2cf9730 into wagtail:main Jan 2, 2024
11 of 13 checks passed

laymonage mentioned this pull request Jan 8, 2024

Deprecate wagtailadmin/shared/header.html template #10148

Open

lb- mentioned this pull request Feb 28, 2024

Unwanted left column padding in listings with chooser modals #11704

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement new designs for header/breadcrumbs in slim_header.html #11332

Implement new designs for header/breadcrumbs in slim_header.html #11332

laymonage commented Dec 12, 2023 •

edited

squash-labs bot commented Dec 12, 2023

laymonage commented Dec 14, 2023 •

edited

thibaudcolas left a comment

laymonage Dec 19, 2023

laymonage Dec 19, 2023

laymonage Dec 19, 2023

thibaudcolas Jan 2, 2024

laymonage Dec 19, 2023

laymonage Dec 19, 2023

laymonage Dec 19, 2023

laymonage Dec 19, 2023

thibaudcolas left a comment

thibaudcolas Jan 2, 2024

thibaudcolas Jan 2, 2024

thibaudcolas Jan 2, 2024

thibaudcolas Jan 2, 2024

lb- commented Feb 28, 2024

		@@ -1,4 +1,4 @@
		.page-explorer .w-breadcrumbs {
		.w-breadcrumbs:not(.editor-view .w-breadcrumbs) {

		@@ -69,6 +69,8 @@ def get_url(self, url_name, args=()):


		class TestCustomIcon(BaseSnippetViewSetTests):
		# TODO: decide what to do with this test, since the new designs after

Implement new designs for header/breadcrumbs in slim_header.html #11332

Implement new designs for header/breadcrumbs in slim_header.html #11332

Conversation

laymonage commented Dec 12, 2023 • edited

Footnotes

squash-labs bot commented Dec 12, 2023

Manage this branch in Squash

laymonage commented Dec 14, 2023 • edited

thibaudcolas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thibaudcolas left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lb- commented Feb 28, 2024

laymonage commented Dec 12, 2023 •

edited

laymonage commented Dec 14, 2023 •

edited