mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
add button to navigate to model manager if tab is enabled
This commit is contained in:
parent
01d86f3a78
commit
107390e40b
@ -15,7 +15,7 @@ const STATUSES = {
|
|||||||
const ImportQueueBadge = ({ status, errorReason }: { status?: ModelInstallStatus; errorReason?: string | null }) => {
|
const ImportQueueBadge = ({ status, errorReason }: { status?: ModelInstallStatus; errorReason?: string | null }) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
if (!status) {
|
if (!status || !Object.keys(STATUSES).includes(status)) {
|
||||||
return <></>;
|
return <></>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -0,0 +1,36 @@
|
|||||||
|
import type { IconButtonProps } from '@invoke-ai/ui-library';
|
||||||
|
import { IconButton } from '@invoke-ai/ui-library';
|
||||||
|
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
||||||
|
import { setActiveTab } from 'features/ui/store/uiSlice';
|
||||||
|
import { memo, useCallback, useMemo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { PiGearSixBold } from 'react-icons/pi';
|
||||||
|
|
||||||
|
export const NavigateToModelManagerButton = memo((props: Omit<IconButtonProps, 'aria-label'>) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const dispatch = useAppDispatch();
|
||||||
|
const disabledTabs = useAppSelector((s) => s.config.disabledTabs);
|
||||||
|
const shouldShowButton = useMemo(() => !disabledTabs.includes('modelManager'), [disabledTabs]);
|
||||||
|
|
||||||
|
const handleClick = useCallback(() => {
|
||||||
|
dispatch(setActiveTab('modelManager'));
|
||||||
|
}, [dispatch]);
|
||||||
|
|
||||||
|
if (!shouldShowButton) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<IconButton
|
||||||
|
icon={<PiGearSixBold />}
|
||||||
|
tooltip={t('modelManager.modelManager')}
|
||||||
|
aria-label={t('modelManager.modelManager')}
|
||||||
|
onClick={handleClick}
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
NavigateToModelManagerButton.displayName = 'NavigateToModelManagerButton';
|
@ -10,6 +10,7 @@ import { SyncModelsIconButton } from 'features/modelManagerV2/components/SyncMod
|
|||||||
import ParamCFGScale from 'features/parameters/components/Core/ParamCFGScale';
|
import ParamCFGScale from 'features/parameters/components/Core/ParamCFGScale';
|
||||||
import ParamScheduler from 'features/parameters/components/Core/ParamScheduler';
|
import ParamScheduler from 'features/parameters/components/Core/ParamScheduler';
|
||||||
import ParamSteps from 'features/parameters/components/Core/ParamSteps';
|
import ParamSteps from 'features/parameters/components/Core/ParamSteps';
|
||||||
|
import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
|
||||||
import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect';
|
import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect';
|
||||||
import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle';
|
import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle';
|
||||||
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
|
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
|
||||||
@ -56,7 +57,10 @@ export const GenerationSettingsAccordion = memo(() => {
|
|||||||
<Flex gap={4} flexDir="column">
|
<Flex gap={4} flexDir="column">
|
||||||
<Flex gap={4} alignItems="center">
|
<Flex gap={4} alignItems="center">
|
||||||
<ParamMainModelSelect />
|
<ParamMainModelSelect />
|
||||||
<SyncModelsIconButton />
|
<Flex>
|
||||||
|
<SyncModelsIconButton />
|
||||||
|
<NavigateToModelManagerButton />
|
||||||
|
</Flex>
|
||||||
</Flex>
|
</Flex>
|
||||||
<Flex gap={4} flexDir="column">
|
<Flex gap={4} flexDir="column">
|
||||||
<LoRASelect />
|
<LoRASelect />
|
||||||
|
Loading…
Reference in New Issue
Block a user