fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-25 07:36:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding expandable post texts by clicking on book. Fixes #225

Browse source
This commit is contained in:
Dessalines 2021-03-25 12:44:16 -04:00
parent e362b30130
commit a4fddd6d7f
1 changed files with 39 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
src/shared/components/post-listing.tsx
View file

@ -58,6 +58,7 @@ interface PostListingState {
viewSource: boolean; viewSource: boolean;
showAdvanced: boolean; showAdvanced: boolean;
showMoreMobile: boolean; showMoreMobile: boolean;
showBody: boolean;
my_vote: number; my_vote: number;
score: number; score: number;
upvotes: number; upvotes: number;
@ -91,6 +92,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
viewSource: false, viewSource: false,
showAdvanced: false, showAdvanced: false,
showMoreMobile: false, showMoreMobile: false,
showBody: false,
my_vote: this.props.post_view.my_vote, my_vote: this.props.post_view.my_vote,
score: this.props.post_view.counts.score, score: this.props.post_view.counts.score,
upvotes: this.props.post_view.counts.upvotes, upvotes: this.props.post_view.counts.upvotes,
@ -146,10 +148,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return ( return (
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
{post.url && this.props.showBody && post.embed_title && ( {post.url && this.showBody && post.embed_title && (
<IFramelyCard post={post} /> <IFramelyCard post={post} />
)} )}
{this.props.showBody && {this.showBody &&
post.body && post.body &&
(this.state.viewSource ? ( (this.state.viewSource ? (
<pre>{post.body}</pre> <pre>{post.body}</pre>
@ -314,18 +316,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<> <>
<li className="list-inline-item">•</li> <li className="list-inline-item">•</li>
<li className="list-inline-item"> <li className="list-inline-item">
{/* Using a link with tippy doesn't work on touch devices unfortunately */} <button
<Link className="text-muted btn btn-sm btn-link p-0"
className="text-muted"
data-tippy-content={md.render( data-tippy-content={md.render(
previewLines(post_view.post.body) previewLines(post_view.post.body)
)} )}
data-tippy-allowHtml={true} data-tippy-allowHtml={true}
aria-label={i18n.t("upvote")} onClick={linkEvent(this, this.handleShowBody)}
to={`/post/${post_view.post.id}`}
> >
<Icon icon="book-open" classes="icon-inline mr-1" /> <Icon icon="book-open" classes="icon-inline mr-1" />
</Link> </button>
</li> </li>
</> </>
)} )}
@ -373,7 +373,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return ( return (
<div className="post-title overflow-hidden"> <div className="post-title overflow-hidden">
<h5> <h5>
{this.props.showBody && post.url ? ( {this.showBody && post.url ? (
<a <a
className={!post.stickied ? "text-body" : "text-primary"} className={!post.stickied ? "text-body" : "text-primary"}
href={post.url} href={post.url}
@ -489,7 +489,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</small> </small>
</button> </button>
)} )}
{!this.props.showBody && ( {!this.showBody && (
<button <button
class="btn btn-link btn-animate text-muted py-0" class="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleSavePostClick)} onClick={linkEvent(this, this.handleSavePostClick)}
@ -554,7 +554,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
/> />
</button> </button>
{!this.state.showMoreMobile && this.props.showBody && ( {!this.state.showMoreMobile && this.showBody && (
<button <button
class="btn btn-link btn-animate text-muted py-0" class="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleShowMoreMobile)} onClick={linkEvent(this, this.handleShowMoreMobile)}
@ -601,7 +601,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return ( return (
UserService.Instance.localUserView && ( UserService.Instance.localUserView && (
<> <>
{this.props.showBody && ( {this.showBody && (
<> <>
{!mobile && ( {!mobile && (
<button <button
@ -629,7 +629,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</Link> </Link>
</> </>
)} )}
{this.myPost && this.props.showBody && ( {this.myPost && this.showBody && (
<> <>
<button <button
class="btn btn-link btn-animate text-muted py-0" class="btn btn-link btn-animate text-muted py-0"
@ -659,7 +659,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</> </>
)} )}
{!this.state.showAdvanced && this.props.showBody ? ( {!this.state.showAdvanced && this.showBody ? (
<button <button
class="btn btn-link btn-animate text-muted py-0" class="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleShowAdvanced)} onClick={linkEvent(this, this.handleShowAdvanced)}
@ -670,7 +670,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</button> </button>
) : ( ) : (
<> <>
{this.props.showBody && post_view.post.body && ( {this.showBody && post_view.post.body && (
<button <button
class="btn btn-link btn-animate text-muted py-0" class="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleViewSource)} onClick={linkEvent(this, this.handleViewSource)}
@ -773,20 +773,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</button> </button>
))} ))}
{!post_view.creator_banned_from_community && ( {!post_view.creator_banned_from_community && (
<button <button
class="btn btn-link btn-animate text-muted py-0" class="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleAddModToCommunity)} onClick={linkEvent(this, this.handleAddModToCommunity)}
aria-label={ aria-label={
this.isMod this.isMod
? i18n.t("remove_as_mod")
: i18n.t("appoint_as_mod")
}
>
{this.isMod
? i18n.t("remove_as_mod") ? i18n.t("remove_as_mod")
: i18n.t("appoint_as_mod")} : i18n.t("appoint_as_mod")
</button> }
)} >
{this.isMod
? i18n.t("remove_as_mod")
: i18n.t("appoint_as_mod")}
</button>
)}
</> </>
)} )}
{/* Community creators and admins can transfer community to another mod */} {/* Community creators and admins can transfer community to another mod */}
@ -1015,7 +1015,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
let post = this.props.post_view.post; let post = this.props.post_view.post;
return ( return (
post.body && post.body &&
!this.props.showBody && ( !this.showBody && (
<div <div
className="md-div mb-1" className="md-div mb-1"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
@ -1289,6 +1289,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
return params; return params;
} }
get showBody(): boolean {
return this.props.showBody || this.state.showBody;
}
handleModRemoveShow(i: PostListing) { handleModRemoveShow(i: PostListing) {
i.state.showRemoveDialog = true; i.state.showRemoveDialog = true;
i.setState(i.state); i.setState(i.state);
@ -1495,6 +1499,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
setupTippy(); setupTippy();
} }
handleShowBody(i: PostListing) {
i.state.showBody = !i.state.showBody;
i.setState(i.state);
setupTippy();
}
get pointsTippy(): string { get pointsTippy(): string {
let points = i18n.t("number_of_points", { let points = i18n.t("number_of_points", {
count: this.state.score, count: this.state.score,