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