mirror of
https://github.com/invoke-ai/InvokeAI.git
synced 2026-02-13 17:14:56 -05:00
add fallback image and make sure description text is legible for model picker noncompact
This commit is contained in:
committed by
Mary Hipp Rogers
parent
a1ade2b8c0
commit
b8bf89c2f1
@@ -34,6 +34,17 @@ const ModelImage = ({ image_url }: Props) => {
|
||||
minHeight={MODEL_IMAGE_THUMBNAIL_SIZE}
|
||||
minWidth={MODEL_IMAGE_THUMBNAIL_SIZE}
|
||||
borderRadius="base"
|
||||
fallback={
|
||||
<Flex
|
||||
height={MODEL_IMAGE_THUMBNAIL_SIZE}
|
||||
minWidth={MODEL_IMAGE_THUMBNAIL_SIZE}
|
||||
borderRadius="base"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Icon color="base.500" as={PiImage} boxSize={FALLBACK_ICON_SIZE} />
|
||||
</Flex>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -413,6 +413,12 @@ const optionNameSx: SystemStyleObject = {
|
||||
},
|
||||
};
|
||||
|
||||
const optionDescriptionSx: SystemStyleObject = {
|
||||
'&[data-is-compact="true"]': {
|
||||
color: 'base.800',
|
||||
},
|
||||
};
|
||||
|
||||
const PickerOptionComponent = typedMemo(
|
||||
<T extends AnyModelConfig>({ option, ...rest }: { option: WithStarred<T> } & BoxProps) => {
|
||||
const { $compactView } = usePickerContext<WithStarred<T>>();
|
||||
@@ -453,7 +459,11 @@ const PickerOptionComponent = typedMemo(
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
{option.description && !compactView && <Text color="base.200">{option.description}</Text>}
|
||||
{option.description && !compactView && (
|
||||
<Text sx={optionDescriptionSx} data-is-compact={compactView}>
|
||||
{option.description}
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user