gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-09-07 18:31:07 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix sidebar rest position on mobile layout on RTL locales (#35067)

Browse Source 
Co-authored-by: diondiondion <mail@diondiondion.com>
This commit is contained in:
Claire 2025-06-17 16:41:51 +02:00 committed by GitHub
parent 9d07a31380
commit af157939d9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/javascript/mastodon/features/navigation_panel/index.tsx
View File

@ -221,14 +221,18 @@ export const NavigationPanel: React.FC = () => {
}; };
}, [dispatch]); }, [dispatch]);
const isLtrDir = getComputedStyle(document.body).direction !== 'rtl';
const OPEN_MENU_OFFSET = isLtrDir ? MENU_WIDTH : -MENU_WIDTH;
const [{ x }, spring] = useSpring( const [{ x }, spring] = useSpring(
() => ({ () => ({
x: open ? 0 : MENU_WIDTH, x: open ? 0 : OPEN_MENU_OFFSET,
onRest: { onRest: {
x({ value }: { value: number }) { x({ value }: { value: number }) {
if (value === 0) { if (value === 0) {
dispatch(openNavigation()); dispatch(openNavigation());
} else if (value > 0) { } else if (isLtrDir ? value > 0 : value < 0) {
dispatch(closeNavigation()); dispatch(closeNavigation());
} }
}, },
@ -238,25 +242,38 @@ export const NavigationPanel: React.FC = () => {
); );
const bind = useDrag( const bind = useDrag(
({ last, offset: [ox], velocity: [vx], direction: [dx], cancel }) => { ({
if (ox < -70) { last,
offset: [xOffset],
velocity: [xVelocity],
direction: [xDirection],
cancel,
}) => {
const logicalXDirection = isLtrDir ? xDirection : -xDirection;
const logicalXOffset = isLtrDir ? xOffset : -xOffset;
const hasReachedDragThreshold = logicalXOffset < -70;
if (hasReachedDragThreshold) {
cancel(); cancel();
} }
if (last) { if (last) {
if (ox > MENU_WIDTH / 2 || (vx > 0.5 && dx > 0)) { const isAboveOpenThreshold = logicalXOffset > MENU_WIDTH / 2;
void spring.start({ x: MENU_WIDTH }); const isQuickFlick = xVelocity > 0.5 && logicalXDirection > 0;
if (isAboveOpenThreshold || isQuickFlick) {
void spring.start({ x: OPEN_MENU_OFFSET });
} else { } else {
void spring.start({ x: 0 }); void spring.start({ x: 0 });
} }
} else { } else {
void spring.start({ x: ox, immediate: true }); void spring.start({ x: xOffset, immediate: true });
} }
}, },
{ {
from: () => [x.get(), 0], from: () => [x.get(), 0],
filterTaps: true, filterTaps: true,
bounds: { left: 0 }, bounds: isLtrDir ? { left: 0 } : { right: 0 },
rubberband: true, rubberband: true,
}, },
); );