feat: add reset to default button
This commit is contained in:
parent
3cf60f8daa
commit
6c551650d0
|
@ -77,7 +77,7 @@ export interface Settings {
|
||||||
};
|
};
|
||||||
|
|
||||||
userCssVars: {
|
userCssVars: {
|
||||||
[fileName: string]: {
|
[themeId: string]: {
|
||||||
[varName: string]: string;
|
[varName: string]: string;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue