github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-12 21:25:12 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): tweak vertical tab bar layout

Browse Source
This commit is contained in:
psychedelicious
2025-06-20 16:34:55 +10:00
parent b06f76cdb6
commit 041023df53
3 changed files with 4 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/ui/components/AppContent.tsx
View File

@@ -1,7 +1,7 @@
import 'dockview/dist/styles/dockview.css';
import 'features/ui/styles/dockview-theme-invoke.css';
import { TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
import { TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { useDndMonitor } from 'features/dnd/useDndMonitor';
import { VerticalNavBar } from 'features/ui/components/VerticalNavBar';
@@ -22,9 +22,7 @@ export const AppContent = memo(() => {
return (
<Tabs index={tabIndex} display="flex" w="full" h="full" p={0} overflow="hidden">
<TabList>
<VerticalNavBar />
</TabList>
<VerticalNavBar />
<TabPanels w="full" h="full" p={0}>
<TabMountGate tab="generate">
<TabPanel w="full" h="full" p={0}>

3
invokeai/frontend/web/src/features/ui/components/TabButton.tsx
View File

@@ -1,5 +1,5 @@
import type { SystemStyleObject } from '@invoke-ai/ui-library';
import { IconButton, Tab, Tooltip } from '@invoke-ai/ui-library';
import { IconButton, Tooltip } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
@@ -26,7 +26,6 @@ export const TabButton = memo(({ tab, icon, label }: { tab: TabName; icon: React
return (
<Tooltip label={label} placement="end">
<IconButton
as={Tab}
p={0}
ref={ref}
onClick={selectTab}

2
invokeai/frontend/web/src/features/ui/components/VerticalNavBar.tsx
View File

@@ -27,7 +27,7 @@ export const VerticalNavBar = memo(() => {
return (
<Flex flexDir="column" alignItems="center" py={6} px={4} gap={4} minW={0}>
<InvokeAILogoComponent />
<Flex gap={4} pt={6} h="full" flexDir="column">
<Flex gap={6} pt={6} h="full" flexDir="column">
<TabMountGate tab="generate">
<TabButton tab="generate" icon={<PiTextAaBold />} label="Generate" />
</TabMountGate>