Manti
1 year ago
committed by
GitHub
parent
6300198a54
commit
3e3d05fc26
@ -0,0 +1,12 @@
|
|||||||
|
.vc-expandableheader-center-flex {
|
||||||
|
display: flex;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-expandableheader-btn {
|
||||||
|
all: unset;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2023 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 { classNameFactory } from "@api/Styles";
|
||||||
|
import { Text, Tooltip, useState } from "@webpack/common";
|
||||||
|
export const cl = classNameFactory("vc-expandableheader-");
|
||||||
|
import "./ExpandableHeader.css";
|
||||||
|
|
||||||
|
export interface ExpandableHeaderProps {
|
||||||
|
onMoreClick?: () => void;
|
||||||
|
moreTooltipText?: string;
|
||||||
|
onDropDownClick?: (state: boolean) => void;
|
||||||
|
defaultState?: boolean;
|
||||||
|
headerText: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
buttons?: React.ReactNode[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ExpandableHeader({ children, onMoreClick, buttons, moreTooltipText, defaultState = false, onDropDownClick, headerText }: ExpandableHeaderProps) {
|
||||||
|
const [showContent, setShowContent] = useState(defaultState);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div style={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
marginBottom: "8px"
|
||||||
|
}}>
|
||||||
|
<Text
|
||||||
|
tag="h2"
|
||||||
|
variant="eyebrow"
|
||||||
|
style={{
|
||||||
|
color: "var(--header-primary)",
|
||||||
|
display: "inline"
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{headerText}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<div className={cl("center-flex")}>
|
||||||
|
{
|
||||||
|
buttons ?? null
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
onMoreClick && // only show more button if callback is provided
|
||||||
|
<Tooltip text={moreTooltipText}>
|
||||||
|
{tooltipProps => (
|
||||||
|
<button
|
||||||
|
{...tooltipProps}
|
||||||
|
className={cl("btn")}
|
||||||
|
onClick={onMoreClick}>
|
||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path fill="var(--text-normal)" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</Tooltip>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
<Tooltip text={showContent ? "Hide " + headerText : "Show " + headerText}>
|
||||||
|
{tooltipProps => (
|
||||||
|
<button
|
||||||
|
{...tooltipProps}
|
||||||
|
className={cl("btn")}
|
||||||
|
onClick={() => {
|
||||||
|
setShowContent(v => !v);
|
||||||
|
onDropDownClick?.(showContent);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
transform={showContent ? "scale(1 -1)" : "scale(1 1)"}
|
||||||
|
>
|
||||||
|
<path fill="var(--text-normal)" d="M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{showContent && children}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,104 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2023 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 ErrorBoundary from "@components/ErrorBoundary";
|
||||||
|
import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
|
||||||
|
import { useForceUpdater } from "@utils/react";
|
||||||
|
import { Paginator, Text, useRef, useState } from "@webpack/common";
|
||||||
|
|
||||||
|
import { Response, REVIEWS_PER_PAGE } from "../reviewDbApi";
|
||||||
|
import { settings } from "../settings";
|
||||||
|
import { cl } from "../utils";
|
||||||
|
import ReviewComponent from "./ReviewComponent";
|
||||||
|
import ReviewsView, { ReviewsInputComponent } from "./ReviewsView";
|
||||||
|
|
||||||
|
function Modal({ modalProps, discordId, name }: { modalProps: any; discordId: string; name: string; }) {
|
||||||
|
const [data, setData] = useState<Response>();
|
||||||
|
const [signal, refetch] = useForceUpdater(true);
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const reviewCount = data?.reviewCount;
|
||||||
|
const ownReview = data?.reviews.find(r => r.sender.discordID === settings.store.user?.discordID);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ErrorBoundary>
|
||||||
|
<ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
|
||||||
|
<ModalHeader>
|
||||||
|
<Text variant="heading-lg/semibold" className={cl("modal-header")}>
|
||||||
|
{name}'s Reviews
|
||||||
|
{!!reviewCount && <span> ({reviewCount} Reviews)</span>}
|
||||||
|
</Text>
|
||||||
|
<ModalCloseButton onClick={modalProps.onClose} />
|
||||||
|
</ModalHeader>
|
||||||
|
|
||||||
|
<ModalContent scrollerRef={ref}>
|
||||||
|
<div className={cl("modal-reviews")}>
|
||||||
|
<ReviewsView
|
||||||
|
discordId={discordId}
|
||||||
|
name={name}
|
||||||
|
page={page}
|
||||||
|
refetchSignal={signal}
|
||||||
|
onFetchReviews={setData}
|
||||||
|
scrollToTop={() => ref.current?.scrollTo({ top: 0, behavior: "smooth" })}
|
||||||
|
hideOwnReview
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ModalContent>
|
||||||
|
|
||||||
|
<ModalFooter className={cl("modal-footer")}>
|
||||||
|
<div>
|
||||||
|
{ownReview && (
|
||||||
|
<ReviewComponent
|
||||||
|
refetch={refetch}
|
||||||
|
review={ownReview}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<ReviewsInputComponent
|
||||||
|
isAuthor={ownReview != null}
|
||||||
|
discordId={discordId}
|
||||||
|
name={name}
|
||||||
|
refetch={refetch}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{!!reviewCount && (
|
||||||
|
<Paginator
|
||||||
|
currentPage={page}
|
||||||
|
maxVisiblePages={5}
|
||||||
|
pageSize={REVIEWS_PER_PAGE}
|
||||||
|
totalCount={reviewCount}
|
||||||
|
onPageChange={setPage}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ModalFooter>
|
||||||
|
</ModalRoot>
|
||||||
|
</ErrorBoundary>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function openReviewsModal(discordId: string, name: string) {
|
||||||
|
openModal(props => (
|
||||||
|
<Modal
|
||||||
|
modalProps={props}
|
||||||
|
discordId={discordId}
|
||||||
|
name={name}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
}
|
||||||
@ -1,26 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 {
|
|
||||||
name: string;
|
|
||||||
description: string;
|
|
||||||
icon: string;
|
|
||||||
redirectURL : string;
|
|
||||||
type: number;
|
|
||||||
}
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
/*
|
|
||||||
* 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 { Badge } from "./Badge";
|
|
||||||
|
|
||||||
export interface Sender {
|
|
||||||
id : number,
|
|
||||||
discordID: string,
|
|
||||||
username: string,
|
|
||||||
profilePhoto: string,
|
|
||||||
badges: Badge[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Review {
|
|
||||||
comment: string,
|
|
||||||
id: number,
|
|
||||||
star: number,
|
|
||||||
sender: Sender,
|
|
||||||
timestamp: number
|
|
||||||
}
|
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2023 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 { definePluginSettings } from "@api/Settings";
|
||||||
|
import { OptionType } from "@utils/types";
|
||||||
|
import { Button } from "@webpack/common";
|
||||||
|
|
||||||
|
import { ReviewDBUser } from "./entities";
|
||||||
|
import { authorize } from "./utils";
|
||||||
|
|
||||||
|
export const settings = definePluginSettings({
|
||||||
|
authorize: {
|
||||||
|
type: OptionType.COMPONENT,
|
||||||
|
description: "Authorize with ReviewDB",
|
||||||
|
component: () => (
|
||||||
|
<Button onClick={authorize}>
|
||||||
|
Authorize with ReviewDB
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
notifyReviews: {
|
||||||
|
type: OptionType.BOOLEAN,
|
||||||
|
description: "Notify about new reviews on startup",
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
showWarning: {
|
||||||
|
type: OptionType.BOOLEAN,
|
||||||
|
description: "Display warning to be respectful at the top of the reviews list",
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
hideTimestamps: {
|
||||||
|
type: OptionType.BOOLEAN,
|
||||||
|
description: "Hide timestamps on reviews",
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
website: {
|
||||||
|
type: OptionType.COMPONENT,
|
||||||
|
description: "ReviewDB website",
|
||||||
|
component: () => (
|
||||||
|
<Button onClick={() => {
|
||||||
|
let url = "https://reviewdb.mantikafasi.dev/";
|
||||||
|
if (settings.store.token)
|
||||||
|
url += "/api/redirect?token=" + encodeURIComponent(settings.store.token);
|
||||||
|
|
||||||
|
VencordNative.native.openExternal(url);
|
||||||
|
}}>
|
||||||
|
ReviewDB website
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
supportServer: {
|
||||||
|
type: OptionType.COMPONENT,
|
||||||
|
description: "ReviewDB Support Server",
|
||||||
|
component: () => (
|
||||||
|
<Button onClick={() => {
|
||||||
|
VencordNative.native.openExternal("https://discord.gg/eWPBSbvznt");
|
||||||
|
}}>
|
||||||
|
ReviewDB Support Server
|
||||||
|
</Button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}).withPrivateSettings<{
|
||||||
|
token?: string;
|
||||||
|
user?: ReviewDBUser;
|
||||||
|
lastReviewId?: number;
|
||||||
|
reviewsDropdownState?: boolean;
|
||||||
|
}>();
|
||||||
@ -1,3 +1,51 @@
|
|||||||
[class|="section"]:not([class|="lastSection"]) + .vc-reviewdb-view {
|
[class|="section"]:not([class|="lastSection"]) + .vc-rdb-view {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vc-rdb-badge {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-rdb-input {
|
||||||
|
margin-top: 6px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
resize: none;
|
||||||
|
overflow: hidden;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--profile-message-input-border-color);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-rdb-placeholder {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-rdb-modal-footer {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-rdb-modal-footer > div {
|
||||||
|
width: 100%;
|
||||||
|
margin: 6px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-rdb-modal-footer .vc-rdb-input {
|
||||||
|
margin-bottom: 0;
|
||||||
|
background: var(--input-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-rdb-modal-footer [class|="pageControlContainer"] {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-rdb-modal-header {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-rdb-modal-reviews {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue