Fix media-modal-zoom

merge-requests/3281/head
danidfra 2024-11-22 12:30:22 -03:00
rodzic 2251dd9f15
commit 6541baab18
3 zmienionych plików z 77 dodań i 77 usunięć

Wyświetl plik

@ -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',
}} }}

Wyświetl plik

@ -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 && (

Wyświetl plik

@ -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;
} }