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: improve the switch states of the control layers / viewer area

Browse Source
This commit is contained in:
blessedcoolant 2024-05-03 22:20:00 +05:30 committed by psychedelicious
parent be7eeb576b
commit f4dde883ca
3 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -143,6 +143,7 @@
"alpha": "Alpha", "alpha": "Alpha",
"selected": "Selected", "selected": "Selected",
"viewer": "Viewer", "viewer": "Viewer",
"controlLayers": "Control Layers",
"tab": "Tab" "tab": "Tab"
}, },
"controlnet": { "controlnet": {

30
invokeai/frontend/web/src/features/gallery/components/ImageViewer/EditorButton.tsx
View File

@ -1,19 +1,21 @@
import { IconButton } from '@chakra-ui/react';
import { Button } from '@invoke-ai/ui-library'; import { Button } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import type { InvokeTabName } from 'features/ui/store/tabMap'; import type { InvokeTabName } from 'features/ui/store/tabMap';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiArrowsDownUpBold } from 'react-icons/pi';
import { useImageViewer } from './useImageViewer'; import { useImageViewer } from './useImageViewer';
const TAB_NAME_TO_TKEY: Record<InvokeTabName, string> = { // const TAB_NAME_TO_TKEY: Record<InvokeTabName, string> = {
generation: 'ui.tabs.generationTab', // generation: 'ui.tabs.generationTab',
canvas: 'ui.tabs.canvasTab', // canvas: 'ui.tabs.canvasTab',
workflows: 'ui.tabs.workflowsTab', // workflows: 'ui.tabs.workflowsTab',
models: 'ui.tabs.modelsTab', // models: 'ui.tabs.modelsTab',
queue: 'ui.tabs.queueTab', // queue: 'ui.tabs.queueTab',
}; // };
const TAB_NAME_TO_TKEY_SHORT: Record<InvokeTabName, string> = { const TAB_NAME_TO_TKEY_SHORT: Record<InvokeTabName, string> = {
generation: 'ui.tabs.generation', generation: 'ui.tabs.generation',
@ -27,11 +29,19 @@ export const EditorButton = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { onClose } = useImageViewer(); const { onClose } = useImageViewer();
const activeTabName = useAppSelector(activeTabNameSelector); 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 ( return (
<Button aria-label={tooltip} tooltip={tooltip} onClick={onClose} variant="ghost"> <Button aria-label={tooltip} tooltip={tooltip} onClick={onClose} variant="outline" sx={{ display: 'flex', gap: 2 }}>
{t(TAB_NAME_TO_TKEY_SHORT[activeTabName])} <IconButton aria-label={tooltip} variant="ghost" size="sm" icon={<PiArrowsDownUpBold />} />
{activeTabName === 'generation' ? t('common.controlLayers') : t(TAB_NAME_TO_TKEY_SHORT[activeTabName])}
</Button> </Button>
); );
}; };

21
invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerButton.tsx
View File

@ -1,16 +1,33 @@
import { IconButton } from '@chakra-ui/react';
import { Button } from '@invoke-ai/ui-library'; import { Button } from '@invoke-ai/ui-library';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiArrowsDownUpBold } from 'react-icons/pi';
import { useImageViewer } from './useImageViewer'; import { useImageViewer } from './useImageViewer';
export const ViewerButton = () => { export const ViewerButton = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const { onOpen } = useImageViewer(); 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 ( return (
<Button aria-label={tooltip} tooltip={tooltip} onClick={onOpen} variant="ghost" pointerEvents="auto"> <Button
aria-label={tooltip}
tooltip={tooltip}
onClick={onOpen}
variant="outline"
pointerEvents="auto"
sx={{ display: 'flex', gap: 2 }}
>
<IconButton aria-label={tooltip} variant="ghost" size="sm" icon={<PiArrowsDownUpBold />} />
{t('common.viewer')} {t('common.viewer')}
</Button> </Button>
); );