Skip to content

Commit 1178fd8

Browse files
psychedelicioushipsterusername
psychedelicious
authored and
hipsterusername
committed
fix(ui): fix styling of some form elements
1 parent a0187cc commit 1178fd8

File tree

4 files changed

+135
-106
lines changed

4 files changed

+135
-106
lines changed

‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasMaskOptions.tsx‎

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1+
import type { FormLabelProps } from '@invoke-ai/ui';
12
import {
23
Box,
34
Button,
5+
ButtonGroup,
46
Checkbox,
57
Flex,
68
FormControl,
9+
FormControlGroup,
710
FormLabel,
811
IconButton,
912
Popover,
@@ -33,6 +36,10 @@ import {
3336
PiTrashSimpleFill,
3437
} from 'react-icons/pi';
3538

39+
const formLabelProps: FormLabelProps = {
40+
flexGrow: 1,
41+
};
42+
3643
const IAICanvasMaskOptions = () => {
3744
const dispatch = useAppDispatch();
3845
const { t } = useTranslation();
@@ -124,40 +131,44 @@ const IAICanvasMaskOptions = () => {
124131
<PopoverContent>
125132
<PopoverBody>
126133
<Flex direction="column" gap={2}>
127-
<FormControl>
128-
<FormLabel>{`${t('unifiedCanvas.enableMask')} (H)`}</FormLabel>
129-
<Checkbox
130-
isChecked={isMaskEnabled}
131-
onChange={handleToggleEnableMask}
132-
/>
133-
</FormControl>
134-
<FormControl>
135-
<FormLabel>{t('unifiedCanvas.preserveMaskedArea')}</FormLabel>
136-
<Checkbox
137-
isChecked={shouldPreserveMaskedArea}
138-
onChange={handleChangePreserveMaskedArea}
139-
/>
140-
</FormControl>
134+
<FormControlGroup formLabelProps={formLabelProps}>
135+
<FormControl>
136+
<FormLabel>{`${t('unifiedCanvas.enableMask')} (H)`}</FormLabel>
137+
<Checkbox
138+
isChecked={isMaskEnabled}
139+
onChange={handleToggleEnableMask}
140+
/>
141+
</FormControl>
142+
<FormControl>
143+
<FormLabel>{t('unifiedCanvas.preserveMaskedArea')}</FormLabel>
144+
<Checkbox
145+
isChecked={shouldPreserveMaskedArea}
146+
onChange={handleChangePreserveMaskedArea}
147+
/>
148+
</FormControl>
149+
</FormControlGroup>
141150
<Box pt={2} pb={2}>
142151
<IAIColorPicker
143152
color={maskColor}
144153
onChange={handleChangeMaskColor}
145154
/>
146155
</Box>
147-
<Button
148-
size="sm"
149-
leftIcon={<PiFloppyDiskBackFill />}
150-
onClick={handleSaveMask}
151-
>
152-
{t('unifiedCanvas.saveMask')}
153-
</Button>
154-
<Button
155-
size="sm"
156-
leftIcon={<PiTrashSimpleFill />}
157-
onClick={handleClearMask}
158-
>
159-
{t('unifiedCanvas.clearMask')}
160-
</Button>
156+
<ButtonGroup isAttached={false}>
157+
<Button
158+
size="sm"
159+
leftIcon={<PiFloppyDiskBackFill />}
160+
onClick={handleSaveMask}
161+
>
162+
{t('unifiedCanvas.saveMask')}
163+
</Button>
164+
<Button
165+
size="sm"
166+
leftIcon={<PiTrashSimpleFill />}
167+
onClick={handleClearMask}
168+
>
169+
{t('unifiedCanvas.clearMask')}
170+
</Button>
171+
</ButtonGroup>
161172
</Flex>
162173
</PopoverBody>
163174
</PopoverContent>

‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx‎

Lines changed: 73 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import type { FormLabelProps } from '@invoke-ai/ui';
12
import {
23
Checkbox,
34
Flex,
45
FormControl,
6+
FormControlGroup,
57
FormLabel,
68
IconButton,
79
Popover,
@@ -28,6 +30,10 @@ import { useHotkeys } from 'react-hotkeys-hook';
2830
import { useTranslation } from 'react-i18next';
2931
import { PiGearSixBold } from 'react-icons/pi';
3032

33+
const formLabelProps: FormLabelProps = {
34+
flexGrow: 1,
35+
};
36+
3137
const IAICanvasSettingsButtonPopover = () => {
3238
const dispatch = useAppDispatch();
3339
const { t } = useTranslation();
@@ -122,69 +128,73 @@ const IAICanvasSettingsButtonPopover = () => {
122128
<PopoverContent>
123129
<PopoverBody>
124130
<Flex direction="column" gap={2}>
125-
<FormControl>
126-
<FormLabel>{t('unifiedCanvas.showIntermediates')}</FormLabel>
127-
<Checkbox
128-
isChecked={shouldShowIntermediates}
129-
onChange={handleChangeShouldShowIntermediates}
130-
/>
131-
</FormControl>
132-
<FormControl>
133-
<FormLabel>{t('unifiedCanvas.showGrid')}</FormLabel>
134-
<Checkbox
135-
isChecked={shouldShowGrid}
136-
onChange={handleChangeShouldShowGrid}
137-
/>
138-
</FormControl>
139-
<FormControl>
140-
<FormLabel>{t('unifiedCanvas.snapToGrid')}</FormLabel>
141-
<Checkbox
142-
isChecked={shouldSnapToGrid}
143-
onChange={handleChangeShouldSnapToGrid}
144-
/>
145-
</FormControl>
146-
<FormControl>
147-
<FormLabel>{t('unifiedCanvas.darkenOutsideSelection')}</FormLabel>
148-
<Checkbox
149-
isChecked={shouldDarkenOutsideBoundingBox}
150-
onChange={handleChangeShouldDarkenOutsideBoundingBox}
151-
/>
152-
</FormControl>
153-
<FormControl>
154-
<FormLabel>{t('unifiedCanvas.autoSaveToGallery')}</FormLabel>
155-
<Checkbox
156-
isChecked={shouldAutoSave}
157-
onChange={handleChangeShouldAutoSave}
158-
/>
159-
</FormControl>
160-
<FormControl>
161-
<FormLabel>{t('unifiedCanvas.saveBoxRegionOnly')}</FormLabel>
162-
<Checkbox
163-
isChecked={shouldCropToBoundingBoxOnSave}
164-
onChange={handleChangeShouldCropToBoundingBoxOnSave}
165-
/>
166-
</FormControl>
167-
<FormControl>
168-
<FormLabel>{t('unifiedCanvas.limitStrokesToBox')}</FormLabel>
169-
<Checkbox
170-
isChecked={shouldRestrictStrokesToBox}
171-
onChange={handleChangeShouldRestrictStrokesToBox}
172-
/>
173-
</FormControl>
174-
<FormControl>
175-
<FormLabel>{t('unifiedCanvas.showCanvasDebugInfo')}</FormLabel>
176-
<Checkbox
177-
isChecked={shouldShowCanvasDebugInfo}
178-
onChange={handleChangeShouldShowCanvasDebugInfo}
179-
/>
180-
</FormControl>
181-
<FormControl>
182-
<FormLabel>{t('unifiedCanvas.antialiasing')}</FormLabel>
183-
<Checkbox
184-
isChecked={shouldAntialias}
185-
onChange={handleChangeShouldAntialias}
186-
/>
187-
</FormControl>
131+
<FormControlGroup formLabelProps={formLabelProps}>
132+
<FormControl>
133+
<FormLabel>{t('unifiedCanvas.showIntermediates')}</FormLabel>
134+
<Checkbox
135+
isChecked={shouldShowIntermediates}
136+
onChange={handleChangeShouldShowIntermediates}
137+
/>
138+
</FormControl>
139+
<FormControl>
140+
<FormLabel>{t('unifiedCanvas.showGrid')}</FormLabel>
141+
<Checkbox
142+
isChecked={shouldShowGrid}
143+
onChange={handleChangeShouldShowGrid}
144+
/>
145+
</FormControl>
146+
<FormControl>
147+
<FormLabel>{t('unifiedCanvas.snapToGrid')}</FormLabel>
148+
<Checkbox
149+
isChecked={shouldSnapToGrid}
150+
onChange={handleChangeShouldSnapToGrid}
151+
/>
152+
</FormControl>
153+
<FormControl>
154+
<FormLabel>
155+
{t('unifiedCanvas.darkenOutsideSelection')}
156+
</FormLabel>
157+
<Checkbox
158+
isChecked={shouldDarkenOutsideBoundingBox}
159+
onChange={handleChangeShouldDarkenOutsideBoundingBox}
160+
/>
161+
</FormControl>
162+
<FormControl>
163+
<FormLabel>{t('unifiedCanvas.autoSaveToGallery')}</FormLabel>
164+
<Checkbox
165+
isChecked={shouldAutoSave}
166+
onChange={handleChangeShouldAutoSave}
167+
/>
168+
</FormControl>
169+
<FormControl>
170+
<FormLabel>{t('unifiedCanvas.saveBoxRegionOnly')}</FormLabel>
171+
<Checkbox
172+
isChecked={shouldCropToBoundingBoxOnSave}
173+
onChange={handleChangeShouldCropToBoundingBoxOnSave}
174+
/>
175+
</FormControl>
176+
<FormControl>
177+
<FormLabel>{t('unifiedCanvas.limitStrokesToBox')}</FormLabel>
178+
<Checkbox
179+
isChecked={shouldRestrictStrokesToBox}
180+
onChange={handleChangeShouldRestrictStrokesToBox}
181+
/>
182+
</FormControl>
183+
<FormControl>
184+
<FormLabel>{t('unifiedCanvas.showCanvasDebugInfo')}</FormLabel>
185+
<Checkbox
186+
isChecked={shouldShowCanvasDebugInfo}
187+
onChange={handleChangeShouldShowCanvasDebugInfo}
188+
/>
189+
</FormControl>
190+
<FormControl>
191+
<FormLabel>{t('unifiedCanvas.antialiasing')}</FormLabel>
192+
<Checkbox
193+
isChecked={shouldAntialias}
194+
onChange={handleChangeShouldAntialias}
195+
/>
196+
</FormControl>
197+
</FormControlGroup>
188198
<ClearCanvasHistoryButtonModal />
189199
</Flex>
190200
</PopoverBody>

‎invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolChooserOptions.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,9 +276,9 @@ const IAICanvasToolChooserOptions = () => {
276276
</Flex>
277277
<Box w="full" pt={2} pb={2}>
278278
<IAIColorPicker
279-
withNumberInput={true}
280279
color={brushColor}
281280
onChange={handleChangeBrushColor}
281+
withNumberInput
282282
/>
283283
</Box>
284284
</Flex>

‎invokeai/frontend/web/src/features/gallery/components/GallerySettingsPopover.tsx‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
import type { FormLabelProps } from '@invoke-ai/ui';
12
import {
23
Checkbox,
34
CompositeSlider,
45
Flex,
56
FormControl,
7+
FormControlGroup,
68
FormLabel,
79
IconButton,
810
Popover,
@@ -24,6 +26,10 @@ import { RiSettings4Fill } from 'react-icons/ri';
2426

2527
import BoardAutoAddSelect from './Boards/BoardAutoAddSelect';
2628

29+
const formLabelProps: FormLabelProps = {
30+
flexGrow: 1,
31+
};
32+
2733
const GallerySettingsPopover = () => {
2834
const dispatch = useAppDispatch();
2935
const { t } = useTranslation();
@@ -78,20 +84,22 @@ const GallerySettingsPopover = () => {
7884
defaultValue={90}
7985
/>
8086
</FormControl>
81-
<FormControl>
82-
<FormLabel>{t('gallery.autoSwitchNewImages')}</FormLabel>
83-
<Switch
84-
isChecked={shouldAutoSwitch}
85-
onChange={handleChangeAutoSwitch}
86-
/>
87-
</FormControl>
88-
<FormControl>
89-
<FormLabel>{t('gallery.autoAssignBoardOnClick')}</FormLabel>
90-
<Checkbox
91-
isChecked={autoAssignBoardOnClick}
92-
onChange={handleChangeAutoAssignBoardOnClick}
93-
/>
94-
</FormControl>
87+
<FormControlGroup formLabelProps={formLabelProps}>
88+
<FormControl>
89+
<FormLabel>{t('gallery.autoSwitchNewImages')}</FormLabel>
90+
<Switch
91+
isChecked={shouldAutoSwitch}
92+
onChange={handleChangeAutoSwitch}
93+
/>
94+
</FormControl>
95+
<FormControl>
96+
<FormLabel>{t('gallery.autoAssignBoardOnClick')}</FormLabel>
97+
<Checkbox
98+
isChecked={autoAssignBoardOnClick}
99+
onChange={handleChangeAutoAssignBoardOnClick}
100+
/>
101+
</FormControl>
102+
</FormControlGroup>
95103
<BoardAutoAddSelect />
96104
</Flex>
97105
</PopoverBody>

0 commit comments

Comments
 (0)