feat: add reset to default button

This commit is contained in:
Lewis Crichton 2024-01-14 16:24:40 +00:00
parent 3cf60f8daa
commit 6c551650d0
No known key found for this signature in database
3 changed files with 50 additions and 11 deletions

View file

@ -77,7 +77,7 @@ export interface Settings {
}; };
userCssVars: { userCssVars: {
[fileName: string]: { [themeId: string]: {
[varName: string]: string; [varName: string]: string;
}; };
}; };

View file

@ -326,3 +326,22 @@ export function PasteIcon(props: IconProps) {
</Icon> </Icon>
); );
} }
export function ResetIcon(props: IconProps) {
return (
<Icon
{...props}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
<path d="M3 3v5h5" />
</Icon>
);
}

View file

@ -6,7 +6,7 @@
import { Settings, useSettings } from "@api/Settings"; import { Settings, useSettings } from "@api/Settings";
import { Flex } from "@components/Flex"; import { Flex } from "@components/Flex";
import { CopyIcon, PasteIcon } from "@components/Icons"; import { CopyIcon, PasteIcon, ResetIcon } from "@components/Icons";
import { copyWithToast } from "@utils/misc"; import { copyWithToast } from "@utils/misc";
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal"; import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
import { showToast, Text, Toasts, Tooltip } from "@webpack/common"; import { showToast, Text, Toasts, Tooltip } from "@webpack/common";
@ -73,9 +73,28 @@ function ImportButton({ themeSettings }: { themeSettings: Settings["userCssVars"
</Tooltip>; </Tooltip>;
} }
function ResetButton({ themeSettings, themeId }: { themeSettings: Settings["userCssVars"]; themeId: string; }) {
return <Tooltip text={"Reset settings to default"}>
{({ onMouseLeave, onMouseEnter }) => (
<div
style={{ cursor: "pointer" }}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onClick={async () => {
delete themeSettings[themeId];
}}>
<ResetIcon />
</div>
)}
</Tooltip>;
}
export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModalProps) { export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModalProps) {
// @ts-expect-error UseSettings<> can't determine this is a valid key // @ts-expect-error UseSettings<> can't determine this is a valid key
const themeSettings = useSettings(["userCssVars"], false).userCssVars[theme.id]; const { userCssVars } = useSettings(["userCssVars"], false);
const themeVars = userCssVars[theme.id];
const controls: ReactNode[] = []; const controls: ReactNode[] = [];
@ -86,7 +105,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
<SettingTextComponent <SettingTextComponent
label={varInfo.label} label={varInfo.label}
name={name} name={name}
themeSettings={themeSettings} themeSettings={themeVars}
/> />
); );
break; break;
@ -97,7 +116,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
<SettingBooleanComponent <SettingBooleanComponent
label={varInfo.label} label={varInfo.label}
name={name} name={name}
themeSettings={themeSettings} themeSettings={themeVars}
/> />
); );
break; break;
@ -108,7 +127,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
<SettingColorComponent <SettingColorComponent
label={varInfo.label} label={varInfo.label}
name={name} name={name}
themeSettings={themeSettings} themeSettings={themeVars}
/> />
); );
break; break;
@ -119,7 +138,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
<SettingNumberComponent <SettingNumberComponent
label={varInfo.label} label={varInfo.label}
name={name} name={name}
themeSettings={themeSettings} themeSettings={themeVars}
/> />
); );
break; break;
@ -132,7 +151,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
name={name} name={name}
options={varInfo.options} options={varInfo.options}
default={varInfo.default} default={varInfo.default}
themeSettings={themeSettings} themeSettings={themeVars}
/> />
); );
break; break;
@ -147,7 +166,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
min={varInfo.min} min={varInfo.min}
max={varInfo.max} max={varInfo.max}
step={varInfo.step} step={varInfo.step}
themeSettings={themeSettings} themeSettings={themeVars}
/> />
); );
break; break;
@ -160,8 +179,9 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
<ModalHeader separator={false}> <ModalHeader separator={false}>
<Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Settings for {theme.name}</Text> <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Settings for {theme.name}</Text>
<Flex style={{ gap: 4, marginRight: 4 }} className="vc-settings-usercss-ie-buttons"> <Flex style={{ gap: 4, marginRight: 4 }} className="vc-settings-usercss-ie-buttons">
<ExportButton themeSettings={themeSettings} /> <ExportButton themeSettings={themeVars} />
<ImportButton themeSettings={themeSettings} /> <ImportButton themeSettings={themeVars} />
<ResetButton themeSettings={userCssVars} themeId={theme.id} />
</Flex> </Flex>
<ModalCloseButton onClick={modalProps.onClose} /> <ModalCloseButton onClick={modalProps.onClose} />
</ModalHeader> </ModalHeader>