From f0a3b0739db575c42da7985ad00af8b0a0a65f68 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Fri, 3 May 2024 22:20:00 +0530 Subject: [PATCH 1/2] feat: improve the switch states of the control layers / viewer area --- invokeai/frontend/web/public/locales/en.json | 1 + .../components/ImageViewer/EditorButton.tsx | 30 ++++++++++++------- .../components/ImageViewer/ViewerButton.tsx | 21 +++++++++++-- 3 files changed, 40 insertions(+), 12 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index a6d60fa2812..826bd8ac018 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -143,6 +143,7 @@ "alpha": "Alpha", "selected": "Selected", "viewer": "Viewer", + "controlLayers": "Control Layers", "tab": "Tab" }, "controlnet": { diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx index 2e10d057f81..2e50d33da72 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx @@ -1,19 +1,21 @@ +import { IconButton } from '@chakra-ui/react'; import { Button } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import type { InvokeTabName } from 'features/ui/store/tabMap'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; +import { PiArrowsDownUpBold } from 'react-icons/pi'; import { useImageViewer } from './useImageViewer'; -const TAB_NAME_TO_TKEY: Record = { - generation: 'ui.tabs.generationTab', - canvas: 'ui.tabs.canvasTab', - workflows: 'ui.tabs.workflowsTab', - models: 'ui.tabs.modelsTab', - queue: 'ui.tabs.queueTab', -}; +// const TAB_NAME_TO_TKEY: Record = { +// generation: 'ui.tabs.generationTab', +// canvas: 'ui.tabs.canvasTab', +// workflows: 'ui.tabs.workflowsTab', +// models: 'ui.tabs.modelsTab', +// queue: 'ui.tabs.queueTab', +// }; const TAB_NAME_TO_TKEY_SHORT: Record = { generation: 'ui.tabs.generation', @@ -27,11 +29,19 @@ export const EditorButton = () => { const { t } = useTranslation(); const { onClose } = useImageViewer(); const activeTabName = useAppSelector(activeTabNameSelector); - const tooltip = useMemo(() => t('gallery.switchTo', { tab: t(TAB_NAME_TO_TKEY[activeTabName]) }), [t, activeTabName]); + + const tooltip = useMemo( + () => + t('gallery.switchTo', { + tab: activeTabName === 'generation' ? t('common.controlLayers') : t(TAB_NAME_TO_TKEY_SHORT[activeTabName]), + }), + [t, activeTabName] + ); return ( - ); }; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx index a57ae9d1ee6..2492c8cde31 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx @@ -1,16 +1,33 @@ +import { IconButton } from '@chakra-ui/react'; import { Button } from '@invoke-ai/ui-library'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; +import { PiArrowsDownUpBold } from 'react-icons/pi'; import { useImageViewer } from './useImageViewer'; export const ViewerButton = () => { const { t } = useTranslation(); const { onOpen } = useImageViewer(); - const tooltip = useMemo(() => t('gallery.switchTo', { tab: t('common.viewer') }), [t]); + + const tooltip = useMemo( + () => + t('gallery.switchTo', { + tab: t('common.viewer'), + }), + [t] + ); return ( - ); From be996f640cb72fc504853cfa4caf68905e80d6a8 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 4 May 2024 08:37:59 +1000 Subject: [PATCH 2/2] fix(ui): address feedback --- invokeai/frontend/web/public/locales/en.json | 3 +- .../components/ImageViewer/EditorButton.tsx | 28 +++++++------------ .../components/ImageViewer/ViewerButton.tsx | 13 ++------- 3 files changed, 13 insertions(+), 31 deletions(-) diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 826bd8ac018..37a2a7a5da2 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -143,7 +143,6 @@ "alpha": "Alpha", "selected": "Selected", "viewer": "Viewer", - "controlLayers": "Control Layers", "tab": "Tab" }, "controlnet": { @@ -1535,7 +1534,7 @@ "moveForward": "Move Forward", "moveBackward": "Move Backward", "brushSize": "Brush Size", - "controlLayers": "Control Layers (BETA)", + "controlLayers": "Control Layers", "globalMaskOpacity": "Global Mask Opacity", "autoNegative": "Auto Negative", "toggleVisibility": "Toggle Layer Visibility", diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx index 2e50d33da72..cc2aa8c5431 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx @@ -1,4 +1,3 @@ -import { IconButton } from '@chakra-ui/react'; import { Button } from '@invoke-ai/ui-library'; import { useAppSelector } from 'app/store/storeHooks'; import type { InvokeTabName } from 'features/ui/store/tabMap'; @@ -9,16 +8,8 @@ import { PiArrowsDownUpBold } from 'react-icons/pi'; import { useImageViewer } from './useImageViewer'; -// const TAB_NAME_TO_TKEY: Record = { -// generation: 'ui.tabs.generationTab', -// canvas: 'ui.tabs.canvasTab', -// workflows: 'ui.tabs.workflowsTab', -// models: 'ui.tabs.modelsTab', -// queue: 'ui.tabs.queueTab', -// }; - const TAB_NAME_TO_TKEY_SHORT: Record = { - generation: 'ui.tabs.generation', + generation: 'controlLayers.controlLayers', canvas: 'ui.tabs.canvas', workflows: 'ui.tabs.workflows', models: 'ui.tabs.models', @@ -29,19 +20,20 @@ export const EditorButton = () => { const { t } = useTranslation(); const { onClose } = useImageViewer(); const activeTabName = useAppSelector(activeTabNameSelector); - const tooltip = useMemo( - () => - t('gallery.switchTo', { - tab: activeTabName === 'generation' ? t('common.controlLayers') : t(TAB_NAME_TO_TKEY_SHORT[activeTabName]), - }), + () => t('gallery.switchTo', { tab: t(TAB_NAME_TO_TKEY_SHORT[activeTabName]) }), [t, activeTabName] ); return ( - ); }; diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx index 2492c8cde31..edceb5099c6 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx @@ -1,4 +1,3 @@ -import { IconButton } from '@chakra-ui/react'; import { Button } from '@invoke-ai/ui-library'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -9,14 +8,7 @@ import { useImageViewer } from './useImageViewer'; export const ViewerButton = () => { const { t } = useTranslation(); const { onOpen } = useImageViewer(); - - const tooltip = useMemo( - () => - t('gallery.switchTo', { - tab: t('common.viewer'), - }), - [t] - ); + const tooltip = useMemo(() => t('gallery.switchTo', { tab: t('common.viewer') }), [t]); return ( );