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" %}
+
{% 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):