cswimr/Vencord
1
0
Fork 0
forked from CoastalCommitsArchival/github.com-Vendicated-Vencord
Code Pull requests Packages 1 Wiki Activity

refactor: split components and modal and whatnot

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

218
src/components/VencordSettings/ThemesTab.tsx → src/components/ThemeSettings/ThemesTab.tsx
View file

@ -16,25 +16,28 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./themesStyles.css";
import { Settings, useSettings } from "@api/Settings";
import { classNameFactory } from "@api/Styles";
import { Flex } from "@components/Flex";
import { Link } from "@components/Link";
import { AddonCard } from "@components/VencordSettings/AddonCard";
import { SettingsTab, wrapTab } from "@components/VencordSettings/shared";
import { Margins } from "@utils/margins";
import { classes, identity } from "@utils/misc";
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
import { classes } from "@utils/misc";
import { openModal } from "@utils/modal";
import { showItemInFolder } from "@utils/native";
import { LazyComponent, useAwaiter } from "@utils/react";
import { 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 { 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 { 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 type { UserstyleHeader } from "usercss-meta";
import { AddonCard } from "./AddonCard";
import { SettingsTab, wrapTab } from "./shared";
import { UserCSSSettingsModal } from "./UserCSSModal";
type FileInput = ComponentType<{
ref: Ref<HTMLInputElement>;
@ -43,22 +46,13 @@ 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");
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 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 {
theme: UserThemeHeader;
enabled: boolean;

137
src/components/ThemeSettings/UserCSSModal.tsx Normal file
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>
);
}

30
src/components/ThemeSettings/components/SettingBooleanComponent.tsx Normal file
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>
);
}

73
src/components/ThemeSettings/components/SettingColorComponent.tsx Normal file
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>
);
}

29
src/components/ThemeSettings/components/SettingNumberComponent.tsx Normal file
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>
);
}

43
src/components/ThemeSettings/components/SettingRangeComponent.tsx Normal file
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>
);
}

48
src/components/ThemeSettings/components/SettingSelectComponent.tsx Normal file
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>
);
}

27
src/components/ThemeSettings/components/SettingTextComponent.tsx Normal file
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>
);
}

20
src/components/ThemeSettings/components/colorStyles.css Normal file
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;
}

12
src/components/ThemeSettings/components/index.ts Normal file
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";

21
src/components/VencordSettings/themesStyles.css → src/components/ThemeSettings/themesStyles.css
View file

@ -27,24 +27,3 @@
.vc-settings-theme-author::before {
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;
}

1
src/components/VencordSettings/shared.tsx
View file

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

2
src/plugins/_core/settings.tsx
View file

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