kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Merge branch 'fix-media-modal' into 'main'
Fix media modal Closes #1791 See merge request soapbox-pub/soapbox!3274merge-requests/3281/head
Alex Gleason
commit
9b9d6b57f0
|
|
@ -135,13 +135,13 @@ class ImageLoader extends PureComponent<IImageLoader> {
|
|||
const { alt, src, width, height, onClick } = this.props;
|
||||
const { loading } = this.state;
|
||||
|
||||
const className = 'relative size-full flex items-center justify-center flex-col';
|
||||
const className = 'relative h-screen flex items-center justify-center flex-col';
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{loading ? (
|
||||
<canvas
|
||||
className={clsx('max-h-[80%] max-w-full object-contain', { 'hidden': !this.hasSize() })}
|
||||
className={clsx('max-h-[100%] max-w-full object-contain', { 'hidden': !this.hasSize() })}
|
||||
style={{
|
||||
background: 'url(\'../assets/images/void.png\') repeat',
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -243,7 +243,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className='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] flex size-full bg-gray-900/90'>
|
||||
<div
|
||||
className='absolute inset-0'
|
||||
role='presentation'
|
||||
|
|
@ -258,95 +258,99 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
|
|||
}
|
||||
justifyContent='between'
|
||||
>
|
||||
<HStack
|
||||
alignItems='center'
|
||||
justifyContent='between'
|
||||
className={clsx('flex-[0_0_60px] p-4 transition-opacity', navigationHiddenClassName)}
|
||||
>
|
||||
<IconButton
|
||||
title={intl.formatMessage(messages.close)}
|
||||
src={xIcon}
|
||||
onClick={onClose}
|
||||
theme='dark'
|
||||
className='!p-1.5 hover:scale-105 hover:bg-gray-900'
|
||||
iconClassName='h-5 w-5'
|
||||
/>
|
||||
|
||||
<HStack alignItems='center' space={2}>
|
||||
<Stack className='relative h-full'>
|
||||
<HStack
|
||||
alignItems='center'
|
||||
justifyContent='between'
|
||||
className={clsx('absolute z-[9999] flex w-full p-4 transition-opacity', navigationHiddenClassName)}
|
||||
>
|
||||
<IconButton
|
||||
src={downloadIcon}
|
||||
title={intl.formatMessage(messages.close)}
|
||||
src={xIcon}
|
||||
onClick={onClose}
|
||||
theme='dark'
|
||||
className='!p-1.5 hover:scale-105 hover:bg-gray-900'
|
||||
iconClassName='h-5 w-5'
|
||||
onClick={handleDownload}
|
||||
/>
|
||||
|
||||
{status && (
|
||||
<HStack alignItems='center' space={2}>
|
||||
<IconButton
|
||||
src={isFullScreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
|
||||
title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
|
||||
src={downloadIcon}
|
||||
theme='dark'
|
||||
className='hidden !p-1.5 hover:scale-105 hover:bg-gray-900 xl:block'
|
||||
className='!p-1.5 hover:scale-105 hover:bg-gray-900'
|
||||
iconClassName='h-5 w-5'
|
||||
onClick={() => setIsFullScreen(!isFullScreen)}
|
||||
onClick={handleDownload}
|
||||
/>
|
||||
|
||||
{status && (
|
||||
<IconButton
|
||||
src={isFullScreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
|
||||
title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
|
||||
theme='dark'
|
||||
className='hidden !p-1.5 hover:scale-105 hover:bg-gray-900 xl:block'
|
||||
iconClassName='h-5 w-5'
|
||||
onClick={() => setIsFullScreen(!isFullScreen)}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
{/* Height based on height of top/bottom bars */}
|
||||
<div
|
||||
className='relative h-[calc(100vh-120px)] w-full grow'
|
||||
>
|
||||
{hasMultipleImages && (
|
||||
<div className={clsx('absolute inset-y-0 left-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
|
||||
<button
|
||||
tabIndex={0}
|
||||
className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
|
||||
onClick={handlePrevClick}
|
||||
aria-label={intl.formatMessage(messages.previous)}
|
||||
>
|
||||
<Icon src={arrowLeftIcon} className='size-5' />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
{/* Height based on height of top/bottom bars */}
|
||||
<div
|
||||
className='relative h-[calc(100vh-120px)] w-full grow'
|
||||
>
|
||||
{hasMultipleImages && (
|
||||
<div className={clsx('absolute inset-y-0 left-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
|
||||
<button
|
||||
tabIndex={0}
|
||||
className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
|
||||
onClick={handlePrevClick}
|
||||
aria-label={intl.formatMessage(messages.previous)}
|
||||
<div className='size-full'>
|
||||
<ReactSwipeableViews
|
||||
style={swipeableViewsStyle}
|
||||
containerStyle={containerStyle}
|
||||
onChangeIndex={handleSwipe}
|
||||
className='flex items-center justify-center'
|
||||
index={getIndex()}
|
||||
>
|
||||
<Icon src={arrowLeftIcon} className='size-5' />
|
||||
</button>
|
||||
{content}
|
||||
</ReactSwipeableViews>
|
||||
</div>
|
||||
|
||||
{hasMultipleImages && (
|
||||
<div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
|
||||
<button
|
||||
tabIndex={0}
|
||||
className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
|
||||
onClick={handleNextClick}
|
||||
aria-label={intl.formatMessage(messages.next)}
|
||||
>
|
||||
<Icon src={arrowRightIcon} className='size-5' />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{actualStatus && (
|
||||
<HStack
|
||||
justifyContent='center'
|
||||
className={clsx('absolute bottom-2 flex w-full transition-opacity', navigationHiddenClassName)}
|
||||
>
|
||||
<StatusActionBar
|
||||
status={actualStatus}
|
||||
space='md'
|
||||
statusActionButtonTheme='inverse'
|
||||
/>
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
<ReactSwipeableViews
|
||||
style={swipeableViewsStyle}
|
||||
containerStyle={containerStyle}
|
||||
onChangeIndex={handleSwipe}
|
||||
className='flex items-center justify-center '
|
||||
index={getIndex()}
|
||||
>
|
||||
{content}
|
||||
</ReactSwipeableViews>
|
||||
|
||||
{hasMultipleImages && (
|
||||
<div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
|
||||
<button
|
||||
tabIndex={0}
|
||||
className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
|
||||
onClick={handleNextClick}
|
||||
aria-label={intl.formatMessage(messages.next)}
|
||||
>
|
||||
<Icon src={arrowRightIcon} className='size-5' />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{actualStatus && (
|
||||
<HStack
|
||||
justifyContent='center'
|
||||
className={clsx('flex-[0_0_60px] transition-opacity', navigationHiddenClassName)}
|
||||
>
|
||||
<StatusActionBar
|
||||
status={actualStatus}
|
||||
space='md'
|
||||
statusActionButtonTheme='inverse'
|
||||
/>
|
||||
</HStack>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
{actualStatus && (
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import clsx from 'clsx';
|
||||
import { PureComponent } from 'react';
|
||||
|
||||
const MIN_SCALE = 1;
|
||||
|
|
@ -132,7 +133,7 @@ class ZoomableImage extends PureComponent<IZoomableImage> {
|
|||
role='presentation'
|
||||
ref={this.setImageRef}
|
||||
alt={alt}
|
||||
className='size-auto max-h-[80%] max-w-full object-contain shadow-2xl'
|
||||
className={clsx('size-auto max-h-[80%] max-w-full object-contain', { 'size-full max-h-full': scale !== 1 })}
|
||||
title={alt}
|
||||
src={src}
|
||||
style={{
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue