feat: my suffering is neverending and all i can think of is popups and modals
This commit is contained in:
Lewis Crichton
parent
d361edc47d
commit
b6e20680ff
|
|
@ -16,20 +16,21 @@
|
|||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import { useSettings } from "@api/Settings";
|
||||
import { Settings, useSettings } from "@api/Settings";
|
||||
import { classNameFactory } from "@api/Styles";
|
||||
import { Flex } from "@components/Flex";
|
||||
import { Link } from "@components/Link";
|
||||
import { Margins } from "@utils/margins";
|
||||
import { classes } from "@utils/misc";
|
||||
import { classes, identity } from "@utils/misc";
|
||||
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
|
||||
import { showItemInFolder } from "@utils/native";
|
||||
import { useAwaiter } from "@utils/react";
|
||||
import { LazyComponent, useAwaiter } from "@utils/react";
|
||||
import type { ThemeHeader } from "@utils/themes";
|
||||
import { getThemeInfo, stripBOM, type UserThemeHeader } from "@utils/themes/bd";
|
||||
import { usercssParse } from "@utils/themes/usercss";
|
||||
import { findByCodeLazy, findByPropsLazy, findLazy } from "@webpack";
|
||||
import { Button, Card, FluxDispatcher, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common";
|
||||
import type { ComponentType, Ref, SyntheticEvent } from "react";
|
||||
import { find, findByCodeLazy, findByPropsLazy, findLazy } from "@webpack";
|
||||
import { Button, Card, ComponentTypes, FluxDispatcher, Forms, Popout, React, Select, showToast, Slider, Switch, TabBar, Text, TextArea, TextInput, useEffect, useRef, useState } from "@webpack/common";
|
||||
import type { ComponentType, ReactNode, Ref, SyntheticEvent } from "react";
|
||||
import type { UserstyleHeader } from "usercss-meta";
|
||||
|
||||
import { AddonCard } from "./AddonCard";
|
||||
|
|
@ -42,6 +43,15 @@ type FileInput = ComponentType<{
|
|||
filters?: { name?: string; extensions: string[]; }[];
|
||||
}>;
|
||||
|
||||
interface ColorPickerProps {
|
||||
value: number | null;
|
||||
showEyeDropper?: boolean;
|
||||
onChange(value: number | null): void;
|
||||
onClose?(): void;
|
||||
}
|
||||
|
||||
const ColorPickerModal = LazyComponent<ColorPickerProps>(() => find(m => m?.type?.toString?.().includes(".showEyeDropper")));
|
||||
|
||||
const InviteActions = findByPropsLazy("resolveInvite");
|
||||
const TrashIcon = findByCodeLazy("M5 6.99902V18.999C5 20.101 5.897 20.999");
|
||||
const CogWheel = findByCodeLazy("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069");
|
||||
|
|
@ -50,6 +60,33 @@ const TextAreaProps = findLazy(m => typeof m.textarea === "string");
|
|||
|
||||
const cl = classNameFactory("vc-settings-theme-");
|
||||
|
||||
const colorNameHexMap = {
|
||||
"aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff",
|
||||
"beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a", "burlywood": "#deb887",
|
||||
"cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff",
|
||||
"darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b", "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f",
|
||||
"darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f", "darkturquoise": "#00ced1",
|
||||
"darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dodgerblue": "#1e90ff",
|
||||
"firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff",
|
||||
"gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000", "greenyellow": "#adff2f",
|
||||
"honeydew": "#f0fff0", "hotpink": "#ff69b4",
|
||||
"indianred ": "#cd5c5c", "indigo": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c",
|
||||
"lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2",
|
||||
"lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightsteelblue": "#b0c4de",
|
||||
"lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6",
|
||||
"magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370d8", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee",
|
||||
"mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5",
|
||||
"navajowhite": "#ffdead", "navy": "#000080",
|
||||
"oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6",
|
||||
"palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093", "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080",
|
||||
"rebeccapurple": "#663399", "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1",
|
||||
"saddlebrown": "#8b4513", "salmon": "#fa8072", "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver": "#c0c0c0", "skyblue": "#87ceeb", "slateblue": "#6a5acd", "slategray": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4",
|
||||
"tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0",
|
||||
"violet": "#ee82ee",
|
||||
"wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5",
|
||||
"yellow": "#ffff00", "yellowgreen": "#9acd32"
|
||||
};
|
||||
|
||||
function Validator({ link }: { link: string; }) {
|
||||
const [res, err, pending] = useAwaiter(() => fetch(link).then(res => {
|
||||
if (res.status > 300) throw `${res.status} ${res.statusText}`;
|
||||
|
|
@ -98,6 +135,195 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
|
|||
);
|
||||
}
|
||||
|
||||
function ColorPicker(props: ColorPickerProps) {
|
||||
const [color, setColor] = useState(props.value);
|
||||
|
||||
return (
|
||||
<Popout
|
||||
renderPopout={() => (
|
||||
<ColorPickerModal value={props.value} onChange={value => { setColor(value); props.onChange(value); }} showEyeDropper={props.showEyeDropper} />
|
||||
)}
|
||||
>
|
||||
{popoutProps => (
|
||||
<div {...popoutProps} style={{
|
||||
width: "2em",
|
||||
height: "2em",
|
||||
cursor: "pointer",
|
||||
backgroundColor: color ? `#${color.toString(16).padStart(6, "0")}` : "var(--background-secondary)",
|
||||
borderRadius: ".125em",
|
||||
border: "1px solid var(--background-tertiary)",
|
||||
}}></div>
|
||||
)}
|
||||
</Popout>
|
||||
);
|
||||
}
|
||||
|
||||
interface UserCSSSettingsModalProps {
|
||||
modalProps: ModalProps;
|
||||
theme: UserstyleHeader;
|
||||
}
|
||||
|
||||
function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModalProps) {
|
||||
// @ts-expect-error UseSettings<> can't determine this is a valid key
|
||||
const themeSettings = useSettings(["userCssVars"]).userCssVars[theme.id];
|
||||
|
||||
const controls: ReactNode[] = [];
|
||||
|
||||
function updateSetting(key: string, value: string, setValue: (value: string) => void) {
|
||||
themeSettings[key] = value;
|
||||
setValue(value);
|
||||
}
|
||||
|
||||
for (const [name, varInfo] of Object.entries(theme.vars)) {
|
||||
switch (varInfo.type) {
|
||||
case "text": {
|
||||
const [value, setValue] = useState(themeSettings[name]);
|
||||
|
||||
controls.push(
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle tag="h5">{varInfo.label}</Forms.FormTitle>
|
||||
<TextInput
|
||||
key={name}
|
||||
value={value}
|
||||
onChange={v => updateSetting(name, v, setValue)}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case "checkbox": {
|
||||
const [value, setValue] = useState(themeSettings[name]);
|
||||
|
||||
controls.push(
|
||||
<Forms.FormSection>
|
||||
<Switch
|
||||
key={name}
|
||||
value={value === "1"}
|
||||
onChange={value => updateSetting(name, value ? "1" : "0", setValue)}
|
||||
hideBorder
|
||||
style={{ marginBottom: "0.5em" }}
|
||||
>
|
||||
{varInfo.label}
|
||||
</Switch>
|
||||
</Forms.FormSection>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case "color": {
|
||||
const [value, setValue] = useState(themeSettings[name]);
|
||||
|
||||
let normalizedValue = value;
|
||||
|
||||
if (Object.hasOwn(colorNameHexMap, normalizedValue)) {
|
||||
normalizedValue = colorNameHexMap[normalizedValue];
|
||||
}
|
||||
|
||||
controls.push(
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle tag="h5">{varInfo.label}</Forms.FormTitle>
|
||||
<ColorPicker
|
||||
key={name}
|
||||
value={parseInt(normalizedValue.substring(1), 16)}
|
||||
onChange={v => updateSetting(name, "#" + (v?.toString(16).padStart(6, "0") ?? "000000"), setValue)}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case "number": {
|
||||
const [value, setValue] = useState(themeSettings[name]);
|
||||
|
||||
controls.push(
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle tag="h5">{varInfo.label}</Forms.FormTitle>
|
||||
<TextInput
|
||||
type="number"
|
||||
pattern="-?[0-9]+"
|
||||
key={name}
|
||||
value={value}
|
||||
onChange={v => updateSetting(name, v, setValue)}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case "select": {
|
||||
const [value, setValue] = useState(themeSettings[name]);
|
||||
|
||||
const options = varInfo.options.map(option => ({
|
||||
disabled: false,
|
||||
|
||||
key: option.name,
|
||||
value: option.value,
|
||||
default: varInfo.default === option.value,
|
||||
label: option.label
|
||||
} as ComponentTypes.SelectOption));
|
||||
|
||||
controls.push(
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle tag="h5">{varInfo.label}</Forms.FormTitle>
|
||||
<Select
|
||||
placeholder={varInfo.label}
|
||||
key={name}
|
||||
options={options}
|
||||
closeOnSelect={true}
|
||||
|
||||
select={v => updateSetting(name, v, setValue)}
|
||||
isSelected={v => v === value}
|
||||
serialize={identity}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
case "range": {
|
||||
const [value, setValue] = useState(themeSettings[name]);
|
||||
|
||||
const markers: number[] = [];
|
||||
|
||||
// defaults taken from https://github.com/openstyles/stylus/wiki/Writing-UserCSS#default-value
|
||||
for (let i = (varInfo.min ?? 0); i <= (varInfo.max ?? 10); i += (varInfo.step ?? 1)) {
|
||||
markers.push(i);
|
||||
}
|
||||
|
||||
controls.push(
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle tag="h5">{varInfo.label} ({varInfo.units})</Forms.FormTitle>
|
||||
<Slider
|
||||
initialValue={parseInt(value, 10)}
|
||||
defaultValue={varInfo.default}
|
||||
onValueChange={v => updateSetting(name, v.toString(), setValue)}
|
||||
minValue={varInfo.min}
|
||||
maxValue={varInfo.max}
|
||||
|
||||
markers={markers}
|
||||
stickToMarkers={true}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ModalRoot {...modalProps}>
|
||||
<ModalHeader separator={false}>
|
||||
<Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Settings for {theme.name}</Text>
|
||||
<ModalCloseButton onClick={modalProps.onClose} />
|
||||
</ModalHeader>
|
||||
<ModalContent>
|
||||
<Flex flexDirection="column" style={{ gap: 12, marginBottom: 16 }}>{controls}</Flex>
|
||||
</ModalContent>
|
||||
</ModalRoot>
|
||||
);
|
||||
}
|
||||
|
||||
interface BDThemeCardProps {
|
||||
theme: UserThemeHeader;
|
||||
enabled: boolean;
|
||||
|
|
@ -122,9 +348,14 @@ function UserCSSThemeCard({ theme, enabled, onChange, onDelete }: UserCSSCardPro
|
|||
setEnabled={onChange}
|
||||
infoButton={
|
||||
<>
|
||||
<div style={{ cursor: "pointer" }}>
|
||||
<CogWheel />
|
||||
</div>
|
||||
{theme.vars && (
|
||||
<div style={{ cursor: "pointer" }} onClick={
|
||||
() => openModal(modalProps =>
|
||||
<UserCSSSettingsModal modalProps={modalProps} theme={theme} />)
|
||||
}>
|
||||
<CogWheel />
|
||||
</div>
|
||||
)}
|
||||
{IS_WEB && (
|
||||
<div style={{ cursor: "pointer", color: "var(--status-danger" }} onClick={onDelete}>
|
||||
<TrashIcon />
|
||||
|
|
@ -215,10 +446,37 @@ function ThemesTab() {
|
|||
|
||||
if (fileName.endsWith(".user.css")) {
|
||||
// handle it as usercss
|
||||
const header = await usercssParse(content, fileName);
|
||||
|
||||
themeInfo.push({
|
||||
type: "usercss",
|
||||
header: usercssParse(content, fileName)
|
||||
header
|
||||
});
|
||||
|
||||
Settings.userCssVars[header.id] ??= {};
|
||||
|
||||
for (const [name, varInfo] of Object.entries(header.vars ?? {})) {
|
||||
let normalizedValue = "";
|
||||
|
||||
switch (varInfo.type) {
|
||||
case "text":
|
||||
case "color":
|
||||
case "select":
|
||||
normalizedValue = varInfo.default;
|
||||
break;
|
||||
case "checkbox":
|
||||
normalizedValue = varInfo.default ? "1" : "0";
|
||||
break;
|
||||
case "range":
|
||||
normalizedValue = `${varInfo.default}${varInfo.units}`;
|
||||
break;
|
||||
case "number":
|
||||
normalizedValue = String(varInfo.default);
|
||||
break;
|
||||
}
|
||||
|
||||
Settings.userCssVars[header.id][name] ??= normalizedValue;
|
||||
}
|
||||
} else {
|
||||
// presumably BD but could also be plain css
|
||||
themeInfo.push({
|
||||
|
|
|
|||
|
|
@ -99,6 +99,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
|
||||
addSettingsListener("themeLinks", initThemes);
|
||||
addSettingsListener("enabledThemes", initThemes);
|
||||
addSettingsListener("userCssVars", initThemes);
|
||||
|
||||
if (!IS_WEB)
|
||||
VencordNative.quickCss.addThemeChangeListener(initThemes);
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export async function compileUsercss(fileName: string) {
|
|||
// - use the preprocessor defined
|
||||
// - if variables are set, `uso`
|
||||
// - otherwise, `default`
|
||||
const { vars = {}, preprocessor = Object.keys(vars).length > 0 ? "uso" : "default" } = usercssParse(themeData, fileName);
|
||||
const { vars = {}, preprocessor = Object.keys(vars).length > 0 ? "uso" : "default", id } = await usercssParse(themeData, fileName);
|
||||
|
||||
const preprocessorFn = preprocessors[preprocessor];
|
||||
|
||||
|
|
@ -74,7 +74,7 @@ export async function compileUsercss(fileName: string) {
|
|||
const varsToPass = {};
|
||||
|
||||
for (const [k, v] of Object.entries(vars)) {
|
||||
varsToPass[k] = Settings.userCssVars[fileName]?.[k] ?? v.default;
|
||||
varsToPass[k] = Settings.userCssVars[id]?.[k] ?? v.default;
|
||||
}
|
||||
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { parse as originalParse, UserstyleHeader } from "usercss-meta";
|
|||
|
||||
const UserCSSLogger = new Logger("UserCSS", "#d2acf5");
|
||||
|
||||
export function usercssParse(text: string, fileName: string): UserstyleHeader {
|
||||
export async function usercssParse(text: string, fileName: string): Promise<UserstyleHeader> {
|
||||
var { metadata, errors } = originalParse(text.replace(/\r/g, ""), { allowErrors: true });
|
||||
|
||||
if (errors.length) {
|
||||
|
|
@ -19,5 +19,20 @@ export function usercssParse(text: string, fileName: string): UserstyleHeader {
|
|||
return {
|
||||
...metadata,
|
||||
fileName,
|
||||
id: await getUserCssId(metadata)
|
||||
};
|
||||
}
|
||||
|
||||
export async function getUserCssId(header: UserstyleHeader): Promise<string> {
|
||||
const encoder = new TextEncoder();
|
||||
|
||||
const nameBuf = encoder.encode(header.name);
|
||||
const namespaceBuf = encoder.encode(header.namespace);
|
||||
|
||||
const nameHash = new Uint8Array(await window.crypto.subtle.digest("SHA-256", nameBuf));
|
||||
const namespaceHash = new Uint8Array(await window.crypto.subtle.digest("SHA-256", namespaceBuf));
|
||||
|
||||
const idHash = await window.crypto.subtle.digest("SHA-256", new Uint8Array([...nameHash, ...namespaceHash]));
|
||||
|
||||
return window.btoa(String.fromCharCode(...new Uint8Array(idHash)));
|
||||
}
|
||||
|
|
|
|||
9
src/utils/themes/usercss/usercss-meta.d.ts
vendored
9
src/utils/themes/usercss/usercss-meta.d.ts
vendored
|
|
@ -36,11 +36,18 @@ declare module "usercss-meta" {
|
|||
| {
|
||||
type: "select";
|
||||
default: string;
|
||||
options: Record<string, string>;
|
||||
options: { name: string; label: string; value: string; }[];
|
||||
}
|
||||
)>;
|
||||
|
||||
export interface UserstyleHeader {
|
||||
/**
|
||||
* The unique ID of the UserCSS style.
|
||||
*
|
||||
* @vencord Specific to Vencord, not part of the original module.
|
||||
*/
|
||||
id: string;
|
||||
|
||||
/**
|
||||
* The file name of the UserCSS style.
|
||||
*
|
||||
|
|
|
|||
2
src/webpack/common/types/components.d.ts
vendored
2
src/webpack/common/types/components.d.ts
vendored
|
|
@ -190,7 +190,7 @@ export type TextArea = ComponentType<PropsWithRef<Omit<HTMLProps<HTMLTextAreaEle
|
|||
onChange(v: string): void;
|
||||
}>>;
|
||||
|
||||
interface SelectOption {
|
||||
export interface SelectOption {
|
||||
disabled?: boolean;
|
||||
value: any;
|
||||
label: string;
|
||||
|
|
|
|||
Loading…
Reference in a new issue