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): rp editor styling

Browse Source
This commit is contained in:
psychedelicious 2024-04-19 22:02:30 +10:00 committed by Kent Keirsey
parent e93e0612af
commit 9667f77c41
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
invokeai/frontend/web/src/features/regionalPrompts/components/RPLayerListItem.tsx
View File

@ -1,6 +1,6 @@
import { Flex, Spacer } from '@invoke-ai/ui-library'; import { Flex, Spacer } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { rgbaColorToString } from 'features/canvas/util/colorToString'; import { rgbColorToString } from 'features/canvas/util/colorToString';
import { RPLayerAutoNegativeCombobox } from 'features/regionalPrompts/components/RPLayerAutoNegativeCombobox'; import { RPLayerAutoNegativeCombobox } from 'features/regionalPrompts/components/RPLayerAutoNegativeCombobox';
import { RPLayerColorPicker } from 'features/regionalPrompts/components/RPLayerColorPicker'; import { RPLayerColorPicker } from 'features/regionalPrompts/components/RPLayerColorPicker';
import { RPLayerMenu } from 'features/regionalPrompts/components/RPLayerMenu'; import { RPLayerMenu } from 'features/regionalPrompts/components/RPLayerMenu';
@ -21,14 +21,22 @@ export const RPLayerListItem = memo(({ layerId }: Props) => {
const color = useAppSelector((s) => { const color = useAppSelector((s) => {
const layer = s.regionalPrompts.present.layers.find((l) => l.id === layerId); const layer = s.regionalPrompts.present.layers.find((l) => l.id === layerId);
assert(isRPLayer(layer), `Layer ${layerId} not found or not an RP layer`); assert(isRPLayer(layer), `Layer ${layerId} not found or not an RP layer`);
return rgbaColorToString({ ...layer.color, a: selectedLayerId === layerId ? 1 : 0.35 }); return rgbColorToString(layer.color);
}); });
const onClickCapture = useCallback(() => { const onClickCapture = useCallback(() => {
// Must be capture so that the layer is selected before deleting/resetting/etc // Must be capture so that the layer is selected before deleting/resetting/etc
dispatch(rpLayerSelected(layerId)); dispatch(rpLayerSelected(layerId));
}, [dispatch, layerId]); }, [dispatch, layerId]);
return ( return (
<Flex gap={2} onClickCapture={onClickCapture} bg={color} borderRadius="base" p="1px" ps={3}> <Flex
gap={2}
onClickCapture={onClickCapture}
bg={color}
borderRadius="base"
p="1px"
ps={2}
opacity={selectedLayerId === layerId ? 1 : 0.5}
>
<Flex flexDir="column" gap={2} w="full" bg="base.850" borderRadius="base" p={2}> <Flex flexDir="column" gap={2} w="full" bg="base.850" borderRadius="base" p={2}>
<Flex gap={2} alignItems="center"> <Flex gap={2} alignItems="center">
<RPLayerColorPicker layerId={layerId} /> <RPLayerColorPicker layerId={layerId} />

2
invokeai/frontend/web/src/features/regionalPrompts/components/RegionalPromptsEditor.tsx
View File

@ -30,7 +30,7 @@ export const RegionalPromptsEditor = memo(() => {
const rpLayerIdsReversed = useAppSelector(selectRPLayerIdsReversed); const rpLayerIdsReversed = useAppSelector(selectRPLayerIdsReversed);
return ( return (
<Flex gap={4} w="full" h="full"> <Flex gap={4} w="full" h="full">
<Flex flexDir="column" gap={4} flexShrink={0}> <Flex flexDir="column" gap={4} flexShrink={0} w={430}>
<Flex gap={3}> <Flex gap={3}>
<ButtonGroup isAttached={false}> <ButtonGroup isAttached={false}>
<Button onClick={debugBlobs}>🐛</Button> <Button onClick={debugBlobs}>🐛</Button>