Skip to content

Commit

Permalink
Merge c1e00c2 into de6b202
Browse files Browse the repository at this point in the history
  • Loading branch information
@metzgegu
metzgegu committed Dec 10, 2019
2 parents de6b202 + c1e00c2 commit ad050f3
Showing 1 changed file with 168 additions and 152 deletions.
320 changes: 168 additions & 152 deletions frontend_app_gallery/src/container/Gallery.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -386,168 +386,184 @@ class Gallery extends React.Component {
return state.imagesPreviews[state.fileSelected].rawFileUrl
}

onMouseMove = () => {
clearInterval(this.mouseMoveTimeout)
if (this.state.displayLightbox) {
document.getElementsByClassName('ril__toolbar')[0].style.transform = 'translateY(0px)'
document.getElementsByClassName('ril__toolbar')[0].style['transition-duration'] = '0.5s'
}
this.mouseMoveTimeout = setInterval(() => {
if (this.state.displayLightbox) {
document.getElementsByClassName('ril__toolbar')[0].style.transform = 'translateY(-50px)'
document.getElementsByClassName('ril__toolbar')[0].style['transition-duration'] = '0.5s'
}
}, 2000)
}

render () {
const { state, props } = this

if (state.imagesPreviews[state.fileSelected]) this.lightboxRotation.changeAngle(state.imagesPreviews[state.fileSelected].rotationAngle)

return (
<PageWrapper customClass='gallery'>
<PageTitle
title={state.folderId ? state.fileName : state.content.workspaceLabel}
icon={'picture-o'}
breadcrumbsList={state.breadcrumbsList}
/>

<PageContent>
<div className='gallery__action__button'>
<button
className='btn outlineTextBtn nohover primaryColorBorder'
onClick={() => this.onClickSlickPlay(!state.autoPlay)}
>
<span className='gallery__action__button__text'>
{state.autoPlay ? props.t('Pause') : props.t('Play')}
</span>
<i className={classnames('fa', 'fa-fw', state.autoPlay ? 'fa-pause' : 'fa-play')} />
</button>

<button
className='btn outlineTextBtn nohover primaryColorBorder gallery__action__button__rotation__left'
onClick={() => this.rotateImg(state.fileSelected, DIRECTION.LEFT)}
>
<span className='gallery__action__button__text'>{props.t('Rotate 90° left')}</span>
<i className={'fa fa-fw fa-undo'} />
</button>
<div class='gallery__mouse__listener' onMouseMove={this.onMouseMove}>
<PageWrapper customClass='gallery'>
<PageTitle
title={state.folderId ? state.fileName : state.content.workspaceLabel}
icon={'picture-o'}
breadcrumbsList={state.breadcrumbsList}
/>

<PageContent>
<div className='gallery__action__button'>
<button
className='btn outlineTextBtn nohover primaryColorBorder'
onClick={() => this.onClickSlickPlay(!state.autoPlay)}
>
<span className='gallery__action__button__text'>
{state.autoPlay ? props.t('Pause') : props.t('Play')}
</span>
<i className={classnames('fa', 'fa-fw', state.autoPlay ? 'fa-pause' : 'fa-play')} />
</button>

<button
className='btn outlineTextBtn nohover primaryColorBorder gallery__action__button__rotation__left'
onClick={() => this.rotateImg(state.fileSelected, DIRECTION.LEFT)}
>
<span className='gallery__action__button__text'>{props.t('Rotate 90° left')}</span>
<i className={'fa fa-fw fa-undo'} />
</button>

<button
className='btn outlineTextBtn nohover primaryColorBorder gallery__action__button__rotation__right'
onClick={() => this.rotateImg(state.fileSelected, DIRECTION.RIGHT)}
>
<span className='gallery__action__button__text'>{props.t('Rotate 90° right')}</span>
<i className={'fa fa-fw fa-undo'} />
</button>

{/*
INFO - CH - there is a bug with the property userRoleIdInWorkspace that comes from frontend, it might be it's default value which is 1
So we won't use it for now and always display the delete button which will return 401 if user can't delete content
*/}
<button className='btn outlineTextBtn nohover primaryColorBorder' onClick={this.handleOpenDeleteFilePopup}>
<span className='gallery__action__button__text'>{props.t('Delete')}</span><i className={'fa fa-fw fa-trash'} />
</button>
</div>

{state.imagesPreviewsLoaded
? (
<Carousel
fileSelected={state.fileSelected}
slides={state.imagesPreviews}
onCarouselPositionChange={this.onCarouselPositionChange}
handleClickShowImageRaw={this.handleClickShowImageRaw}
loggedUser={state.loggedUser}
disableAnimation={state.displayLightbox}
isWorkspaceRoot={state.folderId === 0}
/>
) : (
<div className='gallery__loader'>
<i className='fa fa-spinner fa-spin gallery__loader__icon' />
</div>
)
}

<button
className='btn outlineTextBtn nohover primaryColorBorder gallery__action__button__rotation__right'
onClick={() => this.rotateImg(state.fileSelected, DIRECTION.RIGHT)}
<Fullscreen
enabled={this.state.fullscreen}
onChange={fullscreen => this.setState({ fullscreen })}
>
<span className='gallery__action__button__text'>{props.t('Rotate 90° right')}</span>
<i className={'fa fa-fw fa-undo'} />
</button>

{/*
INFO - CH - there is a bug with the property userRoleIdInWorkspace that comes from frontend, it might be it's default value which is 1
So we won't use it for now and always display the delete button which will return 401 if user can't delete content
*/}
<button className='btn outlineTextBtn nohover primaryColorBorder' onClick={this.handleOpenDeleteFilePopup}>
<span className='gallery__action__button__text'>{props.t('Delete')}</span><i className={'fa fa-fw fa-trash'} />
</button>
</div>

{state.imagesPreviewsLoaded
? (
<Carousel
fileSelected={state.fileSelected}
slides={state.imagesPreviews}
onCarouselPositionChange={this.onCarouselPositionChange}
handleClickShowImageRaw={this.handleClickShowImageRaw}
loggedUser={state.loggedUser}
disableAnimation={state.displayLightbox}
isWorkspaceRoot={state.folderId === 0}
<div ref={modalRoot => (this.modalRoot = modalRoot)} />
</Fullscreen>

{state.displayLightbox && (
<ReactImageLightbox
prevSrc={this.getPreviousImageUrl()}
mainSrc={state.imagesPreviews[state.fileSelected].lightBoxUrlList[0]}
nextSrc={this.getNextImageUrl()}
onCloseRequest={this.handleClickHideImageRaw}
onMovePrevRequest={() => { this.handleClickPreviousNextPage(DIRECTION.LEFT) }}
onMoveNextRequest={() => { this.handleClickPreviousNextPage(DIRECTION.RIGHT) }}
imagePadding={0}
reactModalProps={{ parentSelector: () => this.modalRoot }}
toolbarButtons={[
<div className={'gallery__action__button__lightbox'}>
<button
className={'btn iconBtn'}
onClick={() => this.onClickSlickPlay(!state.autoPlay)}
title={state.autoPlay ? props.t('Pause') : props.t('Play')}
>
<i className={classnames('fa', 'fa-fw', state.autoPlay ? 'fa-pause' : 'fa-play')} />
</button>

<button
className={'btn iconBtn'}
onClick={() => this.setState((prevState) => ({ fullscreen: !prevState.fullscreen }))}
title={state.fullscreen ? props.t('Disable fullscreen') : props.t('Enable fullscreen')}
>
<i className={classnames('fa', 'fa-fw', state.fullscreen ? 'fa-compress' : 'fa-expand')} />
</button>

<button
className='btn iconBtn gallery__action__button__lightbox__rotation__left'
onClick={() => this.rotateImg(state.fileSelected, DIRECTION.LEFT)}
title={props.t('Rotate 90° left')}
>
<i className={'fa fa-fw fa-undo'} />
</button>

<button
className='btn iconBtn gallery__action__button__lightbox__rotation__right'
onClick={() => this.rotateImg(state.fileSelected, DIRECTION.RIGHT)}
title={props.t('Rotate 90° right')}
>
<i className={'fa fa-fw fa-undo'} />
</button>

<a
className='btn iconBtn gallery__action__button__lightbox__openRawContent'
title={props.t('Open raw file')}
href={this.getRawFileUrlSelectedFile()}
target='_blank'
>
<i className={'fa fa-fw fa-download'} />
</a>
</div>
]}
/>
) : (
<div className='gallery__loader'>
<i className='fa fa-spinner fa-spin gallery__loader__icon' />
</div>
)
}

<Fullscreen
enabled={this.state.fullscreen}
onChange={fullscreen => this.setState({ fullscreen })}
>
<div ref={modalRoot => (this.modalRoot = modalRoot)} />
</Fullscreen>

{state.displayLightbox && (
<ReactImageLightbox
prevSrc={this.getPreviousImageUrl()}
mainSrc={state.imagesPreviews[state.fileSelected].lightBoxUrlList[0]}
nextSrc={this.getNextImageUrl()}
onCloseRequest={this.handleClickHideImageRaw}
onMovePrevRequest={() => { this.handleClickPreviousNextPage(DIRECTION.LEFT) }}
onMoveNextRequest={() => { this.handleClickPreviousNextPage(DIRECTION.RIGHT) }}
imagePadding={0}
reactModalProps={{ parentSelector: () => this.modalRoot }}
toolbarButtons={[
<div className={'gallery__action__button__lightbox'}>
<button
className={'btn iconBtn'}
onClick={() => this.onClickSlickPlay(!state.autoPlay)}
title={state.autoPlay ? props.t('Pause') : props.t('Play')}
>
<i className={classnames('fa', 'fa-fw', state.autoPlay ? 'fa-pause' : 'fa-play')} />
</button>

<button
className={'btn iconBtn'}
onClick={() => this.setState((prevState) => ({ fullscreen: !prevState.fullscreen }))}
title={state.fullscreen ? props.t('Disable fullscreen') : props.t('Enable fullscreen')}
>
<i className={classnames('fa', 'fa-fw', state.fullscreen ? 'fa-compress' : 'fa-expand')} />
</button>

<button
className='btn iconBtn gallery__action__button__lightbox__rotation__left'
onClick={() => this.rotateImg(state.fileSelected, DIRECTION.LEFT)}
title={props.t('Rotate 90° left')}
>
<i className={'fa fa-fw fa-undo'} />
</button>

<button
className='btn iconBtn gallery__action__button__lightbox__rotation__right'
onClick={() => this.rotateImg(state.fileSelected, DIRECTION.RIGHT)}
title={props.t('Rotate 90° right')}
>
<i className={'fa fa-fw fa-undo'} />
</button>

<a
className='btn iconBtn gallery__action__button__lightbox__openRawContent'
title={props.t('Open raw file')}
href={this.getRawFileUrlSelectedFile()}
target='_blank'
>
<i className={'fa fa-fw fa-download'} />
</a>
</div>
]}
/>
)}

{state.displayPopupDelete && (
<CardPopup
customClass='gallery__delete__file__popup'
customHeaderClass='primaryColorBg'
onClose={this.handleCloseDeleteFilePopup}
>
<div className='gallery__delete__file__popup__body'>
<div className='gallery__delete__file__popup__body__msg'>{props.t('Are you sure ?')}</div>
<div className='gallery__delete__file__popup__body__btn'>
<button
type='button'
className='btn outlineTextBtn primaryColorBorder primaryColorFont nohover'
onClick={this.handleCloseDeleteFilePopup}
>
{props.t('Cancel')}
</button>

<button
type='button'
className='btn highlightBtn primaryColorBg primaryColorDarkenBgHover'
onClick={() => this.deleteFile(this.state.fileSelected)}
>
{props.t('Delete')}
</button>
)}

{state.displayPopupDelete && (
<CardPopup
customClass='gallery__delete__file__popup'
customHeaderClass='primaryColorBg'
onClose={this.handleCloseDeleteFilePopup}
>
<div className='gallery__delete__file__popup__body'>
<div className='gallery__delete__file__popup__body__msg'>{props.t('Are you sure ?')}</div>
<div className='gallery__delete__file__popup__body__btn'>
<button
type='button'
className='btn outlineTextBtn primaryColorBorder primaryColorFont nohover'
onClick={this.handleCloseDeleteFilePopup}
>
{props.t('Cancel')}
</button>

<button
type='button'
className='btn highlightBtn primaryColorBg primaryColorDarkenBgHover'
onClick={() => this.deleteFile(this.state.fileSelected)}
>
{props.t('Delete')}
</button>
</div>
</div>
</div>
</CardPopup>
)}
</PageContent>
</PageWrapper>
</CardPopup>
)}
</PageContent>
</PageWrapper>
</div>
)
}
}
Expand Down

0 comments on commit ad050f3

Please sign in to comment.