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

feat(ui): move global mask opacity to settings popover

Browse Source
This commit is contained in:
psychedelicious 2024-04-30 12:39:43 +10:00 committed by Kent Keirsey
parent c2f8adf93e
commit 6195741814
3 changed files with 53 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
invokeai/frontend/web/src/features/regionalPrompts/components/ControlLayersSettingsPopover.tsx Normal file
View File

@ -0,0 +1,26 @@
import { Flex, IconButton, Popover, PopoverBody, PopoverContent, PopoverTrigger } from '@invoke-ai/ui-library';
import { GlobalMaskLayerOpacity } from 'features/regionalPrompts/components/GlobalMaskLayerOpacity';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { RiSettings4Fill } from 'react-icons/ri';
const ControlLayersSettingsPopover = () => {
const { t } = useTranslation();
return (
<Popover isLazy>
<PopoverTrigger>
<IconButton aria-label={t('common.settingsLabel')} icon={<RiSettings4Fill />} />
</PopoverTrigger>
<PopoverContent>
<PopoverBody>
<Flex direction="column" gap={2}>
<GlobalMaskLayerOpacity />
</Flex>
</PopoverBody>
</PopoverContent>
</Popover>
);
};
export default memo(ControlLayersSettingsPopover);

46
invokeai/frontend/web/src/features/regionalPrompts/components/GlobalMaskLayerOpacity.tsx
View File

@ -1,14 +1,4 @@
import { import { CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
CompositeNumberInput,
CompositeSlider,
FormControl,
FormLabel,
Popover,
PopoverArrow,
PopoverBody,
PopoverContent,
PopoverTrigger,
} from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
globalMaskLayerOpacityChanged, globalMaskLayerOpacityChanged,
@ -33,24 +23,9 @@ export const GlobalMaskLayerOpacity = memo(() => {
[dispatch] [dispatch]
); );
return ( return (
<FormControl w="min-content"> <FormControl orientation="vertical">
<FormLabel m={0}>{t('regionalPrompts.globalMaskOpacity')}</FormLabel> <FormLabel m={0}>{t('regionalPrompts.globalMaskOpacity')}</FormLabel>
<Popover isLazy> <Flex gap={4}>
<PopoverTrigger>
<CompositeNumberInput
min={0}
max={100}
step={1}
value={globalMaskLayerOpacity}
defaultValue={initialRegionalPromptsState.globalMaskLayerOpacity * 100}
onChange={onChange}
w={24}
format={formatPct}
/>
</PopoverTrigger>
<PopoverContent w={200} py={2} px={4}>
<PopoverArrow />
<PopoverBody>
<CompositeSlider <CompositeSlider
min={0} min={0}
max={100} max={100}
@ -59,10 +34,19 @@ export const GlobalMaskLayerOpacity = memo(() => {
defaultValue={initialRegionalPromptsState.globalMaskLayerOpacity * 100} defaultValue={initialRegionalPromptsState.globalMaskLayerOpacity * 100}
onChange={onChange} onChange={onChange}
marks={marks} marks={marks}
minW={48}
/> />
</PopoverBody> <CompositeNumberInput
</PopoverContent> min={0}
</Popover> max={100}
step={1}
value={globalMaskLayerOpacity}
defaultValue={initialRegionalPromptsState.globalMaskLayerOpacity * 100}
onChange={onChange}
w={28}
format={formatPct}
/>
</Flex>
</FormControl> </FormControl>
); );
}); });

6
invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsToolbar.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable i18next/no-literal-string */ /* eslint-disable i18next/no-literal-string */
import { Flex } from '@invoke-ai/ui-library'; import { Flex } from '@invoke-ai/ui-library';
import { BrushSize } from 'features/regionalPrompts/components/BrushSize'; import { BrushSize } from 'features/regionalPrompts/components/BrushSize';
import { GlobalMaskLayerOpacity } from 'features/regionalPrompts/components/GlobalMaskLayerOpacity'; import ControlLayersSettingsPopover from 'features/regionalPrompts/components/ControlLayersSettingsPopover';
import { ToolChooser } from 'features/regionalPrompts/components/ToolChooser'; import { ToolChooser } from 'features/regionalPrompts/components/ToolChooser';
import { UndoRedoButtonGroup } from 'features/regionalPrompts/components/UndoRedoButtonGroup'; import { UndoRedoButtonGroup } from 'features/regionalPrompts/components/UndoRedoButtonGroup';
import { memo } from 'react'; import { memo } from 'react';
@ -10,9 +10,9 @@ export const RegionalPromptsToolbar = memo(() => {
return ( return (
<Flex gap={4}> <Flex gap={4}>
<BrushSize /> <BrushSize />
<GlobalMaskLayerOpacity />
<UndoRedoButtonGroup />
<ToolChooser /> <ToolChooser />
<UndoRedoButtonGroup />
<ControlLayersSettingsPopover />
</Flex> </Flex>
); );
}); });