ulysia/Vencord
1
0
Fork 0
Code Pull requests Activity

fix: settings reset not refreshing

Browse source
This commit is contained in:
Lewis Crichton 2024-01-14 16:37:24 +00:00
parent 6c551650d0
commit 686bb118b4
No known key found for this signature in database
2 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/ThemeSettings/ThemesTab.tsx
View file

@ -116,9 +116,10 @@ interface UserCSSCardProps {
enabled: boolean; enabled: boolean;
onChange: (enabled: boolean) => void; onChange: (enabled: boolean) => void;
onDelete: () => void; onDelete: () => void;
onSettingsReset: () => void;
} }
function UserCSSThemeCard({ theme, enabled, onChange, onDelete }: UserCSSCardProps) { function UserCSSThemeCard({ theme, enabled, onChange, onDelete, onSettingsReset }: UserCSSCardProps) {
const missingPlugins = useMemo(() => const missingPlugins = useMemo(() =>
theme.requiredPlugins?.filter(p => !isPluginEnabled(p)), [theme]); theme.requiredPlugins?.filter(p => !isPluginEnabled(p)), [theme]);
@ -148,7 +149,7 @@ function UserCSSThemeCard({ theme, enabled, onChange, onDelete }: UserCSSCardPro
{theme.vars && ( {theme.vars && (
<div style={{ cursor: "pointer" }} onClick={ <div style={{ cursor: "pointer" }} onClick={
() => openModal(modalProps => () => openModal(modalProps =>
<UserCSSSettingsModal modalProps={modalProps} theme={theme} />) <UserCSSSettingsModal modalProps={modalProps} theme={theme} onSettingsReset={onSettingsReset} />)
}> }>
<CogWheel /> <CogWheel />
</div> </div>
@ -392,6 +393,7 @@ function ThemesTab() {
await VencordNative.themes.deleteTheme(theme.fileName); await VencordNative.themes.deleteTheme(theme.fileName);
refreshLocalThemes(); refreshLocalThemes();
}} }}
onSettingsReset={refreshLocalThemes}
theme={theme as UserstyleHeader} theme={theme as UserstyleHeader}
/> />
)))} )))}

16
src/components/ThemeSettings/UserCSSModal.tsx
View file

@ -18,6 +18,7 @@ import { SettingBooleanComponent, SettingColorComponent, SettingNumberComponent,
interface UserCSSSettingsModalProps { interface UserCSSSettingsModalProps {
modalProps: ModalProps; modalProps: ModalProps;
theme: UserstyleHeader; theme: UserstyleHeader;
onSettingsReset: () => void;
} }
function ExportButton({ themeSettings }: { themeSettings: Settings["userCssVars"][""]; }) { function ExportButton({ themeSettings }: { themeSettings: Settings["userCssVars"][""]; }) {
@ -73,7 +74,14 @@ function ImportButton({ themeSettings }: { themeSettings: Settings["userCssVars"
</Tooltip>; </Tooltip>;
} }
function ResetButton({ themeSettings, themeId }: { themeSettings: Settings["userCssVars"]; themeId: string; }) { interface ResetButtonProps {
themeSettings: Settings["userCssVars"];
themeId: string;
close: () => Promise<void>;
onReset: () => void;
}
function ResetButton({ themeSettings, themeId, close, onReset }: ResetButtonProps) {
return <Tooltip text={"Reset settings to default"}> return <Tooltip text={"Reset settings to default"}>
{({ onMouseLeave, onMouseEnter }) => ( {({ onMouseLeave, onMouseEnter }) => (
<div <div
@ -82,7 +90,9 @@ function ResetButton({ themeSettings, themeId }: { themeSettings: Settings["user
onMouseLeave={onMouseLeave} onMouseLeave={onMouseLeave}
onClick={async () => { onClick={async () => {
await close(); // close the modal first to stop rendering
delete themeSettings[themeId]; delete themeSettings[themeId];
onReset();
}}> }}>
<ResetIcon /> <ResetIcon />
</div> </div>
@ -90,7 +100,7 @@ function ResetButton({ themeSettings, themeId }: { themeSettings: Settings["user
</Tooltip>; </Tooltip>;
} }
export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModalProps) { export function UserCSSSettingsModal({ modalProps, theme, onSettingsReset }: 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 { userCssVars } = useSettings(["userCssVars"], false); const { userCssVars } = useSettings(["userCssVars"], false);
@ -181,7 +191,7 @@ export function UserCSSSettingsModal({ modalProps, theme }: UserCSSSettingsModal
<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={themeVars} /> <ExportButton themeSettings={themeVars} />
<ImportButton themeSettings={themeVars} /> <ImportButton themeSettings={themeVars} />
<ResetButton themeSettings={userCssVars} themeId={theme.id} /> <ResetButton themeSettings={userCssVars} themeId={theme.id} close={modalProps.onClose} onReset={onSettingsReset} />
</Flex> </Flex>
<ModalCloseButton onClick={modalProps.onClose} /> <ModalCloseButton onClick={modalProps.onClose} />
</ModalHeader> </ModalHeader>