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

Adopt w-orderable for page order drag & drop/move

Browse Source 
- Fixes #10909
This commit is contained in:
Aman Pandey 2024-01-11 13:15:55 +05:30 committed by LB (Ben Johnston)
parent bf3e317a48
commit 735aaa95bf
4 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/scss/components/_listing.scss
View File

@ -349,17 +349,7 @@ ul.listing {
}
}
.handle {
cursor: move;
width: 20px;
color: theme('colors.icon-secondary');
&:hover {
color: theme('colors.icon-secondary-hover');
}
}
.ui-sortable-helper {
.w-orderable__item--active {
border: 1px dashed theme('colors.border-field-default');
border-width: 1px 0;
@ -373,6 +363,10 @@ ul.listing {
}
}
.w-orderable__item__handle {
cursor: move;
}
table .no-results-message {
padding-inline-start: 20px;
}
@ -661,11 +655,6 @@ table.listing {
td.ord {
// Align with the row's title text, and the column's label.
vertical-align: top;
.handle {
width: 100%;
text-align: center;
}
}
table.listing {

14
wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_cell.html
View File

@ -1,10 +1,18 @@
{% load i18n wagtailadmin_tags %}
<td class="ord">
<div class="handle" tabindex="0" aria-live="polite" data-order-handle>
<button
class="w-orderable__item__handle button button-small text-replace button--icon"
type="button"
aria-live="polite"
data-w-orderable-target="handle"
data-action="keydown.up->w-orderable#up:prevent keydown.down->w-orderable#down:prevent keydown.enter->w-orderable#apply blur->w-orderable#apply"
>
{% icon name="grip" classname="default" %}
<span class="w-sr-only">
{% trans 'Drag' %}
<span data-order-label>Item {{ row.index|add:1 }} of {{ table.row_count }}</span>
<span>
{% blocktranslate trimmed with index=row.index|add:1 total=table.row_count %}Item {{ index }} of {{ total }}{% endblocktranslate %}
</span>
</span>
</div>
</button>
</td>

4
wagtail/admin/ui/tables/pages.py
View File

@ -131,7 +131,9 @@ class PageTable(Table):
attrs = super().get_row_attrs(instance)
if self.use_row_ordering_attributes:
attrs["id"] = "page_%d" % instance.id
attrs["data-page-title"] = instance.get_admin_display_title()
attrs["data-w-orderable-item-id"] = instance.id
attrs["data-w-orderable-item-label"] = instance.get_admin_display_title()
attrs["data-w-orderable-target"] = "item"
return attrs
def get_context_data(self, parent_context):

16
wagtail/admin/views/pages/listing.py
View File

@ -5,7 +5,6 @@ from django.db.models import Count
from django.forms import CheckboxSelectMultiple, RadioSelect
from django.shortcuts import get_object_or_404, redirect
from django.urls import reverse
from django.utils.translation import gettext
from django.utils.translation import gettext_lazy as _
from django_filters.filters import (
ChoiceFilter,
@ -322,9 +321,20 @@ class BaseIndexView(generic.IndexView):
if self.show_ordering_column:
kwargs["attrs"] = {
"aria-description": gettext(
"Press enter to select an item, use up and down arrows to move the item, press enter to complete the move or escape to cancel the current move."
"aria-description": _(
"Press enter to select an item, use up and down arrows to move the item. Pressing enter or moving to a different item will complete the move."
),
"data-controller": "w-orderable",
"data-w-orderable-active-class": "w-orderable--active",
"data-w-orderable-chosen-class": "w-orderable__item--active",
"data-w-orderable-container-value": "tbody",
"data-w-orderable-message-value": _(
"'%(page_title)s' has been moved successfully."
)
% {"page_title": "__LABEL__"},
"data-w-orderable-url-value": reverse(
"wagtailadmin_pages:set_page_position", args=[999999]
),
}
return kwargs