From b6e20680ff9b627e65eaa39d53b5f51f6a15c87f Mon Sep 17 00:00:00 2001 From: Lewis Crichton Date: Fri, 8 Sep 2023 22:19:21 +0100 Subject: [PATCH] feat: my suffering is neverending and all i can think of is popups and modals --- src/components/VencordSettings/ThemesTab.tsx | 278 ++++++++++++++++++- src/utils/quickCss.ts | 1 + src/utils/themes/usercss/compiler.ts | 4 +- src/utils/themes/usercss/index.ts | 17 +- src/utils/themes/usercss/usercss-meta.d.ts | 9 +- src/webpack/common/types/components.d.ts | 2 +- 6 files changed, 296 insertions(+), 15 deletions(-) diff --git a/src/components/VencordSettings/ThemesTab.tsx b/src/components/VencordSettings/ThemesTab.tsx index b6cf1168f..d81951f48 100644 --- a/src/components/VencordSettings/ThemesTab.tsx +++ b/src/components/VencordSettings/ThemesTab.tsx @@ -16,20 +16,21 @@ * along with this program. If not, see . */ -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(() => 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 ( + ( + { setColor(value); props.onChange(value); }} showEyeDropper={props.showEyeDropper} /> + )} + > + {popoutProps => ( +
+ )} + + ); +} + +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( + + {varInfo.label} + updateSetting(name, v, setValue)} + /> + + ); + break; + } + + case "checkbox": { + const [value, setValue] = useState(themeSettings[name]); + + controls.push( + + updateSetting(name, value ? "1" : "0", setValue)} + hideBorder + style={{ marginBottom: "0.5em" }} + > + {varInfo.label} + + + ); + break; + } + + case "color": { + const [value, setValue] = useState(themeSettings[name]); + + let normalizedValue = value; + + if (Object.hasOwn(colorNameHexMap, normalizedValue)) { + normalizedValue = colorNameHexMap[normalizedValue]; + } + + controls.push( + + {varInfo.label} + updateSetting(name, "#" + (v?.toString(16).padStart(6, "0") ?? "000000"), setValue)} + /> + + ); + break; + } + + case "number": { + const [value, setValue] = useState(themeSettings[name]); + + controls.push( + + {varInfo.label} + updateSetting(name, v, setValue)} + /> + + ); + 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( + + {varInfo.label} +