ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce toasts when switching themes

Browse Source
This commit is contained in:
schroda
2024-09-07 01:47:06 +02:00
parent 74944407f7
commit 4a742bb0ff
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/ui/AppThemes.ts
View File

@@ -196,8 +196,14 @@ const getFontsFromTheme = (obj: Record<string, any>, fonts: string[] = []): stri
}; };
const loadedFonts: string[] = []; const loadedFonts: string[] = [];
export const hasMissingFonts = (theme: ThemeOptions): boolean => {
const themeFonts = getFontsFromTheme(theme.typography ?? {});
return !!themeFonts.length && themeFonts.some((font) => !loadedFonts.includes(font));
};
export const loadThemeFonts = async (theme: ThemeOptions): Promise<void> => { export const loadThemeFonts = async (theme: ThemeOptions): Promise<void> => {
const themeFonts = getFontsFromTheme(theme); const themeFonts = getFontsFromTheme(theme.typography ?? {});
const missingThemeFonts = themeFonts.filter((font) => !loadedFonts.includes(font)); const missingThemeFonts = themeFonts.filter((font) => !loadedFonts.includes(font));
if (!missingThemeFonts.length) { if (!missingThemeFonts.length) {

13
src/screens/settings/appearance/theme/ThemePreview.tsx
View File

@@ -21,7 +21,7 @@ import Tooltip from '@mui/material/Tooltip';
import EditIcon from '@mui/icons-material/Edit'; import EditIcon from '@mui/icons-material/Edit';
import { bindDialog, usePopupState } from 'material-ui-popup-state/hooks'; import { bindDialog, usePopupState } from 'material-ui-popup-state/hooks';
import { ThemeModeContext } from '@/components/context/ThemeModeContext.tsx'; import { ThemeModeContext } from '@/components/context/ThemeModeContext.tsx';
import { AppTheme, loadThemeFonts } from '@/lib/ui/AppThemes.ts'; import { AppTheme, hasMissingFonts, loadThemeFonts } from '@/lib/ui/AppThemes.ts';
import { createTheme } from '@/theme.ts'; import { createTheme } from '@/theme.ts';
import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx'; import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx';
import { makeToast } from '@/components/util/Toast'; import { makeToast } from '@/components/util/Toast';
@@ -84,12 +84,15 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
backgroundColor: 'background.default', backgroundColor: 'background.default',
}} }}
onClick={() => { onClick={() => {
const needToLoadFonts = hasMissingFonts(theme.muiTheme);
if (!needToLoadFonts) {
setAppTheme(theme.id);
return;
}
makeToast(t('settings.appearance.theme.select.fonts.loading'), 'info'); makeToast(t('settings.appearance.theme.select.fonts.loading'), 'info');
loadThemeFonts(theme.muiTheme) loadThemeFonts(theme.muiTheme)
.then(() => { .then(() => setAppTheme(theme.id))
setAppTheme(theme.id);
makeToast(t('settings.appearance.theme.select.success'), 'success');
})
.catch(() => makeToast(t('settings.appearance.theme.select.fonts.error'), 'error')); .catch(() => makeToast(t('settings.appearance.theme.select.fonts.error'), 'error'));
}} }}
> >