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): style settings/control layers tabs

Browse Source
This commit is contained in:
psychedelicious 2024-05-03 11:24:49 +10:00 committed by Kent Keirsey
parent f05ac5a7a5
commit c30df7ce79
1 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
View File

@ -1,3 +1,4 @@
import type { ChakraProps } from '@invoke-ai/ui-library';
import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
@ -23,6 +24,29 @@ const overlayScrollbarsStyles: CSSProperties = {
width: '100%',
};
const unselectedStyles: ChakraProps['sx'] = {
bg: 'none',
color: 'base.300',
fontWeight: 'semibold',
fontSize: 'sm',
w: '50%',
borderWidth: 1,
borderRadius: 'base',
};
const selectedStyles: ChakraProps['sx'] = {
color: 'invokeBlue.300',
borderColor: 'invokeBlueAlpha.400',
_hover: {
color: 'invokeBlue.200',
},
};
const hoverStyles: ChakraProps['sx'] = {
bg: 'base.850',
color: 'base.100',
};
const ParametersPanelTextToImage = () => {
const { t } = useTranslation();
const activeTabName = useAppSelector(activeTabNameSelector);
@ -37,14 +61,17 @@ const ParametersPanelTextToImage = () => {
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
<Flex gap={2} flexDirection="column" h="full" w="full">
{isSDXL ? <SDXLPrompts /> : <Prompts />}
<Tabs variant="line" isLazy={true} display="flex" flexDir="column" w="full" h="full">
<TabList>
<Tab flexGrow={1}>{t('common.settingsLabel')}</Tab>
<Tab flexGrow={1}>{controlLayersTitle}</Tab>
<Tabs variant="unstyled" display="flex" flexDir="column" w="full" h="full" gap={2}>
<TabList gap={2}>
<Tab _hover={hoverStyles} _selected={selectedStyles} sx={unselectedStyles}>
{t('common.settingsLabel')}
</Tab>
<Tab _hover={hoverStyles} _selected={selectedStyles} sx={unselectedStyles}>
{controlLayersTitle}
</Tab>
</TabList>
<TabPanels w="full" h="full">
<TabPanel>
<TabPanel p={0}>
<Flex gap={2} flexDirection="column" h="full" w="full">
<ImageSettingsAccordion />
<GenerationSettingsAccordion />
@ -54,7 +81,7 @@ const ParametersPanelTextToImage = () => {
<AdvancedSettingsAccordion />
</Flex>
</TabPanel>
<TabPanel>
<TabPanel p={0}>
<ControlLayersPanelContent />
</TabPanel>
</TabPanels>