Merge pull request #312 from glitch-soc/tag-sensitive-imgs
Show SENSITIVE tag on sensitive images (#267)
This commit is contained in:
commit
ec0bdd6c1a
3 changed files with 109 additions and 45 deletions
|
@ -9,7 +9,26 @@ import classNames from 'classnames';
|
||||||
import { autoPlayGif } from 'flavours/glitch/util/initial_state';
|
import { autoPlayGif } from 'flavours/glitch/util/initial_state';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
|
hidden: {
|
||||||
|
defaultMessage: 'Media hidden',
|
||||||
|
id: 'status.media_hidden',
|
||||||
|
},
|
||||||
|
sensitive: {
|
||||||
|
defaultMessage: 'Sensitive',
|
||||||
|
id: 'media_gallery.sensitive',
|
||||||
|
},
|
||||||
|
toggle: {
|
||||||
|
defaultMessage: 'Click to view',
|
||||||
|
id: 'status.sensitive_toggle',
|
||||||
|
},
|
||||||
|
toggle_visible: {
|
||||||
|
defaultMessage: 'Toggle visibility',
|
||||||
|
id: 'media_gallery.toggle_visible',
|
||||||
|
},
|
||||||
|
warning: {
|
||||||
|
defaultMessage: 'Sensitive content',
|
||||||
|
id: 'status.sensitive_warning',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
class Item extends React.PureComponent {
|
class Item extends React.PureComponent {
|
||||||
|
@ -206,48 +225,79 @@ export default class MediaGallery extends React.PureComponent {
|
||||||
this.props.onOpenMedia(this.props.media, index);
|
this.props.onOpenMedia(this.props.media, index);
|
||||||
}
|
}
|
||||||
|
|
||||||
isStandaloneEligible() {
|
|
||||||
const { media, standalone } = this.props;
|
|
||||||
return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { media, intl, sensitive, letterbox, fullwidth } = this.props;
|
const {
|
||||||
|
handleClick,
|
||||||
|
handleOpen,
|
||||||
|
} = this;
|
||||||
|
const {
|
||||||
|
fullwidth,
|
||||||
|
intl,
|
||||||
|
letterbox,
|
||||||
|
media,
|
||||||
|
sensitive,
|
||||||
|
standalone,
|
||||||
|
} = this.props;
|
||||||
const { visible } = this.state;
|
const { visible } = this.state;
|
||||||
const size = media.take(4).size;
|
const size = media.take(4).size;
|
||||||
|
const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth });
|
||||||
let children;
|
|
||||||
|
|
||||||
if (!visible) {
|
|
||||||
let warning;
|
|
||||||
|
|
||||||
if (sensitive) {
|
|
||||||
warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
|
|
||||||
} else {
|
|
||||||
warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
|
|
||||||
}
|
|
||||||
|
|
||||||
children = (
|
|
||||||
<button className='media-spoiler' onClick={this.handleOpen}>
|
|
||||||
<span className='media-spoiler__warning'>{warning}</span>
|
|
||||||
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
if (this.isStandaloneEligible()) {
|
|
||||||
children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} />;
|
|
||||||
} else {
|
|
||||||
children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} letterbox={letterbox} />);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`media-gallery size-${size} ${fullwidth ? 'full-width' : ''}`}>
|
<div className={computedClass}>
|
||||||
<div className={classNames('spoiler-button', { 'spoiler-button--visible': visible })}>
|
{visible ? (
|
||||||
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
|
<div className='sensitive-info'>
|
||||||
|
<IconButton
|
||||||
|
icon='eye'
|
||||||
|
onClick={handleOpen}
|
||||||
|
overlay
|
||||||
|
title={intl.formatMessage(messages.toggle_visible)}
|
||||||
|
/>
|
||||||
|
{sensitive ? (
|
||||||
|
<span className='sensitive-marker'>
|
||||||
|
<FormattedMessage {...messages.sensitive} />
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
) : null}
|
||||||
{children}
|
{function () {
|
||||||
|
switch (true) {
|
||||||
|
case !visible:
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className='media-spoiler'
|
||||||
|
onClick={handleOpen}
|
||||||
|
>
|
||||||
|
<span className='media-spoiler__warning'>
|
||||||
|
<FormattedMessage {...(sensitive ? messages.warning : messages.hidden)} />
|
||||||
|
</span>
|
||||||
|
<span className='media-spoiler__trigger'>
|
||||||
|
<FormattedMessage {...messages.toggle} />
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
case standalone && media.size === 1 && !!media.getIn([0, 'meta', 'small', 'aspect']):
|
||||||
|
return (
|
||||||
|
<Item
|
||||||
|
attachment={media.get(0)}
|
||||||
|
onClick={handleClick}
|
||||||
|
standalone
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return media.take(4).map(
|
||||||
|
(attachment, i) => (
|
||||||
|
<Item
|
||||||
|
attachment={attachment}
|
||||||
|
index={i}
|
||||||
|
key={attachment.get('id')}
|
||||||
|
letterbox={letterbox}
|
||||||
|
onClick={handleClick}
|
||||||
|
size={size}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}()}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -34,6 +34,8 @@ const messages = {
|
||||||
'status.collapse': 'Collapse',
|
'status.collapse': 'Collapse',
|
||||||
'status.uncollapse': 'Uncollapse',
|
'status.uncollapse': 'Uncollapse',
|
||||||
|
|
||||||
|
'media_gallery.sensitive': 'Sensitive',
|
||||||
|
|
||||||
'favourite_modal.combo': 'You can press {combo} to skip this next time',
|
'favourite_modal.combo': 'You can press {combo} to skip this next time',
|
||||||
|
|
||||||
'home.column_settings.show_direct': 'Show DMs',
|
'home.column_settings.show_direct': 'Show DMs',
|
||||||
|
|
|
@ -2487,17 +2487,29 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spoiler-button {
|
.sensitive-info {
|
||||||
display: none;
|
display: flex;
|
||||||
left: 4px;
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
|
|
||||||
top: 4px;
|
top: 4px;
|
||||||
|
left: 4px;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
||||||
&.spoiler-button--visible {
|
|
||||||
display: block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sensitive-marker {
|
||||||
|
margin: 0 3px;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
color: rgba($primary-text-color, 0.8);
|
||||||
|
background: rgba($base-overlay-background, 0.5);
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 15px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: .9;
|
||||||
|
transition: opacity .1s ease;
|
||||||
|
|
||||||
|
.media-gallery:hover & { opacity: 1 }
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-container--preloader {
|
.modal-container--preloader {
|
||||||
|
|
Loading…
Reference in a new issue