github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

tweak(ui): simplify layout of inplace install form elements

Browse Source
This commit is contained in:
psychedelicious
2024-03-08 14:25:58 +11:00
parent a28547b3dd
commit d0fcdbe8a3
2 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Checkbox, Flex, FormControl, FormLabel, Input, Tooltip } from '@invoke-ai/ui-library';
import { Button, Checkbox, Flex, FormControl, FormHelperText, FormLabel, Input } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
@@ -64,28 +64,36 @@ export const InstallModelForm = () => {
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Flex gap={2} alignItems="flex-end" justifyContent="space-between">
<FormControl>
<Flex direction="column" w="full">
<Flex flexDir="column" gap={4}>
<Flex gap={2} alignItems="flex-end" justifyContent="space-between">
<FormControl orientation="vertical">
<FormLabel>{t('modelManager.modelLocation')}</FormLabel>
<Input {...register('location')} />
</FormControl>
<Button
onClick={handleSubmit(onSubmit)}
isDisabled={!formState.isDirty}
isLoading={isLoading}
type="submit"
size="sm"
mb={1}
>
{t('modelManager.addModel')}
</Button>
</Flex>
<FormControl>
<Flex flexDir="column" gap={2}>
<Flex gap={4}>
<Checkbox {...register('inplace')} />
<FormLabel>
{t('modelManager.inplaceInstall')} ({t('modelManager.localOnly')})
</FormLabel>
</Flex>
<FormHelperText>{t('modelManager.inplaceInstallDesc')}</FormHelperText>
</Flex>
</FormControl>
<Button onClick={handleSubmit(onSubmit)} isDisabled={!formState.isDirty} isLoading={isLoading} type="submit">
{t('modelManager.addModel')}
</Button>
</Flex>
<FormControl flexDir="column" gap="1" alignItems="flex-start" mt={3}>
<Tooltip label={t('modelManager.inplaceInstallTooltip')}>
<Flex gap={3}>
<Checkbox {...register('inplace')} />
<FormLabel>
{t('modelManager.inplaceInstall')} ({t('modelManager.localOnly')})
</FormLabel>
</Flex>
</Tooltip>
</FormControl>
</form>
);
};