kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Fix media-modal-zoom
rodzic
2251dd9f15
commit
6541baab18
|
@ -135,13 +135,13 @@ class ImageLoader extends PureComponent<IImageLoader> {
|
||||||
const { alt, src, width, height, onClick } = this.props;
|
const { alt, src, width, height, onClick } = this.props;
|
||||||
const { loading } = this.state;
|
const { loading } = this.state;
|
||||||
|
|
||||||
const className = 'relative h-[80vh] flex items-center justify-center flex-col';
|
const className = 'relative h-screen flex items-center justify-center flex-col';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={className}>
|
<div className={className}>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<canvas
|
<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={{
|
style={{
|
||||||
background: 'url(\'../assets/images/void.png\') repeat',
|
background: 'url(\'../assets/images/void.png\') repeat',
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -258,97 +258,99 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
|
||||||
}
|
}
|
||||||
justifyContent='between'
|
justifyContent='between'
|
||||||
>
|
>
|
||||||
<HStack
|
<Stack className='relative h-full'>
|
||||||
alignItems='center'
|
<HStack
|
||||||
justifyContent='between'
|
alignItems='center'
|
||||||
className={clsx('flex-[0_0_60px] p-4 transition-opacity', navigationHiddenClassName)}
|
justifyContent='between'
|
||||||
>
|
className={clsx('absolute z-[9999] flex w-full 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}>
|
|
||||||
<IconButton
|
<IconButton
|
||||||
src={downloadIcon}
|
title={intl.formatMessage(messages.close)}
|
||||||
|
src={xIcon}
|
||||||
|
onClick={onClose}
|
||||||
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}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{status && (
|
<HStack alignItems='center' space={2}>
|
||||||
<IconButton
|
<IconButton
|
||||||
src={isFullScreen ? arrowsMinimizeIcon : arrowsMaximizeIcon}
|
src={downloadIcon}
|
||||||
title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
|
|
||||||
theme='dark'
|
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'
|
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>
|
</HStack>
|
||||||
</HStack>
|
|
||||||
|
|
||||||
{/* Height based on height of top/bottom bars */}
|
{/* Height based on height of top/bottom bars */}
|
||||||
<div
|
<div
|
||||||
className='relative h-[calc(100vh-120px)] w-full grow'
|
className='relative h-[calc(100vh-120px)] w-full grow'
|
||||||
>
|
>
|
||||||
{hasMultipleImages && (
|
{hasMultipleImages && (
|
||||||
<div className={clsx('absolute inset-y-0 left-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
|
<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 size-10 items-center justify-center rounded-full bg-gray-900 text-white'
|
className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
|
||||||
onClick={handlePrevClick}
|
onClick={handlePrevClick}
|
||||||
aria-label={intl.formatMessage(messages.previous)}
|
aria-label={intl.formatMessage(messages.previous)}
|
||||||
|
>
|
||||||
|
<Icon src={arrowLeftIcon} className='size-5' />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<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' />
|
{content}
|
||||||
</button>
|
</ReactSwipeableViews>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
<div className='size-full'>
|
{hasMultipleImages && (
|
||||||
<ReactSwipeableViews
|
<div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
|
||||||
style={swipeableViewsStyle}
|
<button
|
||||||
containerStyle={containerStyle}
|
tabIndex={0}
|
||||||
onChangeIndex={handleSwipe}
|
className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
|
||||||
className='flex items-center justify-center'
|
onClick={handleNextClick}
|
||||||
index={getIndex()}
|
aria-label={intl.formatMessage(messages.next)}
|
||||||
>
|
>
|
||||||
{content}
|
<Icon src={arrowRightIcon} className='size-5' />
|
||||||
</ReactSwipeableViews>
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{hasMultipleImages && (
|
{actualStatus && (
|
||||||
<div className={clsx('absolute inset-y-0 right-5 z-10 flex items-center transition-opacity', navigationHiddenClassName)}>
|
<HStack
|
||||||
<button
|
justifyContent='center'
|
||||||
tabIndex={0}
|
className={clsx('absolute bottom-0 flex w-full transition-opacity', navigationHiddenClassName)}
|
||||||
className='flex size-10 items-center justify-center rounded-full bg-gray-900 text-white'
|
>
|
||||||
onClick={handleNextClick}
|
<StatusActionBar
|
||||||
aria-label={intl.formatMessage(messages.next)}
|
status={actualStatus}
|
||||||
>
|
space='md'
|
||||||
<Icon src={arrowRightIcon} className='size-5' />
|
statusActionButtonTheme='inverse'
|
||||||
</button>
|
/>
|
||||||
</div>
|
</HStack>
|
||||||
)}
|
)}
|
||||||
</div>
|
</Stack>
|
||||||
|
|
||||||
{actualStatus && (
|
|
||||||
<HStack
|
|
||||||
justifyContent='center'
|
|
||||||
className={clsx('flex-[0_0_60px] transition-opacity', navigationHiddenClassName)}
|
|
||||||
>
|
|
||||||
<StatusActionBar
|
|
||||||
status={actualStatus}
|
|
||||||
space='md'
|
|
||||||
statusActionButtonTheme='inverse'
|
|
||||||
/>
|
|
||||||
</HStack>
|
|
||||||
)}
|
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
||||||
{actualStatus && (
|
{actualStatus && (
|
||||||
|
|
|
@ -39,8 +39,6 @@
|
||||||
@layer utilities {
|
@layer utilities {
|
||||||
.media-modal * {
|
.media-modal * {
|
||||||
img {
|
img {
|
||||||
max-height: 80vh;
|
|
||||||
width: 100%;
|
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Ładowanie…
Reference in New Issue