From eb8eacfec6c814d6dbb6f5b46991eb05951cbae8 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 7 Aug 2024 17:44:11 +1000 Subject: [PATCH] feat(ui): simplify canvas list item headers --- .../components/ControlAdapter/CA.tsx | 20 +++++++-- .../ControlAdapter/CAEntityHeader.tsx | 27 ------------ .../components/ControlAdapter/CASettings.tsx | 8 ++-- .../components/IPAdapter/IPA.tsx | 2 +- .../components/IPAdapter/IPAHeader.tsx | 23 ---------- .../components/InpaintMask/IM.tsx | 17 ++++++-- .../components/InpaintMask/IMHeader.tsx | 26 ----------- .../controlLayers/components/Layer/Layer.tsx | 19 ++++++-- .../components/Layer/LayerHeader.tsx | 28 ------------ .../components/RegionalGuidance/RG.tsx | 23 ++++++++-- .../components/RegionalGuidance/RGBadges.tsx | 24 +++++++++++ .../components/RegionalGuidance/RGHeader.tsx | 43 ------------------- .../components/common/CanvasEntityHeader.tsx | 8 ++-- 13 files changed, 97 insertions(+), 171 deletions(-) delete mode 100644 invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityHeader.tsx delete mode 100644 invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAHeader.tsx delete mode 100644 invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/IMHeader.tsx delete mode 100644 invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerHeader.tsx create mode 100644 invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGBadges.tsx delete mode 100644 invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGHeader.tsx diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CA.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CA.tsx index 8240b3664a..1ee01e66c6 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CA.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CA.tsx @@ -1,6 +1,11 @@ -import { useDisclosure } from '@invoke-ai/ui-library'; +import { Spacer, useDisclosure } from '@invoke-ai/ui-library'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; -import { CAHeader } from 'features/controlLayers/components/ControlAdapter/CAEntityHeader'; +import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; +import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; +import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; +import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle'; +import { CAActionsMenu } from 'features/controlLayers/components/ControlAdapter/CAActionsMenu'; +import { CAOpacityAndFilter } from 'features/controlLayers/components/ControlAdapter/CAOpacityAndFilter'; import { CASettings } from 'features/controlLayers/components/ControlAdapter/CASettings'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; @@ -17,8 +22,15 @@ export const CA = memo(({ id }: Props) => { return ( - - {isOpen && } + + + + + + + + + {isOpen && } ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityHeader.tsx deleted file mode 100644 index b95945f4fe..0000000000 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityHeader.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Spacer } from '@invoke-ai/ui-library'; -import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; -import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; -import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; -import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle'; -import { CAActionsMenu } from 'features/controlLayers/components/ControlAdapter/CAActionsMenu'; -import { CAOpacityAndFilter } from 'features/controlLayers/components/ControlAdapter/CAOpacityAndFilter'; -import { memo } from 'react'; - -type Props = { - onToggleVisibility: () => void; -}; - -export const CAHeader = memo(({ onToggleVisibility }: Props) => { - return ( - - - - - - - - - ); -}); - -CAHeader.displayName = 'CAEntityHeader'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CASettings.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CASettings.tsx index 70cde437e7..ca01e97364 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CASettings.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CASettings.tsx @@ -8,6 +8,7 @@ import { CAImagePreview } from 'features/controlLayers/components/ControlAdapter import { CAModelCombobox } from 'features/controlLayers/components/ControlAdapter/CAModelCombobox'; import { CAProcessorConfig } from 'features/controlLayers/components/ControlAdapter/CAProcessorConfig'; import { CAProcessorTypeSelect } from 'features/controlLayers/components/ControlAdapter/CAProcessorTypeSelect'; +import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { caBeginEndStepPctChanged, caControlModeChanged, @@ -31,11 +32,8 @@ import type { T2IAdapterModelConfig, } from 'services/api/types'; -type Props = { - id: string; -}; - -export const CASettings = memo(({ id }: Props) => { +export const CASettings = memo(() => { + const { id } = useEntityIdentifierContext(); const dispatch = useAppDispatch(); const { t } = useTranslation(); const [isExpanded, toggleIsExpanded] = useToggle(false); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx index af3d3aa6c3..a4befcdbdd 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx @@ -20,7 +20,7 @@ export const IPA = memo(({ id }: Props) => { return ( - + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAHeader.tsx deleted file mode 100644 index d220bcbc0c..0000000000 --- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAHeader.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Spacer } from '@invoke-ai/ui-library'; -import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; -import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; -import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; -import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle'; -import { memo } from 'react'; - -type Props = { - onToggleVisibility: () => void; -}; - -export const IPAHeader = memo(({ onToggleVisibility }: Props) => { - return ( - - - - - - - ); -}); - -IPAHeader.displayName = 'IPAHeader'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/IM.tsx b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/IM.tsx index 8734419074..0193cfa3c9 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/IM.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/IM.tsx @@ -1,18 +1,29 @@ -import { useDisclosure } from '@invoke-ai/ui-library'; +import { Spacer, useDisclosure } from '@invoke-ai/ui-library'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; -import { IMHeader } from 'features/controlLayers/components/InpaintMask/IMHeader'; +import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; +import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; +import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle'; +import { IMActionsMenu } from 'features/controlLayers/components/InpaintMask/IMActionsMenu'; import { IMSettings } from 'features/controlLayers/components/InpaintMask/IMSettings'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; import { memo, useMemo } from 'react'; +import { IMMaskFillColorPicker } from './IMMaskFillColorPicker'; + export const IM = memo(() => { const entityIdentifier = useMemo(() => ({ id: 'inpaint_mask', type: 'inpaint_mask' }), []); const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false }); return ( - + + + + + + + {isOpen && } diff --git a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/IMHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/IMHeader.tsx deleted file mode 100644 index 283752b65a..0000000000 --- a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/IMHeader.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { Spacer } from '@invoke-ai/ui-library'; -import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; -import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; -import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle'; -import { IMActionsMenu } from 'features/controlLayers/components/InpaintMask/IMActionsMenu'; -import { memo } from 'react'; - -import { IMMaskFillColorPicker } from './IMMaskFillColorPicker'; - -type Props = { - onToggleVisibility: () => void; -}; - -export const IMHeader = memo(({ onToggleVisibility }: Props) => { - return ( - - - - - - - - ); -}); - -IMHeader.displayName = 'IMHeader'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Layer/Layer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Layer/Layer.tsx index 49d2a4dba3..ffc6ce9b74 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Layer/Layer.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Layer/Layer.tsx @@ -1,13 +1,19 @@ -import { useDisclosure } from '@invoke-ai/ui-library'; +import { Spacer, useDisclosure } from '@invoke-ai/ui-library'; import IAIDroppable from 'common/components/IAIDroppable'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; -import { LayerHeader } from 'features/controlLayers/components/Layer/LayerHeader'; +import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; +import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; +import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; +import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle'; +import { LayerActionsMenu } from 'features/controlLayers/components/Layer/LayerActionsMenu'; import { LayerSettings } from 'features/controlLayers/components/Layer/LayerSettings'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; import type { LayerImageDropData } from 'features/dnd/types'; import { memo, useMemo } from 'react'; +import { LayerOpacity } from './LayerOpacity'; + type Props = { id: string; }; @@ -23,7 +29,14 @@ export const Layer = memo(({ id }: Props) => { return ( - + + + + + + + + {isOpen && } diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerHeader.tsx deleted file mode 100644 index 5d8c17f957..0000000000 --- a/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerHeader.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Spacer } from '@invoke-ai/ui-library'; -import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; -import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; -import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; -import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle'; -import { LayerActionsMenu } from 'features/controlLayers/components/Layer/LayerActionsMenu'; -import { memo } from 'react'; - -import { LayerOpacity } from './LayerOpacity'; - -type Props = { - onToggleVisibility: () => void; -}; - -export const LayerHeader = memo(({ onToggleVisibility }: Props) => { - return ( - - - - - - - - - ); -}); - -LayerHeader.displayName = 'LayerHeader'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RG.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RG.tsx index 1da28a8fdc..e197ac0837 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RG.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RG.tsx @@ -1,11 +1,19 @@ -import { useDisclosure } from '@invoke-ai/ui-library'; +import { Spacer, useDisclosure } from '@invoke-ai/ui-library'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; -import { RGHeader } from 'features/controlLayers/components/RegionalGuidance/RGHeader'; +import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; +import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; +import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; +import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle'; +import { RGActionsMenu } from 'features/controlLayers/components/RegionalGuidance/RGActionsMenu'; +import { RGBadges } from 'features/controlLayers/components/RegionalGuidance/RGBadges'; import { RGSettings } from 'features/controlLayers/components/RegionalGuidance/RGSettings'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; import { memo, useMemo } from 'react'; +import { RGMaskFillColorPicker } from './RGMaskFillColorPicker'; +import { RGSettingsPopover } from './RGSettingsPopover'; + type Props = { id: string; }; @@ -16,7 +24,16 @@ export const RG = memo(({ id }: Props) => { return ( - + + + + + + + + + + {isOpen && } diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGBadges.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGBadges.tsx new file mode 100644 index 0000000000..82eea7b0a0 --- /dev/null +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGBadges.tsx @@ -0,0 +1,24 @@ +import { Badge } from '@invoke-ai/ui-library'; +import { useAppSelector } from 'app/store/storeHooks'; +import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; +import { selectRGOrThrow } from 'features/controlLayers/store/regionsReducers'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +export const RGBadges = memo(() => { + const { id } = useEntityIdentifierContext(); + const { t } = useTranslation(); + const autoNegative = useAppSelector((s) => selectRGOrThrow(s.canvasV2, id).autoNegative); + + return ( + <> + {autoNegative === 'invert' && ( + + {t('controlLayers.autoNegative')} + + )} + + ); +}); + +RGBadges.displayName = 'RGBadges'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGHeader.tsx deleted file mode 100644 index 151e378ebe..0000000000 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGHeader.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { Badge, Spacer } from '@invoke-ai/ui-library'; -import { useAppSelector } from 'app/store/storeHooks'; -import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; -import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; -import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; -import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle'; -import { RGActionsMenu } from 'features/controlLayers/components/RegionalGuidance/RGActionsMenu'; -import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; -import { selectRGOrThrow } from 'features/controlLayers/store/regionsReducers'; -import { memo } from 'react'; -import { useTranslation } from 'react-i18next'; - -import { RGMaskFillColorPicker } from './RGMaskFillColorPicker'; -import { RGSettingsPopover } from './RGSettingsPopover'; - -type Props = { - onToggleVisibility: () => void; -}; - -export const RGHeader = memo(({ onToggleVisibility }: Props) => { - const { id } = useEntityIdentifierContext(); - const { t } = useTranslation(); - const autoNegative = useAppSelector((s) => selectRGOrThrow(s.canvasV2, id).autoNegative); - - return ( - - - - - {autoNegative === 'invert' && ( - - {t('controlLayers.autoNegative')} - - )} - - - - - - ); -}); - -RGHeader.displayName = 'RGHeader'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx index 31977b61af..e8aca8057e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx @@ -1,12 +1,10 @@ +import type { FlexProps } from '@invoke-ai/ui-library'; import { Flex } from '@invoke-ai/ui-library'; -import type { PropsWithChildren } from 'react'; import { memo } from 'react'; -type Props = PropsWithChildren<{ onToggle: () => void }>; - -export const CanvasEntityHeader = memo(({ children, onToggle }: Props) => { +export const CanvasEntityHeader = memo(({ children, ...rest }: FlexProps) => { return ( - + {children} );