bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Media modal: Restore navigationHidden functionality

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-06-03 20:55:04 +02:00
parent ea298472a8
commit c80633fd9f
1 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
app/soapbox/features/ui/components/modals/media-modal.tsx
View file

@ -15,6 +15,7 @@ import PlaceholderStatus from 'soapbox/features/placeholder/components/placehold
import Thread from 'soapbox/features/status/components/thread';
import Video from 'soapbox/features/video';
import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
import { isUserTouching } from 'soapbox/is-mobile';
import { makeGetStatus } from 'soapbox/selectors';
import ImageLoader from '../image-loader';
@ -78,6 +79,8 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
const handleNextClick = () => setIndex((getIndex() + 1) % media.size);
const handlePrevClick = () => setIndex((media.size + getIndex() - 1) % media.size);
const navigationHiddenClassName = navigationHidden ? 'pointer-events-none opacity-0' : '';
const handleKeyDown = (e: KeyboardEvent) => {
switch (e.key) {
case 'ArrowLeft':
@ -101,7 +104,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
const getIndex = () => index !== null ? index : props.index;
const toggleNavigation = () => {
setNavigationHidden(!navigationHidden);
setNavigationHidden(value => !value && isUserTouching());
};
const handleStatusClick: React.MouseEventHandler = e => {
@ -251,7 +254,11 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
}
justifyContent='between'
>
<HStack alignItems='center' justifyContent='between' className='flex-[0_0_60px] p-4'>
<HStack
alignItems='center'
justifyContent='between'
className={clsx('flex-[0_0_60px] p-4 transition-opacity', navigationHiddenClassName)}
>
<IconButton
title={intl.formatMessage(messages.close)}
src={require('@tabler/icons/x.svg')}
@ -284,9 +291,11 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
</HStack>
{/* Height based on height of top/bottom bars */}
<div className='relative h-[calc(100vh-120px)] w-full grow'>
<div
className='relative h-[calc(100vh-120px)] w-full grow'
>
{hasMultipleImages && (
<div className='absolute inset-y-0 left-5 z-10 flex items-center'>
<div className={clsx('absolute inset-y-0 left-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
<button
tabIndex={0}
className='flex h-10 w-10 items-center justify-center rounded-full bg-gray-900 text-white'
@ -308,7 +317,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
</ReactSwipeableViews>
{hasMultipleImages && (
<div className='absolute inset-y-0 right-5 z-10 flex items-center'>
<div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
<button
tabIndex={0}
className='flex h-10 w-10 items-center justify-center rounded-full bg-gray-900 text-white'
@ -322,7 +331,10 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
</div>
{actualStatus && (
<HStack justifyContent='center' className='flex-[0_0_60px]'>
<HStack
justifyContent='center'
className={clsx('flex-[0_0_60px] transition-opacity', navigationHiddenClassName)}
>
<StatusActionBar
status={actualStatus}
space='md'