Make some changes to reviewdb ui and add badges to it (#245)
This commit is contained in:
Manti
GitHub
parent
3efc79224f
commit
47de9fab2e
6 changed files with 126 additions and 43 deletions
45
src/plugins/reviewDB/components/ReviewBadge.tsx
Normal file
45
src/plugins/reviewDB/components/ReviewBadge.tsx
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
/*
|
||||
* Vencord, a modification for Discord's desktop app
|
||||
* Copyright (c) 2022 Vendicated and contributors
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { MaskedLinkStore, Tooltip } from "@webpack/common";
|
||||
|
||||
import { Badge } from "../entities/Badge";
|
||||
|
||||
export default function ReviewBadge(badge: Badge) {
|
||||
return (
|
||||
<Tooltip
|
||||
text={badge.badge_name}>
|
||||
{({ onMouseEnter, onMouseLeave }) => (
|
||||
<img
|
||||
width="24px"
|
||||
height="24px"
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
src={badge.badge_icon}
|
||||
alt={badge.badge_description}
|
||||
style={{ verticalAlign: "middle", marginLeft: "4px" }}
|
||||
onClick={() =>
|
||||
MaskedLinkStore.openUntrustedLink({
|
||||
href: badge.redirect_url,
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
|
@ -24,6 +24,7 @@ import { Review } from "../entities/Review";
|
|||
import { deleteReview, reportReview } from "../Utils/ReviewDBAPI";
|
||||
import { canDeleteReview, openUserProfileModal, showToast } from "../Utils/Utils";
|
||||
import MessageButton from "./MessageButton";
|
||||
import ReviewBadge from "./ReviewBadge";
|
||||
|
||||
export default LazyComponent(() => {
|
||||
// this is terrible, blame mantika
|
||||
|
|
@ -78,24 +79,32 @@ export default LazyComponent(() => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={classes(cozyMessage, message, groupStart, wrapper, cozy, "user-review")}>
|
||||
<div className={contents}>
|
||||
<div className={classes(cozyMessage, wrapper, message, groupStart, cozy, "user-review")} style={
|
||||
{
|
||||
marginLeft: "0px",
|
||||
paddingLeft: "52px",
|
||||
paddingRight: "16px"
|
||||
}
|
||||
}>
|
||||
|
||||
<div className={contents} style={{ paddingLeft: "0px" }}>
|
||||
<img
|
||||
className={classes(avatar, clickable)}
|
||||
style={{ left: "8px" }}
|
||||
onClick={openModal}
|
||||
src={review.profile_photo || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
|
||||
style={{ left: "0px" }}
|
||||
/>
|
||||
<span
|
||||
className={classes(username, clickable)}
|
||||
style={{ color: "var(--text-normal)", right: "8px" }}
|
||||
className={classes(clickable, username)}
|
||||
style={{ color: "var(--channels-default)", fontSize: "14px" }}
|
||||
onClick={() => openModal()}
|
||||
>
|
||||
{review.username}
|
||||
</span>
|
||||
{review.badges.map(badge => <ReviewBadge {...badge} />)}
|
||||
<p
|
||||
className={classes(messageContent, defaultColor)}
|
||||
style={{ fontSize: 15, marginTop: 4, right: "8px" }}
|
||||
style={{ fontSize: 15, marginTop: 4 }}
|
||||
>
|
||||
{review.comment}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -54,44 +54,40 @@ export default function ReviewsView({ userId }: { userId: string; }) {
|
|||
|
||||
return (
|
||||
<div className="ReviewDB">
|
||||
<>
|
||||
<Text
|
||||
tag="h2"
|
||||
variant="eyebrow"
|
||||
style={{
|
||||
paddingLeft: "0px",
|
||||
marginBottom: "12px",
|
||||
color: "var(--header-primary)"
|
||||
}}
|
||||
>
|
||||
User Reviews
|
||||
</Text>
|
||||
{reviews?.map(review =>
|
||||
<ReviewComponent
|
||||
key={review.id}
|
||||
review={review}
|
||||
refetch={dirtyRefetch}
|
||||
/>
|
||||
)}
|
||||
{reviews?.length === 0 && (
|
||||
<Forms.FormText style={{ paddingLeft: "0px", paddingRight: "12px", marginBottom: "12px" }}>
|
||||
Looks like nobody reviewed this user yet. You could be the first!
|
||||
</Forms.FormText>
|
||||
)}
|
||||
<textarea
|
||||
className={classes(Classes.textarea, "enter-comment")}
|
||||
placeholder={"Review @" + UserStore.getUser(userId)?.username ?? ""}
|
||||
onKeyDown={onKeyPress}
|
||||
style={{
|
||||
padding: "12px",
|
||||
marginBottom: "12px",
|
||||
color: "var(--text-normal)",
|
||||
border: "1px solid var(--profile-message-input-border-color)",
|
||||
fontSize: "14px",
|
||||
borderRadius: "3px",
|
||||
}}
|
||||
<Text
|
||||
tag="h2"
|
||||
variant="eyebrow"
|
||||
style={{
|
||||
marginBottom: "12px",
|
||||
color: "var(--header-primary)"
|
||||
}}
|
||||
>
|
||||
User Reviews
|
||||
</Text>
|
||||
{reviews?.map(review =>
|
||||
<ReviewComponent
|
||||
key={review.id}
|
||||
review={review}
|
||||
refetch={dirtyRefetch}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{reviews?.length === 0 && (
|
||||
<Forms.FormText style={{ padding: "12px", paddingTop: "0px", paddingLeft: "4px", fontWeight: "bold", fontStyle: "italic" }}>
|
||||
Looks like nobody reviewed this user yet. You could be the first!
|
||||
</Forms.FormText>
|
||||
)}
|
||||
<textarea
|
||||
className={classes(Classes.textarea.replace("textarea", ""), "enter-comment")}
|
||||
// this produces something like '-_59yqs ...' but since no class exists with that name its fine
|
||||
placeholder={"Review @" + UserStore.getUser(userId)?.username ?? ""}
|
||||
onKeyDown={onKeyPress}
|
||||
style={{
|
||||
marginTop: "6px",
|
||||
resize: "none",
|
||||
marginBottom: "12px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
26
src/plugins/reviewDB/entities/Badge.ts
Normal file
26
src/plugins/reviewDB/entities/Badge.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/*
|
||||
* Vencord, a modification for Discord's desktop app
|
||||
* Copyright (c) 2022 Vendicated and contributors
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
export interface Badge {
|
||||
badge_name: string;
|
||||
badge_description: string;
|
||||
badge_icon: string;
|
||||
redirect_url: string;
|
||||
badge_type: number;
|
||||
}
|
||||
|
|
@ -16,6 +16,8 @@
|
|||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { Badge } from "./Badge";
|
||||
|
||||
export interface Review {
|
||||
comment: string,
|
||||
id: number,
|
||||
|
|
@ -24,4 +26,5 @@ export interface Review {
|
|||
star: number,
|
||||
username: string,
|
||||
profile_photo: string;
|
||||
badges: Badge[];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -290,3 +290,7 @@ export const ContextMenu = mapMangledModuleLazy('type:"CONTEXT_MENU_OPEN"', {
|
|||
options?: { enableSpellCheck?: boolean; }
|
||||
): void;
|
||||
};
|
||||
|
||||
export const MaskedLinkStore = mapMangledModuleLazy('"MaskedLinkStore"', {
|
||||
openUntrustedLink: filters.byCode(".apply(this,arguments)")
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue