Add opening images in a modal window

This commit is contained in:
Eugen Rochko 2016-10-24 18:07:40 +02:00
parent f8f40f15da
commit de50eff6ac
12 changed files with 146 additions and 8 deletions

View File

@ -0,0 +1,15 @@
export const MEDIA_OPEN = 'MEDIA_OPEN';
export const MODAL_CLOSE = 'MODAL_CLOSE';
export function openMedia(url) {
return {
type: MEDIA_OPEN,
url: url
};
};
export function closeModal() {
return {
type: MODAL_CLOSE
};
};

View File

@ -5,11 +5,21 @@ const MediaGallery = React.createClass({
propTypes: { propTypes: {
media: ImmutablePropTypes.list.isRequired, media: ImmutablePropTypes.list.isRequired,
height: React.PropTypes.number.isRequired height: React.PropTypes.number.isRequired,
onOpenMedia: React.PropTypes.func.isRequired
}, },
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
handleClick (url, e) {
if (e.button === 0) {
e.preventDefault();
this.props.onOpenMedia(url);
}
e.stopPropagation();
},
render () { render () {
var children = this.props.media.take(4); var children = this.props.media.take(4);
var size = children.size; var size = children.size;
@ -64,7 +74,11 @@ const MediaGallery = React.createClass({
} }
} }
return <a key={attachment.get('id')} href={attachment.get('url')} target='_blank' style={{ boxSizing: 'border-box', position: 'relative', left: left, top: top, right: right, bottom: bottom, float: 'left', textDecoration: 'none', border: 'none', display: 'block', width: `${width}%`, height: `${height}%`, background: `url(${attachment.get('preview_url')}) no-repeat center`, backgroundSize: 'cover', cursor: 'zoom-in' }} />; return (
<div key={attachment.get('id')} style={{ boxSizing: 'border-box', position: 'relative', left: left, top: top, right: right, bottom: bottom, float: 'left', border: 'none', display: 'block', width: `${width}%`, height: `${height}%` }}>
<a href={attachment.get('url')} onClick={this.handleClick.bind(this, attachment.get('url'))} target='_blank' style={{ display: 'block', width: '100%', height: '100%', background: `url(${attachment.get('preview_url')}) no-repeat center`, textDecoration: 'none', backgroundSize: 'cover', cursor: 'zoom-in' }} />
</div>
);
}); });
return ( return (

View File

@ -21,6 +21,7 @@ const Status = React.createClass({
onFavourite: React.PropTypes.func, onFavourite: React.PropTypes.func,
onReblog: React.PropTypes.func, onReblog: React.PropTypes.func,
onDelete: React.PropTypes.func, onDelete: React.PropTypes.func,
onOpenMedia: React.PropTypes.func,
me: React.PropTypes.number me: React.PropTypes.number
}, },
@ -67,7 +68,7 @@ const Status = React.createClass({
if (status.getIn(['media_attachments', 0, 'type']) === 'video') { if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
media = <VideoPlayer media={status.getIn(['media_attachments', 0])} />; media = <VideoPlayer media={status.getIn(['media_attachments', 0])} />;
} else { } else {
media = <MediaGallery media={status.get('media_attachments')} height={110} />; media = <MediaGallery media={status.get('media_attachments')} height={110} onOpenMedia={this.props.onOpenMedia} />;
} }
} }

View File

@ -12,6 +12,7 @@ import {
unfavourite unfavourite
} from '../actions/interactions'; } from '../actions/interactions';
import { deleteStatus } from '../actions/statuses'; import { deleteStatus } from '../actions/statuses';
import { openMedia } from '../actions/modal';
const makeMapStateToProps = () => { const makeMapStateToProps = () => {
const getStatus = makeGetStatus(); const getStatus = makeGetStatus();
@ -52,6 +53,10 @@ const mapDispatchToProps = (dispatch) => ({
onMention (account) { onMention (account) {
dispatch(mentionCompose(account)); dispatch(mentionCompose(account));
},
onOpenMedia (url) {
dispatch(openMedia(url));
} }
}); });

View File

@ -14,7 +14,8 @@ const DetailedStatus = React.createClass({
}, },
propTypes: { propTypes: {
status: ImmutablePropTypes.map.isRequired status: ImmutablePropTypes.map.isRequired,
onOpenMedia: React.PropTypes.func.isRequired
}, },
mixins: [PureRenderMixin], mixins: [PureRenderMixin],
@ -36,7 +37,7 @@ const DetailedStatus = React.createClass({
if (status.getIn(['media_attachments', 0, 'type']) === 'video') { if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
media = <VideoPlayer media={status.getIn(['media_attachments', 0])} width={317} height={178} />; media = <VideoPlayer media={status.getIn(['media_attachments', 0])} width={317} height={178} />;
} else { } else {
media = <MediaGallery media={status.get('media_attachments')} height={300} />; media = <MediaGallery media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} />;
} }
} }

View File

