mirror of
https://github.com/Equicord/Equicord.git
synced 2025-01-18 21:33:35 -05:00
update(plugin): fix themeLibrary
This commit is contained in:
verysillycat
parent
0bdc1f9aaf
commit
95ae7989f6
3 changed files with 38 additions and 27 deletions
|
|
@ -32,36 +32,40 @@ async function downloadTheme(themesDir: string, theme: Theme) {
|
|||
}
|
||||
|
||||
export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, ...props }) => {
|
||||
const content = window.atob(theme.content);
|
||||
const metadata = content.match(/\/\*\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\//g)?.[0] || "";
|
||||
const { type, content, likes, guild, tags } = theme;
|
||||
|
||||
const themeContent = window.atob(content);
|
||||
const metadata = themeContent.match(/\/\*\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\//g)?.[0] || "";
|
||||
const donate = metadata.match(/@donate\s+(.+)/)?.[1] || "";
|
||||
const version = metadata.match(/@version\s+(.+)/)?.[1] || "";
|
||||
|
||||
const { likes, guild, tags } = theme;
|
||||
|
||||
const authors = Array.isArray(author) ? author : [author];
|
||||
|
||||
return (
|
||||
<ModalRoot {...props}>
|
||||
<ModalHeader>
|
||||
<Forms.FormTitle tag="h4">Theme Details</Forms.FormTitle>
|
||||
<Forms.FormTitle tag="h4">{type} Details</Forms.FormTitle>
|
||||
</ModalHeader>
|
||||
|
||||
<ModalContent>
|
||||
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Author</Forms.FormTitle>
|
||||
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>{authors.length > 1 ? "Authors" : "Author"}</Forms.FormTitle>
|
||||
<div style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
|
||||
<div>
|
||||
<div style={{ display: "flex", alignItems: "center" }}>
|
||||
<UserSummaryItem
|
||||
users={[author]}
|
||||
users={authors}
|
||||
count={authors.length}
|
||||
guildId={undefined}
|
||||
renderIcon={false}
|
||||
showDefaultAvatarsForNullUsers
|
||||
max={4}
|
||||
size={32}
|
||||
showDefaultAvatarsForNullUsers
|
||||
showUserPopout
|
||||
className={Margins.right8}
|
||||
/>
|
||||
|
||||
<Forms.FormText>
|
||||
{author.username}
|
||||
<Forms.FormText style={{ maxWidth: "200px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{authors.map(author => author.username).join(", ")}
|
||||
</Forms.FormText>
|
||||
</div>
|
||||
{version && (
|
||||
|
|
@ -74,7 +78,7 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
|
|||
)}
|
||||
<Forms.FormTitle tag="h5" style={{ marginTop: "10px" }}>Likes</Forms.FormTitle>
|
||||
<Forms.FormText>
|
||||
{likes === 0 ? `Nobody liked this ${theme.type} yet.` : `${likes} users liked this ${theme.type}!`}
|
||||
{likes === 0 ? `Nobody liked this ${type} yet.` : `${likes} users liked this ${type}!`}
|
||||
</Forms.FormText>
|
||||
{donate && (
|
||||
<>
|
||||
|
|
@ -122,7 +126,7 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
|
|||
<Forms.FormText style={{
|
||||
padding: "8px",
|
||||
}}>
|
||||
<CodeBlock lang="css" content={content} />
|
||||
<CodeBlock lang="css" content={themeContent} />
|
||||
</Forms.FormText>
|
||||
</ModalContent>
|
||||
<ModalFooter>
|
||||
|
|
@ -135,7 +139,7 @@ export const ThemeInfoModal: React.FC<ThemeInfoModalProps> = ({ author, theme, .
|
|||
</Button>
|
||||
<Button className={Margins.right8}
|
||||
onClick={() => {
|
||||
Clipboard.copy(content);
|
||||
Clipboard.copy(themeContent);
|
||||
showToast("Copied to Clipboard", Toasts.Type.SUCCESS);
|
||||
}}>Copy to Clipboard</Button>
|
||||
</ModalFooter>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import { Logger } from "@utils/Logger";
|
|||
import { Margins } from "@utils/margins";
|
||||
import { classes } from "@utils/misc";
|
||||
import { openModal } from "@utils/modal";
|
||||
import { findByPropsLazy, findLazy } from "@webpack";
|
||||
import { findByPropsLazy } from "@webpack";
|
||||
import { Button, Card, FluxDispatcher, Forms, React, SearchableSelect, TabBar, TextArea, TextInput, Toasts, useEffect, UserStore, UserUtils, useState } from "@webpack/common";
|
||||
import { User } from "discord-types/general";
|
||||
import { Constructor } from "type-fest";
|
||||
|
|
@ -30,7 +30,6 @@ import { ThemeInfoModal } from "./ThemeInfoModal";
|
|||
|
||||
const InputStyles = findByPropsLazy("inputDefault", "inputWrapper", "error");
|
||||
const UserRecord: Constructor<Partial<User>> = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
|
||||
const TextAreaProps = findLazy(m => typeof m.textarea === "string");
|
||||
|
||||
const API_URL = "https://themes-delta.vercel.app/api";
|
||||
|
||||
|
|
@ -124,7 +123,7 @@ function ThemeTab() {
|
|||
return (
|
||||
theme.name.toLowerCase().includes(v) ||
|
||||
theme.description.toLowerCase().includes(v) ||
|
||||
theme.author.discord_name.toLowerCase().includes(v) ||
|
||||
(Array.isArray(theme.author) ? theme.author.some(author => author.discord_name.toLowerCase().includes(v)) : theme.author.discord_name.toLowerCase().includes(v)) ||
|
||||
tags.has(v)
|
||||
);
|
||||
};
|
||||
|
|
@ -281,8 +280,11 @@ function ThemeTab() {
|
|||
)}
|
||||
<Button
|
||||
onClick={async () => {
|
||||
const author = await getUser(theme.author.discord_snowflake, theme.author.discord_name);
|
||||
openModal(props => <ThemeInfoModal {...props} author={author} theme={theme} />);
|
||||
const authors = Array.isArray(theme.author)
|
||||
? await Promise.all(theme.author.map(author => getUser(author.discord_snowflake, author.discord_name)))
|
||||
: [await getUser(theme.author.discord_snowflake, theme.author.discord_name)];
|
||||
|
||||
openModal(props => <ThemeInfoModal {...props} author={authors} theme={theme} />);
|
||||
}}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
color={Button.Colors.BRAND}
|
||||
|
|
@ -417,8 +419,11 @@ function ThemeTab() {
|
|||
)}
|
||||
<Button
|
||||
onClick={async () => {
|
||||
const author = await getUser(theme.author.discord_snowflake, theme.author.discord_name);
|
||||
openModal(props => <ThemeInfoModal {...props} author={author} theme={theme} />);
|
||||
const authors = Array.isArray(theme.author)
|
||||
? await Promise.all(theme.author.map(author => getUser(author.discord_snowflake, author.discord_name)))
|
||||
: [await getUser(theme.author.discord_snowflake, theme.author.discord_name)];
|
||||
|
||||
openModal(props => <ThemeInfoModal {...props} author={authors} theme={theme} />);
|
||||
}}
|
||||
size={Button.Sizes.MEDIUM}
|
||||
color={Button.Colors.BRAND}
|
||||
|
|
@ -492,7 +497,7 @@ function SubmitThemes() {
|
|||
<TextArea
|
||||
content={themeTemplate}
|
||||
onChange={handleChange}
|
||||
className={classes(TextAreaProps.textarea, "vce-text-input")}
|
||||
className={"vce-text-input"}
|
||||
placeholder={themeTemplate}
|
||||
spellCheck={false}
|
||||
rows={35}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@
|
|||
import { ModalProps } from "@utils/modal";
|
||||
import { User } from "discord-types/general";
|
||||
|
||||
type Author = {
|
||||
github_name?: string;
|
||||
discord_name: string;
|
||||
discord_snowflake: string;
|
||||
};
|
||||
|
||||
export interface Theme {
|
||||
id: string;
|
||||
name: string;
|
||||
|
|
@ -14,11 +20,7 @@ export interface Theme {
|
|||
type: string | "theme" | "snippet";
|
||||
description: string;
|
||||
version: string;
|
||||
author: {
|
||||
github_name?: string;
|
||||
discord_name: string;
|
||||
discord_snowflake: string;
|
||||
};
|
||||
author: Author | Author[];
|
||||
likes: number;
|
||||
tags: string[];
|
||||
thumbnail_url: string;
|
||||
|
|
@ -32,7 +34,7 @@ export interface Theme {
|
|||
}
|
||||
|
||||
export interface ThemeInfoModalProps extends ModalProps {
|
||||
author: User;
|
||||
author: User | User[];
|
||||
theme: Theme;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue