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): add tooltip to IAIMantineSelect

Browse Source
This commit is contained in:
psychedelicious 2023-06-12 22:11:56 +10:00
parent 4a991b4daa
commit 4ba5086b9a
3 changed files with 52 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
View File

@ -1,62 +1,67 @@
import { forwardRef } from '@chakra-ui/react'; import { Tooltip, forwardRef } from '@chakra-ui/react';
import { Select, SelectProps } from '@mantine/core'; import { Select, SelectProps } from '@mantine/core';
import { memo } from 'react'; import { memo } from 'react';
type IAISelectProps = SelectProps; type IAISelectProps = SelectProps & {
tooltip?: string;
};
const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => { const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
const { searchable = true, ...rest } = props; const { searchable = true, tooltip, ...rest } = props;
return ( return (
<Select <Tooltip label={tooltip} placement="top" hasArrow>
ref={ref} <Select
searchable={searchable} ref={ref}
styles={() => ({ searchable={searchable}
label: { styles={() => ({
color: 'var(--invokeai-colors-base-300)', root: {},
fontWeight: 'normal', label: {
}, color: 'var(--invokeai-colors-base-300)',
input: { fontWeight: 'normal',
backgroundColor: 'var(--invokeai-colors-base-900)',
borderWidth: '2px',
borderColor: 'var(--invokeai-colors-base-800)',
color: 'var(--invokeai-colors-base-100)',
fontWeight: 600,
'&:hover': { borderColor: 'var(--invokeai-colors-base-700)' },
'&:focus': {
borderColor: 'var(--invokeai-colors-accent-600)',
}, },
}, input: {
dropdown: { backgroundColor: 'var(--invokeai-colors-base-900)',
backgroundColor: 'var(--invokeai-colors-base-800)', borderWidth: '2px',
borderColor: 'var(--invokeai-colors-base-700)', borderColor: 'var(--invokeai-colors-base-800)',
},
item: {
backgroundColor: 'var(--invokeai-colors-base-800)',
color: 'var(--invokeai-colors-base-200)',
padding: 6,
'&[data-hovered]': {
color: 'var(--invokeai-colors-base-100)', color: 'var(--invokeai-colors-base-100)',
backgroundColor: 'var(--invokeai-colors-base-750)', fontWeight: 600,
'&:hover': { borderColor: 'var(--invokeai-colors-base-700)' },
'&:focus': {
borderColor: 'var(--invokeai-colors-accent-600)',
},
}, },
'&[data-active]': { dropdown: {
backgroundColor: 'var(--invokeai-colors-base-750)', backgroundColor: 'var(--invokeai-colors-base-800)',
'&:hover': { borderColor: 'var(--invokeai-colors-base-700)',
},
item: {
backgroundColor: 'var(--invokeai-colors-base-800)',
color: 'var(--invokeai-colors-base-200)',
padding: 6,
'&[data-hovered]': {
color: 'var(--invokeai-colors-base-100)', color: 'var(--invokeai-colors-base-100)',
backgroundColor: 'var(--invokeai-colors-base-750)', backgroundColor: 'var(--invokeai-colors-base-750)',
}, },
}, '&[data-active]': {
'&[data-selected]': { backgroundColor: 'var(--invokeai-colors-base-750)',
color: 'var(--invokeai-colors-base-50)', '&:hover': {
backgroundColor: 'var(--invokeai-colors-accent-650)', color: 'var(--invokeai-colors-base-100)',
fontWeight: 600, backgroundColor: 'var(--invokeai-colors-base-750)',
'&:hover': { },
backgroundColor: 'var(--invokeai-colors-accent-600)', },
'&[data-selected]': {
color: 'var(--invokeai-colors-base-50)',
backgroundColor: 'var(--invokeai-colors-accent-650)',
fontWeight: 600,
'&:hover': {
backgroundColor: 'var(--invokeai-colors-accent-600)',
},
}, },
}, },
}, })}
})} {...rest}
{...rest} />
/> </Tooltip>
); );
}); });

1
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
View File

@ -54,6 +54,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
value={model} value={model}
onChange={handleModelChanged} onChange={handleModelChanged}
disabled={!isReady} disabled={!isReady}
tooltip={model}
/> />
); );
// return ( // return (

1
invokeai/frontend/web/src/features/system/components/ModelSelect.tsx
View File

@ -63,6 +63,7 @@ const ModelSelect = () => {
return ( return (
<IAIMantineSelect <IAIMantineSelect
tooltip={selectedModel?.description}
label={t('modelManager.model')} label={t('modelManager.model')}
value={selectedModel?.name ?? ''} value={selectedModel?.name ?? ''}
placeholder="Pick one" placeholder="Pick one"