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): improve no loaded embeddings UI

Browse Source
This commit is contained in:
psychedelicious 2023-07-06 22:24:50 +10:00
parent fbd6b25b4d
commit 87feae959d
1 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx
View File

@ -1,4 +1,5 @@
import { import {
Flex,
Popover, Popover,
PopoverBody, PopoverBody,
PopoverContent, PopoverContent,
@ -82,20 +83,31 @@ const ParamEmbeddingPopover = (props: Props) => {
p: 0, p: 0,
top: -1, top: -1,
shadow: 'dark-lg', shadow: 'dark-lg',
bg: 'accent.300', borderColor: 'accent.300',
_dark: { bg: 'accent.400' }, borderWidth: '2px',
borderStyle: 'solid',
_dark: { borderColor: 'accent.400' },
}} }}
> >
<PopoverBody <PopoverBody
sx={{ p: 0.5, w: `calc(${PARAMETERS_PANEL_WIDTH} - 2rem )` }} sx={{ p: 0, w: `calc(${PARAMETERS_PANEL_WIDTH} - 2rem )` }}
> >
{data.length === 0 ? (
<Flex sx={{ justifyContent: 'center', p: 2 }}>
<Text
sx={{ fontSize: 'sm', color: 'base.500', _dark: 'base.700' }}
>
No Embeddings Loaded
</Text>
</Flex>
) : (
<IAIMantineMultiSelect <IAIMantineMultiSelect
inputRef={inputRef} inputRef={inputRef}
placeholder={data.length === 0 ? 'No Embeddings' : 'Add Embedding'} placeholder={'Add Embedding'}
value={[]} value={[]}
data={data} data={data}
maxDropdownHeight={400} maxDropdownHeight={400}
nothingFound="No matching Embeddings" nothingFound="No Matching Embeddings"
itemComponent={SelectItem} itemComponent={SelectItem}
disabled={data.length === 0} disabled={data.length === 0}
filter={(value, selected, item: EmbeddingSelectItem) => filter={(value, selected, item: EmbeddingSelectItem) =>
@ -104,6 +116,7 @@ const ParamEmbeddingPopover = (props: Props) => {
} }
onChange={handleChange} onChange={handleChange}
/> />
)}
</PopoverBody> </PopoverBody>
</PopoverContent> </PopoverContent>
</Popover> </Popover>