From 73f7a1abc467001bbe2fbd12a322d867eb012e5a Mon Sep 17 00:00:00 2001 From: Sage Abdullah Date: Fri, 15 Dec 2023 12:18:21 +0000 Subject: [PATCH] Use button components pattern for slim header buttons --- client/scss/components/_button.scss | 2 +- .../templates/wagtailadmin/generic/base.html | 19 +----------- .../pages/page_listing_header.html | 2 +- wagtail/admin/views/generic/base.py | 17 +++++++++-- wagtail/admin/views/generic/history.py | 4 +-- wagtail/admin/views/generic/models.py | 11 +++++-- wagtail/admin/views/generic/usage.py | 4 +-- wagtail/admin/widgets/button.py | 30 +++++++++++++++++++ 8 files changed, 61 insertions(+), 28 deletions(-) diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss index 0c7659ccfb..a1b5a2e2ee 100644 --- a/client/scss/components/_button.scss +++ b/client/scss/components/_button.scss @@ -320,7 +320,7 @@ } } -.header-main-action-button { +.w-header-button { // Temporarily copied from .c-sf-add-button display: flex; align-items: center; diff --git a/wagtail/admin/templates/wagtailadmin/generic/base.html b/wagtail/admin/templates/wagtailadmin/generic/base.html index 90e049e8a4..d6bc1bcb7f 100644 --- a/wagtail/admin/templates/wagtailadmin/generic/base.html +++ b/wagtail/admin/templates/wagtailadmin/generic/base.html @@ -11,26 +11,9 @@ {% fragment stripped as actions %} {% block header_buttons %} {% for button in header_buttons %} - - {% icon name=button.icon_name %} - + {% component button %} {% endfor %} {% endblock %} - {% block header_more_buttons %} - {% if header_more_buttons %} - {% trans "Actions" as actions_toggle_title %} - {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=actions_toggle_title toggle_classname="w-p-0 w-w-10 w-h-slim-header hover:w-scale-110 w-transition w-outline-offset-inside w-relative w-z-30" toggle_tooltip_offset="[0, -2]" %} - {% for button in header_more_buttons %} - - {% if button.icon_name %} - {% icon name=button.icon_name %} - {% endif %} - {{ button.label }} - - {% endfor %} - {% enddropdown %} - {% endif %} - {% endblock %} {% endfragment %} {# Ensure all necessary variables are passed explicitly here #} diff --git a/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html b/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html index 2a3ddaeff3..271ead0ffc 100644 --- a/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html +++ b/wagtail/admin/templates/wagtailadmin/pages/page_listing_header.html @@ -9,7 +9,7 @@ {% block actions %} {% page_permissions parent_page as parent_page_perms %} {% if parent_page_perms.can_add_subpage %} - {% icon name="plus" %} + {% icon name="plus" %} {% endif %} {# Page actions dropdown #} diff --git a/wagtail/admin/views/generic/base.py b/wagtail/admin/views/generic/base.py index 745c95cc99..a8b3ad4b2d 100644 --- a/wagtail/admin/views/generic/base.py +++ b/wagtail/admin/views/generic/base.py @@ -10,6 +10,7 @@ from django.views.generic.list import BaseListView from wagtail.admin import messages from wagtail.admin.ui.tables import Column, Table from wagtail.admin.utils import get_valid_next_url_from_request +from wagtail.admin.widgets.button import ButtonWithDropdown class WagtailAdminTemplateMixin(TemplateResponseMixin, ContextMixin): @@ -49,10 +50,22 @@ class WagtailAdminTemplateMixin(TemplateResponseMixin, ContextMixin): return self.breadcrumbs_items def get_header_buttons(self): - return self.header_buttons + buttons = sorted(self.header_buttons) + + more_buttons = self.get_header_more_buttons() + if more_buttons: + buttons.append( + ButtonWithDropdown( + buttons=more_buttons, + icon_name="dots-horizontal", + attrs={"aria-label": _("Actions")}, + classname="w-h-slim-header", + ) + ) + return buttons def get_header_more_buttons(self): - return self.header_more_buttons + return sorted(self.header_more_buttons) def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) diff --git a/wagtail/admin/views/generic/history.py b/wagtail/admin/views/generic/history.py index 3f98bf01e1..6edd32853d 100644 --- a/wagtail/admin/views/generic/history.py +++ b/wagtail/admin/views/generic/history.py @@ -14,7 +14,7 @@ from wagtail.admin.filters import DateRangePickerWidget, WagtailFilterSet from wagtail.admin.ui.tables import Column, DateColumn, InlineActionsTable, UserColumn from wagtail.admin.views.generic.base import BaseObjectMixin, WagtailAdminTemplateMixin from wagtail.admin.views.generic.models import IndexView -from wagtail.admin.widgets.button import Button +from wagtail.admin.widgets.button import HeaderButton from wagtail.log_actions import registry as log_registry from wagtail.models import ( DraftStateMixin, @@ -103,7 +103,7 @@ class HistoryView(IndexView): @cached_property def header_buttons(self): return [ - Button( + HeaderButton( label=gettext("Edit"), url=self.get_edit_url(self.object), icon_name="edit", diff --git a/wagtail/admin/views/generic/models.py b/wagtail/admin/views/generic/models.py index 5903fcd7ca..b18537c1c0 100644 --- a/wagtail/admin/views/generic/models.py +++ b/wagtail/admin/views/generic/models.py @@ -45,7 +45,12 @@ from wagtail.admin.ui.tables import ( ) from wagtail.admin.utils import get_latest_str, get_valid_next_url_from_request from wagtail.admin.views.mixins import SpreadsheetExportMixin -from wagtail.admin.widgets.button import Button, ButtonWithDropdown, ListingButton +from wagtail.admin.widgets.button import ( + Button, + ButtonWithDropdown, + HeaderButton, + ListingButton, +) from wagtail.log_actions import log from wagtail.log_actions import registry as log_registry from wagtail.models import DraftStateMixin, Locale, ReferenceIndex @@ -391,7 +396,7 @@ class IndexView( self.request.user, "add" ): buttons.append( - Button( + HeaderButton( self.add_item_label, url=self.get_add_url(), icon_name="plus", @@ -408,6 +413,7 @@ class IndexView( _("Download XLSX"), url=self.xlsx_export_url, icon_name="download", + priority=90, ) ) buttons.append( @@ -415,6 +421,7 @@ class IndexView( _("Download CSV"), url=self.csv_export_url, icon_name="download", + priority=100, ) ) diff --git a/wagtail/admin/views/generic/usage.py b/wagtail/admin/views/generic/usage.py index cc9b2a71cd..09c04bb69d 100644 --- a/wagtail/admin/views/generic/usage.py +++ b/wagtail/admin/views/generic/usage.py @@ -8,7 +8,7 @@ from django.utils.translation import gettext_lazy from wagtail.admin.admin_url_finder import AdminURLFinder from wagtail.admin.ui import tables from wagtail.admin.utils import get_latest_str -from wagtail.admin.widgets.button import Button +from wagtail.admin.widgets.button import HeaderButton from wagtail.models import DraftStateMixin, ReferenceIndex from .base import BaseListingView, BaseObjectMixin @@ -71,7 +71,7 @@ class UsageView(PermissionCheckedMixin, BaseObjectMixin, BaseListingView): @cached_property def header_buttons(self): return [ - Button( + HeaderButton( label=_("Edit"), url=self.get_edit_url(), icon_name="edit", diff --git a/wagtail/admin/widgets/button.py b/wagtail/admin/widgets/button.py index 6d04277f40..4bcb5845c2 100644 --- a/wagtail/admin/widgets/button.py +++ b/wagtail/admin/widgets/button.py @@ -93,6 +93,36 @@ class Button(Component): ) +class HeaderButton(Button): + """An icon-only button to be displayed after the breadcrumbs in the header.""" + + def __init__( + self, + label="", + url=None, + classname="", + icon_name=None, + attrs={}, + **kwargs, + ): + classname = f"{classname} w-header-button w-h-slim-header w-ml-3".strip() + attrs = attrs.copy() + attrs.update( + { + "data-controller": "w-tooltip", + "data-w-tooltip-content-value": label, + } + ) + super().__init__( + label="", + url=url, + classname=classname, + icon_name=icon_name, + attrs=attrs, + **kwargs, + ) + + # Base class for all listing buttons # This is also used by SnippetListingButton defined in wagtail.snippets.widgets class ListingButton(Button):