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 header styling

Browse Source
This commit is contained in:
psychedelicious 2024-03-07 16:28:17 +11:00
parent a3a42d25d3
commit c008704bc8
2 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx
View File

@ -100,9 +100,9 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => {
src={image}
objectFit="cover"
objectPosition="50% 50%"
height="100px"
width="100px"
minWidth="100px"
height={108}
width={108}
minWidth={108}
borderRadius="base"
/>
<IconButton
@ -125,8 +125,8 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => {
<Tooltip label={t('modelManager.uploadImage')}>
<Flex
as={Button}
w={100}
h={100}
w={108}
h={108}
opacity={0.3}
borderRadius="base"
alignItems="center"

11
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx
View File

@ -1,4 +1,4 @@
import { Flex, Heading, Text } from '@invoke-ai/ui-library';
import { Flex, Heading, Spacer, Text } from '@invoke-ai/ui-library';
import { skipToken } from '@reduxjs/toolkit/query';
import { useAppSelector } from 'app/store/storeHooks';
import { ModelConvertButton } from 'features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton';
@ -29,14 +29,13 @@ export const Model = () => {
<Flex alignItems="flex-start" gap={4}>
<ModelImageUpload model_key={selectedModelKey} model_image={data.cover_image} />
<Flex flexDir="column" gap={1} flexGrow={1}>
<Flex gap={2} position="relative">
<Flex gap={2}>
<Heading as="h2" fontSize="lg" w="full">
{data.name}
</Heading>
<Flex position="absolute" gap={2} right={0} top={0}>
<ModelEditButton />
<ModelConvertButton modelKey={selectedModelKey} />
</Flex>
<Spacer />
<ModelEditButton />
<ModelConvertButton modelKey={selectedModelKey} />
</Flex>
{data.source && (
<Text variant="subtext">