diff options
author | Dessalines <tyhou13@gmx.com> | 2020-02-21 11:26:42 -0500 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-02-21 11:26:42 -0500 |
commit | 2dec9b5b10098201b6197441d1984f8ff3e4e909 (patch) | |
tree | 849831a134b4d1eb1b8303626f56ed094b363fa8 /ui/src/components/post-listing.tsx | |
parent | 883c8decde1dab35c4ab4c3e4719ee4bd773f4a1 (diff) |
Adding a link overlay. Fixes #549
Diffstat (limited to 'ui/src/components/post-listing.tsx')
-rw-r--r-- | ui/src/components/post-listing.tsx | 36 |
1 files changed, 24 insertions, 12 deletions
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 |