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

fix(ui): address feedback

Browse Source
This commit is contained in:
psychedelicious 2024-05-04 08:37:59 +10:00
parent f4dde883ca
commit 68d1458c83
3 changed files with 13 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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",

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

@ -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<InvokeTabName, string> = {
// 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<InvokeTabName, string> = {
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 (
<Button aria-label={tooltip} tooltip={tooltip} onClick={onClose} variant="outline" sx={{ display: 'flex', gap: 2 }}>
<IconButton aria-label={tooltip} variant="ghost" size="sm" icon={<PiArrowsDownUpBold />} />
{activeTabName === 'generation' ? t('common.controlLayers') : t(TAB_NAME_TO_TKEY_SHORT[activeTabName])}
<Button
aria-label={tooltip}
tooltip={tooltip}
onClick={onClose}
variant="outline"
leftIcon={<PiArrowsDownUpBold />}
>
{t(TAB_NAME_TO_TKEY_SHORT[activeTabName])}
</Button>
);
};

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

@ -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 (
<Button
@ -25,9 +17,8 @@ export const ViewerButton = () => {
onClick={onOpen}
variant="outline"
pointerEvents="auto"
sx={{ display: 'flex', gap: 2 }}
leftIcon={<PiArrowsDownUpBold />}
>
<IconButton aria-label={tooltip} variant="ghost" size="sm" icon={<PiArrowsDownUpBold />} />
{t('common.viewer')}
</Button>
);