feat: add reset to default button
This commit is contained in:
parent
3cf60f8daa
commit
6c551650d0
|
@ -77,7 +77,7 @@ export interface Settings {
|
|||
};
|
||||
|
||||
userCssVars: {
|
||||
[fileName: string]: {
|
||||
[themeId: string]: {
|
||||
[varName: string]: string;
|
||||
};
|
||||
};
|
||||
|
|
|
@ -326,3 +326,22 @@ export function PasteIcon(props: IconProps) {
|
|||
</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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
import { Settings, useSettings } from "@api/Settings";
|
||||
import { Flex } from "@components/Flex";
|
||||
import { CopyIcon, PasteIcon } from "@components/Icons";
|
||||
import { CopyIcon, PasteIcon, ResetIcon } from "@components/Icons";
|
||||
import { copyWithToast } from "@utils/misc";
|
||||
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
|
||||
import { showToast, Text, Toasts, Tooltip } from "@webpack/common";
|
||||
|
@ -73,9 +73,28 @@ function ImportButton({ themeSettings }: { themeSettings: Settings["userCssVars"
|
|||
</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) {
|
||||
// @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[] = [];
|
||||
|
||||
|
@ -86,7 +105,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
|
|||
<SettingTextComponent
|
||||
label={varInfo.label}
|
||||
name={name}
|
||||
themeSettings={themeSettings}
|
||||
themeSettings={themeVars}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
@ -97,7 +116,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
|
|||
<SettingBooleanComponent
|
||||
label={varInfo.label}
|
||||
name={name}
|
||||
themeSettings={themeSettings}
|
||||
themeSettings={themeVars}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
@ -108,7 +127,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
|
|||
<SettingColorComponent
|
||||
label={varInfo.label}
|
||||
name={name}
|
||||
themeSettings={themeSettings}
|
||||
themeSettings={themeVars}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
@ -119,7 +138,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
|
|||
<SettingNumberComponent
|
||||
label={varInfo.label}
|
||||
name={name}
|
||||
themeSettings={themeSettings}
|
||||
themeSettings={themeVars}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
@ -132,7 +151,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
|
|||
name={name}
|
||||
options={varInfo.options}
|
||||
default={varInfo.default}
|
||||
themeSettings={themeSettings}
|
||||
themeSettings={themeVars}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
@ -147,7 +166,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
|
|||
min={varInfo.min}
|
||||
max={varInfo.max}
|
||||
step={varInfo.step}
|
||||
themeSettings={themeSettings}
|
||||
themeSettings={themeVars}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
@ -160,8 +179,9 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
|
|||
<ModalHeader separator={false}>
|
||||
<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">
|
||||
<ExportButton themeSettings={themeSettings} />
|
||||
<ImportButton themeSettings={themeSettings} />
|
||||
<ExportButton themeSettings={themeVars} />
|
||||
<ImportButton themeSettings={themeVars} />
|
||||
<ResetButton themeSettings={userCssVars} themeId={theme.id} />
|
||||
</Flex>
|
||||
<ModalCloseButton onClick={modalProps.onClose} />
|
||||
</ModalHeader>
|
||||
|
|
Loading…
Reference in a new issue