refactor: split components and modal and whatnot

This commit is contained in:
Lewis Crichton 2023-09-10 13:40:04 +01:00
parent f2dc34e023
commit d43eebe0e4
No known key found for this signature in database
13 changed files with 432 additions and 229 deletions

View file

@ -16,25 +16,28 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import "./themesStyles.css";
import { Settings, useSettings } from "@api/Settings"; import { Settings, useSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles"; import { classNameFactory } from "@api/Styles";
import { Flex } from "@components/Flex"; import { Flex } from "@components/Flex";
import { Link } from "@components/Link"; import { Link } from "@components/Link";
import { AddonCard } from "@components/VencordSettings/AddonCard";
import { SettingsTab, wrapTab } from "@components/VencordSettings/shared";
import { Margins } from "@utils/margins"; import { Margins } from "@utils/margins";
import { classes, identity } from "@utils/misc"; import { classes } from "@utils/misc";
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal"; import { openModal } from "@utils/modal";
import { showItemInFolder } from "@utils/native"; import { showItemInFolder } from "@utils/native";
import { LazyComponent, useAwaiter } from "@utils/react"; import { useAwaiter } from "@utils/react";
import type { ThemeHeader } from "@utils/themes"; import type { ThemeHeader } from "@utils/themes";
import { getThemeInfo, stripBOM, type UserThemeHeader } from "@utils/themes/bd"; import { getThemeInfo, stripBOM, type UserThemeHeader } from "@utils/themes/bd";
import { usercssParse } from "@utils/themes/usercss"; import { usercssParse } from "@utils/themes/usercss";
import { find, findByCodeLazy, findByPropsLazy, findLazy } from "@webpack"; import { 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 { Button, Card, FluxDispatcher, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common";
import type { ComponentType, ReactNode, Ref, SyntheticEvent } from "react"; import type { ComponentType, Ref, SyntheticEvent } from "react";
import type { UserstyleHeader } from "usercss-meta"; import type { UserstyleHeader } from "usercss-meta";
import { AddonCard } from "./AddonCard"; import { UserCSSSettingsModal } from "./UserCSSModal";
import { SettingsTab, wrapTab } from "./shared";
type FileInput = ComponentType<{ type FileInput = ComponentType<{
ref: Ref<HTMLInputElement>; ref: Ref<HTMLInputElement>;
@ -43,22 +46,13 @@ type FileInput = ComponentType<{
filters?: { name?: string; extensions: string[]; }[]; 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 InviteActions = findByPropsLazy("resolveInvite");
const TrashIcon = findByCodeLazy("M5 6.99902V18.999C5 20.101 5.897 20.999"); 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"); const CogWheel = findByCodeLazy("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069");
const FileInput: FileInput = findByCodeLazy("activateUploadDialogue="); const FileInput: FileInput = findByCodeLazy("activateUploadDialogue=");
const EditPencil = findByCodeLazy("M19.2929 9.8299L19.9409 9.18278C21.353 7.77064", '["color","height","width"]');
// TinyColor is completely unmangled and it's duplicated in two modules! Fun!
const TinyColor: tinycolor.Constructor = findByCodeLazy("this._gradientType=");
const TextAreaProps = findLazy(m => typeof m.textarea === "string"); const TextAreaProps = findLazy(m => typeof m.textarea === "string");
const cl = classNameFactory("vc-settings-theme-"); const cl = classNameFactory("vc-settings-theme-");
@ -112,194 +106,6 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
); );
} }
function ColorPicker(props: ColorPickerProps) {
const [color, setColor] = useState(props.value);
const correctedColor = color ? `#${color.toString(16).padStart(6, "0")}` : "#000000";
return (
<Popout
renderPopout={() => (
<ColorPickerModal value={props.value} onChange={value => { setColor(value); props.onChange(value); }} showEyeDropper={props.showEyeDropper} />
)}
>
{popoutProps => (
<div {...popoutProps} className={cl("usercss-swatch")} style={{
backgroundColor: correctedColor,
borderColor: correctedColor
}}>
<EditPencil
className={cl("usercss-swatch-pencil")}
color={TinyColor(correctedColor).isLight() ? "var(--primary-530)" : "var(--white-500)"}
/>
</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"], false).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]);
const normalizedValue = TinyColor(value).toHex();
controls.push(
<Forms.FormSection>
<Forms.FormTitle tag="h5">{varInfo.label}</Forms.FormTitle>
<ColorPicker
key={name}
value={parseInt(normalizedValue, 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.name,
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 { interface BDThemeCardProps {
theme: UserThemeHeader; theme: UserThemeHeader;
enabled: boolean; enabled: boolean;

View file

@ -0,0 +1,137 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2023 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { useSettings } from "@api/Settings";
import { Flex } from "@components/Flex";
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
import { Text, useState } from "@webpack/common";
import type { ReactNode } from "react";
import { UserstyleHeader } from "usercss-meta";
import { SettingBooleanComponent, SettingColorComponent, SettingNumberComponent, SettingRangeComponent, SettingSelectComponent, SettingTextComponent } from "./components";
interface UserCSSSettingsModalProps {
modalProps: ModalProps;
theme: UserstyleHeader;
}
export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModalProps) {
// @ts-expect-error UseSettings<> can't determine this is a valid key
const themeSettings = useSettings(["userCssVars"], false).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(
<SettingTextComponent
label={varInfo.label}
name={name}
value={value}
onChange={v => updateSetting(name, v, setValue)}
/>
);
break;
}
case "checkbox": {
const [value, setValue] = useState(themeSettings[name]);
controls.push(
<SettingBooleanComponent
label={varInfo.label}
name={name}
value={value}
onChange={v => updateSetting(name, v, setValue)}
/>
);
break;
}
case "color": {
const [value, setValue] = useState(themeSettings[name]);
controls.push(
<SettingColorComponent
label={varInfo.label}
name={name}
value={value}
onChange={v => updateSetting(name, v, setValue)}
/>
);
break;
}
case "number": {
const [value, setValue] = useState(themeSettings[name]);
controls.push(
<SettingNumberComponent
label={varInfo.label}
name={name}
value={value}
onChange={v => updateSetting(name, v, setValue)}
/>
);
break;
}
case "select": {
const [value, setValue] = useState(themeSettings[name]);
controls.push(
<SettingSelectComponent
label={varInfo.label}
name={name}
options={varInfo.options}
value={value}
default={varInfo.default}
onChange={v => updateSetting(name, v, setValue)}
/>
);
break;
}
case "range": {
const [value, setValue] = useState(themeSettings[name]);
controls.push(
<SettingRangeComponent
label={varInfo.label}
name={name}
value={value}
default={varInfo.default}
min={varInfo.min}
max={varInfo.max}
step={varInfo.step}
onChange={v => updateSetting(name, v, setValue)}
/>
);
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>
);
}

View file

@ -0,0 +1,30 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2023 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { Forms, Switch } from "@webpack/common";
interface Props {
label: string;
name: string;
value: string;
onChange: (value: string) => void;
}
export function SettingBooleanComponent({ label, name, value, onChange }: Props) {
return (
<Forms.FormSection>
<Switch
key={name}
value={value === "1"}
onChange={v => onChange(v ? "1" : "0")}
hideBorder
style={{ marginBottom: "0.5em" }}
>
{label}
</Switch>
</Forms.FormSection>
);
}

View file

@ -0,0 +1,73 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2023 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { classNameFactory } from "@api/Styles";
import { LazyComponent } from "@utils/react";
import { find, findByCodeLazy } from "@webpack";
import { Forms, Popout, useState } from "@webpack/common";
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")));
// TinyColor is completely unmangled and it's duplicated in two modules! Fun!
const TinyColor: tinycolor.Constructor = findByCodeLazy("this._gradientType=");
const cl = classNameFactory("vc-usercss-settings-color-");
const EditPencil = findByCodeLazy("M19.2929 9.8299L19.9409 9.18278C21.353 7.77064", '["color","height","width"]');
function ColorPicker(props: ColorPickerProps) {
const [color, setColor] = useState(props.value);
const correctedColor = color ? `#${color.toString(16).padStart(6, "0")}` : "#000000";
return (
<Popout
renderPopout={() => (
<ColorPickerModal value={props.value} onChange={value => { setColor(value); props.onChange(value); }} showEyeDropper={props.showEyeDropper} />
)}
>
{popoutProps => (
<div {...popoutProps} className={cl("swatch")} style={{
backgroundColor: correctedColor,
borderColor: correctedColor
}}>
<EditPencil
className={cl("swatch-pencil")}
color={TinyColor(correctedColor).isLight() ? "var(--primary-530)" : "var(--white-500)"}
/>
</div>
)}
</Popout>
);
}
interface Props {
label: string;
name: string;
value: string;
onChange: (value: string) => void;
}
export function SettingColorComponent({ label, name, value, onChange }: Props) {
const normalizedValue = TinyColor(value).toHex();
return (
<Forms.FormSection>
<Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
<ColorPicker
key={name}
value={parseInt(normalizedValue, 16)}
onChange={v => onChange("#" + (v?.toString(16).padStart(6, "0") ?? "000000"))}
/>
</Forms.FormSection>
);
}

View file

@ -0,0 +1,29 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2023 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { Forms, TextInput } from "@webpack/common";
interface Props {
label: string;
name: string;
value: string;
onChange: (value: string) => void;
}
export function SettingNumberComponent({ label, name, value, onChange }: Props) {
return (
<Forms.FormSection>
<Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
<TextInput
type="number"
pattern="-?[0-9]+"
key={name}
value={value}
onChange={onChange}
/>
</Forms.FormSection>
);
}

View file

@ -0,0 +1,43 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2023 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { Forms, Slider } from "@webpack/common";
interface Props {
label: string;
name: string;
value: string;
default: number;
min?: number;
max?: number;
step?: number;
onChange: (value: string) => void;
}
export function SettingRangeComponent({ label, name, value, default: def, min, max, step, onChange }: Props) {
const markers: number[] = [];
// defaults taken from https://github.com/openstyles/stylus/wiki/Writing-UserCSS#default-value
for (let i = (min ?? 0); i <= (max ?? 10); i += (step ?? 1)) {
markers.push(i);
}
return (
<Forms.FormSection>
<Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
<Slider
initialValue={parseInt(value, 10)}
defaultValue={def}
onValueChange={v => onChange(v.toString())}
minValue={min}
maxValue={max}
markers={markers}
stickToMarkers={true}
/>
</Forms.FormSection>
);
}

View file

@ -0,0 +1,48 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2023 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { identity } from "@utils/misc";
import { ComponentTypes, Forms, Select } from "@webpack/common";
interface Props {
label: string;
name: string;
options: {
name: string;
label: string;
value: string;
}[];
value: string;
default: string;
onChange: (value: string) => void;
}
export function SettingSelectComponent({ label, name, options, value, default: def, onChange }: Props) {
const opts = options.map(option => ({
disabled: false,
key: option.name,
value: option.value,
default: def === option.name,
label: option.label
} as ComponentTypes.SelectOption));
return (
<Forms.FormSection>
<Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
<Select
placeholder={label}
key={name}
options={opts}
closeOnSelect={true}
select={onChange}
isSelected={v => v === value}
serialize={identity}
/>
</Forms.FormSection>
);
}

View file

@ -0,0 +1,27 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2023 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
import { Forms, TextInput } from "@webpack/common";
interface Props {
label: string;
name: string;
value: string;
onChange: (value: string) => void;
}
export function SettingTextComponent({ label, name, value, onChange }: Props) {
return (
<Forms.FormSection>
<Forms.FormTitle tag="h5">{label}</Forms.FormTitle>
<TextInput
key={name}
value={value}
onChange={onChange}
/>
</Forms.FormSection>
);
}

View file

@ -0,0 +1,20 @@
.vc-usercss-settings-color-swatch {
display: flex;
align-items: center;
justify-content: center;
width: 69px;
height: 50px;
box-sizing: border-box;
position: relative;
border: 1px solid;
border-radius: 4px;
cursor: pointer;
}
.vc-usercss-settings-color-swatch-pencil {
position: absolute;
top: 4px;
right: 4px;
width: 14px;
height: 14px;
}

View file

@ -0,0 +1,12 @@
/*
* Vencord, a Discord client mod
* Copyright (c) 2023 Vendicated and contributors
* SPDX-License-Identifier: GPL-3.0-or-later
*/
export * from "./SettingBooleanComponent";
export * from "./SettingColorComponent";
export * from "./SettingNumberComponent";
export * from "./SettingRangeComponent";
export * from "./SettingSelectComponent";
export * from "./SettingTextComponent";

View file

@ -27,24 +27,3 @@
.vc-settings-theme-author::before { .vc-settings-theme-author::before {
content: "by "; content: "by ";
} }
.vc-settings-theme-usercss-swatch {
display: flex;
align-items: center;
justify-content: center;
width: 69px;
height: 50px;
box-sizing: border-box;
position: relative;
border: 1px solid;
border-radius: 4px;
cursor: pointer;
}
.vc-settings-theme-usercss-swatch-pencil {
position: absolute;
top: 4px;
right: 4px;
width: 14px;
height: 14px;
}

View file

@ -17,7 +17,6 @@
*/ */
import "./settingsStyles.css"; import "./settingsStyles.css";
import "./themesStyles.css";
import ErrorBoundary from "@components/ErrorBoundary"; import ErrorBoundary from "@components/ErrorBoundary";
import { handleComponentFailed } from "@components/handleComponentFailed"; import { handleComponentFailed } from "@components/handleComponentFailed";

View file

@ -100,7 +100,7 @@ export default definePlugin({
{ {
section: "VencordThemes", section: "VencordThemes",
label: "Themes", label: "Themes",
element: require("@components/VencordSettings/ThemesTab").default, element: require("@components/ThemeSettings/ThemesTab").default,
className: "vc-themes" className: "vc-themes"
}, },
!IS_UPDATER_DISABLED && { !IS_UPDATER_DISABLED && {