From 88c57a9750df42a35a1fcb64e8e380bdd9aa7994 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 17 Jul 2024 15:14:10 +1000 Subject: [PATCH] feat(ui): canvas entity list headers --- invokeai/frontend/web/public/locales/en.json | 4 ++++ .../components/ControlAdapter/CAEntityList.tsx | 15 ++++++++++++++- .../components/IPAdapter/IPAEntityList.tsx | 11 +++++++++++ .../components/Layer/LayerEntityList.tsx | 12 +++++++++++- .../components/RegionalGuidance/RGEntityList.tsx | 15 ++++++++++++++- 5 files changed, 54 insertions(+), 3 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index f7c6bb7cc0..3de86ac6ed 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1668,6 +1668,10 @@ "raster": "Raster", "rasterLayer": "$t(controlLayers.raster) $t(unifiedCanvas.layer)", "opacity": "Opacity", + "regionalGuidance_withCount": "Regional Guidance ({{count}})", + "controlAdapters_withCount": "Control Adapters ({{count}})", + "layers_withCount": "Raster Layers ({{count}})", + "ipAdapters_withCount": "IP Adapters ({{count}})", "globalControlAdapter": "Global $t(controlnet.controlAdapter_one)", "globalControlAdapterLayer": "Global $t(controlnet.controlAdapter_one) $t(unifiedCanvas.layer)", "globalIPAdapter": "Global $t(common.ipAdapter)", diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityList.tsx index e18fa5e166..01c1310b75 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityList.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityList.tsx @@ -1,16 +1,22 @@ -/* eslint-disable i18next/no-literal-string */ +import { Text } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { CA } from 'features/controlLayers/components/ControlAdapter/CA'; import { mapId } from 'features/controlLayers/konva/util'; import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice'; import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => { return canvasV2.controlAdapters.entities.map(mapId).reverse(); }); export const CAEntityList = memo(() => { + const { t } = useTranslation(); + const isTypeSelected = useAppSelector((s) => + Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'control_adapter') + ); + const caIds = useAppSelector(selectEntityIds); if (caIds.length === 0) { @@ -20,6 +26,13 @@ export const CAEntityList = memo(() => { if (caIds.length > 0) { return ( <> + + {t('controlLayers.controlAdapters_withCount', { count: caIds.length })} + {caIds.map((id) => ( ))} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx index d70847cf39..01f1eda0e5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx @@ -1,16 +1,20 @@ /* eslint-disable i18next/no-literal-string */ +import { Text } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { IPA } from 'features/controlLayers/components/IPAdapter/IPA'; import { mapId } from 'features/controlLayers/konva/util'; import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice'; import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => { return canvasV2.ipAdapters.entities.map(mapId).reverse(); }); export const IPAEntityList = memo(() => { + const { t } = useTranslation(); + const isTypeSelected = useAppSelector((s) => Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'ip_adapter')); const ipaIds = useAppSelector(selectEntityIds); if (ipaIds.length === 0) { @@ -20,6 +24,13 @@ export const IPAEntityList = memo(() => { if (ipaIds.length > 0) { return ( <> + + {t('controlLayers.ipAdapters_withCount', { count: ipaIds.length })} + {ipaIds.map((id) => ( ))} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerEntityList.tsx index 89ab0d7aa1..92f3174b7a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerEntityList.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerEntityList.tsx @@ -1,16 +1,19 @@ -/* eslint-disable i18next/no-literal-string */ +import { Text } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { Layer } from 'features/controlLayers/components/Layer/Layer'; import { mapId } from 'features/controlLayers/konva/util'; import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice'; import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => { return canvasV2.layers.entities.map(mapId).reverse(); }); export const LayerEntityList = memo(() => { + const { t } = useTranslation(); + const isTypeSelected = useAppSelector((s) => Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'layer')); const layerIds = useAppSelector(selectEntityIds); if (layerIds.length === 0) { @@ -20,6 +23,13 @@ export const LayerEntityList = memo(() => { if (layerIds.length > 0) { return ( <> + + {t('controlLayers.layers_withCount', { count: layerIds.length })} + {layerIds.map((id) => ( ))} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGEntityList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGEntityList.tsx index 1e9a68a321..6b1b38ac89 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGEntityList.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGEntityList.tsx @@ -1,16 +1,22 @@ -/* eslint-disable i18next/no-literal-string */ +import { Text } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import { RG } from 'features/controlLayers/components/RegionalGuidance/RG'; import { mapId } from 'features/controlLayers/konva/util'; import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice'; import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => { return canvasV2.regions.entities.map(mapId).reverse(); }); export const RGEntityList = memo(() => { + const { t } = useTranslation(); + const isTypeSelected = useAppSelector((s) => + Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'regional_guidance') + ); + const rgIds = useAppSelector(selectEntityIds); if (rgIds.length === 0) { @@ -20,6 +26,13 @@ export const RGEntityList = memo(() => { if (rgIds.length > 0) { return ( <> + + {t('controlLayers.regionalGuidance_withCount', { count: rgIds.length })} + {rgIds.map((id) => ( ))}