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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/src/common/components/IAICollapse.tsx
View File

@ -34,14 +34,10 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
gap: 2, gap: 2,
borderTopRadius: 'base', borderTopRadius: 'base',
borderBottomRadius: isOpen ? 0 : 'base', borderBottomRadius: isOpen ? 0 : 'base',
bg: isOpen bg: mode('base.250', 'base.750')(colorMode),
? mode('base.200', 'base.750')(colorMode)
: mode('base.150', 'base.800')(colorMode),
color: mode('base.900', 'base.100')(colorMode), color: mode('base.900', 'base.100')(colorMode),
_hover: { _hover: {
bg: isOpen bg: mode('base.300', 'base.700')(colorMode),
? mode('base.250', 'base.700')(colorMode)
: mode('base.200', 'base.750')(colorMode),
}, },
fontSize: 'sm', fontSize: 'sm',
fontWeight: 600, fontWeight: 600,
@ -90,9 +86,10 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
<Collapse in={isOpen} animateOpacity style={{ overflow: 'unset' }}> <Collapse in={isOpen} animateOpacity style={{ overflow: 'unset' }}>
<Box <Box
sx={{ sx={{
p: 4, p: 2,
pt: 3,
borderBottomRadius: 'base', borderBottomRadius: 'base',
bg: 'base.100', bg: 'base.150',
_dark: { _dark: {
bg: 'base.800', bg: 'base.800',
}, },

2
invokeai/frontend/web/src/common/components/IAIDndImage.tsx
View File

@ -126,7 +126,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
? {} ? {}
: { : {
cursor: 'pointer', cursor: 'pointer',
bg: mode('base.200', 'base.800')(colorMode), bg: mode('base.200', 'base.700')(colorMode),
_hover: { _hover: {
bg: mode('base.300', 'base.650')(colorMode), bg: mode('base.300', 'base.650')(colorMode),
color: mode('base.500', 'base.300')(colorMode), color: mode('base.500', 'base.300')(colorMode),

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

@ -80,9 +80,13 @@ const ControlNet = (props: ControlNetProps) => {
sx={{ sx={{
flexDir: 'column', flexDir: 'column',
gap: 3, gap: 3,
p: 3, p: 2,
borderRadius: 'base', borderRadius: 'base',
position: 'relative', position: 'relative',
bg: 'base.250',
_dark: {
bg: 'base.750',
},
}} }}
> >
<Flex sx={{ gap: 2, alignItems: 'center' }}> <Flex sx={{ gap: 2, alignItems: 'center' }}>
@ -190,7 +194,7 @@ const ControlNet = (props: ControlNetProps) => {
aspectRatio: '1/1', aspectRatio: '1/1',
}} }}
> >
<ControlNetImagePreview controlNet={controlNet} height={28} /> <ControlNetImagePreview controlNet={controlNet} isSmall />
</Flex> </Flex>
)} )}
</Flex> </Flex>
@ -203,7 +207,7 @@ const ControlNet = (props: ControlNetProps) => {
{isExpanded && ( {isExpanded && (
<> <>
<ControlNetImagePreview controlNet={controlNet} height="392px" /> <ControlNetImagePreview controlNet={controlNet} />
<ParamControlNetShouldAutoConfig controlNet={controlNet} /> <ParamControlNetShouldAutoConfig controlNet={controlNet} />
<ControlNetProcessorComponent 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 { createSelector } from '@reduxjs/toolkit';
import { skipToken } from '@reduxjs/toolkit/dist/query'; import { skipToken } from '@reduxjs/toolkit/dist/query';
import {
TypesafeDraggableData,
TypesafeDroppableData,
} from 'features/dnd/types';
import { stateSelector } from 'app/store/store'; import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAIDndImage from 'common/components/IAIDndImage'; import IAIDndImage from 'common/components/IAIDndImage';
import {
TypesafeDraggableData,
TypesafeDroppableData,
} from 'features/dnd/types';
import { memo, useCallback, useMemo, useState } from 'react'; import { memo, useCallback, useMemo, useState } from 'react';
import { FaUndo } from 'react-icons/fa'; import { FaUndo } from 'react-icons/fa';
import { useGetImageDTOQuery } from 'services/api/endpoints/images'; import { useGetImageDTOQuery } from 'services/api/endpoints/images';
@ -21,7 +21,7 @@ import {
type Props = { type Props = {
controlNet: ControlNetConfig; controlNet: ControlNetConfig;
height: SystemStyleObject['h']; isSmall?: boolean;
}; };
const selector = createSelector( const selector = createSelector(
@ -36,15 +36,14 @@ const selector = createSelector(
defaultSelectorOptions defaultSelectorOptions
); );
const ControlNetImagePreview = (props: Props) => { const ControlNetImagePreview = ({ isSmall, controlNet }: Props) => {
const { height } = props;
const { const {
controlImage: controlImageName, controlImage: controlImageName,
processedControlImage: processedControlImageName, processedControlImage: processedControlImageName,
processorType, processorType,
isEnabled, isEnabled,
controlNetId, controlNetId,
} = props.controlNet; } = controlNet;
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -109,7 +108,7 @@ const ControlNetImagePreview = (props: Props) => {
sx={{ sx={{
position: 'relative', position: 'relative',
w: 'full', w: 'full',
h: height, h: isSmall ? 28 : 366, // magic no touch
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
pointerEvents: isEnabled ? 'auto' : 'none', pointerEvents: isEnabled ? 'auto' : 'none',

36
invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
View File

@ -69,31 +69,29 @@ const ParamControlNetCollapse = () => {
return ( return (
<IAICollapse label="ControlNet" activeLabel={activeLabel}> <IAICollapse label="ControlNet" activeLabel={activeLabel}>
<Flex sx={{ flexDir: 'column', gap: 3 }}> <Flex sx={{ flexDir: 'column', gap: 2 }}>
<Flex gap={2} alignItems="center"> <Flex
<Flex sx={{
sx={{ w: '100%',
flexDirection: 'column', gap: 2,
w: '100%', p: 2,
gap: 2, ps: 3,
px: 4, borderRadius: 'base',
py: 2, alignItems: 'center',
borderRadius: 4, bg: 'base.250',
bg: 'base.200', _dark: {
_dark: { bg: 'base.750',
bg: 'base.850', },
}, }}
}} >
> <ParamControlNetFeatureToggle />
<ParamControlNetFeatureToggle />
</Flex>
<IAIIconButton <IAIIconButton
tooltip="Add ControlNet" tooltip="Add ControlNet"
aria-label="Add ControlNet" aria-label="Add ControlNet"
icon={<FaPlus />} icon={<FaPlus />}
isDisabled={!firstModel} isDisabled={!firstModel}
flexGrow={1} flexGrow={1}
size="md" size="sm"
onClick={handleClickedAddControlNet} onClick={handleClickedAddControlNet}
/> />
</Flex> </Flex>