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

Showing / hiding scores based on setting. Fixes #241

Browse source
This commit is contained in:
Dessalines 2021-04-09 12:23:30 -04:00
parent 0d5228d050
commit 6f1fb6b3bf
7 changed files with 122 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lemmy-translations

@ -1 +1 @@
Subproject commit f05562455f5260d266d72b6130abb6f633e88a02
Subproject commit f36cf2332878286378303d0ce9629728b3889ac9

2
package.json
View file

@ -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",

49
src/shared/components/comment-node.tsx
View file

@ -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

35
src/shared/components/person.tsx
View file

@ -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 =

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

@ -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"

7
src/shared/utils.ts
View file

@ -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

8
yarn.lock
View file

@ -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"