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

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

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

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

@ -1,7 +1,9 @@
import type { FormLabelProps } from '@invoke-ai/ui';
import { import {
Checkbox, Checkbox,
Flex, Flex,
FormControl, FormControl,
FormControlGroup,
FormLabel, FormLabel,
IconButton, IconButton,
Popover, Popover,
@ -28,6 +30,10 @@ import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiGearSixBold } from 'react-icons/pi'; import { PiGearSixBold } from 'react-icons/pi';
const formLabelProps: FormLabelProps = {
flexGrow: 1,
};
const IAICanvasSettingsButtonPopover = () => { const IAICanvasSettingsButtonPopover = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
@ -122,69 +128,73 @@ const IAICanvasSettingsButtonPopover = () => {
<PopoverContent> <PopoverContent>
<PopoverBody> <PopoverBody>
<Flex direction="column" gap={2}> <Flex direction="column" gap={2}>
<FormControl> <FormControlGroup formLabelProps={formLabelProps}>
<FormLabel>{t('unifiedCanvas.showIntermediates')}</FormLabel> <FormControl>
<Checkbox <FormLabel>{t('unifiedCanvas.showIntermediates')}</FormLabel>
isChecked={shouldShowIntermediates} <Checkbox
onChange={handleChangeShouldShowIntermediates} isChecked={shouldShowIntermediates}
/> onChange={handleChangeShouldShowIntermediates}
</FormControl> />
<FormControl> </FormControl>
<FormLabel>{t('unifiedCanvas.showGrid')}</FormLabel> <FormControl>
<Checkbox <FormLabel>{t('unifiedCanvas.showGrid')}</FormLabel>
isChecked={shouldShowGrid} <Checkbox
onChange={handleChangeShouldShowGrid} isChecked={shouldShowGrid}
/> onChange={handleChangeShouldShowGrid}
</FormControl> />
<FormControl> </FormControl>
<FormLabel>{t('unifiedCanvas.snapToGrid')}</FormLabel> <FormControl>
<Checkbox <FormLabel>{t('unifiedCanvas.snapToGrid')}</FormLabel>
isChecked={shouldSnapToGrid} <Checkbox
onChange={handleChangeShouldSnapToGrid} isChecked={shouldSnapToGrid}
/> onChange={handleChangeShouldSnapToGrid}
</FormControl> />
<FormControl> </FormControl>
<FormLabel>{t('unifiedCanvas.darkenOutsideSelection')}</FormLabel> <FormControl>
<Checkbox <FormLabel>
isChecked={shouldDarkenOutsideBoundingBox} {t('unifiedCanvas.darkenOutsideSelection')}
onChange={handleChangeShouldDarkenOutsideBoundingBox} </FormLabel>
/> <Checkbox
</FormControl> isChecked={shouldDarkenOutsideBoundingBox}
<FormControl> onChange={handleChangeShouldDarkenOutsideBoundingBox}
<FormLabel>{t('unifiedCanvas.autoSaveToGallery')}</FormLabel> />
<Checkbox </FormControl>
isChecked={shouldAutoSave} <FormControl>
onChange={handleChangeShouldAutoSave} <FormLabel>{t('unifiedCanvas.autoSaveToGallery')}</FormLabel>
/> <Checkbox
</FormControl> isChecked={shouldAutoSave}
<FormControl> onChange={handleChangeShouldAutoSave}
<FormLabel>{t('unifiedCanvas.saveBoxRegionOnly')}</FormLabel> />
<Checkbox </FormControl>
isChecked={shouldCropToBoundingBoxOnSave} <FormControl>
onChange={handleChangeShouldCropToBoundingBoxOnSave} <FormLabel>{t('unifiedCanvas.saveBoxRegionOnly')}</FormLabel>
/> <Checkbox
</FormControl> isChecked={shouldCropToBoundingBoxOnSave}
<FormControl> onChange={handleChangeShouldCropToBoundingBoxOnSave}
<FormLabel>{t('unifiedCanvas.limitStrokesToBox')}</FormLabel> />
<Checkbox </FormControl>
isChecked={shouldRestrictStrokesToBox} <FormControl>
onChange={handleChangeShouldRestrictStrokesToBox} <FormLabel>{t('unifiedCanvas.limitStrokesToBox')}</FormLabel>
/> <Checkbox
</FormControl> isChecked={shouldRestrictStrokesToBox}
<FormControl> onChange={handleChangeShouldRestrictStrokesToBox}
<FormLabel>{t('unifiedCanvas.showCanvasDebugInfo')}</FormLabel> />
<Checkbox </FormControl>
isChecked={shouldShowCanvasDebugInfo} <FormControl>
onChange={handleChangeShouldShowCanvasDebugInfo} <FormLabel>{t('unifiedCanvas.showCanvasDebugInfo')}</FormLabel>
/> <Checkbox
</FormControl> isChecked={shouldShowCanvasDebugInfo}
<FormControl> onChange={handleChangeShouldShowCanvasDebugInfo}
<FormLabel>{t('unifiedCanvas.antialiasing')}</FormLabel> />
<Checkbox </FormControl>
isChecked={shouldAntialias} <FormControl>
onChange={handleChangeShouldAntialias} <FormLabel>{t('unifiedCanvas.antialiasing')}</FormLabel>
/> <Checkbox
</FormControl> isChecked={shouldAntialias}
onChange={handleChangeShouldAntialias}
/>
</FormControl>
</FormControlGroup>
<ClearCanvasHistoryButtonModal /> <ClearCanvasHistoryButtonModal />
</Flex> </Flex>
</PopoverBody> </PopoverBody>

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

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

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

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