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): fix styling of some form elements

Browse Source
This commit is contained in:
psychedelicious 2024-01-23 22:40:05 +11:00 committed by Kent Keirsey
parent a0187cc9df
commit 1178fd8bd3
4 changed files with 135 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx
View File

@ -1,9 +1,12 @@
import type { FormLabelProps } from '@invoke-ai/ui';
import {
Box,
Button,
ButtonGroup,
Checkbox,
Flex,
FormControl,
FormControlGroup,
FormLabel,
IconButton,
Popover,
@ -33,6 +36,10 @@ import {
PiTrashSimpleFill,
} from 'react-icons/pi';
const formLabelProps: FormLabelProps = {
flexGrow: 1,
};
const IAICanvasMaskOptions = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
@ -124,6 +131,7 @@ const IAICanvasMaskOptions = () => {
<PopoverContent>
<PopoverBody>
<Flex direction="column" gap={2}>
<FormControlGroup formLabelProps={formLabelProps}>
<FormControl>
<FormLabel>{`${t('unifiedCanvas.enableMask')} (H)`}</FormLabel>
<Checkbox
@ -138,12 +146,14 @@ const IAICanvasMaskOptions = () => {
onChange={handleChangePreserveMaskedArea}
/>
</FormControl>
</FormControlGroup>
<Box pt={2} pb={2}>
<IAIColorPicker
color={maskColor}
onChange={handleChangeMaskColor}
/>
</Box>
<ButtonGroup isAttached={false}>
<Button
size="sm"
leftIcon={<PiFloppyDiskBackFill />}
@ -158,6 +168,7 @@ const IAICanvasMaskOptions = () => {
>
{t('unifiedCanvas.clearMask')}
</Button>
</ButtonGroup>
</Flex>
</PopoverBody>
</PopoverContent>

12
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx
View File

@ -1,7 +1,9 @@
import type { FormLabelProps } from '@invoke-ai/ui';
import {
Checkbox,
Flex,
FormControl,
FormControlGroup,
FormLabel,
IconButton,
Popover,
@ -28,6 +30,10 @@ import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { PiGearSixBold } from 'react-icons/pi';
const formLabelProps: FormLabelProps = {
flexGrow: 1,
};
const IAICanvasSettingsButtonPopover = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
@ -122,6 +128,7 @@ const IAICanvasSettingsButtonPopover = () => {
<PopoverContent>
<PopoverBody>
<Flex direction="column" gap={2}>
<FormControlGroup formLabelProps={formLabelProps}>
<FormControl>
<FormLabel>{t('unifiedCanvas.showIntermediates')}</FormLabel>
<Checkbox
@ -144,7 +151,9 @@ const IAICanvasSettingsButtonPopover = () => {
/>
</FormControl>
<FormControl>
<FormLabel>{t('unifiedCanvas.darkenOutsideSelection')}</FormLabel>
<FormLabel>
{t('unifiedCanvas.darkenOutsideSelection')}
</FormLabel>
<Checkbox
isChecked={shouldDarkenOutsideBoundingBox}
onChange={handleChangeShouldDarkenOutsideBoundingBox}
@ -185,6 +194,7 @@ const IAICanvasSettingsButtonPopover = () => {
onChange={handleChangeShouldAntialias}
/>
</FormControl>
</FormControlGroup>
<ClearCanvasHistoryButtonModal />
</Flex>
</PopoverBody>

2
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx
View File

@ -276,9 +276,9 @@ const IAICanvasToolChooserOptions = () => {
</Flex>
<Box w="full" pt={2} pb={2}>
<IAIColorPicker
withNumberInput={true}
color={brushColor}
onChange={handleChangeBrushColor}
withNumberInput
/>
</Box>
</Flex>

8
invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx
View File

@ -1,8 +1,10 @@
import type { FormLabelProps } from '@invoke-ai/ui';
import {
Checkbox,
CompositeSlider,
Flex,
FormControl,
FormControlGroup,
FormLabel,
IconButton,
Popover,
@ -24,6 +26,10 @@ import { RiSettings4Fill } from 'react-icons/ri';
import BoardAutoAddSelect from './Boards/BoardAutoAddSelect';
const formLabelProps: FormLabelProps = {
flexGrow: 1,
};
const GallerySettingsPopover = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
@ -78,6 +84,7 @@ const GallerySettingsPopover = () => {
defaultValue={90}
/>
</FormControl>
<FormControlGroup formLabelProps={formLabelProps}>
<FormControl>
<FormLabel>{t('gallery.autoSwitchNewImages')}</FormLabel>
<Switch
@ -92,6 +99,7 @@ const GallerySettingsPopover = () => {
onChange={handleChangeAutoAssignBoardOnClick}
/>
</FormControl>
</FormControlGroup>
<BoardAutoAddSelect />
</Flex>
</PopoverBody>