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

fix(ui): fix IAICollapse styling

Browse Source
This commit is contained in:
psychedelicious
2023-08-23 22:48:51 +10:00
parent 955fef35aa
commit 859c155e7f
5 changed files with 39 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
View File

@ -80,9 +80,13 @@ const ControlNet = (props: ControlNetProps) => {
sx={{
flexDir: 'column',
gap: 3,
p: 3,
p: 2,
borderRadius: 'base',
position: 'relative',
bg: 'base.250',
_dark: {
bg: 'base.750',
},
}}
>
<Flex sx={{ gap: 2, alignItems: 'center' }}>
@ -190,7 +194,7 @@ const ControlNet = (props: ControlNetProps) => {
aspectRatio: '1/1',
}}
>
<ControlNetImagePreview controlNet={controlNet} height={28} />
<ControlNetImagePreview controlNet={controlNet} isSmall />
</Flex>
)}
</Flex>
@ -203,7 +207,7 @@ const ControlNet = (props: ControlNetProps) => {
{isExpanded && (
<>
<ControlNetImagePreview controlNet={controlNet} height="392px" />
<ControlNetImagePreview controlNet={controlNet} />
<ParamControlNetShouldAutoConfig controlNet={controlNet} />
<ControlNetProcessorComponent controlNet={controlNet} />
</>

19
invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
View File

@ -1,14 +1,14 @@
import { Box, Flex, Spinner, SystemStyleObject } from '@chakra-ui/react';
import { Box, Flex, Spinner } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { skipToken } from '@reduxjs/toolkit/dist/query';
import {
TypesafeDraggableData,
TypesafeDroppableData,
} from 'features/dnd/types';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIDndImage from 'common/components/IAIDndImage';
import {
TypesafeDraggableData,
TypesafeDroppableData,
} from 'features/dnd/types';
import { memo, useCallback, useMemo, useState } from 'react';
import { FaUndo } from 'react-icons/fa';
import { useGetImageDTOQuery } from 'services/api/endpoints/images';
@ -21,7 +21,7 @@ import {
type Props = {
controlNet: ControlNetConfig;
height: SystemStyleObject['h'];
isSmall?: boolean;
};
const selector = createSelector(
@ -36,15 +36,14 @@ const selector = createSelector(
defaultSelectorOptions
);
const ControlNetImagePreview = (props: Props) => {
const { height } = props;
const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => {
const {
controlImage: controlImageName,
processedControlImage: processedControlImageName,
processorType,
isEnabled,
controlNetId,
} = props.controlNet;
} = controlNet;
const dispatch = useAppDispatch();
@ -109,7 +108,7 @@ const ControlNetImagePreview = (props: Props) => {
sx={{
position: 'relative',
w: 'full',
h: height,
h: isSmall ? 28 : 366, // magic no touch
alignItems: 'center',
justifyContent: 'center',
pointerEvents: isEnabled ? 'auto' : 'none',