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
Show Stats 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>
))}
</TabList>
<TabPanels sx={{ p: 4 }}>
<TabPanels sx={{ w: 'full', h: 'full', p: 4 }}>
{tabs.map((tab) => (
<TabPanel key={tab.id}>{tab.content}</TabPanel>
<TabPanel sx={{ w: 'full', h: 'full' }} key={tab.id}>
{tab.content}
</TabPanel>
))}
</TabPanels>
</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 (
<Flex width="100%" columnGap={8}>
<Flex sx={{ gap: 8, w: 'full', h: 'full' }}>
<ModelList
selectedModelId={selectedModelId}
setSelectedModelId={setSelectedModelId}
@ -46,14 +46,15 @@ const ModelEdit = (props: ModelEditProps) => {
return (
<Flex
sx={{
width: '100%',
w: 'full',
h: 'full',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 'base',
bg: 'base.900',
maxH: 96,
userSelect: 'none',
}}
>
<Text fontWeight={500}>Pick A Model To Edit</Text>
<Text variant="subtext">No Model Selected</Text>
</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 { 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 IAIAlertDialog from 'common/components/IAIAlertDialog';
import IAIButton from 'common/components/IAIButton';
import IAIIconButton from 'common/components/IAIIconButton';
import { selectIsBusy } from 'features/system/store/systemSelectors';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { FaEdit } from 'react-icons/fa';
import {
MainModelConfigEntity,
useDeleteMainModelsMutation,
@ -38,40 +36,33 @@ export default function ModelListItem(props: ModelListItemProps) {
return (
<Flex sx={{ gap: 2, alignItems: 'center', w: 'full' }}>
<Flex
as={IAIButton}
isChecked={isSelected}
as={Button}
sx={{
justifyContent: 'start',
p: 2,
borderRadius: 'base',
w: 'full',
alignItems: 'center',
bg: isSelected ? 'accent.200' : 'base.100',
bg: isSelected ? 'accent.400' : 'base.100',
color: isSelected ? 'base.50' : 'base.800',
_hover: {
bg: isSelected ? 'accent.250' : 'base.150',
bg: isSelected ? 'accent.500' : 'base.200',
color: isSelected ? 'base.50' : 'base.800',
},
_dark: {
color: isSelected ? 'base.50' : 'base.100',
bg: isSelected ? 'accent.600' : 'base.850',
_hover: {
color: isSelected ? 'base.50' : 'base.100',
bg: isSelected ? 'accent.550' : 'base.800',
},
},
}}
onClick={handleSelectModel}
>
<Box cursor="pointer">
<Tooltip label={model.description} hasArrow placement="bottom">
<Text fontWeight="600">{model.model_name}</Text>
</Tooltip>
</Box>
<Spacer onClick={handleSelectModel} cursor="pointer" />
<IAIIconButton
icon={<FaEdit />}
size="sm"
onClick={handleSelectModel}
aria-label={t('accessibility.modifyConfig')}
isDisabled={isBusy}
variant="link"
/>
<Tooltip label={model.description} hasArrow placement="bottom">
<Text sx={{ fontWeight: 500 }}>{model.model_name}</Text>
</Tooltip>
</Flex>
<IAIAlertDialog
title={t('modelManager.deleteModel')}