Merge branch 'attachment-thumbs-sensitive' into 'develop'

Fix: Quote posts do not carry sensitive tag

Closes #852

See merge request soapbox-pub/soapbox-fe!1079

app/soapbox/components/attachment_thumbs.js

@@ -15,6 +15,7 @@ class AttachmentThumbs extends ImmutablePureComponent {
     dispatch: PropTypes.func.isRequired,
     media: ImmutablePropTypes.list.isRequired,
     onClick: PropTypes.func,
+    sensitive: PropTypes.bool,
   };
 
   renderLoading() {
@@ -26,7 +27,7 @@ class AttachmentThumbs extends ImmutablePureComponent {
   }
 
   render() {
-    const { media, onClick } = this.props;
+    const { media, onClick, sensitive } = this.props;
 
     return (
       <div className='attachment-thumbs'>
@@ -37,6 +38,7 @@ class AttachmentThumbs extends ImmutablePureComponent {
               onOpenMedia={this.onOpenMedia}
               height={50}
               compact
+              sensitive={sensitive}
             />
           )}
         </Bundle>

app/soapbox/components/media_gallery.js

@@ -590,10 +590,15 @@ class MediaGallery extends React.PureComponent {
 
     return (
       <div className={classNames('media-gallery', { 'media-gallery--compact': compact })} style={sizeData.get('style')} ref={this.handleRef}>
-        <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible })}>
+        <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible || compact })}>
           {sensitive && (
-            visible ? (
+            (visible || compact) ? (
-              <IconButton title={intl.formatMessage(messages.toggle_visible)} src={require('@tabler/icons/icons/eye-off.svg')} overlay onClick={this.handleOpen} />
+              <IconButton
+                title={intl.formatMessage(messages.toggle_visible)}
+                src={visible ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
+                overlay
+                onClick={this.handleOpen}
+              />
             ) : (
               <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
                 <span className='spoiler-button__overlay__label'>

app/soapbox/components/status.js

@@ -393,7 +393,11 @@ class Status extends ImmutablePureComponent {
     if (size > 0) {
       if (this.props.muted) {
         media = (
-          <AttachmentThumbs media={status.get('media_attachments')} onClick={this.handleClick} />
+          <AttachmentThumbs
+            media={status.get('media_attachments')}
+            onClick={this.handleClick}
+            sensitive={status.get('sensitive')}
+          />
         );
       } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
         const video = status.getIn(['media_attachments', 0]);

app/soapbox/features/compose/components/reply_indicator.js

@@ -64,6 +64,7 @@ class ReplyIndicator extends ImmutablePureComponent {
           <AttachmentThumbs
             compact
             media={status.get('media_attachments')}
+            sensitive={status.get('sensitive')}
           />
         )}
       </div>

app/soapbox/features/scheduled_statuses/components/scheduled_status.js

@@ -76,6 +76,7 @@ class ScheduledStatus extends ImmutablePureComponent {
               <AttachmentThumbs
                 compact
                 media={status.get('media_attachments')}
+                sensitive={status.get('sensitive')}
               />
             )}
 

app/soapbox/features/status/components/quoted_status.js

@@ -145,6 +145,7 @@ class QuotedStatus extends ImmutablePureComponent {
           <AttachmentThumbs
             compact
             media={status.get('media_attachments')}
+            sensitive={status.get('sensitive')}
           />
         )}
       </div>

app/soapbox/features/ui/components/boost_modal.js

@@ -93,6 +93,7 @@ class BoostModal extends ImmutablePureComponent {
               <AttachmentThumbs
                 compact
                 media={status.get('media_attachments')}
+                sensitive={status.get('sensitive')}
               />
             )}
           </div>

app/styles/components/media-gallery.scss

@@ -199,8 +199,9 @@ $media-compact-size: 50px;
   height: $media-compact-size !important;
   background: transparent;
 
-  .spoiler-button {
+  .spoiler-button .svg-icon {
-    display: none;
+    width: 16px;
+    height: 16px;
   }
 
   .media-gallery__item {