moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MediaModal: support not having a status

This commit is contained in:
Alex Gleason 2023-05-31 20:01:30 -05:00
parent 0c499b43ff
commit aca4322526
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 46 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/soapbox/features/ui/components/modals/media-modal.tsx
View File

@ -70,7 +70,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
const [next, setNext] = useState<string>(); const [next, setNext] = useState<string>();
const [index, setIndex] = useState<number | null>(null); const [index, setIndex] = useState<number | null>(null);
const [navigationHidden, setNavigationHidden] = useState(false); const [navigationHidden, setNavigationHidden] = useState(false);
const [isFullScreen, setIsFullScreen] = useState(false); const [isFullScreen, setIsFullScreen] = useState(!status);
const hasMultipleImages = media.size > 1; const hasMultipleImages = media.size > 1;
@ -219,6 +219,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
}; };
}, [index]); }, [index]);
if (status) {
if (!actualStatus && isLoaded) { if (!actualStatus && isLoaded) {
return ( return (
<MissingIndicator /> <MissingIndicator />
@ -226,6 +227,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
} else if (!actualStatus) { } else if (!actualStatus) {
return <PlaceholderStatus />; return <PlaceholderStatus />;
} }
}
return ( return (
<div className='media-modal pointer-events-auto fixed inset-0 z-[9999] h-full bg-gray-900/90'> <div className='media-modal pointer-events-auto fixed inset-0 z-[9999] h-full bg-gray-900/90'>
@ -255,13 +257,13 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
<HStack alignItems='center' space={2}> <HStack alignItems='center' space={2}>
<IconButton <IconButton
src={require('@tabler/icons/download.svg')} src={require('@tabler/icons/download.svg')}
// title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
theme='dark' theme='dark'
className='!p-1.5 hover:scale-105 hover:bg-gray-900' className='!p-1.5 hover:scale-105 hover:bg-gray-900'
iconClassName='h-5 w-5' iconClassName='h-5 w-5'
onClick={handleDownload} onClick={handleDownload}
/> />
{status && (
<IconButton <IconButton
src={isFullScreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')} src={isFullScreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')}
title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)} title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
@ -270,6 +272,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
iconClassName='h-5 w-5' iconClassName='h-5 w-5'
onClick={() => setIsFullScreen(!isFullScreen)} onClick={() => setIsFullScreen(!isFullScreen)}
/> />
)}
</HStack> </HStack>
</HStack> </HStack>
@ -311,6 +314,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
)} )}
</div> </div>
{actualStatus && (
<HStack justifyContent='center' className='flex-[0_0_60px]'> <HStack justifyContent='center' className='flex-[0_0_60px]'>
<StatusActionBar <StatusActionBar
status={actualStatus} status={actualStatus}
@ -318,8 +322,10 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
statusActionButtonTheme='inverse' statusActionButtonTheme='inverse'
/> />
</HStack> </HStack>
)}
</Stack> </Stack>
{actualStatus && (
<div <div
className={ className={
clsx('-right-96 hidden bg-white transition-all xl:fixed xl:inset-y-0 xl:right-0 xl:flex xl:w-96 xl:flex-col', { clsx('-right-96 hidden bg-white transition-all xl:fixed xl:inset-y-0 xl:right-0 xl:flex xl:w-96 xl:flex-col', {
@ -336,6 +342,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
handleLoadMore={handleLoadMore} handleLoadMore={handleLoadMore}
/> />
</div> </div>
)}
</div> </div>
</div> </div>
); );