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 { memo } from 'react';
type IAISelectProps = SelectProps;
type IAISelectProps = SelectProps & {
tooltip?: string;
};
const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
const { searchable = true, ...rest } = props;
const { searchable = true, tooltip, ...rest } = props;
return (
<Select
ref={ref}
searchable={searchable}
styles={() => ({
label: {
color: 'var(--invokeai-colors-base-300)',
fontWeight: 'normal',
},
input: {
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)',
<Tooltip label={tooltip} placement="top" hasArrow>
<Select
ref={ref}
searchable={searchable}
styles={() => ({
root: {},
label: {
color: 'var(--invokeai-colors-base-300)',
fontWeight: 'normal',
},
},
dropdown: {
backgroundColor: 'var(--invokeai-colors-base-800)',
borderColor: 'var(--invokeai-colors-base-700)',
},
item: {
backgroundColor: 'var(--invokeai-colors-base-800)',
color: 'var(--invokeai-colors-base-200)',
padding: 6,
'&[data-hovered]': {
input: {
backgroundColor: 'var(--invokeai-colors-base-900)',
borderWidth: '2px',
borderColor: 'var(--invokeai-colors-base-800)',
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]': {
backgroundColor: 'var(--invokeai-colors-base-750)',
'&:hover': {
dropdown: {
backgroundColor: 'var(--invokeai-colors-base-800)',
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)',
backgroundColor: 'var(--invokeai-colors-base-750)',
},
},
'&[data-selected]': {
color: 'var(--invokeai-colors-base-50)',
backgroundColor: 'var(--invokeai-colors-accent-650)',
fontWeight: 600,
'&:hover': {
backgroundColor: 'var(--invokeai-colors-accent-600)',
'&[data-active]': {
backgroundColor: 'var(--invokeai-colors-base-750)',
'&:hover': {
color: 'var(--invokeai-colors-base-100)',
backgroundColor: 'var(--invokeai-colors-base-750)',
},
},
'&[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}
onChange={handleModelChanged}
disabled={!isReady}
tooltip={model}
/>
);
// return (

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

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