autonomic-cooperative/hometown
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add pagination in media modal (#4343)

Browse Source 
* 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
This commit is contained in:
PFM 2017-10-04 00:11:22 +09:00 committed by Eugen Rochko
parent 334a446313
commit 875d943c18
2 changed files with 47 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/javascript/mastodon/features/ui/components/media_modal.js
View File

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

27
app/javascript/styles/components.scss
View File

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