AttachmentThumbs: display compact media thumbs instead of AttachmentList

app/soapbox/components/attachment_thumbs.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { MediaGallery } from 'soapbox/features/ui/util/async-components';
+import { openModal } from 'soapbox/actions/modal';
+import Bundle from 'soapbox/features/ui/components/bundle';
+
+export default @connect()
+class AttachmentThumbs extends ImmutablePureComponent {
+
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    media: ImmutablePropTypes.list.isRequired,
+  };
+
+  renderLoading() {
+    return <div className='media-gallery--compact' />;
+  }
+
+  onOpenMedia = (media, index) => {
+    this.props.dispatch(openModal('MEDIA', { media, index }));
+  }
+
+  render() {
+    const { media } = this.props;
+
+    return (
+      <Bundle fetchComponent={MediaGallery} loading={this.renderLoading}>
+        {Component => (
+          <Component
+            media={media}
+            onOpenMedia={this.onOpenMedia}
+            height={50}
+            compact
+          />
+        )}
+      </Bundle>
+    );
+  }
+
+}

app/soapbox/components/media_gallery.js

@@ -279,6 +279,7 @@ class MediaGallery extends React.PureComponent {
     visible: PropTypes.bool,
     onToggleVisibility: PropTypes.func,
     displayMedia: PropTypes.string,
+    compact: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -560,7 +561,7 @@ class MediaGallery extends React.PureComponent {
   }
 
   render() {
-    const { media, intl, sensitive } = this.props;
+    const { media, intl, sensitive, compact } = this.props;
     const { visible } = this.state;
     const sizeData = this.getSizeData(media.size);
 
@@ -592,7 +593,7 @@ class MediaGallery extends React.PureComponent {
     }
 
     return (
-      <div className='media-gallery' style={sizeData.get('style')} ref={this.handleRef}>
+      <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 })}>
           {spoilerButton}
         </div>

app/soapbox/components/status.js

@@ -8,7 +8,7 @@ import RelativeTimestamp from './relative_timestamp';
 import DisplayName from './display_name';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
-import AttachmentList from './attachment_list';
+import AttachmentThumbs from './attachment_thumbs';
 import Card from '../features/status/components/card';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -384,10 +384,7 @@ class Status extends ImmutablePureComponent {
     if (size > 0) {
       if (this.props.muted) {
         media = (
-          <AttachmentList
+          <AttachmentThumbs media={status.get('media_attachments')} />
-            compact
-            media={status.get('media_attachments')}
-          />
         );
       } 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

@@ -7,7 +7,7 @@ import DisplayName from '../../../components/display_name';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { isRtl } from '../../../rtl';
-import AttachmentList from 'soapbox/components/attachment_list';
+import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
 import { NavLink } from 'react-router-dom';
 
 const messages = defineMessages({
@@ -57,7 +57,7 @@ class ReplyIndicator extends ImmutablePureComponent {
         <div className='reply-indicator__content' style={style} dangerouslySetInnerHTML={content} />
 
         {status.get('media_attachments').size > 0 && (
-          <AttachmentList
+          <AttachmentThumbs
             compact
             media={status.get('media_attachments')}
           />

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

@@ -10,7 +10,7 @@ import { Link, NavLink } from 'react-router-dom';
 import { getDomain } from 'soapbox/utils/accounts';
 import Avatar from 'soapbox/components/avatar';
 import DisplayName from 'soapbox/components/display_name';
-import AttachmentList from 'soapbox/components/attachment_list';
+import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
 import PollPreview from './poll_preview';
 import ScheduledStatusActionBar from './scheduled_status_action_bar';
 
@@ -67,7 +67,7 @@ class ScheduledStatus extends ImmutablePureComponent {
               collapsable
             />
 
-            <AttachmentList
+            <AttachmentThumbs
               compact
               media={status.get('media_attachments')}
             />

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

@@ -9,7 +9,7 @@ import RelativeTimestamp from '../../../components/relative_timestamp';
 import DisplayName from '../../../components/display_name';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Icon from 'soapbox/components/icon';
-import AttachmentList from 'soapbox/components/attachment_list';
+import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
 
 const messages = defineMessages({
   cancel_reblog: { id: 'status.cancel_reblog_private', defaultMessage: 'Un-repost' },
@@ -88,7 +88,7 @@ class BoostModal extends ImmutablePureComponent {
             <StatusContent status={status} />
 
             {status.get('media_attachments').size > 0 && (
-              <AttachmentList
+              <AttachmentThumbs
                 compact
                 media={status.get('media_attachments')}
               />

app/styles/components/media-gallery.scss

@@ -192,3 +192,33 @@
     }
   }
 }
+
+$media-compact-size: 50px;
+
+.media-gallery--compact {
+  height: $media-compact-size !important;
+  background: transparent;
+
+  .spoiler-button {
+    display: none;
+  }
+
+  .media-gallery__item {
+    width: $media-compact-size !important;
+    height: $media-compact-size !important;
+    inset: auto !important;
+    margin-right: 5px;
+
+    &-overflow {
+      font-size: 20px;
+    }
+
+    &__icons {
+      font-size: 30px;
+    }
+  }
+
+  .media-gallery__file-extension__label {
+    display: none;
+  }
+}

app/styles/components/modal.scss

@@ -180,7 +180,7 @@
 }
 
 .media-modal__button {
-  background-color: var(--primary-text-color);
+  background-color: #fff;
   height: 12px;
   width: 12px;
   border-radius: 6px;