From 2dec9b5b10098201b6197441d1984f8ff3e4e909 Mon Sep 17 00:00:00 2001
From: Dessalines <tyhou13@gmx.com>
Date: Fri, 21 Feb 2020 11:26:42 -0500
Subject: [PATCH] Adding a link overlay. Fixes #549

---
 ui/assets/css/main.css             | 10 +++++++++
 ui/src/components/post-listing.tsx | 36 ++++++++++++++++++++----------
 2 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css
index e7784877..00020177 100644
--- a/ui/assets/css/main.css
+++ b/ui/assets/css/main.css
@@ -187,3 +187,13 @@ hr {
   color: var(--white);
   border: unset;
 }
+
+.link-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 2px;
+  background: rgba(0,0,0,.4);
+  border-bottom-left-radius: 0.25rem !important;
+  border-top-right-radius: 0.25rem !important;
+}
diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index c0ddedc1..b3bde27f 100644
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -162,18 +162,30 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           )}
         </div>
         {this.hasImage() && !this.state.imageExpanded && (
-          <span
-            title={i18n.t('expand_here')}
-            class="pointer"
-            onClick={linkEvent(this, this.handleImageExpandClick)}
-          >
-            <img
-              className={`mx-2 mt-1 float-left img-fluid thumbnail rounded ${(post.nsfw ||
-                post.community_nsfw) &&
-                'img-blur'}`}
-              src={imageThumbnailer(this.getImage())}
-            />
-          </span>
+          <div class="mx-2 mt-1 float-left position-relative">
+            <span
+              title={i18n.t('expand_here')}
+              class="pointer"
+              onClick={linkEvent(this, this.handleImageExpandClick)}
+            >
+              <img
+                className={`img-fluid thumbnail rounded ${(post.nsfw ||
+                  post.community_nsfw) &&
+                  'img-blur'}`}
+                src={imageThumbnailer(this.getImage())}
+              />
+            </span>
+            <a
+              className="text-body"
+              href={this.state.url}
+              target="_blank"
+              title={this.state.url}
+            >
+              <svg class="icon link-overlay">
+                <use xlinkHref="#icon-external-link"></use>
+              </svg>
+            </a>
+          </div>
         )}
         {this.state.url && isVideo(this.state.url) && (
           <video
-- 
2.44.1