From c17ab8b77a0796edb5eb0968cd0abc653cbfd85a Mon Sep 17 00:00:00 2001 From: Sage Abdullah Date: Mon, 25 Jul 2022 22:42:14 +0700 Subject: [PATCH] Render PublishingPanel inside dialog component --- client/scss/components/forms/_publishing.scss | 16 +++++++++++++ client/scss/core.scss | 1 + wagtail/admin/panels.py | 24 ++++++++++++++++--- .../wagtailadmin/icons/calendar-alt.svg | 4 ++++ .../publishing/schedule_publishing_panel.html | 14 +++++++++++ wagtail/admin/wagtail_hooks.py | 1 + 6 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 client/scss/components/forms/_publishing.scss create mode 100644 wagtail/admin/templates/wagtailadmin/icons/calendar-alt.svg create mode 100644 wagtail/admin/templates/wagtailadmin/panels/publishing/schedule_publishing_panel.html diff --git a/client/scss/components/forms/_publishing.scss b/client/scss/components/forms/_publishing.scss new file mode 100644 index 0000000000..15df6cbc3c --- /dev/null +++ b/client/scss/components/forms/_publishing.scss @@ -0,0 +1,16 @@ +// Styles for the fields in the scheduled publishing dialog +.w-panel.publishing { + .w-panel__wrapper { + margin-top: theme('spacing.2'); + margin-bottom: theme('spacing.2'); + } + + .w-field__input { + // Remove unnecessary padding so that the fields fit within the dialog + padding-inline-end: 0; + } + + .w-field--date_time_field input { + width: 100%; + } +} diff --git a/client/scss/core.scss b/client/scss/core.scss index dfe6b84a81..f8ad804fbe 100644 --- a/client/scss/core.scss +++ b/client/scss/core.scss @@ -118,6 +118,7 @@ These are classes for components. @import 'components/forms/drop-zone'; @import 'components/forms/daterange'; @import 'components/forms/file'; +@import 'components/forms/publishing'; @import 'components/forms/switch'; @import 'components/forms/title'; @import 'components/forms/field'; diff --git a/wagtail/admin/panels.py b/wagtail/admin/panels.py index caef593bd0..c07f3daab3 100644 --- a/wagtail/admin/panels.py +++ b/wagtail/admin/panels.py @@ -21,6 +21,7 @@ from wagtail.admin.forms.comments import CommentForm from wagtail.admin.templatetags.wagtailadmin_tags import avatar_url, user_display_name from wagtail.admin.ui.components import Component from wagtail.admin.widgets import AdminPageChooser +from wagtail.admin.widgets.datetime import AdminDateTimeInput from wagtail.blocks import BlockField from wagtail.coreutils import safe_snake_case from wagtail.models import COMMENTS_RELATION_NAME, Page @@ -1049,21 +1050,38 @@ class InlinePanel(Panel): # and therefore the associated styling of the publishing panel class PublishingPanel(MultiFieldPanel): def __init__(self, **kwargs): + js_overlay_parent_selector = "#schedule-publishing-dialog" updated_kwargs = { "children": [ FieldRowPanel( [ - FieldPanel("go_live_at"), - FieldPanel("expire_at"), + FieldPanel( + "go_live_at", + widget=AdminDateTimeInput( + js_overlay_parent_selector=js_overlay_parent_selector, + ), + ), + FieldPanel( + "expire_at", + widget=AdminDateTimeInput( + js_overlay_parent_selector=js_overlay_parent_selector, + ), + ), ], ), ], - "heading": gettext_lazy("Scheduled publishing"), "classname": "publishing", } updated_kwargs.update(kwargs) super().__init__(**updated_kwargs) + @property + def clean_name(self): + return super().clean_name or "publishing" + + class BoundPanel(PanelGroup.BoundPanel): + template_name = "wagtailadmin/panels/publishing/schedule_publishing_panel.html" + class CommentPanel(Panel): def get_form_options(self): diff --git a/wagtail/admin/templates/wagtailadmin/icons/calendar-alt.svg b/wagtail/admin/templates/wagtailadmin/icons/calendar-alt.svg new file mode 100644 index 0000000000..6ac82674d7 --- /dev/null +++ b/wagtail/admin/templates/wagtailadmin/icons/calendar-alt.svg @@ -0,0 +1,4 @@ + + + diff --git a/wagtail/admin/templates/wagtailadmin/panels/publishing/schedule_publishing_panel.html b/wagtail/admin/templates/wagtailadmin/panels/publishing/schedule_publishing_panel.html new file mode 100644 index 0000000000..e439d3b22e --- /dev/null +++ b/wagtail/admin/templates/wagtailadmin/panels/publishing/schedule_publishing_panel.html @@ -0,0 +1,14 @@ +{% load i18n wagtailadmin_tags %} + +{% trans 'Set publishing schedule' as schedule_publishing_dialog_title %} +{% trans 'Choose when this page should go live and/or expire' as schedule_publishing_dialog_subtitle %} + +
+ {% dialog id='schedule-publishing-dialog' dialog_root_selector='[data-schedule-publishing-dialog-root]' icon_name='calendar-alt' title=schedule_publishing_dialog_title subtitle=schedule_publishing_dialog_subtitle %} + {% include 'wagtailadmin/panels/multi_field_panel.html' %} + + + {% enddialog %} +
diff --git a/wagtail/admin/wagtail_hooks.py b/wagtail/admin/wagtail_hooks.py index 9b64032509..20888e3e22 100644 --- a/wagtail/admin/wagtail_hooks.py +++ b/wagtail/admin/wagtail_hooks.py @@ -977,6 +977,7 @@ def register_icons(icons): "bin.svg", "bold.svg", "breadcrumb-expand.svg", + "calendar-alt.svg", "chain-broken.svg", "check.svg", "chevron-down.svg",