mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-22 20:31:13 +00:00
Merge remote-tracking branch 'lemmy/main' into feat/create-post-file-upload-a11y
* lemmy/main: fix: Add type=button to buttons chore: Empty commit to re-trigger Woodpecker fix: Fix some Bootstrap 5 font classes fix: Fix some Bootstrap 5 font classes fix: Specify vote content type so buttons work for both comments and posts v0.18.0 Fix homepage `scrollTo(0, 0)` failing when document size changes. v0.18.0-rc.8 Moved `!isBrowser()` check to `FirstLoadServer.isFirstLoad` Fix server-side rendering after first load. fix!: Try to get Vote Buttons component working in Comments fix: Remove unused prop fix: Rework some vote buttons architecture fix: Undo some other extraneous changes fix: Undo some extraneous changes fix: Remove tippy duplicate functions fix: Revert to old mobile vote style feat: Move vote buttons to separate component
This commit is contained in:
commit
7d44bc4993
4 changed files with 279 additions and 238 deletions
|
@ -3,7 +3,6 @@ import {
|
|||
getCommentParentId,
|
||||
myAuth,
|
||||
myAuthRequired,
|
||||
newVote,
|
||||
showScores,
|
||||
} from "@utils/app";
|
||||
import { futureDaysToUnixTime, numToSI } from "@utils/helpers";
|
||||
|
@ -56,13 +55,14 @@ import {
|
|||
CommentNodeI,
|
||||
CommentViewType,
|
||||
PurgeType,
|
||||
VoteType,
|
||||
VoteContentType,
|
||||
} from "../../interfaces";
|
||||
import { mdToHtml, mdToHtmlNoImages } from "../../markdown";
|
||||
import { I18NextService, UserService } from "../../services";
|
||||
import { setupTippy } from "../../tippy";
|
||||
import { Icon, PurgeWarning, Spinner } from "../common/icon";
|
||||
import { MomentTime } from "../common/moment-time";
|
||||
import { VoteButtonsCompact } from "../common/vote-buttons";
|
||||
import { CommunityLink } from "../community/community-link";
|
||||
import { PersonListing } from "../person/person-listing";
|
||||
import { CommentForm } from "./comment-form";
|
||||
|
@ -283,7 +283,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
node.comment_view.counts.child_count > 0;
|
||||
|
||||
return (
|
||||
<li className="comment" role="comment">
|
||||
<li className="comment">
|
||||
<article
|
||||
id={`comment-${cv.comment.id}`}
|
||||
className={classNames(`details comment-node py-2`, {
|
||||
|
@ -356,29 +356,18 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
)}
|
||||
{/* This is an expanding spacer for mobile */}
|
||||
<div className="me-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
|
||||
|
||||
{showScores() && (
|
||||
<>
|
||||
<a
|
||||
className={`unselectable pointer ${this.scoreColor}`}
|
||||
onClick={linkEvent(this, this.handleUpvote)}
|
||||
data-tippy-content={this.pointsTippy}
|
||||
<span
|
||||
className="me-1 fw-bold"
|
||||
aria-label={I18NextService.i18n.t("number_of_points", {
|
||||
count: Number(this.commentView.counts.score),
|
||||
formattedCount: numToSI(this.commentView.counts.score),
|
||||
})}
|
||||
>
|
||||
{this.state.upvoteLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<span
|
||||
className="me-1 fw-bold"
|
||||
aria-label={I18NextService.i18n.t("number_of_points", {
|
||||
count: Number(this.commentView.counts.score),
|
||||
formattedCount: numToSI(
|
||||
this.commentView.counts.score
|
||||
),
|
||||
})}
|
||||
>
|
||||
{numToSI(this.commentView.counts.score)}
|
||||
</span>
|
||||
)}
|
||||
</a>
|
||||
{numToSI(this.commentView.counts.score)}
|
||||
</span>
|
||||
<span className="me-1">•</span>
|
||||
</>
|
||||
)}
|
||||
|
@ -451,60 +440,14 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
)}
|
||||
{UserService.Instance.myUserInfo && !this.props.viewOnly && (
|
||||
<>
|
||||
<button
|
||||
className={`btn btn-link btn-animate ${
|
||||
this.commentView.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.commentView.my_vote === 1}
|
||||
>
|
||||
{this.state.upvoteLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<>
|
||||
<Icon icon="arrow-up1" classes="icon-inline" />
|
||||
{showScores() &&
|
||||
this.commentView.counts.upvotes !==
|
||||
this.commentView.counts.score && (
|
||||
<span className="ms-1">
|
||||
{numToSI(this.commentView.counts.upvotes)}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{this.props.enableDownvotes && (
|
||||
<button
|
||||
className={`btn btn-link btn-animate ${
|
||||
this.commentView.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.commentView.my_vote === -1}
|
||||
>
|
||||
{this.state.downvoteLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<>
|
||||
<Icon icon="arrow-down1" classes="icon-inline" />
|
||||
{showScores() &&
|
||||
this.commentView.counts.upvotes !==
|
||||
this.commentView.counts.score && (
|
||||
<span className="ms-1">
|
||||
{numToSI(this.commentView.counts.downvotes)}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
<VoteButtonsCompact
|
||||
voteContentType={VoteContentType.Comment}
|
||||
id={this.commentView.comment.id}
|
||||
onVote={this.props.onCommentVote}
|
||||
enableDownvotes={this.props.enableDownvotes}
|
||||
counts={this.commentView.counts}
|
||||
my_vote={this.commentView.my_vote}
|
||||
/>
|
||||
<button
|
||||
className="btn btn-link btn-animate text-muted"
|
||||
onClick={linkEvent(this, this.handleReplyClick)}
|
||||
|
@ -1483,24 +1426,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
});
|
||||
}
|
||||
|
||||
handleUpvote(i: CommentNode) {
|
||||
i.setState({ upvoteLoading: true });
|
||||
i.props.onCommentVote({
|
||||
comment_id: i.commentId,
|
||||
score: newVote(VoteType.Upvote, i.commentView.my_vote),
|
||||
auth: myAuthRequired(),
|
||||
});
|
||||
}
|
||||
|
||||
handleDownvote(i: CommentNode) {
|
||||
i.setState({ downvoteLoading: true });
|
||||
i.props.onCommentVote({
|
||||
comment_id: i.commentId,
|
||||
score: newVote(VoteType.Downvote, i.commentView.my_vote),
|
||||
auth: myAuthRequired(),
|
||||
});
|
||||
}
|
||||
|
||||
handleBlockPerson(i: CommentNode) {
|
||||
i.setState({ blockPersonLoading: true });
|
||||
i.props.onBlockPerson({
|
||||
|
|
225
src/shared/components/common/vote-buttons.tsx
Normal file
225
src/shared/components/common/vote-buttons.tsx
Normal file
|
@ -0,0 +1,225 @@
|
|||
import { myAuthRequired, newVote, showScores } from "@utils/app";
|
||||
import { numToSI } from "@utils/helpers";
|
||||
import classNames from "classnames";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import {
|
||||
CommentAggregates,
|
||||
CreateCommentLike,
|
||||
CreatePostLike,
|
||||
PostAggregates,
|
||||
} from "lemmy-js-client";
|
||||
import { VoteContentType, VoteType } from "../../interfaces";
|
||||
import { I18NextService } from "../../services";
|
||||
import { Icon, Spinner } from "../common/icon";
|
||||
|
||||
interface VoteButtonsProps {
|
||||
voteContentType: VoteContentType;
|
||||
id: number;
|
||||
onVote: (i: CreateCommentLike | CreatePostLike) => void;
|
||||
enableDownvotes?: boolean;
|
||||
counts: CommentAggregates | PostAggregates;
|
||||
my_vote?: number;
|
||||
}
|
||||
|
||||
interface VoteButtonsState {
|
||||
upvoteLoading: boolean;
|
||||
downvoteLoading: boolean;
|
||||
}
|
||||
|
||||
const tippy = (counts: CommentAggregates | PostAggregates): string => {
|
||||
const points = I18NextService.i18n.t("number_of_points", {
|
||||
count: Number(counts.score),
|
||||
formattedCount: Number(counts.score),
|
||||
});
|
||||
|
||||
const upvotes = I18NextService.i18n.t("number_of_upvotes", {
|
||||
count: Number(counts.upvotes),
|
||||
formattedCount: Number(counts.upvotes),
|
||||
});
|
||||
|
||||
const downvotes = I18NextService.i18n.t("number_of_downvotes", {
|
||||
count: Number(counts.downvotes),
|
||||
formattedCount: Number(counts.downvotes),
|
||||
});
|
||||
|
||||
return `${points} • ${upvotes} • ${downvotes}`;
|
||||
};
|
||||
|
||||
const handleUpvote = (i: VoteButtons) => {
|
||||
i.setState({ upvoteLoading: true });
|
||||
|
||||
switch (i.props.voteContentType) {
|
||||
case VoteContentType.Comment:
|
||||
i.props.onVote({
|
||||
comment_id: i.props.id,
|
||||
score: newVote(VoteType.Upvote, i.props.my_vote),
|
||||
auth: myAuthRequired(),
|
||||
});
|
||||
break;
|
||||
case VoteContentType.Post:
|
||||
default:
|
||||
i.props.onVote({
|
||||
post_id: i.props.id,
|
||||
score: newVote(VoteType.Upvote, i.props.my_vote),
|
||||
auth: myAuthRequired(),
|
||||
});
|
||||
}
|
||||
|
||||
i.setState({ upvoteLoading: false });
|
||||
};
|
||||
|
||||
const handleDownvote = (i: VoteButtons) => {
|
||||
i.setState({ downvoteLoading: true });
|
||||
switch (i.props.voteContentType) {
|
||||
case VoteContentType.Comment:
|
||||
i.props.onVote({
|
||||
comment_id: i.props.id,
|
||||
score: newVote(VoteType.Downvote, i.props.my_vote),
|
||||
auth: myAuthRequired(),
|
||||
});
|
||||
break;
|
||||
case VoteContentType.Post:
|
||||
default:
|
||||
i.props.onVote({
|
||||
post_id: i.props.id,
|
||||
score: newVote(VoteType.Downvote, i.props.my_vote),
|
||||
auth: myAuthRequired(),
|
||||
});
|
||||
}
|
||||
i.setState({ downvoteLoading: false });
|
||||
};
|
||||
|
||||
export class VoteButtonsCompact extends Component<
|
||||
VoteButtonsProps,
|
||||
VoteButtonsState
|
||||
> {
|
||||
state: VoteButtonsState = {
|
||||
upvoteLoading: false,
|
||||
downvoteLoading: false,
|
||||
};
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn-animate btn py-0 px-1 ${
|
||||
this.props.my_vote === 1 ? "text-info" : "text-muted"
|
||||
}`}
|
||||
data-tippy-content={tippy(this.props.counts)}
|
||||
onClick={linkEvent(this, handleUpvote)}
|
||||
aria-label={I18NextService.i18n.t("upvote")}
|
||||
aria-pressed={this.props.my_vote === 1}
|
||||
>
|
||||
{this.state.upvoteLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<>
|
||||
<Icon icon="arrow-up1" classes="icon-inline small" />
|
||||
{showScores() && (
|
||||
<span className="ms-2">
|
||||
{numToSI(this.props.counts.upvotes)}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{this.props.enableDownvotes && (
|
||||
<button
|
||||
type="button"
|
||||
className={`ms-2 btn-animate btn py-0 px-1 ${
|
||||
this.props.my_vote === -1 ? "text-danger" : "text-muted"
|
||||
}`}
|
||||
onClick={linkEvent(this, handleDownvote)}
|
||||
data-tippy-content={tippy(this.props.counts)}
|
||||
aria-label={I18NextService.i18n.t("downvote")}
|
||||
aria-pressed={this.props.my_vote === -1}
|
||||
>
|
||||
{this.state.downvoteLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<>
|
||||
<Icon icon="arrow-down1" classes="icon-inline small" />
|
||||
{showScores() && (
|
||||
<span
|
||||
className={classNames("ms-2", {
|
||||
invisible: this.props.counts.downvotes === 0,
|
||||
})}
|
||||
>
|
||||
{numToSI(this.props.counts.downvotes)}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
|
||||
state: VoteButtonsState = {
|
||||
upvoteLoading: false,
|
||||
downvoteLoading: false,
|
||||
};
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={`vote-bar col-1 pe-0 small text-center`}>
|
||||
<button
|
||||
type="button"
|
||||
className={`btn-animate btn btn-link p-0 ${
|
||||
this.props.my_vote == 1 ? "text-info" : "text-muted"
|
||||
}`}
|
||||
onClick={linkEvent(this, handleUpvote)}
|
||||
data-tippy-content={I18NextService.i18n.t("upvote")}
|
||||
aria-label={I18NextService.i18n.t("upvote")}
|
||||
aria-pressed={this.props.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={tippy(this.props.counts)}
|
||||
>
|
||||
{numToSI(this.props.counts.score)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-1"></div>
|
||||
)}
|
||||
{this.props.enableDownvotes && (
|
||||
<button
|
||||
type="button"
|
||||
className={`btn-animate btn btn-link p-0 ${
|
||||
this.props.my_vote == -1 ? "text-danger" : "text-muted"
|
||||
}`}
|
||||
onClick={linkEvent(this, handleDownvote)}
|
||||
data-tippy-content={I18NextService.i18n.t("downvote")}
|
||||
aria-label={I18NextService.i18n.t("downvote")}
|
||||
aria-pressed={this.props.my_vote === -1}
|
||||
>
|
||||
{this.state.downvoteLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Icon icon="arrow-down1" classes="downvote" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -1,11 +1,10 @@
|
|||
import { myAuthRequired, newVote, showScores } from "@utils/app";
|
||||
import { myAuthRequired } 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 {
|
||||
|
@ -44,13 +43,19 @@ import {
|
|||
TransferCommunity,
|
||||
} from "lemmy-js-client";
|
||||
import { relTags } from "../../config";
|
||||
import { BanType, PostFormParams, PurgeType, VoteType } from "../../interfaces";
|
||||
import {
|
||||
BanType,
|
||||
PostFormParams,
|
||||
PurgeType,
|
||||
VoteContentType,
|
||||
} from "../../interfaces";
|
||||
import { mdNoImages, mdToHtml, mdToHtmlInline } from "../../markdown";
|
||||
import { I18NextService, UserService } from "../../services";
|
||||
import { setupTippy } from "../../tippy";
|
||||
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";
|
||||
|
@ -78,8 +83,6 @@ interface PostListingState {
|
|||
showBody: boolean;
|
||||
showReportDialog: boolean;
|
||||
reportReason?: string;
|
||||
upvoteLoading: boolean;
|
||||
downvoteLoading: boolean;
|
||||
reportLoading: boolean;
|
||||
blockLoading: boolean;
|
||||
lockLoading: boolean;
|
||||
|
@ -142,8 +145,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
showMoreMobile: false,
|
||||
showBody: false,
|
||||
showReportDialog: false,
|
||||
upvoteLoading: false,
|
||||
downvoteLoading: false,
|
||||
purgeLoading: false,
|
||||
reportLoading: false,
|
||||
blockLoading: false,
|
||||
|
@ -169,8 +170,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
componentWillReceiveProps(nextProps: PostListingProps) {
|
||||
if (this.props !== nextProps) {
|
||||
this.setState({
|
||||
upvoteLoading: false,
|
||||
downvoteLoading: false,
|
||||
purgeLoading: false,
|
||||
reportLoading: false,
|
||||
blockLoading: false,
|
||||
|
@ -424,55 +423,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
|
@ -652,7 +602,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<Icon icon="fedilink" inline />
|
||||
</a>
|
||||
)}
|
||||
{mobile && !this.props.viewOnly && this.mobileVotes}
|
||||
{mobile && !this.props.viewOnly && (
|
||||
<VoteButtonsCompact
|
||||
voteContentType={VoteContentType.Post}
|
||||
id={this.postView.post.id}
|
||||
onVote={this.props.onPostVote}
|
||||
enableDownvotes={this.props.enableDownvotes}
|
||||
counts={this.postView.counts}
|
||||
my_vote={this.postView.my_vote}
|
||||
/>
|
||||
)}
|
||||
{UserService.Instance.myUserInfo &&
|
||||
!this.props.viewOnly &&
|
||||
this.postActions()}
|
||||
|
@ -782,69 +741,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
: 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
|
||||
|
@ -943,7 +839,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
<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 />
|
||||
|
@ -1446,7 +1341,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
{this.postTitleLine()}
|
||||
</div>
|
||||
<div className="col-4">
|
||||
{/* Post body prev or thumbnail */}
|
||||
{/* Post thumbnail */}
|
||||
{!this.state.imageExpanded && this.thumbnail()}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1493,7 +1388,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
{/* The larger view*/}
|
||||
<div className="d-none d-sm-block">
|
||||
<article className="row post-container">
|
||||
{!this.props.viewOnly && this.voteBar()}
|
||||
{!this.props.viewOnly && (
|
||||
<VoteButtons
|
||||
voteContentType={VoteContentType.Post}
|
||||
id={this.postView.post.id}
|
||||
onVote={this.props.onPostVote}
|
||||
enableDownvotes={this.props.enableDownvotes}
|
||||
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>
|
||||
|
@ -1858,24 +1762,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
setupTippy();
|
||||
}
|
||||
|
||||
handleUpvote(i: PostListing) {
|
||||
i.setState({ upvoteLoading: true });
|
||||
i.props.onPostVote({
|
||||
post_id: i.postView.post.id,
|
||||
score: newVote(VoteType.Upvote, i.props.post_view.my_vote),
|
||||
auth: myAuthRequired(),
|
||||
});
|
||||
}
|
||||
|
||||
handleDownvote(i: PostListing) {
|
||||
i.setState({ downvoteLoading: true });
|
||||
i.props.onPostVote({
|
||||
post_id: i.postView.post.id,
|
||||
score: newVote(VoteType.Downvote, i.props.post_view.my_vote),
|
||||
auth: myAuthRequired(),
|
||||
});
|
||||
}
|
||||
|
||||
get pointsTippy(): string {
|
||||
const points = I18NextService.i18n.t("number_of_points", {
|
||||
count: Number(this.postView.counts.score),
|
||||
|
|
|
@ -77,6 +77,11 @@ export enum VoteType {
|
|||
Downvote,
|
||||
}
|
||||
|
||||
export enum VoteContentType {
|
||||
Post,
|
||||
Comment,
|
||||
}
|
||||
|
||||
export interface CommentNodeI {
|
||||
comment_view: CommentView;
|
||||
children: Array<CommentNodeI>;
|
||||
|
|
Loading…
Reference in a new issue