logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe
commit: 875d943c189afe9887200f357d916a9f8fd19fe8
parent: 334a446313d504ef9bb80ce213be32729aa3d2b8
Author: PFM <info@eyesight.jp>
Date:   Wed,  4 Oct 2017 00:11:22 +0900

Add pagination in media modal (#4343)

* Add pagination in media modal

* Change array name

* Add an element class

* Avoid nested class

* Pull out the active class

* Use map instead of forEach

* Remove parentheses

Diffstat:

Mapp/javascript/mastodon/features/ui/components/media_modal.js21++++++++++++++++++++-
Mapp/javascript/styles/components.scss27+++++++++++++++++++++++++++
2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/app/javascript/mastodon/features/ui/components/media_modal.js b/app/javascript/mastodon/features/ui/components/media_modal.js @@ -29,7 +29,7 @@ export default class MediaModal extends ImmutablePureComponent { }; handleSwipe = (index) => { - this.setState({ index: (index) % this.props.media.size }); + this.setState({ index: index % this.props.media.size }); } handleNextClick = () => { @@ -40,6 +40,11 @@ export default class MediaModal extends ImmutablePureComponent { this.setState({ index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size }); } + handleChangeIndex = (e) => { + const index = Number(e.currentTarget.getAttribute('data-index')); + this.setState({ index: index % this.props.media.size }); + } + handleKeyUp = (e) => { switch(e.key) { case 'ArrowLeft': @@ -67,10 +72,21 @@ export default class MediaModal extends ImmutablePureComponent { const { media, intl, onClose } = this.props; const index = this.getIndex(); + let pagination = []; const leftNav = media.size > 1 && <button tabIndex='0' className='modal-container__nav modal-container__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><i className='fa fa-fw fa-chevron-left' /></button>; const rightNav = media.size > 1 && <button tabIndex='0' className='modal-container__nav modal-container__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><i className='fa fa-fw fa-chevron-right' /></button>; + if (media.size > 1) { + pagination = media.map((item, i) => { + const classes = ['media-modal__button']; + if (i === index) { + classes.push('media-modal__button--active'); + } + return (<li className='media-modal__page-dot' key={i}><button tabIndex='0' className={classes.join(' ')} onClick={this.handleChangeIndex} data-index={i}>{i + 1}</button></li>); + }); + } + const content = media.map((image) => { const width = image.getIn(['meta', 'original', 'width']) || null; const height = image.getIn(['meta', 'original', 'height']) || null; @@ -98,6 +114,9 @@ export default class MediaModal extends ImmutablePureComponent { {content} </ReactSwipeableViews> </div> + <ul className='media-modal__pagination'> + {pagination} + </ul> {rightNav} </div> diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss @@ -3080,6 +3080,33 @@ button.icon-button.active i.fa-retweet { background: $base-overlay-background; } +.media-modal__pagination { + width: 100%; + text-align: center; + position: absolute; + left: 0; + bottom: -40px; +} + +.media-modal__page-dot { + display: inline-block; +} + +.media-modal__button { + background-color: $white; + height: 12px; + width: 12px; + border-radius: 6px; + margin: 10px; + padding: 0; + border: 0; + font-size: 0; +} + +.media-modal__button--active { + background-color: $ui-highlight-color; +} + .media-modal__close { position: absolute; right: 4px;