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", "alpha": "Alpha",
"selected": "Selected", "selected": "Selected",
"viewer": "Viewer", "viewer": "Viewer",
"controlLayers": "Control Layers",
"tab": "Tab" "tab": "Tab"
}, },
"controlnet": { "controlnet": {
@ -1535,7 +1534,7 @@
"moveForward": "Move Forward", "moveForward": "Move Forward",
"moveBackward": "Move Backward", "moveBackward": "Move Backward",
"brushSize": "Brush Size", "brushSize": "Brush Size",
"controlLayers": "Control Layers (BETA)", "controlLayers": "Control Layers",
"globalMaskOpacity": "Global Mask Opacity", "globalMaskOpacity": "Global Mask Opacity",
"autoNegative": "Auto Negative", "autoNegative": "Auto Negative",
"toggleVisibility": "Toggle Layer Visibility", "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 { 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';
@ -9,16 +8,8 @@ import { PiArrowsDownUpBold } from 'react-icons/pi';
import { useImageViewer } from './useImageViewer'; 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> = { const TAB_NAME_TO_TKEY_SHORT: Record<InvokeTabName, string> = {
generation: 'ui.tabs.generation', generation: 'controlLayers.controlLayers',
canvas: 'ui.tabs.canvas', canvas: 'ui.tabs.canvas',
workflows: 'ui.tabs.workflows', workflows: 'ui.tabs.workflows',
models: 'ui.tabs.models', models: 'ui.tabs.models',
@ -29,19 +20,20 @@ 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( const tooltip = useMemo(
() => () => t('gallery.switchTo', { tab: t(TAB_NAME_TO_TKEY_SHORT[activeTabName]) }),
t('gallery.switchTo', {
tab: activeTabName === 'generation' ? t('common.controlLayers') : t(TAB_NAME_TO_TKEY_SHORT[activeTabName]),
}),
[t, activeTabName] [t, activeTabName]
); );
return ( return (
<Button aria-label={tooltip} tooltip={tooltip} onClick={onClose} variant="outline" sx={{ display: 'flex', gap: 2 }}> <Button
<IconButton aria-label={tooltip} variant="ghost" size="sm" icon={<PiArrowsDownUpBold />} /> aria-label={tooltip}
{activeTabName === 'generation' ? t('common.controlLayers') : t(TAB_NAME_TO_TKEY_SHORT[activeTabName])} tooltip={tooltip}
onClick={onClose}
variant="outline"
leftIcon={<PiArrowsDownUpBold />}
>
{t(TAB_NAME_TO_TKEY_SHORT[activeTabName])}
</Button> </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 { Button } from '@invoke-ai/ui-library';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -9,14 +8,7 @@ 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 <Button
@ -25,9 +17,8 @@ export const ViewerButton = () => {
onClick={onOpen} onClick={onOpen}
variant="outline" variant="outline"
pointerEvents="auto" pointerEvents="auto"
sx={{ display: 'flex', gap: 2 }} leftIcon={<PiArrowsDownUpBold />}
> >
<IconButton aria-label={tooltip} variant="ghost" size="sm" icon={<PiArrowsDownUpBold />} />
{t('common.viewer')} {t('common.viewer')}
</Button> </Button>
); );