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

add optional config for settings modal

Browse Source
This commit is contained in:
Mary Hipp 2023-06-01 10:14:39 -04:00 committed by psychedelicious
parent c9e621093e
commit d66979073b
1 changed files with 67 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
View File

@ -35,7 +35,13 @@ import {
} from 'features/ui/store/uiSlice'; } from 'features/ui/store/uiSlice';
import { UIState } from 'features/ui/store/uiTypes'; import { UIState } from 'features/ui/store/uiTypes';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
import { ChangeEvent, cloneElement, ReactElement, useCallback } from 'react'; import {
ChangeEvent,
cloneElement,
ReactElement,
useCallback,
useEffect,
} from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { VALID_LOG_LEVELS } from 'app/logging/useLogger'; import { VALID_LOG_LEVELS } from 'app/logging/useLogger';
import { LogLevelName } from 'roarr'; import { LogLevelName } from 'roarr';
@ -85,15 +91,33 @@ const modalSectionStyles: ChakraProps['sx'] = {
borderRadius: 'base', borderRadius: 'base',
}; };
type ConfigOptions = {
shouldShowDeveloperSettings: boolean;
shouldShowResetWebUiText: boolean;
shouldShowBetaLayout: boolean;
};
type SettingsModalProps = { type SettingsModalProps = {
/* The button to open the Settings Modal */ /* The button to open the Settings Modal */
children: ReactElement; children: ReactElement;
config?: ConfigOptions;
}; };
const SettingsModal = ({ children }: SettingsModalProps) => { const SettingsModal = ({ children, config }: SettingsModalProps) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const shouldShowBetaLayout = config?.shouldShowBetaLayout ?? true;
const shouldShowDeveloperSettings =
config?.shouldShowDeveloperSettings ?? true;
const shouldShowResetWebUiText = config?.shouldShowResetWebUiText ?? true;
useEffect(() => {
if (!shouldShowDeveloperSettings) {
dispatch(shouldLogToConsoleChanged(false));
}
}, [shouldShowDeveloperSettings, dispatch]);
const { const {
isOpen: isSettingsModalOpen, isOpen: isSettingsModalOpen,
onOpen: onSettingsModalOpen, onOpen: onSettingsModalOpen,
@ -189,13 +213,15 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
dispatch(setShouldDisplayGuides(e.target.checked)) dispatch(setShouldDisplayGuides(e.target.checked))
} }
/> />
<IAISwitch {shouldShowBetaLayout && (
label={t('settings.useCanvasBeta')} <IAISwitch
isChecked={shouldUseCanvasBetaLayout} label={t('settings.useCanvasBeta')}
onChange={(e: ChangeEvent<HTMLInputElement>) => isChecked={shouldUseCanvasBetaLayout}
dispatch(setShouldUseCanvasBetaLayout(e.target.checked)) onChange={(e: ChangeEvent<HTMLInputElement>) =>
} dispatch(setShouldUseCanvasBetaLayout(e.target.checked))
/> }
/>
)}
<IAISwitch <IAISwitch
label={t('settings.useSlidersForAll')} label={t('settings.useSlidersForAll')}
isChecked={shouldUseSliders} isChecked={shouldUseSliders}
@ -221,38 +247,44 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
/> />
</Flex> </Flex>
<Flex sx={modalSectionStyles}> {shouldShowDeveloperSettings && (
<Heading size="sm">{t('settings.developer')}</Heading> <Flex sx={modalSectionStyles}>
<IAISwitch <Heading size="sm">{t('settings.developer')}</Heading>
label={t('settings.shouldLogToConsole')} <IAISwitch
isChecked={shouldLogToConsole} label={t('settings.shouldLogToConsole')}
onChange={handleLogToConsoleChanged} isChecked={shouldLogToConsole}
/> onChange={handleLogToConsoleChanged}
<IAISelect />
horizontal <IAISelect
spaceEvenly horizontal
isDisabled={!shouldLogToConsole} spaceEvenly
label={t('settings.consoleLogLevel')} isDisabled={!shouldLogToConsole}
onChange={handleLogLevelChanged} label={t('settings.consoleLogLevel')}
value={consoleLogLevel} onChange={handleLogLevelChanged}
validValues={VALID_LOG_LEVELS.concat()} value={consoleLogLevel}
/> validValues={VALID_LOG_LEVELS.concat()}
<IAISwitch />
label={t('settings.enableImageDebugging')} <IAISwitch
isChecked={enableImageDebugging} label={t('settings.enableImageDebugging')}
onChange={(e: ChangeEvent<HTMLInputElement>) => isChecked={enableImageDebugging}
dispatch(setEnableImageDebugging(e.target.checked)) onChange={(e: ChangeEvent<HTMLInputElement>) =>
} dispatch(setEnableImageDebugging(e.target.checked))
/> }
</Flex> />
</Flex>
)}
<Flex sx={modalSectionStyles}> <Flex sx={modalSectionStyles}>
<Heading size="sm">{t('settings.resetWebUI')}</Heading> <Heading size="sm">{t('settings.resetWebUI')}</Heading>
<IAIButton colorScheme="error" onClick={handleClickResetWebUI}> <IAIButton colorScheme="error" onClick={handleClickResetWebUI}>
{t('settings.resetWebUI')} {t('settings.resetWebUI')}
</IAIButton> </IAIButton>
<Text>{t('settings.resetWebUIDesc1')}</Text> {shouldShowResetWebUiText && (
<Text>{t('settings.resetWebUIDesc2')}</Text> <>
<Text>{t('settings.resetWebUIDesc1')}</Text>
<Text>{t('settings.resetWebUIDesc2')}</Text>
</>
)}
</Flex> </Flex>
</Flex> </Flex>
</ModalBody> </ModalBody>