From 434bf35a55d597d7c901f0a0f4f979598ec67831 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sat, 29 Feb 2020 13:03:41 -0500 Subject: [PATCH] Refactoring thumbnails. Fixes #564 - Adding a default discussion thumbnail - Adding a cropping max-height, and consistent width. - Getting rid of hover overlays, in favor of top right content-type icon. --- ui/assets/css/main.css | 19 +- ui/src/components/post-listing.tsx | 1008 +++++++++++++++------------- ui/src/components/symbols.tsx | 4 + 3 files changed, 558 insertions(+), 473 deletions(-) diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css index 048f687ec..fd51c5948 100644 --- a/ui/assets/css/main.css +++ b/ui/assets/css/main.css @@ -131,8 +131,13 @@ blockquote { } .thumbnail { - max-height: 62px; - max-width: 400px; + object-fit: cover; + max-height: 80px; + width: 100%; +} + +svg.thumbnail { + height: 40px; } .no-s-hows { @@ -188,6 +193,16 @@ hr { border: unset; } +.mini-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; +} + .link-overlay:hover { transition: .1s; opacity: 1; diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index a77021584..90a8b7a11 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -121,9 +121,12 @@ export class PostListing extends Component { render() { return ( -
+
{!this.state.showEdit ? ( - this.listing() + <> + {this.listing()} + {this.body()} + ) : (
{ ); } - imgThumbnail() { + body() { + return ( +
+
+ {this.state.url && this.props.showBody && this.state.iframely && ( + + )} + {this.props.showBody && this.props.post.body && ( + <> + {this.state.viewSource ? ( + 
{this.props.post.body}
+ ) : ( +
+ )} + + )} +
+
+ ); + } + + imgThumb() { let post = this.props.post; return ( - + src={imageThumbnailer(this.state.thumbnail)} + /> ); } + thumbnail() { + let post = this.props.post; + + if (isImage(this.state.url)) { + return ( + + {this.imgThumb()} + + + + + ); + } else if (this.state.thumbnail) { + return ( + + {this.imgThumb()} + + + + + ); + } else if (this.state.url && !this.state.thumbnail) { + return ( + + + + + + ); + } else { + return ( + + + + + + ); + } + } + listing() { let post = this.props.post; return ( -
-
+
+
)}
- {this.state.thumbnail && !this.state.imageExpanded && ( -
- {isImage(this.state.url) ? ( - - {this.imgThumbnail()} - - - - - ) : ( - - {this.imgThumbnail()} - - - - - )} + {!this.state.imageExpanded && ( +
+
{this.thumbnail()}
)} {this.state.url && isVideo(this.state.url) && ( @@ -212,501 +274,505 @@ export class PostListing extends Component { muted loop controls - class="mx-2 mt-1 float-left" + class="col-2 pr-0 mt-1" height="100" width="150" > )} -
-
-
- {this.props.showBody && this.state.url ? ( - - {post.name} - - ) : ( - - {post.name} - - )} -
- {this.state.url && - !( - new URL(this.state.url).hostname == window.location.hostname - ) && ( - - - {new URL(this.state.url).hostname} - - - - - - )} - {this.state.thumbnail && ( - <> - {!this.state.imageExpanded ? ( - - [+] - - ) : ( - - +
+
+
+
+ {this.props.showBody && this.state.url ? ( + - [-] - -
+ {post.name} + + ) : ( + + {post.name} + + )} +
+ {this.state.url && + !( + new URL(this.state.url).hostname == window.location.hostname + ) && ( + + + {new URL(this.state.url).hostname} + + + + + + )} + {this.state.thumbnail && ( + <> + {!this.state.imageExpanded ? ( - - - - - + [+] -
- + ) : ( + + + [-] + +
+ + + +
+ + )} + )} - - )} - {post.removed && ( - - {i18n.t('removed')} - - )} - {post.deleted && ( - - {i18n.t('deleted')} - - )} - {post.locked && ( - - {i18n.t('locked')} - - )} - {post.stickied && ( - - {i18n.t('stickied')} - - )} - {post.nsfw && ( - - {i18n.t('nsfw')} - - )} + {post.removed && ( + + {i18n.t('removed')} + + )} + {post.deleted && ( + + {i18n.t('deleted')} + + )} + {post.locked && ( + + {i18n.t('locked')} + + )} + {post.stickied && ( + + {i18n.t('stickied')} + + )} + {post.nsfw && ( + + {i18n.t('nsfw')} + + )} +
+
-
-
-
    -
  • - {i18n.t('by')} - - {post.creator_avatar && showAvatars() && ( - - )} - {post.creator_name} - - {this.isMod && ( - {i18n.t('mod')} - )} - {this.isAdmin && ( - - {i18n.t('admin')} - - )} - {(post.banned_from_community || post.banned) && ( - - {i18n.t('banned')} - - )} - {this.props.showCommunity && ( - - {i18n.t('to')} - - {post.community_name} +
    +
    +
      +
    • + {i18n.t('by')} + + {post.creator_avatar && showAvatars() && ( + + )} + {post.creator_name} - - )} -
      • -
    • - - - -
      • -
    • - - (+{this.state.upvotes} - | - -{this.state.downvotes} - ) - -
      • -
    • - - {i18n.t('number_of_comments', { - count: post.number_of_comments, - })} - -
      • -
    -
      - {this.props.post.duplicates && ( - <> -
    • - {i18n.t('cross_posted_to')} -
      • - {this.props.post.duplicates.map(post => ( -
    • - {post.community_name} -
      • - ))} - - )} -
    -
      - {UserService.Instance.user && ( - <> - {this.props.showBody && ( - <> -
    • - - {post.saved ? i18n.t('unsave') : i18n.t('save')} - -
      • -
    • - - {i18n.t('cross_post')} + {this.isMod && ( + + {i18n.t('mod')} + + )} + {this.isAdmin && ( + + {i18n.t('admin')} + + )} + {(post.banned_from_community || post.banned) && ( + + {i18n.t('banned')} + + )} + {this.props.showCommunity && ( + + {i18n.t('to')} + + {post.community_name} -
      • - - )} - {this.myPost && this.props.showBody && ( + + )} + +
    • + + + +
      • +
    • + + (+{this.state.upvotes} + | + -{this.state.downvotes} + ) + +
      • +
    • + + {i18n.t('number_of_comments', { + count: post.number_of_comments, + })} + +
      • +
    +
      + {this.props.post.duplicates && ( <> -
    • - - {i18n.t('edit')} - -
    • - - {!post.deleted ? i18n.t('delete') : i18n.t('restore')} - + {i18n.t('cross_posted_to')}
      • + {this.props.post.duplicates.map(post => ( +
    • + + {post.community_name} + +
      • + ))} )} - {this.canModOnSelf && ( +
    +
      + {UserService.Instance.user && ( <> -
    • - - {post.locked ? i18n.t('unlock') : i18n.t('lock')} - -
      • -
    • - - {post.stickied ? i18n.t('unsticky') : i18n.t('sticky')} - -
      • - - )} - {/* Mods can ban from community, and appoint as mods to community */} - {(this.canMod || this.canAdmin) && ( -
    • - {!post.removed ? ( - - {i18n.t('remove')} - - ) : ( - - {i18n.t('restore')} - - )} -
      • - )} - {this.canMod && ( - <> - {!this.isMod && ( -
    • - {!post.banned_from_community ? ( + {this.props.showBody && ( + <> +
    • - {i18n.t('ban')} + {post.saved ? i18n.t('unsave') : i18n.t('save')} + +
      • +
    • + + {i18n.t('cross_post')} + +
      • + + )} + {this.myPost && this.props.showBody && ( + <> +
    • + + {i18n.t('edit')} + +
      • +
    • + + {!post.deleted + ? i18n.t('delete') + : i18n.t('restore')} + +
      • + + )} + {this.canModOnSelf && ( + <> +
    • + + {post.locked ? i18n.t('unlock') : i18n.t('lock')} + +
      • +
    • + + {post.stickied + ? i18n.t('unsticky') + : i18n.t('sticky')} + +
      • + + )} + {/* Mods can ban from community, and appoint as mods to community */} + {(this.canMod || this.canAdmin) && ( +
    • + {!post.removed ? ( + + {i18n.t('remove')} ) : ( - {i18n.t('unban')} + {i18n.t('restore')} )}
      • )} - {!post.banned_from_community && ( -
    • - - {this.isMod - ? i18n.t('remove_as_mod') - : i18n.t('appoint_as_mod')} - -
      • - )} - - )} - {/* Community creators and admins can transfer community to another mod */} - {(this.amCommunityCreator || this.canAdmin) && this.isMod && ( -
    • - {!this.state.showConfirmTransferCommunity ? ( - - {i18n.t('transfer_community')} - - ) : ( + {this.canMod && ( <> - - {i18n.t('are_you_sure')} - - - {i18n.t('yes')} - - - {i18n.t('no')} - + {!this.isMod && ( +
    • + {!post.banned_from_community ? ( + + {i18n.t('ban')} + + ) : ( + + {i18n.t('unban')} + + )} +
      • + )} + {!post.banned_from_community && ( +
    • + + {this.isMod + ? i18n.t('remove_as_mod') + : i18n.t('appoint_as_mod')} + +
      • + )} )} - - )} - {/* Admins can ban from all, and appoint other admins */} - {this.canAdmin && ( - <> - {!this.isAdmin && ( + {/* Community creators and admins can transfer community to another mod */} + {(this.amCommunityCreator || this.canAdmin) && this.isMod && (
    • - {!post.banned ? ( + {!this.state.showConfirmTransferCommunity ? ( - {i18n.t('ban_from_site')} + {i18n.t('transfer_community')} ) : ( - - {i18n.t('unban_from_site')} - + <> + + {i18n.t('are_you_sure')} + + + {i18n.t('yes')} + + + {i18n.t('no')} + + )}
      • )} - {!post.banned && ( + {/* Admins can ban from all, and appoint other admins */} + {this.canAdmin && ( + <> + {!this.isAdmin && ( +
    • + {!post.banned ? ( + + {i18n.t('ban_from_site')} + + ) : ( + + {i18n.t('unban_from_site')} + + )} +
      • + )} + {!post.banned && ( +
    • + + {this.isAdmin + ? i18n.t('remove_as_admin') + : i18n.t('appoint_as_admin')} + +
      • + )} + + )} + {/* Site Creator can transfer to another admin */} + {this.amSiteCreator && this.isAdmin && (
    • - - {this.isAdmin - ? i18n.t('remove_as_admin') - : i18n.t('appoint_as_admin')} - + {!this.state.showConfirmTransferSite ? ( + + {i18n.t('transfer_site')} + + ) : ( + <> + + {i18n.t('are_you_sure')} + + + {i18n.t('yes')} + + + {i18n.t('no')} + + + )}
      • )} )} - {/* Site Creator can transfer to another admin */} - {this.amSiteCreator && this.isAdmin && ( + {this.props.showBody && post.body && (
    • - {!this.state.showConfirmTransferSite ? ( - - {i18n.t('transfer_site')} - - ) : ( - <> - - {i18n.t('are_you_sure')} - - - {i18n.t('yes')} - - - {i18n.t('no')} - - - )} + + {i18n.t('view_source')} +
      • )} - - )} - {this.props.showBody && post.body && ( -
    • - + {this.state.showRemoveDialog && ( +
      - {i18n.t('view_source')} - -
      • - )} -
    - {this.state.url && this.props.showBody && this.state.iframely && ( - - )} - {this.state.showRemoveDialog && ( - - - - - )} - {this.state.showBanDialog && ( -
    -
    - - -
    - {/* TODO hold off on expires until later */} - {/*
    */} - {/* */} - {/* */} - {/*
    */} -
    - -
    -
    - )} - {this.props.showBody && post.body && ( - <> - {this.state.viewSource ? ( - 
    {post.body}
    - ) : ( -
    + + + )} - - )} + {this.state.showBanDialog && ( +
    +
    + + +
    + {/* TODO hold off on expires until later */} + {/*
    */} + {/* */} + {/* */} + {/*
    */} +
    + +
    +
    + )} +
    +
); diff --git a/ui/src/components/symbols.tsx b/ui/src/components/symbols.tsx index 559a97072..db1f7b5f5 100644 --- a/ui/src/components/symbols.tsx +++ b/ui/src/components/symbols.tsx @@ -15,6 +15,10 @@ export class Symbols extends Component { xmlnsXlink="http://www.w3.org/1999/xlink" > + + bubble2 + + image