@ -22,6 +22,7 @@ import {
import { ScrollContainer } from 'react-router-scroll'; import { ScrollContainer } from 'react-router-scroll';
import ColumnBackButton from '../../components/column_back_button'; import ColumnBackButton from '../../components/column_back_button';
import StatusContainer from '../../containers/status_container'; import StatusContainer from '../../containers/status_container';
import { openMedia } from '../../actions/modal';
const makeMapStateToProps = () => { const makeMapStateToProps = () => {
const getStatus = makeGetStatus(); const getStatus = makeGetStatus();
@ -78,6 +79,10 @@ const Status = React.createClass({
this.props.dispatch(mentionCompose(account)); this.props.dispatch(mentionCompose(account));
}, },
handleOpenMedia (url) {
this.props.dispatch(openMedia(url));
},
renderChildren (list) { renderChildren (list) {
return list.map(id => <StatusContainer key={id} id={id} />); return list.map(id => <StatusContainer key={id} id={id} />);
}, },
@ -112,7 +117,7 @@ const Status = React.createClass({
<div style={{ overflowY: 'scroll', flex: '1 1 auto' }} className='scrollable'> <div style={{ overflowY: 'scroll', flex: '1 1 auto' }} className='scrollable'>
{ancestors} {ancestors}
<DetailedStatus status={status} me={me} /> <DetailedStatus status={status} me={me} onOpenMedia={this.handleOpenMedia} />
<ActionBar status={status} me={me} onReply={this.handleReplyClick} onFavourite={this.handleFavouriteClick} onReblog={this.handleReblogClick} onDelete={this.handleDeleteClick} onMention={this.handleMentionClick} /> <ActionBar status={status} me={me} onReply={this.handleReplyClick} onFavourite={this.handleFavouriteClick} onReblog={this.handleReblogClick} onDelete={this.handleDeleteClick} onMention={this.handleMentionClick} />
{descendants} {descendants}

View File

@ -0,0 +1,67 @@
import { connect } from 'react-redux';
import { SkyLightStateless } from 'react-skylight';
import { closeModal } from '../../../actions/modal';
const mapStateToProps = state => ({
url: state.getIn(['modal', 'url']),
isVisible: state.getIn(['modal', 'open'])
});
const mapDispatchToProps = dispatch => ({
onCloseClicked () {
dispatch(closeModal());
},
onOverlayClicked () {
dispatch(closeModal());
}
});
const styles = {
overlayStyles: {
},
dialogStyles: {
width: '600px',
color: '#282c37',
fontSize: '16px',
lineHeight: '37px',
marginTop: '-300px',
left: '0',
right: '0',
marginLeft: 'auto',
marginRight: 'auto',
height: 'auto'
},
imageStyle: {
display: 'block',
maxWidth: '100%',
height: 'auto',
margin: '0 auto'
}
};
const Modal = React.createClass({
propTypes: {
url: React.PropTypes.string,
isVisible: React.PropTypes.bool,
onCloseClicked: React.PropTypes.func,
onOverlayClicked: React.PropTypes.func
},
render () {
const { url, ...other } = this.props;
return (
<SkyLightStateless {...other} dialogStyles={styles.dialogStyles} overlayStyles={styles.overlayStyles}>
<img src={url} style={styles.imageStyle} />
</SkyLightStateless>
);
}
});
export default connect(mapStateToProps, mapDispatchToProps)(Modal);

View File

@ -7,6 +7,7 @@ import MentionsTimeline from '../mentions_timeline';
import Compose from '../compose'; import Compose from '../compose';
import MediaQuery from 'react-responsive'; import MediaQuery from 'react-responsive';
import TabsBar from './components/tabs_bar'; import TabsBar from './components/tabs_bar';
import ModalContainer from './containers/modal_container';
const UI = React.createClass({ const UI = React.createClass({
@ -36,6 +37,7 @@ const UI = React.createClass({
<NotificationsContainer /> <NotificationsContainer />
<LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} /> <LoadingBarContainer style={{ backgroundColor: '#2b90d9', left: '0', top: '0' }} />
<ModalContainer />
</div> </div>
); );
} }

View File

@ -5,6 +5,7 @@ import compose from './compose';
import follow from './follow'; import follow from './follow';
import notifications from './notifications'; import notifications from './notifications';
import { loadingBarReducer } from 'react-redux-loading-bar'; import { loadingBarReducer } from 'react-redux-loading-bar';
import modal from './modal';
export default combineReducers({ export default combineReducers({
timelines, timelines,
@ -13,4 +14,5 @@ export default combineReducers({
follow, follow,
notifications, notifications,
loadingBar: loadingBarReducer, loadingBar: loadingBarReducer,
modal,
}); });

View File

@ -0,0 +1,21 @@
import { MEDIA_OPEN, MODAL_CLOSE } from '../actions/modal';
import Immutable from 'immutable';
const initialState = Immutable.Map({
url: '',
open: false
});
export default function modal(state = initialState, action) {
switch(action.type) {
case MEDIA_OPEN:
return state.withMutations(map => {
map.set('url', action.url);
map.set('open', true);
});
case MODAL_CLOSE:
return state.set('open', false);
default:
return state;
}
};

View File

@ -42,6 +42,7 @@
}, },
"dependencies": { "dependencies": {
"react-responsive": "^1.1.5", "react-responsive": "^1.1.5",
"react-router-scroll": "^0.3.2" "react-router-scroll": "^0.3.2",
"react-skylight": "^0.4.1"
} }
} }

View File

@ -3927,6 +3927,10 @@ react-simple-dropdown@^1.1.4:
dependencies: dependencies:
classnames "^2.1.2" classnames "^2.1.2"
react-skylight:
version "0.4.1"
resolved "https://registry.yarnpkg.com/react-skylight/-/react-skylight-0.4.1.tgz#07d1af6dea0a50a5d8122a786a8ce8bc6bdf2241"
react@^15.3.2: react@^15.3.2:
version "15.3.2" version "15.3.2"
resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e" resolved "https://registry.yarnpkg.com/react/-/react-15.3.2.tgz#a7bccd2fee8af126b0317e222c28d1d54528d09e"