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

fix(ui): settings modal switch widths

Browse Source
This commit is contained in:
psychedelicious 2024-01-20 20:05:43 +11:00
parent be72765d02
commit b00ace852d
1 changed files with 130 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import {
Button, Button,
Flex, Flex,
FormControl, FormControl,
FormControlGroup,
FormLabel, FormLabel,
Modal, Modal,
ModalBody, ModalBody,
@ -210,148 +211,154 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
isCentered isCentered
> >
<ModalOverlay /> <ModalOverlay />
<ModalContent maxH="80vh" h="50vh"> <ModalContent maxH="80vh" h="68rem">
<ModalHeader bg="none">{t('common.settingsLabel')}</ModalHeader> <ModalHeader bg="none">{t('common.settingsLabel')}</ModalHeader>
<ModalCloseButton /> <ModalCloseButton />
<ModalBody display="flex" flexDir="column" gap={4}> <ModalBody display="flex" flexDir="column" gap={4}>
<ScrollableContent> <ScrollableContent>
<Flex flexDir="column" gap={4}> <Flex flexDir="column" gap={4}>
<StickyScrollable title={t('settings.general')}> <FormControlGroup formLabelProps={{ flexGrow: 1 }}>
<FormControl> <StickyScrollable title={t('settings.general')}>
<FormLabel>{t('settings.confirmOnDelete')}</FormLabel>
<Switch
isChecked={shouldConfirmOnDelete}
onChange={handleChangeShouldConfirmOnDelete}
/>
</FormControl>
</StickyScrollable>
<StickyScrollable title={t('settings.generation')}>
<FormControl isDisabled={!isNSFWCheckerAvailable}>
<FormLabel>{t('settings.enableNSFWChecker')}</FormLabel>
<Switch
isChecked={shouldUseNSFWChecker}
onChange={handleChangeShouldUseNSFWChecker}
/>
</FormControl>
<FormControl isDisabled={!isWatermarkerAvailable}>
<FormLabel>
{t('settings.enableInvisibleWatermark')}
</FormLabel>
<Switch
isChecked={shouldUseWatermarker}
onChange={handleChangeShouldUseWatermarker}
/>
</FormControl>
</StickyScrollable>
<StickyScrollable title={t('settings.ui')}>
<FormControl>
<FormLabel>{t('settings.showProgressInViewer')}</FormLabel>
<Switch
isChecked={shouldShowProgressInViewer}
onChange={handleChangeShouldShowProgressInViewer}
/>
</FormControl>
<FormControl>
<FormLabel>
{t('settings.antialiasProgressImages')}
</FormLabel>
<Switch
isChecked={shouldAntialiasProgressImage}
onChange={handleChangeShouldAntialiasProgressImage}
/>
</FormControl>
<FormControl>
<InformationalPopover
feature="noiseUseCPU"
inPortal={false}
>
<FormLabel>{t('parameters.useCpuNoise')}</FormLabel>
</InformationalPopover>
<Switch
isChecked={shouldUseCpuNoise}
onChange={handleChangeShouldUseCpuNoise}
/>
</FormControl>
{shouldShowLocalizationToggle && <SettingsLanguageSelect />}
<FormControl>
<FormLabel>
{t('settings.enableInformationalPopovers')}
</FormLabel>
<Switch
isChecked={shouldEnableInformationalPopovers}
onChange={handleChangeShouldEnableInformationalPopovers}
/>
</FormControl>
</StickyScrollable>
{shouldShowDeveloperSettings && (
<StickyScrollable title={t('settings.developer')}>
<FormControl> <FormControl>
<FormLabel>{t('settings.shouldLogToConsole')}</FormLabel> <FormLabel>{t('settings.confirmOnDelete')}</FormLabel>
<Switch <Switch
isChecked={shouldLogToConsole} isChecked={shouldConfirmOnDelete}
onChange={handleLogToConsoleChanged} onChange={handleChangeShouldConfirmOnDelete}
/> />
</FormControl> </FormControl>
<SettingsLogLevelSelect /> </StickyScrollable>
<FormControl>
<StickyScrollable title={t('settings.generation')}>
<FormControl isDisabled={!isNSFWCheckerAvailable}>
<FormLabel>{t('settings.enableNSFWChecker')}</FormLabel>
<Switch
isChecked={shouldUseNSFWChecker}
onChange={handleChangeShouldUseNSFWChecker}
/>
</FormControl>
<FormControl isDisabled={!isWatermarkerAvailable}>
<FormLabel> <FormLabel>
{t('settings.enableImageDebugging')} {t('settings.enableInvisibleWatermark')}
</FormLabel> </FormLabel>
<Switch <Switch
isChecked={enableImageDebugging} isChecked={shouldUseWatermarker}
onChange={handleChangeEnableImageDebugging} onChange={handleChangeShouldUseWatermarker}
/> />
</FormControl> </FormControl>
</StickyScrollable> </StickyScrollable>
)}
{shouldShowClearIntermediates && ( <StickyScrollable title={t('settings.ui')}>
<StickyScrollable title={t('settings.clearIntermediates')}> <FormControl>
<Button <FormLabel>
tooltip={ {t('settings.showProgressInViewer')}
hasPendingItems </FormLabel>
? t('settings.clearIntermediatesDisabled') <Switch
: undefined isChecked={shouldShowProgressInViewer}
} onChange={handleChangeShouldShowProgressInViewer}
colorScheme="warning" />
onClick={clearIntermediates} </FormControl>
isLoading={isLoadingClearIntermediates} <FormControl>
isDisabled={!intermediatesCount || hasPendingItems} <FormLabel>
> {t('settings.antialiasProgressImages')}
{t('settings.clearIntermediatesWithCount', { </FormLabel>
count: intermediatesCount ?? 0, <Switch
})} isChecked={shouldAntialiasProgressImage}
</Button> onChange={handleChangeShouldAntialiasProgressImage}
<Text fontWeight="bold"> />
{t('settings.clearIntermediatesDesc1')} </FormControl>
</Text> <FormControl>
<Text variant="subtext"> <InformationalPopover
{t('settings.clearIntermediatesDesc2')} feature="noiseUseCPU"
</Text> inPortal={false}
<Text variant="subtext"> >
{t('settings.clearIntermediatesDesc3')} <FormLabel>{t('parameters.useCpuNoise')}</FormLabel>
</Text> </InformationalPopover>
<Switch
isChecked={shouldUseCpuNoise}
onChange={handleChangeShouldUseCpuNoise}
/>
</FormControl>
{shouldShowLocalizationToggle && <SettingsLanguageSelect />}
<FormControl>
<FormLabel>
{t('settings.enableInformationalPopovers')}
</FormLabel>
<Switch
isChecked={shouldEnableInformationalPopovers}
onChange={handleChangeShouldEnableInformationalPopovers}
/>
</FormControl>
</StickyScrollable> </StickyScrollable>
)}
<StickyScrollable title={t('settings.resetWebUI')}> {shouldShowDeveloperSettings && (
<Button colorScheme="error" onClick={handleClickResetWebUI}> <StickyScrollable title={t('settings.developer')}>
{t('settings.resetWebUI')} <FormControl>
</Button> <FormLabel>
{shouldShowResetWebUiText && ( {t('settings.shouldLogToConsole')}
<> </FormLabel>
<Text variant="subtext"> <Switch
{t('settings.resetWebUIDesc1')} isChecked={shouldLogToConsole}
</Text> onChange={handleLogToConsoleChanged}
<Text variant="subtext"> />
{t('settings.resetWebUIDesc2')} </FormControl>
</Text> <SettingsLogLevelSelect />
</> <FormControl>
<FormLabel>
{t('settings.enableImageDebugging')}
</FormLabel>
<Switch
isChecked={enableImageDebugging}
onChange={handleChangeEnableImageDebugging}
/>
</FormControl>
</StickyScrollable>
)} )}
</StickyScrollable>
{shouldShowClearIntermediates && (
<StickyScrollable title={t('settings.clearIntermediates')}>
<Button
tooltip={
hasPendingItems
? t('settings.clearIntermediatesDisabled')
: undefined
}
colorScheme="warning"
onClick={clearIntermediates}
isLoading={isLoadingClearIntermediates}
isDisabled={!intermediatesCount || hasPendingItems}
>
{t('settings.clearIntermediatesWithCount', {
count: intermediatesCount ?? 0,
})}
</Button>
<Text fontWeight="bold">
{t('settings.clearIntermediatesDesc1')}
</Text>
<Text variant="subtext">
{t('settings.clearIntermediatesDesc2')}
</Text>
<Text variant="subtext">
{t('settings.clearIntermediatesDesc3')}
</Text>
</StickyScrollable>
)}
<StickyScrollable title={t('settings.resetWebUI')}>
<Button colorScheme="error" onClick={handleClickResetWebUI}>
{t('settings.resetWebUI')}
</Button>
{shouldShowResetWebUiText && (
<>
<Text variant="subtext">
{t('settings.resetWebUIDesc1')}
</Text>
<Text variant="subtext">
{t('settings.resetWebUIDesc2')}
</Text>
</>
)}
</StickyScrollable>
</FormControlGroup>
</Flex> </Flex>
</ScrollableContent> </ScrollableContent>
</ModalBody> </ModalBody>