LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-30 00:01:15 +00:00
Code Issues Projects Releases Wiki Activity

fix: Revert to old mobile vote style

Browse source
This commit is contained in:
Jay Sitter 2023-06-22 14:02:15 -04:00
parent 7c13b8dba1
commit 443c128e05
1 changed files with 45 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/shared/components/common/vote-buttons.tsx
View file

@ -1,5 +1,6 @@
import { showScores } from "@utils/app"; import { showScores } from "@utils/app";
import { numToSI } from "@utils/helpers"; import { numToSI } from "@utils/helpers";
import classNames from "classnames";
import { Component, linkEvent } from "inferno"; import { Component, linkEvent } from "inferno";
import { CommentAggregates, PostAggregates } from "lemmy-js-client"; import { CommentAggregates, PostAggregates } from "lemmy-js-client";
import { I18NextService } from "../../services"; import { I18NextService } from "../../services";
@ -60,68 +61,67 @@ export class VoteButtonsCompact extends Component<
render() { render() {
return ( return (
<> <div>
<div className="input-group input-group-sm w-auto"> <button
className={`btn-animate btn py-0 px-1 ${
this.props.my_vote === 1 ? "text-info" : "text-muted"
}`}
{...this.tippy}
onClick={linkEvent(this.props.postListing, this.props.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 <button
className={`btn btn-sm btn-animate btn-outline-primary rounded-start py-0 ${ className={`ms-2 btn-animate btn py-0 px-1 ${
this.props.my_vote === 1 ? "text-info" : "text-muted" this.props.my_vote === -1 ? "text-danger" : "text-muted"
}`} }`}
onClick={linkEvent(
this.props.postListing,
this.props.handleDownvote
)}
{...this.tippy} {...this.tippy}
onClick={linkEvent(this.props.postListing, this.props.handleUpvote)} aria-label={I18NextService.i18n.t("downvote")}
aria-label={I18NextService.i18n.t("upvote")} aria-pressed={this.props.my_vote === -1}
aria-pressed={this.props.my_vote === 1}
> >
{this.state.upvoteLoading ? ( {this.state.downvoteLoading ? (
<Spinner /> <Spinner />
) : ( ) : (
<> <>
<Icon icon="arrow-up1" classes="icon-inline small" /> <Icon icon="arrow-down1" classes="icon-inline small" />
{showScores() && ( {showScores() && (
<span className="ms-2"> <span
{numToSI(this.props.counts.upvotes)} className={classNames("ms-2", {
invisible: this.props.counts.downvotes === 0,
})}
>
{numToSI(this.props.counts.downvotes)}
</span> </span>
)} )}
</> </>
)} )}
</button> </button>
<span className="input-group-text small py-0"> )}
{numToSI(this.props.counts.score)} </div>
</span>
{this.props.enableDownvotes && (
<button
className={`btn btn-sm btn-animate btn-outline-primary rounded-end py-0 ${
this.props.my_vote === -1 ? "text-danger" : "text-muted"
}`}
onClick={linkEvent(
this.props.postListing,
this.props.handleDownvote
)}
{...this.tippy}
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="ms-2">
{numToSI(this.props.counts.downvotes)}
</span>
)}
</>
)}
</button>
)}
</div>
</>
); );
} }
} }
export class VoteButtons extends Component<VotesProps, VotesState> { export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
state: VotesState = { state: VoteButtonsState = {
upvoteLoading: false, upvoteLoading: false,
downvoteLoading: false, downvoteLoading: false,
}; };