From 2608de7af48ee1aa76a7a6c42c359ae7813241ba Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 9 Oct 2021 12:33:08 -0500
Subject: [PATCH] AttachmentThumbs: click to expand post

---
 app/soapbox/components/attachment_thumbs.js | 26 +++++++++++++--------
 app/soapbox/components/status.js            |  2 +-
 app/styles/components/status.scss           | 15 ++++++++++++
 3 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/components/attachment_thumbs.js b/app/soapbox/components/attachment_thumbs.js
index 60532e00e..438c2061e 100644
--- a/app/soapbox/components/attachment_thumbs.js
+++ b/app/soapbox/components/attachment_thumbs.js
@@ -13,6 +13,7 @@ class AttachmentThumbs extends ImmutablePureComponent {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     media: ImmutablePropTypes.list.isRequired,
+    onClick: PropTypes.func,
   };
 
   renderLoading() {
@@ -24,19 +25,24 @@ class AttachmentThumbs extends ImmutablePureComponent {
   }
 
   render() {
-    const { media } = this.props;
+    const { media, onClick } = this.props;
 
     return (
-      <Bundle fetchComponent={MediaGallery} loading={this.renderLoading}>
-        {Component => (
-          <Component
-            media={media}
-            onOpenMedia={this.onOpenMedia}
-            height={50}
-            compact
-          />
+      <div className='attachment-thumbs'>
+        <Bundle fetchComponent={MediaGallery} loading={this.renderLoading}>
+          {Component => (
+            <Component
+              media={media}
+              onOpenMedia={this.onOpenMedia}
+              height={50}
+              compact
+            />
+          )}
+        </Bundle>
+        {onClick && (
+          <div className='attachment-thumbs__clickable-region' onClick={onClick} />
         )}
-      </Bundle>
+      </div>
     );
   }
 
diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index a3efe15b8..5a9de370d 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -389,7 +389,7 @@ class Status extends ImmutablePureComponent {
     if (size > 0) {
       if (this.props.muted) {
         media = (
-          <AttachmentThumbs media={status.get('media_attachments')} />
+          <AttachmentThumbs media={status.get('media_attachments')} onClick={this.handleClick} />
         );
       } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
         const video = status.getIn(['media_attachments', 0]);
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 37a60f5f0..230c514d8 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -714,3 +714,18 @@ a.status-card.compact:hover {
     padding: 15px 0 10px;
   }
 }
+
+.attachment-thumbs {
+  position: relative;
+
+  &__clickable-region {
+    cursor: pointer;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}