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): updated layer list component styling

Browse Source
This commit is contained in:
psychedelicious 2024-07-03 16:10:49 +10:00
parent 49371ddec9
commit bd16dc4479
3 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1679,12 +1679,17 @@
"globalIPAdapterLayer": "Global $t(common.ipAdapter) $t(unifiedCanvas.layer)", "globalIPAdapterLayer": "Global $t(common.ipAdapter) $t(unifiedCanvas.layer)",
"globalInitialImage": "Global Initial Image", "globalInitialImage": "Global Initial Image",
"globalInitialImageLayer": "$t(controlLayers.globalInitialImage) $t(unifiedCanvas.layer)", "globalInitialImageLayer": "$t(controlLayers.globalInitialImage) $t(unifiedCanvas.layer)",
"inpaintMask": "Inpaint Mask",
"layer": "Layer",
"opacityFilter": "Opacity Filter", "opacityFilter": "Opacity Filter",
"clearProcessor": "Clear Processor", "clearProcessor": "Clear Processor",
"resetProcessor": "Reset Processor to Defaults", "resetProcessor": "Reset Processor to Defaults",
"noLayersAdded": "No Layers Added", "noLayersAdded": "No Layers Added",
"layers_one": "Layer", "layers_one": "Layer",
"layers_other": "Layers" "layers_other": "Layers",
"objects_zero": "empty",
"objects_one": "{{count}} object",
"objects_other": "{{count}} objects"
}, },
"upscaling": { "upscaling": {
"upscale": "Upscale", "upscale": "Upscale",

8
invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerHeader.tsx
View File

@ -7,7 +7,7 @@ import { CanvasEntityTitle } from 'features/controlLayers/components/common/Canv
import { LayerActionsMenu } from 'features/controlLayers/components/Layer/LayerActionsMenu'; import { LayerActionsMenu } from 'features/controlLayers/components/Layer/LayerActionsMenu';
import { layerDeleted, layerIsEnabledToggled } from 'features/controlLayers/store/canvasV2Slice'; import { layerDeleted, layerIsEnabledToggled } from 'features/controlLayers/store/canvasV2Slice';
import { selectLayerOrThrow } from 'features/controlLayers/store/layersReducers'; import { selectLayerOrThrow } from 'features/controlLayers/store/layersReducers';
import { memo, useCallback } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { LayerOpacity } from './LayerOpacity'; import { LayerOpacity } from './LayerOpacity';
@ -21,17 +21,21 @@ export const LayerHeader = memo(({ id, onToggleVisibility }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const isEnabled = useAppSelector((s) => selectLayerOrThrow(s.canvasV2, id).isEnabled); const isEnabled = useAppSelector((s) => selectLayerOrThrow(s.canvasV2, id).isEnabled);
const objectCount = useAppSelector((s) => selectLayerOrThrow(s.canvasV2, id).objects.length);
const onToggleIsEnabled = useCallback(() => { const onToggleIsEnabled = useCallback(() => {
dispatch(layerIsEnabledToggled({ id })); dispatch(layerIsEnabledToggled({ id }));
}, [dispatch, id]); }, [dispatch, id]);
const onDelete = useCallback(() => { const onDelete = useCallback(() => {
dispatch(layerDeleted({ id })); dispatch(layerDeleted({ id }));
}, [dispatch, id]); }, [dispatch, id]);
const title = useMemo(() => {
return `${t('controlLayers.layer')} (${t('controlLayers.objects', { count: objectCount })})`;
}, [objectCount, t]);
return ( return (
<CanvasEntityHeader onToggle={onToggleVisibility}> <CanvasEntityHeader onToggle={onToggleVisibility}>
<CanvasEntityEnabledToggle isEnabled={isEnabled} onToggle={onToggleIsEnabled} /> <CanvasEntityEnabledToggle isEnabled={isEnabled} onToggle={onToggleIsEnabled} />
<CanvasEntityTitle title={t('controlLayers.layer')} /> <CanvasEntityTitle title={title} />
<Spacer /> <Spacer />
<LayerOpacity id={id} /> <LayerOpacity id={id} />
<LayerActionsMenu id={id} /> <LayerActionsMenu id={id} />

17
invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityContainer.tsx
View File

@ -10,7 +10,7 @@ type Props = PropsWithChildren<{
}>; }>;
export const CanvasEntityContainer = memo(({ isSelected, onSelect, selectedBorderColor, children }: Props) => { export const CanvasEntityContainer = memo(({ isSelected, onSelect, selectedBorderColor, children }: Props) => {
const bg = useMemo(() => { const borderColor = useMemo(() => {
if (isSelected) { if (isSelected) {
return selectedBorderColor ?? 'base.400'; return selectedBorderColor ?? 'base.400';
} }
@ -25,19 +25,18 @@ export const CanvasEntityContainer = memo(({ isSelected, onSelect, selectedBorde
return ( return (
<Flex <Flex
position="relative" flexDir="column"
gap={2} w="full"
bg="base.850"
onClick={_onSelect} onClick={_onSelect}
bg={bg} borderInlineStartWidth={5}
px={2} borderColor={borderColor}
opacity={isSelected ? 1 : 0.6}
borderRadius="base" borderRadius="base"
py="1px"
transitionProperty="all" transitionProperty="all"
transitionDuration="0.2s" transitionDuration="0.2s"
> >
<Flex flexDir="column" w="full" bg="base.850" borderRadius="base"> {children}
{children}
</Flex>
</Flex> </Flex>
); );
}); });