diff options
Diffstat (limited to 'ui')
-rw-r--r-- | ui/assets/css/main.css | 23 | ||||
-rw-r--r-- | ui/src/components/post-listing.tsx | 43 | ||||
-rw-r--r-- | ui/src/components/symbols.tsx | 6 |
3 files changed, 55 insertions, 17 deletions
diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css index 00020177..704cddae 100644 --- a/ui/assets/css/main.css +++ b/ui/assets/css/main.css @@ -188,7 +188,7 @@ hr { border: unset; } -.link-overlay { +.img-expand-overlay { position: absolute; top: 0; right: 0; @@ -197,3 +197,24 @@ hr { border-bottom-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; } + +.link-overlay:hover { + transition: .1s; + opacity: 1; +} + +.link-overlay { + transition: opacity .1s ease-in-out; + position: absolute; + opacity: 0; + left: 0; + height: 100%; + width: 100%; + padding: 10px; + background: rgba(0,0,0,.6); +} + +.placeholder { + height: 50px; + width: 50px; +} diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index b3bde27f..d52df9d1 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -163,28 +163,35 @@ export class PostListing extends Component<PostListingProps, PostListingState> { </div> {this.hasImage() && !this.state.imageExpanded && ( <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"> + <object + className={`img-fluid thumbnail rounded ${(post.nsfw || + post.community_nsfw) && + 'img-blur'}`} + data={imageThumbnailer(this.getImage())} + > + <svg class="icon rounded placeholder"> + <use xlinkHref="#icon-external-link"></use> + </svg> + </object> + <svg class="icon rounded link-overlay hover-link"> <use xlinkHref="#icon-external-link"></use> </svg> </a> + <span + title={i18n.t('expand_here')} + class="pointer" + onClick={linkEvent(this, this.handleImageExpandClick)} + > + <svg class="icon img-expand-overlay"> + <use xlinkHref="#icon-image"></use> + </svg> + </span> </div> )} {this.state.url && isVideo(this.state.url) && ( @@ -263,10 +270,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> { class="pointer" onClick={linkEvent(this, this.handleImageExpandClick)} > - <img + <object class="img-fluid img-expanded" - src={this.getImage()} - /> + data={this.getImage()} + > + <svg class="icon rounded placeholder"> + <use xlinkHref="#icon-external-link"></use> + </svg> + </object> </span> </div> </span> diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx index 0870efd7..559a9707 100644 --- a/ui/src/components/symbols.tsx +++ b/ui/src/components/symbols.tsx @@ -15,6 +15,12 @@ export class Symbols extends Component<any, any> { xmlnsXlink="http://www.w3.org/1999/xlink" > <defs> + <symbol id="icon-image" viewBox="0 0 32 32"> + <title>image</title> + <path d="M29.996 4c0.001 0.001 0.003 0.002 0.004 0.004v23.993c-0.001 0.001-0.002 0.003-0.004 0.004h-27.993c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z"></path> + <path d="M26 9c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path> + <path d="M28 26h-24v-4l7-12 8 10h2l7-6z"></path> + </symbol> <symbol id="icon-external-link" viewBox="0 0 24 24"> <title>external-link</title> <path d="M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path> |