-import { myAuthRequired, newVote, showScores } from "@utils/app";
+import { myAuthRequired, newVote } from "@utils/app";
import { canShare, share } from "@utils/browser";
import { getExternalHost, getHttpBase } from "@utils/env";
import {
capitalizeFirstLetter,
futureDaysToUnixTime,
hostname,
- numToSI,
} from "@utils/helpers";
import { isImage, isVideo } from "@utils/media";
import {
import { Icon, PurgeWarning, Spinner } from "../common/icon";
import { MomentTime } from "../common/moment-time";
import { PictrsImage } from "../common/pictrs-image";
+import { VoteButtons, VoteButtonsCompact } from "../common/vote-buttons";
import { CommunityLink } from "../community/community-link";
import { PersonListing } from "../person/person-listing";
import { MetadataCard } from "./metadata-card";
createdLine() {
const post_view = this.postView;
return (
- <ul className="list-inline mb-1 text-muted small mt-2">
- <li className="list-inline-item">
- <PersonListing person={post_view.creator} />
-
- {this.creatorIsMod_ && (
- <span className="mx-1 badge text-bg-light">
- {I18NextService.i18n.t("mod")}
- </span>
- )}
- {this.creatorIsAdmin_ && (
- <span className="mx-1 badge text-bg-light">
- {I18NextService.i18n.t("admin")}
- </span>
- )}
- {post_view.creator.bot_account && (
- <span className="mx-1 badge text-bg-light">
- {I18NextService.i18n.t("bot_account").toLowerCase()}
- </span>
- )}
- {this.props.showCommunity && (
- <>
- {" "}
- {I18NextService.i18n.t("to")}{" "}
- <CommunityLink community={post_view.community} />
- </>
- )}
- </li>
+ <span className="small">
+ <PersonListing person={post_view.creator} />
+ {this.creatorIsMod_ && (
+ <span className="mx-1 badge text-bg-light">
+ {I18NextService.i18n.t("mod")}
+ </span>
+ )}
+ {this.creatorIsAdmin_ && (
+ <span className="mx-1 badge text-bg-light">
+ {I18NextService.i18n.t("admin")}
+ </span>
+ )}
+ {post_view.creator.bot_account && (
+ <span className="mx-1 badge text-bg-light">
+ {I18NextService.i18n.t("bot_account").toLowerCase()}
+ </span>
+ )}
+ {this.props.showCommunity && (
+ <>
+ {" "}
+ {I18NextService.i18n.t("to")}{" "}
+ <CommunityLink community={post_view.community} />
+ </>
+ )}
{post_view.post.language_id !== 0 && (
<span className="mx-1 badge text-bg-light">
{
)?.name
}
</span>
- )}
- <li className="list-inline-item">•</li>
- <li className="list-inline-item">
- <span>
- <MomentTime
- published={post_view.post.published}
- updated={post_view.post.updated}
- />
- </span>
- </li>
- </ul>
+ )}{" "}
+ •{" "}
+ <MomentTime
+ published={post_view.post.published}
+ updated={post_view.post.updated}
+ />
+ </span>
);
}
- voteBar() {
- return (
- <div className={`vote-bar col-1 pe-0 small text-center`}>
- <button
- className={`btn-animate btn btn-link p-0 ${
- this.postView.my_vote == 1 ? "text-info" : "text-muted"
- }`}
- onClick={linkEvent(this, this.handleUpvote)}
- data-tippy-content={I18NextService.i18n.t("upvote")}
- aria-label={I18NextService.i18n.t("upvote")}
- aria-pressed={this.postView.my_vote === 1}
- >
- {this.state.upvoteLoading ? (
- <Spinner />
- ) : (
- <Icon icon="arrow-up1" classes="upvote" />
- )}
- </button>
- {showScores() ? (
- <div
- className={`unselectable pointer text-muted px-1 post-score`}
- data-tippy-content={this.pointsTippy}
- >
- {numToSI(this.postView.counts.score)}
- </div>
- ) : (
- <div className="p-1"></div>
- )}
- {this.props.enableDownvotes && (
- <button
- className={`btn-animate btn btn-link p-0 ${
- this.postView.my_vote == -1 ? "text-danger" : "text-muted"
- }`}
- onClick={linkEvent(this, this.handleDownvote)}
- data-tippy-content={I18NextService.i18n.t("downvote")}
- aria-label={I18NextService.i18n.t("downvote")}
- aria-pressed={this.postView.my_vote === -1}
- >
- {this.state.downvoteLoading ? (
- <Spinner />
- ) : (
- <Icon icon="arrow-down1" classes="downvote" />
- )}
- </button>
- )}
- </div>
- );
- }
-
get postLink() {
const post = this.postView.post;
return (
<Icon icon="fedilink" inline />
</a>
)}
- {mobile && !this.props.viewOnly && this.mobileVotes}
+ {mobile && !this.props.viewOnly && (
+ <VoteButtonsCompact
+ postListing={this}
+ enableDownvotes={this.props.enableDownvotes}
+ handleUpvote={this.handleUpvote}
+ handleDownvote={this.handleDownvote}
+ counts={this.postView.counts}
+ my_vote={this.postView.my_vote}
+ />
+ )}
{UserService.Instance.myUserInfo &&
!this.props.viewOnly &&
this.postActions()}
to={`/post/${post_view.post.id}?scrollToComments=true`}
data-tippy-content={title}
>
- <span className="me-1">
- <Icon icon="message-square" classes="me-1" inline />
- {post_view.counts.comments}
- </span>
+ <Icon icon="message-square" classes="me-1" inline />
+ {post_view.counts.comments}
{this.unreadCount && (
<span className="text-muted fst-italic">
({this.unreadCount} {I18NextService.i18n.t("new")})
: pv.unread_comments;
}
- get mobileVotes() {
- // TODO: make nicer
- const tippy = showScores()
- ? { "data-tippy-content": this.pointsTippy }
- : {};
- return (
- <>
- <div>
- <button
- className={`btn-animate btn py-0 px-1 ${
- this.postView.my_vote === 1 ? "text-info" : "text-muted"
- }`}
- {...tippy}
- onClick={linkEvent(this, this.handleUpvote)}
- aria-label={I18NextService.i18n.t("upvote")}
- aria-pressed={this.postView.my_vote === 1}
- >
- {this.state.upvoteLoading ? (
- <Spinner />
- ) : (
- <>
- <Icon icon="arrow-up1" classes="icon-inline small" />
- {showScores() && (
- <span className="ms-2">
- {numToSI(this.postView.counts.upvotes)}
- </span>
- )}
- </>
- )}
- </button>
- {this.props.enableDownvotes && (
- <button
- className={`ms-2 btn-animate btn py-0 px-1 ${
- this.postView.my_vote === -1 ? "text-danger" : "text-muted"
- }`}
- onClick={linkEvent(this, this.handleDownvote)}
- {...tippy}
- aria-label={I18NextService.i18n.t("downvote")}
- aria-pressed={this.postView.my_vote === -1}
- >
- {this.state.downvoteLoading ? (
- <Spinner />
- ) : (
- <>
- <Icon icon="arrow-down1" classes="icon-inline small" />
- {showScores() && (
- <span
- className={classNames("ms-2", {
- invisible: this.postView.counts.downvotes === 0,
- })}
- >
- {numToSI(this.postView.counts.downvotes)}
- </span>
- )}
- </>
- )}
- </button>
- )}
- </div>
- </>
- );
- }
-
get saveButton() {
const saved = this.postView.saved;
const label = saved
<button
className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
onClick={linkEvent(this, this.handleDeleteClick)}
- aria-label={label}
>
{this.state.deleteLoading ? (
<Spinner />
const post_view = this.postView;
return (
this.state.showAdvanced && (
- <>
+ <div className="mt-3">
{this.canMod_ && (
<>
{!this.creatorIsMod_ &&
)}
</>
)}
- </>
+ </div>
)
);
}
{this.postTitleLine()}
</div>
<div className="col-4">
- {/* Post body prev or thumbnail */}
+ {/* Post thumbnail */}
{!this.state.imageExpanded && this.thumbnail()}
</div>
</div>
);
}
- showMobilePreview() {
+ showBodyPreview() {
const { body, id } = this.postView.post;
return !this.showBody && body ? (
- <Link className="text-body" to={`/post/${id}`}>
+ <Link className="text-body mt-2 d-block" to={`/post/${id}`}>
<div className="md-div mb-1 preview-lines">{body}</div>
</Link>
) : (
{this.mobileThumbnail()}
{/* Show a preview of the post body */}
- {this.showMobilePreview()}
+ {this.showBodyPreview()}
{this.commentsLine(true)}
{this.userActionsLine()}
{/* The larger view*/}
<div className="d-none d-sm-block">
<article className="row post-container">
- {!this.props.viewOnly && this.voteBar()}
+ {!this.props.viewOnly && (
+ <VoteButtons
+ postListing={this}
+ enableDownvotes={this.props.enableDownvotes}
+ handleUpvote={this.handleUpvote}
+ handleDownvote={this.handleDownvote}
+ counts={this.postView.counts}
+ my_vote={this.postView.my_vote}
+ />
+ )}
<div className="col-sm-2 pe-0 post-media">
<div className="">{this.thumbnail()}</div>
</div>
<div className="col-12">
{this.postTitleLine()}
{this.createdLine()}
+ {this.showBodyPreview()}
{this.commentsLine()}
{this.duplicatesLine()}
{this.userActionsLine()}
projects / lemmy-ui.git / commitdiff