Show visibility toggle on media gallery for sensitive images

signup-info-prompt
blackle 2017-01-15 20:26:03 -05:00
parent 3778355454
commit 144402ec7e
1 changed files with 29 additions and 5 deletions

View File

@ -1,12 +1,18 @@
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
import { FormattedMessage } from 'react-intl'; import IconButton from './icon_button';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }
});
const outerStyle = { const outerStyle = {
marginTop: '8px', marginTop: '8px',
overflow: 'hidden', overflow: 'hidden',
width: '100%', width: '100%',
boxSizing: 'border-box' boxSizing: 'border-box',
position: 'relative'
}; };
const spoilerStyle = { const spoilerStyle = {
@ -32,6 +38,13 @@ const spoilerSubSpanStyle = {
fontWeight: '500' fontWeight: '500'
}; };
const spoilerButtonStyle = {
position: 'absolute',
top: '6px',
left: '8px',
zIndex: '100'
};
const MediaGallery = React.createClass({ const MediaGallery = React.createClass({
getInitialState () { getInitialState () {
@ -59,11 +72,11 @@ const MediaGallery = React.createClass({
}, },
handleOpen () { handleOpen () {
this.setState({ visible: true }); this.setState({ visible: !this.state.visible });
}, },
render () { render () {
const { media, sensitive } = this.props; const { media, intl, sensitive } = this.props;
let children; let children;
@ -135,8 +148,19 @@ const MediaGallery = React.createClass({
}); });
} }
let spoilerButton;
if (sensitive) {
spoilerButton = (
<div style={spoilerButtonStyle} >
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleOpen} />
</div>
);
}
return ( return (
<div style={{ ...outerStyle, height: `${this.props.height}px` }}> <div style={{ ...outerStyle, height: `${this.props.height}px` }}>
{spoilerButton}
{children} {children}
</div> </div>
); );
@ -144,4 +168,4 @@ const MediaGallery = React.createClass({
}); });
export default MediaGallery; export default injectIntl(MediaGallery);