refactor: split components and modal and whatnot
This commit is contained in:
parent
f2dc34e023
commit
d43eebe0e4
|
@ -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;
|
137
src/components/ThemeSettings/UserCSSModal.tsx
Normal file
137
src/components/ThemeSettings/UserCSSModal.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
|
@ -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
20
src/components/ThemeSettings/components/colorStyles.css
Normal 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
12
src/components/ThemeSettings/components/index.ts
Normal 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";
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -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";
|
||||||
|
|
|
@ -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 && {
|
||||||
|
|
Loading…
Reference in a new issue