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): mm colors

Browse Source
This commit is contained in:
psychedelicious
2023-07-14 20:12:02 +10:00
parent eb2a7058bf
commit d4dfd84525
3 changed files with 22 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,9 +46,11 @@ const ModelManagerTab = () => {
</Tab> </Tab>
))} ))}
</TabList> </TabList>
<TabPanels sx={{ p: 4 }}> <TabPanels sx={{ w: 'full', h: 'full', p: 4 }}>
{tabs.map((tab) => ( {tabs.map((tab) => (
<TabPanel key={tab.id}>{tab.content}</TabPanel> <TabPanel sx={{ w: 'full', h: 'full' }} key={tab.id}>
{tab.content}
</TabPanel>
))} ))}
</TabPanels> </TabPanels>
</Tabs> </Tabs>

11
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel.tsx
View File

@ -18,7 +18,7 @@ export default function ModelManagerPanel() {
}); });
return ( return (
<Flex width="100%" columnGap={8}> <Flex sx={{ gap: 8, w: 'full', h: 'full' }}>
<ModelList <ModelList
selectedModelId={selectedModelId} selectedModelId={selectedModelId}
setSelectedModelId={setSelectedModelId} setSelectedModelId={setSelectedModelId}
@ -46,14 +46,15 @@ const ModelEdit = (props: ModelEditProps) => {
return ( return (
<Flex <Flex
sx={{ sx={{
width: '100%', w: 'full',
h: 'full',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
borderRadius: 'base', maxH: 96,
bg: 'base.900', userSelect: 'none',
}} }}
> >
<Text fontWeight={500}>Pick A Model To Edit</Text> <Text variant="subtext">No Model Selected</Text>
</Flex> </Flex>
); );
}; };

33
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
View File

@ -1,13 +1,11 @@
import { DeleteIcon } from '@chakra-ui/icons'; import { DeleteIcon } from '@chakra-ui/icons';
import { Box, Flex, Spacer, Text, Tooltip } from '@chakra-ui/react'; import { Button, Flex, Text, Tooltip } from '@chakra-ui/react';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import IAIAlertDialog from 'common/components/IAIAlertDialog'; import IAIAlertDialog from 'common/components/IAIAlertDialog';
import IAIButton from 'common/components/IAIButton';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { selectIsBusy } from 'features/system/store/systemSelectors'; import { selectIsBusy } from 'features/system/store/systemSelectors';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaEdit } from 'react-icons/fa';
import { import {
MainModelConfigEntity, MainModelConfigEntity,
useDeleteMainModelsMutation, useDeleteMainModelsMutation,
@ -38,40 +36,33 @@ export default function ModelListItem(props: ModelListItemProps) {
return ( return (
<Flex sx={{ gap: 2, alignItems: 'center', w: 'full' }}> <Flex sx={{ gap: 2, alignItems: 'center', w: 'full' }}>
<Flex <Flex
as={IAIButton} as={Button}
isChecked={isSelected}
sx={{ sx={{
justifyContent: 'start',
p: 2, p: 2,
borderRadius: 'base', borderRadius: 'base',
w: 'full', w: 'full',
alignItems: 'center', alignItems: 'center',
bg: isSelected ? 'accent.200' : 'base.100', bg: isSelected ? 'accent.400' : 'base.100',
color: isSelected ? 'base.50' : 'base.800',
_hover: { _hover: {
bg: isSelected ? 'accent.250' : 'base.150', bg: isSelected ? 'accent.500' : 'base.200',
color: isSelected ? 'base.50' : 'base.800',
}, },
_dark: { _dark: {
color: isSelected ? 'base.50' : 'base.100',
bg: isSelected ? 'accent.600' : 'base.850', bg: isSelected ? 'accent.600' : 'base.850',
_hover: { _hover: {
color: isSelected ? 'base.50' : 'base.100',
bg: isSelected ? 'accent.550' : 'base.800', bg: isSelected ? 'accent.550' : 'base.800',
}, },
}, },
}} }}
onClick={handleSelectModel} onClick={handleSelectModel}
> >
<Box cursor="pointer"> <Tooltip label={model.description} hasArrow placement="bottom">
<Tooltip label={model.description} hasArrow placement="bottom"> <Text sx={{ fontWeight: 500 }}>{model.model_name}</Text>
<Text fontWeight="600">{model.model_name}</Text> </Tooltip>
</Tooltip>
</Box>
<Spacer onClick={handleSelectModel} cursor="pointer" />
<IAIIconButton
icon={<FaEdit />}
size="sm"
onClick={handleSelectModel}
aria-label={t('accessibility.modifyConfig')}
isDisabled={isBusy}
variant="link"
/>
</Flex> </Flex>
<IAIAlertDialog <IAIAlertDialog
title={t('modelManager.deleteModel')} title={t('modelManager.deleteModel')}