mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Fix side panel resize direction on RTL languages. Fix #9916 (#10044) 

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

Fixes https://github.com/wagtail/wagtail/issues/9916
pull/10062/head
sag᠎e 2023-02-14 10:38:57 +00:00 zatwierdzone przez GitHub
rodzic 207493dc95
commit d46d724d31
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
4 zmienionych plików z 31 dodań i 6 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
CHANGELOG.txt
Wyświetl plik

@ -12,6 +12,8 @@ Changelog
* Fix: Ensure `label_format` on StructBlock gracefully handles missing variables (Aadi jindal)
* Fix: Adopt a no-JavaScript and more accessible solution for the 'Reset to default' switch to Gravatar when editing user profile (Loveth Omokaro)
* Fix: Ensure `Site.get_site_root_paths` works on cache backends that do not preserve Python objects (Jaap Roes)
* Fix: Ignore right clicks on side panel resizer (Sage Abdullah)
* Fix: Resize in the correct direction for RTL languages with the side panel resizer (Sage Abdullah)
* Fix: Support creating `StructValue` copies (Tidiane Dia)
* Docs: Add code block to make it easier to understand contribution docs (Suyash Singh)
* Docs: Add new "Icons" page for icons customisation and reuse across the admin interface (Coen van der Kamp)

23
client/src/includes/sidePanel.js
Wyświetl plik

@ -23,6 +23,12 @@ export default function initSidePanel() {
return { minWidth, maxWidth, width, range, percentage };
};
// We force the slider input to have dir="ltr" in the HTML so that the slider
// works the same way across Safari, Chrome and Firefox. Here, we correct the
// percentage value to follow the direction set on the root <html> element.
const getDirectedPercentage = (value) =>
document.documentElement.dir === 'rtl' ? value : 100 - value;
let hidePanelTimeout;
const setPanel = (panelName) => {
@ -104,7 +110,7 @@ export default function initSidePanel() {
setTimeout(() => {
const { percentage } = getSidePanelWidthStyles();
// Invert the percentage to make the slider work in the opposite direction
widthInput.value = 100 - percentage;
widthInput.value = getDirectedPercentage(percentage);
}, 500);
}
};
@ -149,7 +155,8 @@ export default function initSidePanel() {
).replace('%(num)s', newWidth);
sidePanelWrapper.style.width = `${newWidth}px`;
widthInput.value = 100 - ((newWidth - minWidth) / range) * 100;
const inputPercentage = ((newWidth - minWidth) / range) * 100;
widthInput.value = getDirectedPercentage(inputPercentage);
widthInput.setAttribute('aria-valuetext', valueText);
// Save the new width to localStorage unless we're in the explorer
@ -166,11 +173,16 @@ export default function initSidePanel() {
const onPointerMove = (e) => {
if (!e.screenX || !startPos || !startWidth) return;
const direction = document.documentElement.dir === 'rtl' ? -1 : 1;
const delta = startPos - e.screenX;
setSidePanelWidth(startWidth + delta);
setSidePanelWidth(startWidth + delta * direction);
};
resizeGrip.addEventListener('pointerdown', (e) => {
// Ignore right-click, because it opens the context menu and doesn't trigger
// pointerup when the click is released.
if (e.button !== 0) return;
// Remember the starting position and width of the side panel, so we can
// calculate the new width based on the position change during the drag and
// not resize the panel when it has gone past the minimum/maximum width.
@ -191,8 +203,9 @@ export default function initSidePanel() {
// Handle resizing with keyboard using a hidden range input.
widthInput.addEventListener('change', (event) => {
const { minWidth, range } = getSidePanelWidthStyles();
const inputPercentage = 100 - parseInt(event.target.value, 10);
const newWidth = minWidth + (range * inputPercentage) / 100;
const inputPercentage = parseInt(event.target.value, 10);
const directedPercentage = getDirectedPercentage(inputPercentage);
const newWidth = minWidth + (range * directedPercentage) / 100;
setSidePanelWidth(newWidth);
});

2
docs/releases/5.0.md
Wyświetl plik

@ -26,6 +26,8 @@ depth: 1
* Ensure `label_format` on StructBlock gracefully handles missing variables (Aadi jindal)
* Adopt a no-JavaScript and more accessible solution for the 'Reset to default' switch to Gravatar when editing user profile (Loveth Omokaro)
* Ensure `Site.get_site_root_paths` works on cache backends that do not preserve Python objects (Jaap Roes)
* Ignore right clicks on side panel resizer (Sage Abdullah)
* Resize in the correct direction for RTL languages with the side panel resizer (Sage Abdullah)
### Documentation

10
wagtail/admin/templates/wagtailadmin/shared/side_panels.html
Wyświetl plik

@ -7,7 +7,15 @@
<div class="form-side__resize-grip-container">
<label class="form-side__resize-grip" data-form-side-resize-grip>
<input type="range" step="10" class="form-side__width-input" name="wagtail-side-panel-width" data-form-side-width-input />
{% comment %}
By default, the `dir` attribute is inherited from the ancestor
(i.e. the root `<html>` element in our case).
On Chrome and Firefox, moving the slider with left-right arrow keys
is correctly reversed when dir="rtl". On Safari, this isn't the case.
So, we explicitly set the `dir` attribute to "ltr" on the input and handle the correct
direction in the JS code based on the `dir` attribute of the root `<html>`.
{% endcomment %}
<input type="range" step="10" dir="ltr" class="form-side__width-input" name="wagtail-side-panel-width" data-form-side-width-input />
<span class="w-sr-only">{% trans 'Side panel width' %}</span>
{% icon name="grip" %}
</label>