mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-25 05:02:57 +01:00
Code Issues Releases Wiki Activity

Move comments counter badge markup to base SidePanelToggle component

Browse Source
This commit is contained in:
Sage Abdullah 2023-06-23 12:46:38 +01:00
parent dbcad2b7c6
commit 876b0e0f19
No known key found for this signature in database
GPG Key ID: EB1A33CC51CC0217
4 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/entrypoints/admin/comments.js
View File

@ -312,16 +312,10 @@ window.comments = (() => {
});
// Keep number of comments up to date with comment app
const commentToggle = document.querySelector(
'[data-side-panel-toggle="comments"]',
const commentCounter = document.querySelector(
'[data-side-panel-toggle="comments"] [data-side-panel-toggle-counter]',
);
const commentCounter = document.createElement('div');
commentCounter.className =
'-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-bg-surface-button-default w-text-text-button w-border w-border-surface-page w-rounded-[1rem]';
commentToggle.appendChild(commentCounter);
const updateCommentCount = () => {
const commentCount = commentApp.selectors.selectCommentCount(
commentApp.store.getState(),
@ -334,6 +328,7 @@ window.comments = (() => {
if (commentCount > 0) {
commentCounter.innerText = commentCount.toString();
commentCounter.hidden = false;
} else {
// Note: Hide the circle when its content is empty
commentCounter.hidden = true;

3
wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
View File

@ -1,6 +1,7 @@
{% load wagtailadmin_tags i18n %}
{% fragment as nav_icon_classes %}w-w-4 w-h-4 group-hover:w-transform group-hover:w-scale-110{% endfragment %}
{% fragment as nav_icon_button_classes %}w-w-slim-header w-h-slim-header w-bg-transparent w-border-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition w-group hover:w-text-text-label focus:w-text-text-label expanded:w-text-text-label expanded:w-border-y-2 expanded:w-border-b-current{% endfragment %}
{% fragment as nav_icon_button_classes %}w-w-slim-header w-h-slim-header w-bg-transparent w-border-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition w-group hover:w-text-text-label focus:w-text-text-label expanded:w-text-text-label expanded:w-border-y-2 expanded:w-border-b-current w-shrink-0{% endfragment %}
{% fragment as nav_icon_counter_classes %}-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-text-text-button w-border w-border-surface-page w-rounded-[1rem]{% endfragment %}
{# Z index 99 to ensure header is always above #}
<header class="w-slim-header w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between w-bg-surface-header w-border-b w-border-border-furniture w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-z-header sm:w-sticky w-min-h-slim-header">

5
wagtail/admin/templates/wagtailadmin/shared/side_panel_toggle.html
View File

@ -10,4 +10,9 @@
aria-expanded="false"
>
{% icon name=toggle.icon_name classname=nav_icon_classes %}
{% if toggle.has_counter %}
<div data-side-panel-toggle-counter class="{{ nav_icon_counter_classes }} {{ toggle.counter_classname|default:'w-bg-surface-button-default'}}" {% if not count %}hidden{% endif %}>
{{ count }}
</div>
{% endif %}
</button>

5
wagtail/admin/ui/side_panels.py
View File

@ -14,6 +14,8 @@ class BaseSidePanel(Component):
template_name = "wagtailadmin/shared/side_panel_toggle.html"
aria_label = ""
icon_name = ""
has_counter = True
counter_classname = ""
def __init__(self, panel):
self.panel = panel
@ -23,10 +25,12 @@ class BaseSidePanel(Component):
inherit = {
"nav_icon_button_classes",
"nav_icon_classes",
"nav_icon_counter_classes",
}
context = {key: parent_context.get(key) for key in inherit}
context["toggle"] = self
context["panel"] = self.panel
context["count"] = 0
return context
def __init__(self, object, request):
@ -311,6 +315,7 @@ class BasePreviewSidePanel(BaseSidePanel):
class SidePanelToggle(BaseSidePanel.SidePanelToggle):
aria_label = gettext_lazy("Toggle preview")
icon_name = "mobile-alt"
has_counter = False
name = "preview"
title = gettext_lazy("Preview")