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
master
PFM 7 years ago committed by Eugen Rochko
parent 334a446313
commit 875d943c18
  1. 21
      app/javascript/mastodon/features/ui/components/media_modal.js
  2. 27
      app/javascript/styles/components.scss

@ -29,7 +29,7 @@ export default class MediaModal extends ImmutablePureComponent {
}; };
handleSwipe = (index) => { handleSwipe = (index) => {
this.setState({ index: (index) % this.props.media.size }); this.setState({ index: index % this.props.media.size });
} }
handleNextClick = () => { 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 }); 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) => { handleKeyUp = (e) => {
switch(e.key) { switch(e.key) {
case 'ArrowLeft': case 'ArrowLeft':
@ -67,10 +72,21 @@ export default class MediaModal extends ImmutablePureComponent {
const { media, intl, onClose } = this.props; const { media, intl, onClose } = this.props;
const index = this.getIndex(); 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 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>; 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 content = media.map((image) => {
const width = image.getIn(['meta', 'original', 'width']) || null; const width = image.getIn(['meta', 'original', 'width']) || null;
const height = image.getIn(['meta', 'original', 'height']) || null; const height = image.getIn(['meta', 'original', 'height']) || null;
@ -98,6 +114,9 @@ export default class MediaModal extends ImmutablePureComponent {
{content} {content}
</ReactSwipeableViews> </ReactSwipeableViews>
</div> </div>
<ul className='media-modal__pagination'>
{pagination}
</ul>
{rightNav} {rightNav}
</div> </div>

@ -3080,6 +3080,33 @@ button.icon-button.active i.fa-retweet {
background: $base-overlay-background; 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 { .media-modal__close {
position: absolute; position: absolute;
right: 4px; right: 4px;

Loading…
Cancel
Save