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

Improve interaction area for edit and stylize

Browse Source
This commit is contained in:
blessedcoolant 2022-12-29 07:22:56 +13:00
parent 0dd5804949
commit e4b2f815e8
2 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/features/system/components/ModelManager/ModelList.tsx
View File

@ -88,7 +88,7 @@ const ModelList = () => {
<Flex <Flex
flexDirection={'column'} flexDirection={'column'}
gap={2} gap={1}
maxHeight={window.innerHeight - 360} maxHeight={window.innerHeight - 360}
overflow={'scroll'} overflow={'scroll'}
paddingRight="1rem" paddingRight="1rem"

28
frontend/src/features/system/components/ModelManager/ModelListItem.tsx
View File

@ -1,5 +1,5 @@
import { EditIcon, DeleteIcon } from '@chakra-ui/icons'; import { EditIcon, DeleteIcon } from '@chakra-ui/icons';
import { Button, Flex, Spacer, Text, Tooltip } from '@chakra-ui/react'; import { Box, Button, Flex, Spacer, Text, Tooltip } from '@chakra-ui/react';
import { ModelStatus } from 'app/invokeai'; import { ModelStatus } from 'app/invokeai';
import { deleteModel, requestModelChange } from 'app/socketio/actions'; import { deleteModel, requestModelChange } from 'app/socketio/actions';
import { RootState } from 'app/store'; import { RootState } from 'app/store';
@ -21,6 +21,10 @@ export default function ModelListItem(props: ModelListItemProps) {
(state: RootState) => state.system (state: RootState) => state.system
); );
const openModel = useAppSelector(
(state: RootState) => state.system.openModel
);
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -31,7 +35,7 @@ export default function ModelListItem(props: ModelListItemProps) {
dispatch(requestModelChange(name)); dispatch(requestModelChange(name));
}; };
const openModel = () => { const openModelHandler = () => {
dispatch(setOpenModel(name)); dispatch(setOpenModel(name));
}; };
@ -52,12 +56,24 @@ export default function ModelListItem(props: ModelListItemProps) {
}; };
return ( return (
<Flex alignItems={'center'}> <Flex
alignItems={'center'}
padding="0.5rem 0.5rem"
borderRadius="0.2rem"
backgroundColor={name === openModel ? 'var(--accent-color)' : ''}
_hover={{
backgroundColor:
name === openModel
? 'var(--accent-color)'
: 'var(--background-color)',
}}
>
<Box onClick={openModelHandler} cursor="pointer">
<Tooltip label={description} hasArrow placement="bottom"> <Tooltip label={description} hasArrow placement="bottom">
<Text fontWeight={'bold'}>{name}</Text> <Text fontWeight={'bold'}>{name}</Text>
</Tooltip> </Tooltip>
<Spacer /> </Box>
<Spacer onClick={openModelHandler} cursor="pointer" />
<Flex gap={2} alignItems="center"> <Flex gap={2} alignItems="center">
<Text color={statusTextColor()}>{status}</Text> <Text color={statusTextColor()}>{status}</Text>
<Button <Button
@ -71,7 +87,7 @@ export default function ModelListItem(props: ModelListItemProps) {
<IAIIconButton <IAIIconButton
icon={<EditIcon />} icon={<EditIcon />}
size={'sm'} size={'sm'}
onClick={openModel} onClick={openModelHandler}
aria-label="Modify Config" aria-label="Modify Config"
isDisabled={status === 'active' || isProcessing || !isConnected} isDisabled={status === 'active' || isProcessing || !isConnected}
className=" modal-close-btn" className=" modal-close-btn"