From 5c30b4211a36cab32727e3a155f70464295e446a Mon Sep 17 00:00:00 2001 From: SebCorbin Date: Tue, 25 Mar 2025 15:47:44 +0100 Subject: [PATCH] Support documented ability to override/extend icons in the userbar Allow to override icons in userbar --- CHANGELOG.txt | 1 + docs/advanced_topics/icons.md | 16 ++++++++++++++++ docs/reference/hooks.md | 2 ++ docs/releases/6.5.md | 1 + .../templates/wagtailadmin/userbar/base.html | 18 ++++++++++-------- 5 files changed, 30 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 3f93cc789a..0cea0ab090 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -13,6 +13,7 @@ Changelog * Add color-scheme meta tag to Wagtail admin (Ashish Nagmoti) * Add the ability to set the default privacy restriction for new pages using `get_default_privacy_setting` (Shlomo Markowitz) * Improve performance of batch purging page urls in the frontend cache, avoiding n+1 query issues (Andy Babic) + * Add better support and documentation for overriding or extending icons used in the in the userbar (Sébastien Corbin) * Fix: Take preferred language into account for translatable strings in client-side code (Bernhard Bliem, Sage Abdullah) * Fix: Do not show the content type column as sortable when searching pages (Srishti Jaiswal, Sage Abdullah) * Fix: Support simple subqueries for `in` and `exact` lookup on Elasticsearch (Sage Abdullah) diff --git a/docs/advanced_topics/icons.md b/docs/advanced_topics/icons.md index 811de4e052..1af6de44d7 100644 --- a/docs/advanced_topics/icons.md +++ b/docs/advanced_topics/icons.md @@ -76,6 +76,22 @@ Place your app before any Wagtail apps in `INSTALLED_APPS`. Wagtail icons live in `wagtail/admin/templates/wagtailadmin/icons/`. Place your own SVG files in `/templates/wagtailadmin/icons/`. +(custom_icons_userbar)= + +### Using custom icons in the userbar + +The userbar provides quick actions within page views when logged in. To customize the items shown in the user bar, you can use the [`construct_wagtail_userbar`](construct_wagtail_userbar) hook. If you want to use custom icons within these menu items they must be made available in the correct template. + +```html+django +{# /templates/wagtailadmin/userbar/base.html #} +{% extends "wagtailadmin/userbar/base.html" %} + +{% block icons %} + {{ block.super }} + {% include "wagtailadmin/icons/toucan.svg" %} +{% endblock %} +``` + (available_icons)= ## Available icons diff --git a/docs/reference/hooks.md b/docs/reference/hooks.md index 53430dc8a9..62569b9688 100644 --- a/docs/reference/hooks.md +++ b/docs/reference/hooks.md @@ -885,6 +885,8 @@ def add_puppy_link_item(request, items, page): return items.append( UserbarPuppyLinkItem() ) ``` +If you intend to use icons in your actions, you'll have to declare them by overriding the [userbar template](custom_icons_userbar). + ## Admin workflow Hooks for customizing the way admins are directed through the process of editing users. diff --git a/docs/releases/6.5.md b/docs/releases/6.5.md index 31764a4c26..6ccd9a8e4c 100644 --- a/docs/releases/6.5.md +++ b/docs/releases/6.5.md @@ -25,6 +25,7 @@ This version adds formal support for Django 5.2. * Add color-scheme meta tag to Wagtail admin (Ashish Nagmoti) * Add the ability to set the [default privacy restriction for new pages](set_default_page_privacy) using `get_default_privacy_setting` (Shlomo Markowitz) * Improve performance of batch purging page urls in the frontend cache, avoiding n+1 query issues (Andy Babic) + * Add better support and documentation for overriding or extending [icons used in the in the userbar](custom_icons_userbar) (Sébastien Corbin) ### Bug fixes diff --git a/wagtail/admin/templates/wagtailadmin/userbar/base.html b/wagtail/admin/templates/wagtailadmin/userbar/base.html index 8a5689b4f5..35037cf5d0 100644 --- a/wagtail/admin/templates/wagtailadmin/userbar/base.html +++ b/wagtail/admin/templates/wagtailadmin/userbar/base.html @@ -10,14 +10,16 @@ - {% include "wagtailadmin/icons/wagtail.svg" %} - {% include "wagtailadmin/icons/key.svg" %} - {% include "wagtailadmin/icons/folder-open-inverse.svg" %} - {% include "wagtailadmin/icons/edit.svg" %} - {% include "wagtailadmin/icons/plus.svg" %} - {% include "wagtailadmin/icons/check.svg" %} - {% include "wagtailadmin/icons/cross.svg" %} - {% include "wagtailadmin/icons/crosshairs.svg" %} + {% block icons %} + {% include "wagtailadmin/icons/wagtail.svg" %} + {% include "wagtailadmin/icons/key.svg" %} + {% include "wagtailadmin/icons/folder-open-inverse.svg" %} + {% include "wagtailadmin/icons/edit.svg" %} + {% include "wagtailadmin/icons/plus.svg" %} + {% include "wagtailadmin/icons/check.svg" %} + {% include "wagtailadmin/icons/cross.svg" %} + {% include "wagtailadmin/icons/crosshairs.svg" %} + {% endblock %}