Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): use chakra menu for theme changer

Browse Source
This commit is contained in:
psychedelicious 2023-05-12 20:04:29 +10:00
parent 78cf70eaad
commit 60a565d7de
1 changed files with 42 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
invokeai/frontend/web/src/features/system/components/ThemeChanger.tsx
View File

@ -1,13 +1,26 @@
import { VStack } from '@chakra-ui/react'; import {
IconButton,
Menu,
MenuButton,
MenuItemOption,
MenuList,
MenuOptionGroup,
Tooltip,
} from '@chakra-ui/react';
import { RootState } from 'app/store/store'; import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton';
import IAIIconButton from 'common/components/IAIIconButton';
import IAIPopover from 'common/components/IAIPopover';
import { setCurrentTheme } from 'features/ui/store/uiSlice'; import { setCurrentTheme } from 'features/ui/store/uiSlice';
import type { ReactNode } from 'react'; import i18n from 'i18n';
import { map } from 'lodash-es';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaCheck, FaPalette } from 'react-icons/fa'; import { FaPalette } from 'react-icons/fa';
export const THEMES = {
dark: i18n.t('common.darkTheme'),
light: i18n.t('common.lightTheme'),
green: i18n.t('common.greenTheme'),
ocean: i18n.t('common.oceanTheme'),
};
export default function ThemeChanger() { export default function ThemeChanger() {
const { t } = useTranslation(); const { t } = useTranslation();
@ -17,51 +30,31 @@ export default function ThemeChanger() {
(state: RootState) => state.ui.currentTheme (state: RootState) => state.ui.currentTheme
); );
const THEMES = {
dark: t('common.darkTheme'),
light: t('common.lightTheme'),
green: t('common.greenTheme'),
ocean: t('common.oceanTheme'),
};
const handleChangeTheme = (theme: string) => {
dispatch(setCurrentTheme(theme));
};
const renderThemeOptions = () => {
const themesToRender: ReactNode[] = [];
Object.keys(THEMES).forEach((theme) => {
themesToRender.push(
<IAIButton
isChecked={currentTheme === theme}
leftIcon={currentTheme === theme ? <FaCheck /> : undefined}
size="sm"
onClick={() => handleChangeTheme(theme)}
key={theme}
>
{THEMES[theme as keyof typeof THEMES]}
</IAIButton>
);
});
return themesToRender;
};
return ( return (
<IAIPopover <Menu closeOnSelect={false}>
triggerComponent={ <Tooltip label={t('common.themeLabel')} hasArrow>
<IAIIconButton <MenuButton
aria-label={t('common.themeLabel')} as={IconButton}
size="sm"
variant="link"
data-variant="link"
fontSize={20}
icon={<FaPalette />} icon={<FaPalette />}
variant="link"
aria-label={t('common.themeLabel')}
fontSize={20}
minWidth={8}
/> />
} </Tooltip>
> <MenuList>
<VStack align="stretch">{renderThemeOptions()}</VStack> <MenuOptionGroup value={currentTheme}>
</IAIPopover> {map(THEMES, (themeName, themeKey: keyof typeof THEMES) => (
<MenuItemOption
key={themeKey}
value={themeKey}
onClick={() => dispatch(setCurrentTheme(themeKey))}
>
{themeName}
</MenuItemOption>
))}
</MenuOptionGroup>
</MenuList>
</Menu>
); );
} }