mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-08 09:34:16 +00:00
Showing / hiding scores based on setting. Fixes #241
This commit is contained in:
parent
0d5228d050
commit
6f1fb6b3bf
|
@ -1 +1 @@
|
|||
Subproject commit f05562455f5260d266d72b6130abb6f633e88a02
|
||||
Subproject commit f36cf2332878286378303d0ce9629728b3889ac9
|
|
@ -68,7 +68,7 @@
|
|||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"husky": "^6.0.0",
|
||||
"iso-639-1": "^2.1.9",
|
||||
"lemmy-js-client": "0.11.0-rc.4",
|
||||
"lemmy-js-client": "0.11.0-rc.6",
|
||||
"lint-staged": "^10.5.4",
|
||||
"mini-css-extract-plugin": "^1.4.1",
|
||||
"node-fetch": "^2.6.1",
|
||||
|
|
|
@ -29,6 +29,7 @@ import {
|
|||
colorList,
|
||||
wsClient,
|
||||
authField,
|
||||
showScores,
|
||||
} from "../utils";
|
||||
import moment from "moment";
|
||||
import { MomentTime } from "./moment-time";
|
||||
|
@ -200,21 +201,25 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
</button>
|
||||
{/* This is an expanding spacer for mobile */}
|
||||
<div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div>
|
||||
<a
|
||||
className={`unselectable pointer ${this.scoreColor}`}
|
||||
onClick={linkEvent(node, this.handleCommentUpvote)}
|
||||
data-tippy-content={this.pointsTippy}
|
||||
>
|
||||
<span
|
||||
class="mr-1 font-weight-bold"
|
||||
aria-label={i18n.t("number_of_points", {
|
||||
count: this.state.score,
|
||||
})}
|
||||
>
|
||||
{this.state.score}
|
||||
</span>
|
||||
</a>
|
||||
<span className="mr-1">•</span>
|
||||
{showScores() && (
|
||||
<>
|
||||
<a
|
||||
className={`unselectable pointer ${this.scoreColor}`}
|
||||
onClick={linkEvent(node, this.handleCommentUpvote)}
|
||||
data-tippy-content={this.pointsTippy}
|
||||
>
|
||||
<span
|
||||
class="mr-1 font-weight-bold"
|
||||
aria-label={i18n.t("number_of_points", {
|
||||
count: this.state.score,
|
||||
})}
|
||||
>
|
||||
{this.state.score}
|
||||
</span>
|
||||
</a>
|
||||
<span className="mr-1">•</span>
|
||||
</>
|
||||
)}
|
||||
<span>
|
||||
<MomentTime data={cv.comment} />
|
||||
</span>
|
||||
|
@ -281,9 +286,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
aria-label={i18n.t("upvote")}
|
||||
>
|
||||
<Icon icon="arrow-up1" classes="icon-inline" />
|
||||
{this.state.upvotes !== this.state.score && (
|
||||
<span class="ml-1">{this.state.upvotes}</span>
|
||||
)}
|
||||
{showScores() &&
|
||||
this.state.upvotes !== this.state.score && (
|
||||
<span class="ml-1">{this.state.upvotes}</span>
|
||||
)}
|
||||
</button>
|
||||
{this.props.enableDownvotes && (
|
||||
<button
|
||||
|
@ -297,9 +303,10 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
aria-label={i18n.t("downvote")}
|
||||
>
|
||||
<Icon icon="arrow-down1" classes="icon-inline" />
|
||||
{this.state.upvotes !== this.state.score && (
|
||||
<span class="ml-1">{this.state.downvotes}</span>
|
||||
)}
|
||||
{showScores() &&
|
||||
this.state.upvotes !== this.state.score && (
|
||||
<span class="ml-1">{this.state.downvotes}</span>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
|
|
|
@ -108,15 +108,6 @@ export class Person extends Component<any, PersonState> {
|
|||
sort: Person.getSortTypeFromProps(this.props.match.sort),
|
||||
page: Person.getPageFromProps(this.props.match.page),
|
||||
saveUserSettingsForm: {
|
||||
show_nsfw: null,
|
||||
theme: null,
|
||||
default_sort_type: null,
|
||||
default_listing_type: null,
|
||||
lang: null,
|
||||
show_avatars: null,
|
||||
send_notifications_to_email: null,
|
||||
bio: null,
|
||||
display_name: null,
|
||||
auth: authField(false),
|
||||
},
|
||||
changePasswordForm: {
|
||||
|
@ -773,6 +764,23 @@ export class Person extends Component<any, PersonState> {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
id="user-show-scores"
|
||||
type="checkbox"
|
||||
checked={this.state.saveUserSettingsForm.show_scores}
|
||||
onChange={linkEvent(
|
||||
this,
|
||||
this.handleUserSettingsShowScoresChange
|
||||
)}
|
||||
/>
|
||||
<label class="form-check-label" htmlFor="user-show-scores">
|
||||
{i18n.t("show_scores")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input
|
||||
|
@ -963,6 +971,13 @@ export class Person extends Component<any, PersonState> {
|
|||
i.setState(i.state);
|
||||
}
|
||||
|
||||
handleUserSettingsShowScoresChange(i: Person, event: any) {
|
||||
i.state.saveUserSettingsForm.show_scores = event.target.checked;
|
||||
UserService.Instance.localUserView.local_user.show_scores =
|
||||
event.target.checked; // Just for instant updates
|
||||
i.setState(i.state);
|
||||
}
|
||||
|
||||
handleUserSettingsSendNotificationsToEmailChange(i: Person, event: any) {
|
||||
i.state.saveUserSettingsForm.send_notifications_to_email =
|
||||
event.target.checked;
|
||||
|
@ -1134,6 +1149,8 @@ export class Person extends Component<any, PersonState> {
|
|||
UserService.Instance.localUserView.person.display_name;
|
||||
this.state.saveUserSettingsForm.show_avatars =
|
||||
UserService.Instance.localUserView.local_user.show_avatars;
|
||||
this.state.saveUserSettingsForm.show_scores =
|
||||
UserService.Instance.localUserView.local_user.show_scores;
|
||||
this.state.saveUserSettingsForm.email =
|
||||
UserService.Instance.localUserView.local_user.email;
|
||||
this.state.saveUserSettingsForm.bio =
|
||||
|
|
|
@ -39,6 +39,7 @@ import {
|
|||
previewLines,
|
||||
wsClient,
|
||||
authField,
|
||||
showScores,
|
||||
} from "../utils";
|
||||
import { i18n } from "../i18next";
|
||||
import { externalHost } from "../env";
|
||||
|
@ -346,12 +347,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
>
|
||||
<Icon icon="arrow-up1" classes="upvote" />
|
||||
</button>
|
||||
<div
|
||||
class={`unselectable pointer font-weight-bold text-muted px-1`}
|
||||
data-tippy-content={this.pointsTippy}
|
||||
>
|
||||
{this.state.score}
|
||||
</div>
|
||||
{showScores() ? (
|
||||
<div
|
||||
class={`unselectable pointer font-weight-bold text-muted px-1`}
|
||||
data-tippy-content={this.pointsTippy}
|
||||
>
|
||||
{this.state.score}
|
||||
</div>
|
||||
) : (
|
||||
<div class="p-1"></div>
|
||||
)}
|
||||
{this.props.enableDownvotes && (
|
||||
<button
|
||||
className={`btn-animate btn btn-link p-0 ${
|
||||
|
@ -477,7 +482,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
</button>
|
||||
{!mobile && (
|
||||
<>
|
||||
{this.state.downvotes !== 0 && (
|
||||
{this.state.downvotes !== 0 && showScores() && (
|
||||
<button
|
||||
class="btn text-muted py-0 pr-0"
|
||||
data-tippy-content={this.pointsTippy}
|
||||
|
@ -513,32 +518,55 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
{mobile && (
|
||||
<>
|
||||
<div>
|
||||
<button
|
||||
className={`btn-animate btn py-0 px-1 ${
|
||||
this.state.my_vote == 1 ? "text-info" : "text-muted"
|
||||
}`}
|
||||
data-tippy-content={this.pointsTippy}
|
||||
onClick={linkEvent(this, this.handlePostLike)}
|
||||
aria-label={i18n.t("upvote")}
|
||||
>
|
||||
<Icon icon="arrow-up1" classes="icon-inline small mr-2" />
|
||||
{this.state.upvotes}
|
||||
</button>
|
||||
{this.props.enableDownvotes && (
|
||||
{showScores() ? (
|
||||
<button
|
||||
className={`ml-2 btn-animate btn py-0 pl-1 ${
|
||||
this.state.my_vote == -1 ? "text-danger" : "text-muted"
|
||||
className={`btn-animate btn py-0 px-1 ${
|
||||
this.state.my_vote == 1 ? "text-info" : "text-muted"
|
||||
}`}
|
||||
onClick={linkEvent(this, this.handlePostDisLike)}
|
||||
data-tippy-content={this.pointsTippy}
|
||||
aria-label={i18n.t("downvote")}
|
||||
onClick={linkEvent(this, this.handlePostLike)}
|
||||
aria-label={i18n.t("upvote")}
|
||||
>
|
||||
<Icon icon="arrow-down1" classes="icon-inline small mr-2" />
|
||||
{this.state.downvotes !== 0 && (
|
||||
<span>{this.state.downvotes}</span>
|
||||
)}
|
||||
<Icon icon="arrow-up1" classes="icon-inline small mr-2" />
|
||||
{this.state.upvotes}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className={`btn-animate btn py-0 px-1 ${
|
||||
this.state.my_vote == 1 ? "text-info" : "text-muted"
|
||||
}`}
|
||||
onClick={linkEvent(this, this.handlePostLike)}
|
||||
aria-label={i18n.t("upvote")}
|
||||
>
|
||||
<Icon icon="arrow-up1" classes="icon-inline small" />
|
||||
</button>
|
||||
)}
|
||||
{this.props.enableDownvotes &&
|
||||
(showScores() ? (
|
||||
<button
|
||||
className={`ml-2 btn-animate btn py-0 pl-1 ${
|
||||
this.state.my_vote == -1 ? "text-danger" : "text-muted"
|
||||
}`}
|
||||
onClick={linkEvent(this, this.handlePostDisLike)}
|
||||
data-tippy-content={this.pointsTippy}
|
||||
aria-label={i18n.t("downvote")}
|
||||
>
|
||||
<Icon icon="arrow-down1" classes="icon-inline small mr-2" />
|
||||
{this.state.downvotes !== 0 && (
|
||||
<span>{this.state.downvotes}</span>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
className={`ml-2 btn-animate btn py-0 pl-1 ${
|
||||
this.state.my_vote == -1 ? "text-danger" : "text-muted"
|
||||
}`}
|
||||
onClick={linkEvent(this, this.handlePostDisLike)}
|
||||
aria-label={i18n.t("downvote")}
|
||||
>
|
||||
<Icon icon="arrow-down1" classes="icon-inline small" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-link btn-animate text-muted py-0 pl-1 pr-0"
|
||||
|
|
|
@ -520,6 +520,13 @@ export function showAvatars(): boolean {
|
|||
);
|
||||
}
|
||||
|
||||
export function showScores(): boolean {
|
||||
return (
|
||||
UserService.Instance.localUserView?.local_user.show_scores ||
|
||||
!UserService.Instance.localUserView
|
||||
);
|
||||
}
|
||||
|
||||
export function isCakeDay(published: string): boolean {
|
||||
// moment(undefined) or moment.utc(undefined) returns the current date/time
|
||||
// moment(null) or moment.utc(null) returns null
|
||||
|
|
|
@ -5125,10 +5125,10 @@ lcid@^1.0.0:
|
|||
dependencies:
|
||||
invert-kv "^1.0.0"
|
||||
|
||||
lemmy-js-client@0.11.0-rc.4:
|
||||
version "0.11.0-rc.4"
|
||||
resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.4.tgz#bd5652538309efac686aa10329b3a04fac6f85c2"
|
||||
integrity sha512-7pCEEWkmaOoxxJ9+QSTVQFwThdjIWFp/mSs4c82TYs6tKAJsmfqzBkvSK9QVpSA2OOeYVWoThklKcrlmNV2d6A==
|
||||
lemmy-js-client@0.11.0-rc.6:
|
||||
version "0.11.0-rc.6"
|
||||
resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.6.tgz#897671c8e24be8ba2a6074efc63264c421969380"
|
||||
integrity sha512-/AIws5bidcNIi8wSzJx7mwo5Ip2u78s4/bMdEyfEqWKWqdNwEKV/6eYnyThA3j9gYXjd8ty731s0l0kSs/vmhA==
|
||||
|
||||
levn@^0.4.1:
|
||||
version "0.4.1"
|
||||
|
|
Loading…
Reference in a new issue