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): selected layer styling

Browse Source
This commit is contained in:
psychedelicious 2024-04-12 18:46:31 +10:00 committed by Kent Keirsey
parent cf4c1750cb
commit 52e7daffe7
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
invokeai/frontend/web/public/locales/en.json
View File

@ -136,7 +136,8 @@
"red": "Red", "red": "Red",
"green": "Green", "green": "Green",
"blue": "Blue", "blue": "Blue",
"alpha": "Alpha" "alpha": "Alpha",
"selected": "Selected"
}, },
"controlnet": { "controlnet": {
"controlAdapter_one": "Control Adapter", "controlAdapter_one": "Control Adapter",

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

@ -1,4 +1,4 @@
import { Flex, Spacer } from '@invoke-ai/ui-library'; import { Flex, Spacer, Text } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { rgbColorToString } from 'features/canvas/util/colorToString'; import { rgbColorToString } from 'features/canvas/util/colorToString';
import { LayerColorPicker } from 'features/regionalPrompts/components/LayerColorPicker'; import { LayerColorPicker } from 'features/regionalPrompts/components/LayerColorPicker';
@ -7,6 +7,7 @@ import { LayerVisibilityToggle } from 'features/regionalPrompts/components/Layer
import { RegionalPromptsPrompt } from 'features/regionalPrompts/components/RegionalPromptsPrompt'; import { RegionalPromptsPrompt } from 'features/regionalPrompts/components/RegionalPromptsPrompt';
import { layerSelected } from 'features/regionalPrompts/store/regionalPromptsSlice'; import { layerSelected } from 'features/regionalPrompts/store/regionalPromptsSlice';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
type Props = { type Props = {
id: string; id: string;
@ -14,6 +15,8 @@ type Props = {
export const LayerListItem = ({ id }: Props) => { export const LayerListItem = ({ id }: Props) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation();
const selectedLayer = useAppSelector((s) => s.regionalPrompts.selectedLayer);
const color = useAppSelector((s) => { const color = useAppSelector((s) => {
const color = s.regionalPrompts.layers.find((l) => l.id === id)?.color; const color = s.regionalPrompts.layers.find((l) => l.id === id)?.color;
if (color) { if (color) {
@ -26,12 +29,17 @@ export const LayerListItem = ({ id }: Props) => {
dispatch(layerSelected(id)); dispatch(layerSelected(id));
}, [dispatch, id]); }, [dispatch, id]);
return ( return (
<Flex gap={2} onClickCapture={onClickCapture} bg={color} borderRadius="base" p="1px" ps={2}> <Flex gap={2} onClickCapture={onClickCapture} bg={color} borderRadius="base" p="1px" ps={3}>
<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}> <Flex gap={2} alignItems="center">
<LayerColorPicker id={id} /> <LayerColorPicker id={id} />
<LayerVisibilityToggle id={id} /> <LayerVisibilityToggle id={id} />
<Spacer /> <Spacer />
{selectedLayer === id && (
<Text color="base.300" fontWeight="semibold" pe={2}>
{t('common.selected')}
</Text>
)}
<LayerMenu id={id} /> <LayerMenu id={id} />
</Flex> </Flex>
<RegionalPromptsPrompt layerId={id} /> <RegionalPromptsPrompt layerId={id} />