diff --git a/app/javascript/flavours/glitch/components/media_gallery.js b/app/javascript/flavours/glitch/components/media_gallery.js index d2e80de4964..6928af6d6bf 100644 --- a/app/javascript/flavours/glitch/components/media_gallery.js +++ b/app/javascript/flavours/glitch/components/media_gallery.js @@ -9,7 +9,26 @@ import classNames from 'classnames'; import { autoPlayGif } from 'flavours/glitch/util/initial_state'; 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 { @@ -206,48 +225,79 @@ export default class MediaGallery extends React.PureComponent { 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 () { - 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 size = media.take(4).size; - - let children; - - if (!visible) { - let warning; - - if (sensitive) { - warning = ; - } else { - warning = ; - } - - children = ( - - ); - } else { - if (this.isStandaloneEligible()) { - children = ; - } else { - children = media.take(4).map((attachment, i) => ); - } - } + const computedClass = classNames('media-gallery', `size-${size}`, { 'full-width': fullwidth }); return ( -
-
- -
- - {children} +
+ {visible ? ( +
+ + {sensitive ? ( + + + + ) : null} +
+ ) : null} + {function () { + switch (true) { + case !visible: + return ( + + ); + case standalone && media.size === 1 && !!media.getIn([0, 'meta', 'small', 'aspect']): + return ( + + ); + default: + return media.take(4).map( + (attachment, i) => ( + + ) + ); + } + }()}
); } diff --git a/app/javascript/flavours/glitch/locales/en.js b/app/javascript/flavours/glitch/locales/en.js index de6af099062..fb3763ced5b 100644 --- a/app/javascript/flavours/glitch/locales/en.js +++ b/app/javascript/flavours/glitch/locales/en.js @@ -34,6 +34,8 @@ const messages = { 'status.collapse': 'Collapse', 'status.uncollapse': 'Uncollapse', + 'media_gallery.sensitive': 'Sensitive', + 'favourite_modal.combo': 'You can press {combo} to skip this next time', 'home.column_settings.show_direct': 'Show DMs', diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index c07d4162ee9..fae42d45ae7 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -2487,17 +2487,29 @@ font-weight: 500; } -.spoiler-button { - display: none; - left: 4px; +.sensitive-info { + display: flex; + flex-direction: row; + align-items: center; position: absolute; - text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; top: 4px; + left: 4px; 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 {