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(ui): model manager tab naming tweaks

Browse Source
This commit is contained in:
psychedelicious 2023-07-04 14:52:00 +10:00
parent 96bf92ead4
commit 099082abc1
4 changed files with 41 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx
View File

@ -7,18 +7,17 @@ import { isEqual } from 'lodash-es';
import { memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { MdPhotoLibrary } from 'react-icons/md'; import { MdPhotoLibrary } from 'react-icons/md';
import { InvokeTabName } from '../store/tabMap';
import { activeTabNameSelector, uiSelector } from '../store/uiSelectors'; import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
import { NO_GALLERY_TABS } from './InvokeTabs';
const floatingGalleryButtonSelector = createSelector( const floatingGalleryButtonSelector = createSelector(
[activeTabNameSelector, uiSelector], [activeTabNameSelector, uiSelector],
(activeTabName, ui) => { (activeTabName, ui) => {
const { shouldPinGallery, shouldShowGallery } = ui; const { shouldPinGallery, shouldShowGallery } = ui;
const noGalleryTabs: InvokeTabName[] = ['modelmanager'];
return { return {
shouldPinGallery, shouldPinGallery,
shouldShowGalleryButton: noGalleryTabs.includes(activeTabName) shouldShowGalleryButton: NO_GALLERY_TABS.includes(activeTabName)
? false ? false
: !shouldShowGallery, : !shouldShowGallery,
}; };

7
invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
View File

@ -72,7 +72,7 @@ const tabs: InvokeTabInfo[] = [
// content: <BatchTab />, // content: <BatchTab />,
// }, // },
{ {
id: 'modelmanager', id: 'modelManager',
icon: <Icon as={FaCube} sx={{ boxSize: 6, pointerEvents: 'none' }} />, icon: <Icon as={FaCube} sx={{ boxSize: 6, pointerEvents: 'none' }} />,
content: <ModelManagerTab />, content: <ModelManagerTab />,
}, },
@ -92,6 +92,7 @@ const enabledTabsSelector = createSelector(
const MIN_GALLERY_WIDTH = 300; const MIN_GALLERY_WIDTH = 300;
const DEFAULT_GALLERY_PCT = 20; const DEFAULT_GALLERY_PCT = 20;
export const NO_GALLERY_TABS: InvokeTabName[] = ['modelManager'];
const InvokeTabs = () => { const InvokeTabs = () => {
const activeTab = useAppSelector(activeTabIndexSelector); const activeTab = useAppSelector(activeTabIndexSelector);
@ -101,8 +102,6 @@ const InvokeTabs = () => {
(state: RootState) => state.lightbox.isLightboxOpen (state: RootState) => state.lightbox.isLightboxOpen
); );
const noGalleryTabs: InvokeTabName[] = ['modelmanager'];
const { shouldPinGallery, shouldPinParametersPanel, shouldShowGallery } = const { shouldPinGallery, shouldPinParametersPanel, shouldShowGallery } =
useAppSelector((state: RootState) => state.ui); useAppSelector((state: RootState) => state.ui);
@ -207,7 +206,7 @@ const InvokeTabs = () => {
</Panel> </Panel>
{shouldPinGallery && {shouldPinGallery &&
shouldShowGallery && shouldShowGallery &&
!noGalleryTabs.includes(activeTabName) && ( !NO_GALLERY_TABS.includes(activeTabName) && (
<> <>
<ResizeHandle /> <ResizeHandle />
<Panel <Panel

10
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/ModelManagerTab.tsx
View File

@ -5,7 +5,7 @@ import AddModelsPanel from './subpanels/AddModelsPanel';
import MergeModelsPanel from './subpanels/MergeModelsPanel'; import MergeModelsPanel from './subpanels/MergeModelsPanel';
import ModelManagerPanel from './subpanels/ModelManagerPanel'; import ModelManagerPanel from './subpanels/ModelManagerPanel';
type ModelManagerTabName = 'modelmanager' | 'add_models' | 'merge_models'; type ModelManagerTabName = 'modelManager' | 'addModels' | 'mergeModels';
type ModelManagerTabInfo = { type ModelManagerTabInfo = {
id: ModelManagerTabName; id: ModelManagerTabName;
@ -15,23 +15,22 @@ type ModelManagerTabInfo = {
const modelManagerTabs: ModelManagerTabInfo[] = [ const modelManagerTabs: ModelManagerTabInfo[] = [
{ {
id: 'modelmanager', id: 'modelManager',
label: i18n.t('modelManager.modelManager'), label: i18n.t('modelManager.modelManager'),
content: <ModelManagerPanel />, content: <ModelManagerPanel />,
}, },
{ {
id: 'add_models', id: 'addModels',
label: i18n.t('modelManager.addModel'), label: i18n.t('modelManager.addModel'),
content: <AddModelsPanel />, content: <AddModelsPanel />,
}, },
{ {
id: 'merge_models', id: 'mergeModels',
label: i18n.t('modelManager.mergeModels'), label: i18n.t('modelManager.mergeModels'),
content: <MergeModelsPanel />, content: <MergeModelsPanel />,
}, },
]; ];
const ModelManagerTab = () => {
const renderTabsList = () => { const renderTabsList = () => {
const modelManagerTabListsToRender: ReactNode[] = []; const modelManagerTabListsToRender: ReactNode[] = [];
modelManagerTabs.forEach((modelManagerTab) => { modelManagerTabs.forEach((modelManagerTab) => {
@ -66,6 +65,7 @@ const ModelManagerTab = () => {
return <TabPanels sx={{ p: 2 }}>{modelManagerTabPanelsToRender}</TabPanels>; return <TabPanels sx={{ p: 2 }}>{modelManagerTabPanelsToRender}</TabPanels>;
}; };
const ModelManagerTab = () => {
return ( return (
<Tabs <Tabs
isLazy isLazy

2
invokeai/frontend/web/src/features/ui/store/tabMap.ts
View File

@ -7,7 +7,7 @@ export const tabMap = [
'batch', 'batch',
// 'postprocessing', // 'postprocessing',
// 'training', // 'training',
'modelmanager', 'modelManager',
] as const; ] as const;
export type InvokeTabName = (typeof tabMap)[number]; export type InvokeTabName = (typeof tabMap)[number];