kopia lustrzana https://github.com/wagtail/wagtail
Adopt slim header in page listing views (#8792)
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>pull/8865/head
Paarth Agarwal
GitHub
rodzic
d07ff422d8
commit
35b5ed350a
|
|
@ -74,6 +74,7 @@ Changelog
|
|||
* Use new modal dialog component for privacy settings modal (Sage Abdullah)
|
||||
* Add `menu_item_name` to modify MenuItem's name for ModelAdmin (Alexander Rogovskyy, Vu Pham)
|
||||
* Add an extra confirmation prompt when deleting pages with a large number of child pages (Jaspreet Singh)
|
||||
* Adopt the slim header in page listing views, with buttons moved under the "Actions" dropdown (Paarth Agarwal)
|
||||
* Fix: Typo in `ResumeWorkflowActionFormatter` message (Stefan Hammer)
|
||||
* Fix: Throw a meaningful error when saving an image to an unrecognised image format (Christian Franke)
|
||||
* Fix: Remove extra padding for headers with breadcrumbs on mobile viewport (Steven Steinwand)
|
||||
|
|
|
|||
|
|
@ -75,10 +75,6 @@ ul.listing {
|
|||
margin-bottom: -3em; // this negates the padding added to the bottom of .content
|
||||
}
|
||||
|
||||
&.full-width th {
|
||||
background-color: $color-thead-bg;
|
||||
}
|
||||
|
||||
.table-headers {
|
||||
border-bottom: 1px solid $color-grey-4;
|
||||
}
|
||||
|
|
@ -472,12 +468,20 @@ table.listing {
|
|||
}
|
||||
|
||||
// explorer specific tweaks
|
||||
.page-explorer .w-breadcrumb {
|
||||
li[hidden] ~ li:last-child,
|
||||
li:only-child {
|
||||
a {
|
||||
font-size: theme('fontSize.18');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-explorer .listing {
|
||||
position: relative;
|
||||
|
||||
.index {
|
||||
color: $color-white;
|
||||
background-color: $color-header-bg;
|
||||
background-color: $color-white;
|
||||
|
||||
td {
|
||||
padding-top: 1.5em;
|
||||
|
|
@ -498,18 +502,18 @@ table.listing {
|
|||
|
||||
.title {
|
||||
h2 {
|
||||
color: $color-white;
|
||||
color: theme('colors.primary.DEFAULT');
|
||||
font-size: 1.8em;
|
||||
font-weight: 500;
|
||||
font-weight: 800;
|
||||
|
||||
a:hover {
|
||||
color: $color-white;
|
||||
color: theme('colors.primary.DEFAULT');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: transparent;
|
||||
background-color: $color-teal-darker;
|
||||
color: $color-white;
|
||||
border-color: rgba(0, 0, 0, 0.35);
|
||||
|
||||
|
|
|
|||
|
|
@ -170,6 +170,7 @@ These are classes that provide overrides.
|
|||
@import 'layouts/compare-revisions';
|
||||
@import 'layouts/home';
|
||||
@import 'layouts/page-editor';
|
||||
@import 'layouts/form-side';
|
||||
@import 'layouts/login';
|
||||
@import 'layouts/account';
|
||||
@import 'layouts/workflow-edit';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
@use 'sass:color';
|
||||
@use 'sass:map';
|
||||
@use 'sass:math';
|
||||
|
||||
.form-side {
|
||||
@apply w-absolute
|
||||
w-z-[90]
|
||||
w-right-0
|
||||
w-top-full
|
||||
w-w-full
|
||||
w-h-screen
|
||||
sm:w-max-w-[420px]
|
||||
w-transform
|
||||
w-translate-x-full
|
||||
w-px-5
|
||||
w-py-10
|
||||
md:w-p-10
|
||||
w-bg-white
|
||||
w-box-border
|
||||
w-transition
|
||||
w-duration-300
|
||||
w-border-l
|
||||
w-border-grey-100
|
||||
w-overflow-y-auto
|
||||
w-scrollbar-thin;
|
||||
|
||||
&--open {
|
||||
@apply w-translate-x-0;
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
@apply w-text-primary w-absolute w-left-2 w-top-2 hover:w-text-primary-200 w-bg-white w-p-2.5 w-hidden w-transition;
|
||||
|
||||
.icon {
|
||||
@apply w-w-4 w-h-4;
|
||||
}
|
||||
}
|
||||
|
||||
&--open .form-side__close-button,
|
||||
&--open .form-side__panel {
|
||||
@apply w-block;
|
||||
}
|
||||
|
||||
&__panel {
|
||||
@apply w-hidden w-pl-2.5;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,99 +7,6 @@
|
|||
margin-bottom: 10em;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.header-meta {
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
border: 0;
|
||||
float: left;
|
||||
height: 1.5em;
|
||||
line-height: 2em;
|
||||
margin: 1em 0.75em 1.5em 0;
|
||||
|
||||
.icon {
|
||||
@include svg-icon(1.25em, text-bottom);
|
||||
|
||||
margin-inline-end: 0.2em;
|
||||
}
|
||||
|
||||
.icon-warning {
|
||||
@include svg-icon();
|
||||
}
|
||||
|
||||
&:first-child .button {
|
||||
margin-inline-start: -0.8em;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
margin-top: -0.25em; // Account for the button border
|
||||
overflow: initial;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
}
|
||||
|
||||
&--status {
|
||||
padding-inline-end: 0.8em;
|
||||
}
|
||||
|
||||
&--type {
|
||||
padding: 0 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.form-side {
|
||||
@apply w-absolute
|
||||
w-z-[90]
|
||||
w-right-0
|
||||
w-top-full
|
||||
w-w-full
|
||||
w-h-[calc(100vh-100%)]
|
||||
sm:w-max-w-[500px]
|
||||
w-transform
|
||||
w-translate-x-full
|
||||
w-px-6
|
||||
w-py-4
|
||||
w-bg-white
|
||||
w-box-border
|
||||
w-transition
|
||||
w-duration-300
|
||||
w-border-l
|
||||
w-border-grey-100
|
||||
w-overflow-y-auto
|
||||
w-scrollbar-thin;
|
||||
|
||||
&--open {
|
||||
@apply w-translate-x-0;
|
||||
}
|
||||
|
||||
&__close-button {
|
||||
@apply w-text-primary w-absolute w-left-3 w-top-3 hover:w-text-primary-200 w-bg-white w-p-3 w-hidden w-transition;
|
||||
|
||||
.icon {
|
||||
@apply w-w-4 w-h-4;
|
||||
}
|
||||
}
|
||||
|
||||
&--open .form-side__close-button,
|
||||
&--open .form-side__panel {
|
||||
@apply w-block;
|
||||
}
|
||||
|
||||
&__panel {
|
||||
@apply w-hidden w-h-full;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.side-panel-open {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { initModernDropdown, initTooltips } from '../../includes/initTooltips';
|
|||
import { initTabs } from '../../includes/tabs';
|
||||
import { dialog } from '../../includes/dialog';
|
||||
import initCollapsibleBreadcrumbs from '../../includes/breadcrumbs';
|
||||
import initSidePanel from '../../includes/sidePanel';
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// Run react-axe in development only, so it does not affect performance
|
||||
|
|
@ -31,4 +32,5 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
initSkipLink();
|
||||
dialog();
|
||||
initCollapsibleBreadcrumbs();
|
||||
initSidePanel();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
export default function initSidePanel() {
|
||||
const setPanel = (panelName) => {
|
||||
const sidePanelWrapper = document.querySelector('[data-form-side]');
|
||||
const body = document.querySelector('body');
|
||||
// Open / close side panel
|
||||
|
||||
// HACK: For now, the comments will show without the side-panel opening.
|
||||
// They will later be updated so that they render inside the side panel.
|
||||
// We couldn't implement this for Wagtail 3.0 as the existing field styling
|
||||
// renders the "Add comment" button on the right hand side, and this gets
|
||||
// covered up by the side panel.
|
||||
|
||||
if (panelName === '' || panelName === 'comments') {
|
||||
sidePanelWrapper.classList.remove('form-side--open');
|
||||
sidePanelWrapper.removeAttribute('aria-labelledby');
|
||||
} else {
|
||||
sidePanelWrapper.classList.add('form-side--open');
|
||||
sidePanelWrapper.setAttribute(
|
||||
'aria-labelledby',
|
||||
`side-panel-${panelName}-title`,
|
||||
);
|
||||
}
|
||||
|
||||
document.querySelectorAll('[data-side-panel]').forEach((panel) => {
|
||||
if (panel.dataset.sidePanel === panelName) {
|
||||
if (panel.hidden) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
panel.hidden = false;
|
||||
panel.dispatchEvent(new CustomEvent('show'));
|
||||
body.classList.add('side-panel-open');
|
||||
}
|
||||
} else if (!panel.hidden) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
panel.hidden = true;
|
||||
panel.dispatchEvent(new CustomEvent('hide'));
|
||||
body.classList.remove('side-panel-open');
|
||||
}
|
||||
});
|
||||
|
||||
// Update aria-expanded attribute on the panel toggles
|
||||
document.querySelectorAll('[data-side-panel-toggle]').forEach((toggle) => {
|
||||
toggle.setAttribute(
|
||||
'aria-expanded',
|
||||
toggle.dataset.sidePanelToggle === panelName ? 'true' : 'false',
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const togglePanel = (panelName) => {
|
||||
const isAlreadyOpen = !document
|
||||
.querySelector(`[data-side-panel="${panelName}"]`)
|
||||
.hasAttribute('hidden');
|
||||
|
||||
if (isAlreadyOpen) {
|
||||
// Close the sidebar
|
||||
setPanel('');
|
||||
} else {
|
||||
// Open the sidebar / navigate to the panel
|
||||
setPanel(panelName);
|
||||
}
|
||||
};
|
||||
|
||||
document.querySelectorAll('[data-side-panel-toggle]').forEach((toggle) => {
|
||||
toggle.addEventListener('click', () => {
|
||||
togglePanel(toggle.dataset.sidePanelToggle);
|
||||
});
|
||||
});
|
||||
|
||||
const closeButton = document.querySelector('[data-form-side-close-button]');
|
||||
if (closeButton instanceof HTMLButtonElement) {
|
||||
closeButton.addEventListener('click', () => {
|
||||
setPanel('');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -501,7 +501,7 @@ def global_admin_js():
|
|||
|
||||
### `register_page_header_buttons`
|
||||
|
||||
Add buttons to the secondary dropdown menu in the page edit view. This works similarly to the `register_page_listing_buttons` hook.
|
||||
Add buttons to the secondary dropdown menu in the page header. This works similarly to the `register_page_listing_buttons` hook.
|
||||
|
||||
This example will add a simple button to the secondary dropdown menu:
|
||||
|
||||
|
|
|
|||
|
|
@ -94,6 +94,7 @@ Wagtail’s page preview is now available in a side panel within the page editor
|
|||
* Use new modal dialog component for privacy settings modal (Sage Abdullah)
|
||||
* Add `menu_item_name` to modify MenuItem's name for ModelAdmin (Alexander Rogovskyy, Vu Pham)
|
||||
* Add an extra confirmation prompt when deleting pages with a large number of child pages (Jaspreet Singh)
|
||||
* Adopt the slim header in page listing views, with buttons moved under the "Actions" dropdown (Paarth Agarwal)
|
||||
|
||||
### Bug fixes
|
||||
|
||||
|
|
@ -209,3 +210,9 @@ If your code contains references to URL route names within the `wagtaildocs` or
|
|||
### Auto-updating preview
|
||||
|
||||
As part of the introduction of the new live preview panel, we have changed the `WAGTAIL_AUTO_UPDATE_PREVIEW` setting to be on (`True`) by default. This can still be turned off by setting it to `False`. The `WAGTAIL_AUTO_UPDATE_PREVIEW_INTERVAL` setting has been introduced for sites willing to reduce the performance cost of the live preview without turning it off completely.
|
||||
|
||||
### Slim header on page listings
|
||||
|
||||
The page explorer listings now use Wagtail’s new slim header, replacing the previous large teal header. The parent page’s metadata and related actions are now available within the “Info” side panel, while the majority of buttons are now available under the Actions dropdown in the header, identically to the page create/edit forms.
|
||||
|
||||
Customising which actions are available and adding extra actions is still possible, but has to be done with the [`register_page_header_buttons`](register_page_header_buttons) hook, rather than [`register_page_listing_buttons`](register_page_listing_buttons) and [`register_page_listing_more_buttons`](register_page_listing_more_buttons). Those hooks still work as-is to define actions for each page within the listings.
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
{% load i18n wagtailadmin_tags %}
|
||||
|
||||
{% test_page_is_public page as is_public %}
|
||||
{% if not page_perms %}
|
||||
{% page_permissions page as page_perms %}
|
||||
{% endif %}
|
||||
|
||||
{% if not page.is_root %}
|
||||
{% trans 'Change privacy' as set_privacy_title %}
|
||||
{% trans 'Choose who can view the live version of this page' as set_privacy_message %}
|
||||
{% trans 'Privacy changes apply to all children of this page too.' as privacy_message_text %}
|
||||
{% url 'wagtailadmin_pages:set_privacy' page.id as privacy_url %}
|
||||
{% dialog icon_name='view' id='set-privacy' data_url=privacy_url title=set_privacy_title subtitle=set_privacy_message message_status='warning' message_heading=privacy_message_text %}
|
||||
{% enddialog %}
|
||||
|
||||
<div class="privacy-indicator {% if is_public %}public{% else %}private{% endif %}">
|
||||
{% trans "Privacy" %}
|
||||
{% if page_perms.can_set_view_restrictions %}
|
||||
<button data-a11y-dialog-show="set-privacy" class="status-tag primary">
|
||||
{# labels are shown/hidden in CSS according to the 'private' / 'public' class on view-permission-indicator #}
|
||||
<span class="label-public icon icon-view" aria-label="{% trans 'Set page privacy. Current status: Public' %}">
|
||||
{% trans "Public" %}
|
||||
</span>
|
||||
<span class="label-private icon icon-no-view" aria-label="{% trans 'Set page privacy. Current status: Private' %}">
|
||||
{% trans "Private" %}
|
||||
</span>
|
||||
</button>
|
||||
{% else %}
|
||||
{% if is_public %}
|
||||
<span class="label-public status-tag primary icon icon-view" aria-label="{% trans 'Page privacy. Current status: Public' %}">
|
||||
{% trans "Public" %}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="label-private status-tag primary icon icon-no-view" aria-label="{% trans 'Page privacy. Current status: Private' %}">
|
||||
{% trans "Private" %}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -4,16 +4,14 @@
|
|||
{% block bodyclass %}page-explorer {% if ordering == 'ord' %}reordering{% endif %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<header class="w-header w-header--merged w-header--no-border">
|
||||
<h1 class="visuallyhidden">Explorer</h1>
|
||||
|
||||
{% breadcrumbs parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' %}
|
||||
</header>
|
||||
|
||||
{% page_permissions parent_page as parent_page_perms %}
|
||||
<div class="w-sticky w-top-0 w-z-header">
|
||||
{% include 'wagtailadmin/pages/page_listing_header.html' with title=parent_page.get_admin_display_title page_perms=parent_page_perms %}
|
||||
{% include "wagtailadmin/shared/side_panels.html" %}
|
||||
</div>
|
||||
<form id="page-reorder-form">
|
||||
{% csrf_token %}
|
||||
|
||||
{% page_permissions parent_page as parent_page_perms %}
|
||||
{% include "wagtailadmin/pages/listing/_list_explore.html" with sortable=1 sortable_by_type=1 full_width=1 show_ordering_column=show_ordering_column show_bulk_actions=show_bulk_actions parent_page=parent_page orderable=parent_page_perms.can_reorder_children show_locale_labels=show_locale_labels %}
|
||||
|
||||
{% if do_paginate %}
|
||||
|
|
|
|||
|
|
@ -14,35 +14,6 @@
|
|||
<col width="12%" />
|
||||
<col width="10%" />
|
||||
<thead>
|
||||
{% block pre_parent_page_headers %}
|
||||
{% endblock %}
|
||||
|
||||
{% if parent_page %}
|
||||
{% page_permissions parent_page as parent_page_perms %}
|
||||
<tr class="index {% if not parent_page.live %} unpublished{% endif %} {% block parent_page_row_classname %}{% endblock %}">
|
||||
<td class="title"{% if show_ordering_column or show_bulk_actions %} colspan="2"{% endif %}>
|
||||
{% block parent_page_title %}
|
||||
{% endblock %}
|
||||
</td>
|
||||
<td class="updated" valign="bottom">
|
||||
{% if parent_page.latest_revision_created_at %}
|
||||
{% human_readable_date parent_page.latest_revision_created_at %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="type" valign="bottom">
|
||||
{% if not parent_page.is_root %}
|
||||
{{ parent_page.page_type_display_name }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="status" valign="bottom">
|
||||
{% if not parent_page.is_root %}
|
||||
{% include "wagtailadmin/shared/page_status_tag.html" with page=parent_page %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
|
||||
{% block post_parent_page_headers %}
|
||||
{% endblock %}
|
||||
</thead>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,6 @@
|
|||
|
||||
{# Page listing include, customised for 'explore' mode #}
|
||||
|
||||
{% block parent_page_title %}
|
||||
{% include "wagtailadmin/pages/listing/_parent_page_title_explore.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block post_parent_page_headers %}
|
||||
|
||||
{% if parent_page %}
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
{% extends "wagtailadmin/pages/listing/_list.html" %}
|
||||
|
||||
{% load i18n %}
|
||||
|
||||
{# Page listing include, customised for 'move' mode #}
|
||||
|
||||
{% block table_classname %}chooser{% endblock %}
|
||||
|
||||
{% block pre_parent_page_headers %}
|
||||
<tr class="table-headers">
|
||||
<th class="title">{% trans 'Title' %}</th>
|
||||
{% if show_parent %}
|
||||
<th class="parent">{% trans 'Parent' %}</th>
|
||||
{% endif %}
|
||||
<th class="updated">{% trans 'Updated' %}</th>
|
||||
<th class="type">{% trans 'Type' %}</th>
|
||||
<th class="status">{% trans 'Status' %}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
{% endblock %}
|
||||
|
||||
{% block parent_page_row_classname %}{% if not parent_page.can_choose %}disabled{% endif %}{% endblock %}
|
||||
|
||||
{% block parent_page_title %}
|
||||
{% include "wagtailadmin/pages/listing/_page_title_move.html" with page=parent_page %}
|
||||
{% endblock %}
|
||||
|
||||
{% block post_parent_page_headers %}{% endblock %}
|
||||
|
||||
{% block page_row_classname %}{% if not page.can_choose %}disabled{% endif %}{% endblock %}
|
||||
|
||||
{% block page_title %}
|
||||
{% include "wagtailadmin/pages/listing/_page_title_move.html" with page=page %}
|
||||
{% endblock %}
|
||||
|
||||
{% block page_navigation %}
|
||||
{% include "wagtailadmin/pages/listing/_navigation_move.html" %}
|
||||
{% endblock %}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
{% load i18n %}
|
||||
|
||||
{% comment %}
|
||||
Navigation controls for the page listing in 'move' mode
|
||||
{% endcomment %}
|
||||
|
||||
<td class="{% if page.can_descend %}children{% endif %}">
|
||||
{% if page.can_descend %}
|
||||
<a href="{% url 'wagtailadmin_pages:move_choose_destination' page_to_move.id page.id %}" class="icon text-replace icon-arrow-right navigate-pages" title="{% blocktrans trimmed with title=page.get_admin_display_title %}Explore subpages of '{{ title }}'{% endblocktrans %}">{% trans 'Explore' %}</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
|
|
@ -19,8 +19,6 @@
|
|||
<span class="status-tag status-tag--label">{{ page.locale.get_display_name }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% block pages_listing_title_extra %}{% endblock pages_listing_title_extra %}
|
||||
|
||||
{% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %}
|
||||
{% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=page %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
{% comment %}
|
||||
The title field for a page in the page listing, when in 'move' mode.
|
||||
|
||||
Expects a variable 'page', the page instance.
|
||||
{% endcomment %}
|
||||
|
||||
<div class="title-wrapper">
|
||||
{% if page.can_choose %}
|
||||
<a href="{% url 'wagtailadmin_pages:move_confirm' page_to_move.id page.id %}">{{ page.specific.get_admin_display_title }}{% block pages_listing_link_title_extra %}{% endblock pages_listing_link_title_extra %}</a>
|
||||
{% else %}
|
||||
{{ page.get_admin_display_title }}{% block pages_listing_title_extra %}{% endblock pages_listing_title_extra %}
|
||||
{% endif %}
|
||||
|
||||
{% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %}
|
||||
{% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=page %}
|
||||
</div>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
{% load i18n %}
|
||||
{% load wagtailadmin_tags %}
|
||||
|
||||
{# The title field for a parent page when the listing is in 'explore' mode #}
|
||||
|
||||
<h2>
|
||||
{% if parent_page_perms.can_edit %}
|
||||
<a href="{% url 'wagtailadmin_pages:edit' parent_page.id %}">{{ parent_page.get_admin_display_title }}</a>
|
||||
{% else %}
|
||||
{{ parent_page.get_admin_display_title }}
|
||||
{% endif %}
|
||||
|
||||
{% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=parent_page %}
|
||||
</h2>
|
||||
|
||||
{% include "wagtailadmin/pages/_privacy_switch.html" with page=parent_page %}
|
||||
|
||||
<ul class="actions">
|
||||
{% page_listing_buttons parent_page parent_page_perms is_parent=True %}
|
||||
|
||||
{% if locale %}
|
||||
<li class="header-meta--locale">
|
||||
{% include "wagtailadmin/shared/locale_selector.html" %}
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
{% extends 'wagtailadmin/shared/headers/slim_header.html' %}
|
||||
{% load wagtailadmin_tags i18n %}
|
||||
|
||||
{% block header_content %}
|
||||
{% breadcrumbs parent_page 'wagtailadmin_explore' url_root_name='wagtailadmin_explore_root' %}
|
||||
|
||||
<h1 class="w-sr-only">
|
||||
{{ title }}
|
||||
</h1>
|
||||
{# Actions divider #}
|
||||
<div class="w-w-px w-h-[30px] w-ml-auto sm:w-ml-0 w-bg-grey-100"></div>
|
||||
{# Page actions dropdown #}
|
||||
{% page_header_buttons parent_page page_perms=page_perms %}
|
||||
{% endblock %}
|
||||
{% block actions %}
|
||||
{% with nav_icon_classes='w-w-4 w-h-4' nav_icon_button_classes='w-h-[50px] w-bg-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-grey-400 w-transition hover:w-transform hover:w-scale-110 hover:w-text-primary focus:w-text-primary' %}
|
||||
{% if not parent_page.is_root %}
|
||||
{% include "wagtailadmin/shared/side_panel_toggles.html" %}
|
||||
{# Page history #}
|
||||
{% if parent_page.get_latest_revision %}
|
||||
<a href="{% url 'wagtailadmin_pages:history' parent_page.id %}"
|
||||
class="{{ nav_icon_button_classes }}"
|
||||
data-tippy-content="{% trans 'History' %}"
|
||||
data-tippy-offset="[0, 0]"
|
||||
data-tippy-placement="bottom"
|
||||
aria-label="{% trans 'History' %}"
|
||||
>
|
||||
{% icon name="history" class_name=nav_icon_classes %}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% include "wagtailadmin/shared/page_status_tag_new.html" with page=parent_page %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endblock %}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
`pages` - A list of wagtail page objects
|
||||
`trailing_breadcrumb_title` (string?) - use this for a non linkable last breadcrumb
|
||||
{% endcomment %}
|
||||
{% with breadcrumb_link_classes='w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold' icon_classes='w-w-4 w-h-4 w-ml-3' %}
|
||||
{% with breadcrumb_link_classes='w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold' icon_classes='w-w-4 w-h-4 w-ml-3' %}
|
||||
{# Breadcrumbs are visible on mobile by default but hidden on desktop #}
|
||||
<div class="w-breadcrumb w-flex w-flex-row w-items-center w-overflow-x-auto w-overflow-y-hidden w-scrollbar-thin" data-breadcrumb-next{% if not pages %} hidden{% endif %}>
|
||||
{% if not is_expanded %}
|
||||
|
|
|
|||
|
|
@ -404,7 +404,7 @@ class TestBreadcrumb(TestCase, WagtailTestUtils):
|
|||
expected = (
|
||||
"""
|
||||
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="%s">
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="%s">
|
||||
Secret plans (simple page)
|
||||
</a>
|
||||
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
|
||||
|
|
@ -636,7 +636,7 @@ class TestExplorablePageVisibility(TestCase, WagtailTestUtils):
|
|||
self.assertEqual(response.status_code, 200)
|
||||
expected = """
|
||||
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/pages/">
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/pages/">
|
||||
Root
|
||||
</a>
|
||||
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
|
||||
|
|
@ -648,7 +648,7 @@ class TestExplorablePageVisibility(TestCase, WagtailTestUtils):
|
|||
self.assertContains(response, expected, html=True)
|
||||
expected = """
|
||||
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/pages/4/">
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/pages/4/">
|
||||
Welcome to example.com!
|
||||
</a>
|
||||
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
|
||||
|
|
@ -659,7 +659,7 @@ class TestExplorablePageVisibility(TestCase, WagtailTestUtils):
|
|||
self.assertContains(response, expected, html=True)
|
||||
expected = """
|
||||
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/pages/5/">
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/pages/5/">
|
||||
Content
|
||||
</a>
|
||||
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
|
||||
|
|
@ -677,7 +677,7 @@ class TestExplorablePageVisibility(TestCase, WagtailTestUtils):
|
|||
# since it's his Closest Common Ancestor.
|
||||
expected = """
|
||||
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/pages/4/">
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/pages/4/">
|
||||
Root
|
||||
</a>
|
||||
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
|
||||
|
|
@ -688,7 +688,7 @@ class TestExplorablePageVisibility(TestCase, WagtailTestUtils):
|
|||
self.assertContains(response, expected, html=True)
|
||||
expected = """
|
||||
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-max-w-0" data-breadcrumb-item hidden>
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/pages/5/">
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/pages/5/">
|
||||
Content
|
||||
</a>
|
||||
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
|
||||
|
|
@ -736,15 +736,8 @@ class TestLocaleSelector(TestCase, WagtailTestUtils):
|
|||
reverse("wagtailadmin_explore", args=[self.events_page.id])
|
||||
)
|
||||
|
||||
self.assertContains(response, '<li class="header-meta--locale">')
|
||||
|
||||
add_translation_url = reverse(
|
||||
"wagtailadmin_explore", args=[self.translated_events_page.id]
|
||||
)
|
||||
self.assertContains(
|
||||
response,
|
||||
f'<a href="{add_translation_url}" aria-label="French" class="u-link is-live w-no-underline">',
|
||||
)
|
||||
self.assertContains(response, 'id="status-sidebar-english"')
|
||||
self.assertContains(response, "Switch locales")
|
||||
|
||||
@override_settings(WAGTAIL_I18N_ENABLED=False)
|
||||
def test_locale_selector_not_present_when_i18n_disabled(self):
|
||||
|
|
@ -752,12 +745,4 @@ class TestLocaleSelector(TestCase, WagtailTestUtils):
|
|||
reverse("wagtailadmin_explore", args=[self.events_page.id])
|
||||
)
|
||||
|
||||
self.assertNotContains(response, '<li class="header-meta--locale">')
|
||||
|
||||
add_translation_url = reverse(
|
||||
"wagtailadmin_explore", args=[self.translated_events_page.id]
|
||||
)
|
||||
self.assertNotContains(
|
||||
response,
|
||||
f'<a href="{add_translation_url}" aria-label="French" class="u-link is-live w-no-underline">',
|
||||
)
|
||||
self.assertNotContains(response, "Switch locales")
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ from wagtail import hooks
|
|||
from wagtail.admin import widgets as wagtailadmin_widgets
|
||||
from wagtail.admin.wagtail_hooks import page_listing_more_buttons
|
||||
from wagtail.models import Page
|
||||
from wagtail.test.testapp.models import SimplePage
|
||||
from wagtail.test.utils import WagtailTestUtils
|
||||
|
||||
|
||||
|
|
@ -41,9 +42,17 @@ class ReorderOnlyPagePerms(BasePagePerms):
|
|||
|
||||
class TestButtonsHooks(TestCase, WagtailTestUtils):
|
||||
def setUp(self):
|
||||
self.root_page = Page.objects.get(id=2)
|
||||
self.login()
|
||||
|
||||
self.root_page = Page.objects.get(id=2)
|
||||
self.child_page = self.root_page.add_child(
|
||||
instance=SimplePage(
|
||||
title="Public page",
|
||||
content="hello",
|
||||
live=True,
|
||||
)
|
||||
)
|
||||
|
||||
def test_register_page_listing_buttons(self):
|
||||
def page_listing_buttons(page, page_perms, is_parent=False, next_url=None):
|
||||
yield wagtailadmin_widgets.PageListingButton(
|
||||
|
|
|
|||
|
|
@ -258,7 +258,7 @@ class TestChooserBrowseChild(TestCase, WagtailTestUtils):
|
|||
# Look for a link element in the breadcrumbs with the admin title
|
||||
expected = """
|
||||
<li class="w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold " data-breadcrumb-item>
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full" href="/admin/choose-page/{page_id}/?">
|
||||
<a class="w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-text-14 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full w-transition w-transition-all w-duration-300" href="/admin/choose-page/{page_id}/?">
|
||||
{page_title}
|
||||
</a>
|
||||
<svg class="icon icon-arrow-right w-w-4 w-h-4 w-ml-3" aria-hidden="true">
|
||||
|
|
|
|||
|
|
@ -348,9 +348,10 @@ class TestPrivacyIndicators(TestCase, WagtailTestUtils):
|
|||
self.assertEqual(response.status_code, 200)
|
||||
|
||||
# Check the privacy indicator is public
|
||||
self.assertTemplateUsed(response, "wagtailadmin/pages/_privacy_switch.html")
|
||||
self.assertContains(response, '<div class="privacy-indicator public">')
|
||||
self.assertNotContains(response, '<div class="privacy-indicator private">')
|
||||
self.assertContains(
|
||||
response, '<div class="w-hidden" data-privacy-sidebar-private>'
|
||||
)
|
||||
self.assertContains(response, '<div class="" data-privacy-sidebar-public>')
|
||||
|
||||
def test_explorer_private(self):
|
||||
"""
|
||||
|
|
@ -363,10 +364,11 @@ class TestPrivacyIndicators(TestCase, WagtailTestUtils):
|
|||
# Check the response
|
||||
self.assertEqual(response.status_code, 200)
|
||||
|
||||
# Check the privacy indicator is public
|
||||
self.assertTemplateUsed(response, "wagtailadmin/pages/_privacy_switch.html")
|
||||
self.assertContains(response, '<div class="privacy-indicator private">')
|
||||
self.assertNotContains(response, '<div class="privacy-indicator public">')
|
||||
# Check the privacy indicator is private
|
||||
self.assertContains(response, '<div class="" data-privacy-sidebar-private>')
|
||||
self.assertContains(
|
||||
response, '<div class="w-hidden" data-privacy-sidebar-public>'
|
||||
)
|
||||
|
||||
def test_explorer_private_child(self):
|
||||
"""
|
||||
|
|
@ -379,10 +381,11 @@ class TestPrivacyIndicators(TestCase, WagtailTestUtils):
|
|||
# Check the response
|
||||
self.assertEqual(response.status_code, 200)
|
||||
|
||||
# Check the privacy indicator is public
|
||||
self.assertTemplateUsed(response, "wagtailadmin/pages/_privacy_switch.html")
|
||||
self.assertContains(response, '<div class="privacy-indicator private">')
|
||||
self.assertNotContains(response, '<div class="privacy-indicator public">')
|
||||
# Check the privacy indicator is private
|
||||
self.assertContains(response, '<div class="" data-privacy-sidebar-private>')
|
||||
self.assertContains(
|
||||
response, '<div class="w-hidden" data-privacy-sidebar-public>'
|
||||
)
|
||||
|
||||
def test_explorer_list_homepage(self):
|
||||
"""
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ from django.urls import reverse
|
|||
from wagtail import hooks
|
||||
from wagtail.admin.auth import user_has_any_page_permission, user_passes_test
|
||||
from wagtail.admin.navigation import get_explorable_root_page
|
||||
from wagtail.admin.ui.side_panels import PageSidePanels
|
||||
from wagtail.models import Page, UserPagePermissionsProxy
|
||||
|
||||
|
||||
|
|
@ -93,9 +94,17 @@ def index(request, parent_page_id=None):
|
|||
|
||||
show_ordering_column = request.GET.get("ordering") == "ord"
|
||||
|
||||
side_panels = PageSidePanels(
|
||||
request,
|
||||
parent_page.specific,
|
||||
preview_enabled=False,
|
||||
comments_enabled=False,
|
||||
)
|
||||
|
||||
context = {
|
||||
"parent_page": parent_page.specific,
|
||||
"ordering": ordering,
|
||||
"side_panels": side_panels,
|
||||
"pages": pages,
|
||||
"do_paginate": do_paginate,
|
||||
"locale": None,
|
||||
|
|
|
|||
|
|
@ -363,7 +363,18 @@ def page_listing_more_buttons(page, page_perms, is_parent=False, next_url=None):
|
|||
|
||||
|
||||
@hooks.register("register_page_header_buttons")
|
||||
def page_header_buttons(page, page_perms, next_url=None):
|
||||
def page_header_buttons(page, page_perms, is_parent=False, next_url=None):
|
||||
if page_perms.can_edit():
|
||||
yield Button(
|
||||
_("Edit"),
|
||||
reverse("wagtailadmin_pages:edit", args=[page.id]),
|
||||
icon_name="edit",
|
||||
attrs={
|
||||
"title": _("Edit '%(title)s'")
|
||||
% {"title": page.get_admin_display_title()}
|
||||
},
|
||||
priority=10,
|
||||
)
|
||||
if page_perms.can_move():
|
||||
yield Button(
|
||||
_("Move"),
|
||||
|
|
@ -373,7 +384,7 @@ def page_header_buttons(page, page_perms, next_url=None):
|
|||
"title": _("Move page '%(title)s'")
|
||||
% {"title": page.get_admin_display_title()}
|
||||
},
|
||||
priority=10,
|
||||
priority=20,
|
||||
)
|
||||
if page_perms.can_copy():
|
||||
url = reverse("wagtailadmin_pages:copy", args=[page.id])
|
||||
|
|
@ -388,7 +399,7 @@ def page_header_buttons(page, page_perms, next_url=None):
|
|||
"title": _("Copy page '%(title)s'")
|
||||
% {"title": page.get_admin_display_title()}
|
||||
},
|
||||
priority=20,
|
||||
priority=30,
|
||||
)
|
||||
if page_perms.can_add_subpage():
|
||||
yield Button(
|
||||
|
|
@ -399,7 +410,55 @@ def page_header_buttons(page, page_perms, next_url=None):
|
|||
"aria-label": _("Add a child page to '%(title)s' ")
|
||||
% {"title": page.get_admin_display_title()},
|
||||
},
|
||||
priority=30,
|
||||
priority=40,
|
||||
)
|
||||
if page_perms.can_delete():
|
||||
url = reverse("wagtailadmin_pages:delete", args=[page.id])
|
||||
|
||||
# After deleting the page, it is impossible to redirect to it.
|
||||
if next_url == reverse("wagtailadmin_explore", args=[page.id]):
|
||||
next_url = None
|
||||
|
||||
if next_url:
|
||||
url += "?" + urlencode({"next": next_url})
|
||||
|
||||
yield Button(
|
||||
_("Delete"),
|
||||
url,
|
||||
icon_name="bin",
|
||||
attrs={
|
||||
"title": _("Delete page '%(title)s'")
|
||||
% {"title": page.get_admin_display_title()}
|
||||
},
|
||||
priority=50,
|
||||
)
|
||||
if page_perms.can_unpublish():
|
||||
url = reverse("wagtailadmin_pages:unpublish", args=[page.id])
|
||||
if next_url:
|
||||
url += "?" + urlencode({"next": next_url})
|
||||
|
||||
yield Button(
|
||||
_("Unpublish"),
|
||||
url,
|
||||
icon_name="download-alt",
|
||||
attrs={
|
||||
"title": _("Unpublish page '%(title)s'")
|
||||
% {"title": page.get_admin_display_title()}
|
||||
},
|
||||
priority=60,
|
||||
)
|
||||
if is_parent and page_perms.can_reorder_children():
|
||||
url = reverse("wagtailadmin_explore", args=[page.id])
|
||||
url += "?ordering=ord"
|
||||
yield Button(
|
||||
_("Sort menu order"),
|
||||
url,
|
||||
icon_name="list-ul",
|
||||
attrs={
|
||||
"title": _("Change ordering of child pages of '%(title)s'")
|
||||
% {"title": page.get_admin_display_title()}
|
||||
},
|
||||
priority=70,
|
||||
)
|
||||
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue