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): simplify canvas list item headers

Browse Source
This commit is contained in:
psychedelicious 2024-08-07 17:44:11 +10:00
parent c8d04d42e2
commit eb8eacfec6
13 changed files with 97 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CA.tsx
View File

@ -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 { 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 { CASettings } from 'features/controlLayers/components/ControlAdapter/CASettings';
import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
@ -17,8 +22,15 @@ export const CA = memo(({ id }: Props) => {
return ( return (
<EntityIdentifierContext.Provider value={entityIdentifier}> <EntityIdentifierContext.Provider value={entityIdentifier}>
<CanvasEntityContainer> <CanvasEntityContainer>
<CAHeader onToggleVisibility={onToggle} /> <CanvasEntityHeader onDoubleClick={onToggle}>
{isOpen && <CASettings id={id} />} <CanvasEntityEnabledToggle />
<CanvasEntityTitle />
<Spacer />
<CAOpacityAndFilter />
<CAActionsMenu />
<CanvasEntityDeleteButton />
</CanvasEntityHeader>
{isOpen && <CASettings />}
</CanvasEntityContainer> </CanvasEntityContainer>
</EntityIdentifierContext.Provider> </EntityIdentifierContext.Provider>
); );

27
invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityHeader.tsx
View File

@ -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 (
<CanvasEntityHeader onToggle={onToggleVisibility}>
<CanvasEntityEnabledToggle />
<CanvasEntityTitle />
<Spacer />
<CAOpacityAndFilter />
<CAActionsMenu />
<CanvasEntityDeleteButton />
</CanvasEntityHeader>
);
});
CAHeader.displayName = 'CAEntityHeader';

8
invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CASettings.tsx
View File

@ -8,6 +8,7 @@ import { CAImagePreview } from 'features/controlLayers/components/ControlAdapter
import { CAModelCombobox } from 'features/controlLayers/components/ControlAdapter/CAModelCombobox'; import { CAModelCombobox } from 'features/controlLayers/components/ControlAdapter/CAModelCombobox';
import { CAProcessorConfig } from 'features/controlLayers/components/ControlAdapter/CAProcessorConfig'; import { CAProcessorConfig } from 'features/controlLayers/components/ControlAdapter/CAProcessorConfig';
import { CAProcessorTypeSelect } from 'features/controlLayers/components/ControlAdapter/CAProcessorTypeSelect'; import { CAProcessorTypeSelect } from 'features/controlLayers/components/ControlAdapter/CAProcessorTypeSelect';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import { import {
caBeginEndStepPctChanged, caBeginEndStepPctChanged,
caControlModeChanged, caControlModeChanged,
@ -31,11 +32,8 @@ import type {
T2IAdapterModelConfig, T2IAdapterModelConfig,
} from 'services/api/types'; } from 'services/api/types';
type Props = { export const CASettings = memo(() => {
id: string; const { id } = useEntityIdentifierContext();
};
export const CASettings = memo(({ id }: Props) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const [isExpanded, toggleIsExpanded] = useToggle(false); const [isExpanded, toggleIsExpanded] = useToggle(false);

2
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx
View File

@ -20,7 +20,7 @@ export const IPA = memo(({ id }: Props) => {
return ( return (
<EntityIdentifierContext.Provider value={entityIdentifier}> <EntityIdentifierContext.Provider value={entityIdentifier}>
<CanvasEntityContainer> <CanvasEntityContainer>
<CanvasEntityHeader onToggle={onToggle}> <CanvasEntityHeader onDoubleClick={onToggle}>
<CanvasEntityEnabledToggle /> <CanvasEntityEnabledToggle />
<CanvasEntityTitle /> <CanvasEntityTitle />
<Spacer /> <Spacer />

23
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAHeader.tsx
View File

@ -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 (
<CanvasEntityHeader onToggle={onToggleVisibility}>
<CanvasEntityEnabledToggle />
<CanvasEntityTitle />
<Spacer />
<CanvasEntityDeleteButton />
</CanvasEntityHeader>
);
});
IPAHeader.displayName = 'IPAHeader';

17
invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/IM.tsx
View File

@ -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 { 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 { IMSettings } from 'features/controlLayers/components/InpaintMask/IMSettings';
import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { IMMaskFillColorPicker } from './IMMaskFillColorPicker';
export const IM = memo(() => { export const IM = memo(() => {
const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id: 'inpaint_mask', type: 'inpaint_mask' }), []); const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id: 'inpaint_mask', type: 'inpaint_mask' }), []);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false }); const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false });
return ( return (
<EntityIdentifierContext.Provider value={entityIdentifier}> <EntityIdentifierContext.Provider value={entityIdentifier}>
<CanvasEntityContainer> <CanvasEntityContainer>
<IMHeader onToggleVisibility={onToggle} /> <CanvasEntityHeader onDoubleClick={onToggle}>
<CanvasEntityEnabledToggle />
<CanvasEntityTitle />
<Spacer />
<IMMaskFillColorPicker />
<IMActionsMenu />
</CanvasEntityHeader>
{isOpen && <IMSettings />} {isOpen && <IMSettings />}
</CanvasEntityContainer> </CanvasEntityContainer>
</EntityIdentifierContext.Provider> </EntityIdentifierContext.Provider>

26
invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/IMHeader.tsx
View File

@ -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 (
<CanvasEntityHeader onToggle={onToggleVisibility}>
<CanvasEntityEnabledToggle />
<CanvasEntityTitle />
<Spacer />
<IMMaskFillColorPicker />
<IMActionsMenu />
</CanvasEntityHeader>
);
});
IMHeader.displayName = 'IMHeader';

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

@ -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 IAIDroppable from 'common/components/IAIDroppable';
import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; 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 { LayerSettings } from 'features/controlLayers/components/Layer/LayerSettings';
import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import type { LayerImageDropData } from 'features/dnd/types'; import type { LayerImageDropData } from 'features/dnd/types';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { LayerOpacity } from './LayerOpacity';
type Props = { type Props = {
id: string; id: string;
}; };
@ -23,7 +29,14 @@ export const Layer = memo(({ id }: Props) => {
return ( return (
<EntityIdentifierContext.Provider value={entityIdentifier}> <EntityIdentifierContext.Provider value={entityIdentifier}>
<CanvasEntityContainer> <CanvasEntityContainer>
<LayerHeader onToggleVisibility={onToggle} /> <CanvasEntityHeader onDoubleClick={onToggle}>
<CanvasEntityEnabledToggle />
<CanvasEntityTitle />
<Spacer />
<LayerOpacity />
<LayerActionsMenu />
<CanvasEntityDeleteButton />
</CanvasEntityHeader>
{isOpen && <LayerSettings />} {isOpen && <LayerSettings />}
<IAIDroppable data={droppableData} /> <IAIDroppable data={droppableData} />
</CanvasEntityContainer> </CanvasEntityContainer>

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

@ -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 (
<CanvasEntityHeader onToggle={onToggleVisibility}>
<CanvasEntityEnabledToggle />
<CanvasEntityTitle />
<Spacer />
<LayerOpacity />
<LayerActionsMenu />
<CanvasEntityDeleteButton />
</CanvasEntityHeader>
);
});
LayerHeader.displayName = 'LayerHeader';

23
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RG.tsx
View File

@ -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 { 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 { RGSettings } from 'features/controlLayers/components/RegionalGuidance/RGSettings';
import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { RGMaskFillColorPicker } from './RGMaskFillColorPicker';
import { RGSettingsPopover } from './RGSettingsPopover';
type Props = { type Props = {
id: string; id: string;
}; };
@ -16,7 +24,16 @@ export const RG = memo(({ id }: Props) => {
return ( return (
<EntityIdentifierContext.Provider value={entityIdentifier}> <EntityIdentifierContext.Provider value={entityIdentifier}>
<CanvasEntityContainer> <CanvasEntityContainer>
<RGHeader onToggleVisibility={onToggle} /> <CanvasEntityHeader onDoubleClick={onToggle}>
<CanvasEntityEnabledToggle />
<CanvasEntityTitle />
<Spacer />
<RGBadges />
<RGMaskFillColorPicker />
<RGSettingsPopover />
<RGActionsMenu />
<CanvasEntityDeleteButton />
</CanvasEntityHeader>
{isOpen && <RGSettings />} {isOpen && <RGSettings />}
</CanvasEntityContainer> </CanvasEntityContainer>
</EntityIdentifierContext.Provider> </EntityIdentifierContext.Provider>

24
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGBadges.tsx Normal file
View File

@ -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' && (
<Badge color="base.300" bg="transparent" borderWidth={1} userSelect="none">
{t('controlLayers.autoNegative')}
</Badge>
)}
</>
);
});
RGBadges.displayName = 'RGBadges';

43
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGHeader.tsx
View File

@ -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 (
<CanvasEntityHeader onToggle={onToggleVisibility}>
<CanvasEntityEnabledToggle />
<CanvasEntityTitle />
<Spacer />
{autoNegative === 'invert' && (
<Badge color="base.300" bg="transparent" borderWidth={1} userSelect="none">
{t('controlLayers.autoNegative')}
</Badge>
)}
<RGMaskFillColorPicker />
<RGSettingsPopover />
<RGActionsMenu />
<CanvasEntityDeleteButton />
</CanvasEntityHeader>
);
});
RGHeader.displayName = 'RGHeader';

8
invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx
View File

@ -1,12 +1,10 @@
import type { FlexProps } from '@invoke-ai/ui-library';
import { Flex } from '@invoke-ai/ui-library'; import { Flex } from '@invoke-ai/ui-library';
import type { PropsWithChildren } from 'react';
import { memo } from 'react'; import { memo } from 'react';
type Props = PropsWithChildren<{ onToggle: () => void }>; export const CanvasEntityHeader = memo(({ children, ...rest }: FlexProps) => {
export const CanvasEntityHeader = memo(({ children, onToggle }: Props) => {
return ( return (
<Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}> <Flex gap={3} alignItems="center" p={3} cursor="pointer" {...rest}>
{children} {children}
</Flex> </Flex>
); );