feat(ui): wip controlnet layout

invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, useColorMode } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { memo, useCallback } from 'react';
 import { FaCopy, FaTrash } from 'react-icons/fa';
@@ -17,7 +17,6 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIIconButton from 'common/components/IAIIconButton';
 import IAISwitch from 'common/components/IAISwitch';
 import { useToggle } from 'react-use';
-import { mode } from 'theme/util/mode';
 import { v4 as uuidv4 } from 'uuid';
 import ControlNetImagePreview from './ControlNetImagePreview';
 import ControlNetProcessorComponent from './ControlNetProcessorComponent';
@@ -46,9 +45,8 @@ const ControlNet = (props: ControlNetProps) => {
   );
 
   const { isEnabled, shouldAutoConfig } = useAppSelector(selector);
-
   const [isExpanded, toggleIsExpanded] = useToggle(false);
-  const { colorMode } = useColorMode();
+
   const handleDelete = useCallback(() => {
     dispatch(controlNetRemoved({ controlNetId }));
   }, [controlNetId, dispatch]);
@@ -72,9 +70,12 @@ const ControlNet = (props: ControlNetProps) => {
         flexDir: 'column',
         gap: 2,
         p: 3,
-        bg: mode('base.200', 'base.850')(colorMode),
         borderRadius: 'base',
         position: 'relative',
+        bg: 'base.200',
+        _dark: {
+          bg: 'base.850',
+        },
       }}
     >
       <Flex sx={{ gap: 2 }}>
@@ -120,10 +121,13 @@ const ControlNet = (props: ControlNetProps) => {
             <ChevronUpIcon
               sx={{
                 boxSize: 4,
-                color: mode('base.700', 'base.300')(colorMode),
+                color: 'base.700',
                 transform: isExpanded ? 'rotate(0deg)' : 'rotate(180deg)',
                 transitionProperty: 'common',
                 transitionDuration: 'normal',
+                _dark: {
+                  color: 'base.300',
+                },
               }}
             />
           }
@@ -136,25 +140,23 @@ const ControlNet = (props: ControlNetProps) => {
               w: 1.5,
               h: 1.5,
               borderRadius: 'full',
-              bg: mode('error.700', 'error.200')(colorMode),
               top: 4,
               insetInlineEnd: 4,
+              bg: 'error.700',
+              _dark: {
+                bg: 'error.200',
+              },
             }}
           />
         )}
       </Flex>
-      <Flex alignItems="flex-end" gap="2">
-        <ParamControlNetProcessorSelect controlNetId={controlNetId} />
-        <ParamControlNetShouldAutoConfig controlNetId={controlNetId} />
-      </Flex>
-      {isEnabled && (
-        <>
       <Flex sx={{ w: 'full', flexDirection: 'column' }}>
-            <Flex sx={{ gap: 4, w: 'full' }}>
+        <Flex sx={{ gap: 4, w: 'full', alignItems: 'center' }}>
           <Flex
             sx={{
               flexDir: 'column',
               gap: 3,
+              h: 28,
               w: 'full',
               paddingInlineStart: 1,
               paddingInlineEnd: isExpanded ? 1 : 0,
@@ -162,48 +164,40 @@ const ControlNet = (props: ControlNetProps) => {
               justifyContent: 'space-between',
             }}
           >
-                <ParamControlNetWeight
+            <ParamControlNetWeight controlNetId={controlNetId} />
-                  controlNetId={controlNetId}
+            <ParamControlNetBeginEnd controlNetId={controlNetId} />
-                  mini={!isExpanded}
-                />
-                <ParamControlNetBeginEnd
-                  controlNetId={controlNetId}
-                  mini={!isExpanded}
-                />
           </Flex>
           {!isExpanded && (
             <Flex
               sx={{
                 alignItems: 'center',
                 justifyContent: 'center',
-                    h: 24,
+                h: 28,
-                    w: 24,
+                w: 28,
                 aspectRatio: '1/1',
               }}
             >
-                  <ControlNetImagePreview
+              <ControlNetImagePreview controlNetId={controlNetId} height={28} />
-                    controlNetId={controlNetId}
-                    height={24}
-                  />
             </Flex>
           )}
         </Flex>
-            <ParamControlNetControlMode controlNetId={controlNetId} />
       </Flex>
 
       {isExpanded && (
         <>
+          <ParamControlNetControlMode controlNetId={controlNetId} />
+          <ParamControlNetProcessorSelect controlNetId={controlNetId} />
+          <ParamControlNetShouldAutoConfig controlNetId={controlNetId} />
+
           <Box mt={2}>
             <ControlNetImagePreview
               controlNetId={controlNetId}
-                  height={96}
+              height="392px"
             />
           </Box>
           <ControlNetProcessorComponent controlNetId={controlNetId} />
         </>
       )}
-        </>
-      )}
     </Flex>
   );
 };

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx

@@ -1,5 +1,4 @@
 import {
-  ChakraProps,
   FormControl,
   FormLabel,
   HStack,
@@ -20,22 +19,14 @@ import {
 } from 'features/controlNet/store/controlNetSlice';
 import { memo, useCallback, useMemo } from 'react';
 
-const SLIDER_MARK_STYLES: ChakraProps['sx'] = {
-  mt: 1.5,
-  fontSize: '2xs',
-  fontWeight: '500',
-  color: 'base.400',
-};
-
 type Props = {
   controlNetId: string;
-  mini?: boolean;
 };
 
 const formatPct = (v: number) => `${Math.round(v * 100)}%`;
 
 const ParamControlNetBeginEnd = (props: Props) => {
-  const { controlNetId, mini = false } = props;
+  const { controlNetId } = props;
   const dispatch = useAppDispatch();
 
   const selector = useMemo(
@@ -91,14 +82,11 @@ const ParamControlNetBeginEnd = (props: Props) => {
           <Tooltip label={formatPct(endStepPct)} placement="top" hasArrow>
             <RangeSliderThumb index={1} />
           </Tooltip>
-          {!mini && (
-            <>
           <RangeSliderMark
             value={0}
             sx={{
               insetInlineStart: '0 !important',
               insetInlineEnd: 'unset !important',
-                  ...SLIDER_MARK_STYLES,
             }}
           >
             0%
@@ -106,7 +94,8 @@ const ParamControlNetBeginEnd = (props: Props) => {
           <RangeSliderMark
             value={0.5}
             sx={{
-                  ...SLIDER_MARK_STYLES,
+              insetInlineStart: '50% !important',
+              transform: 'translateX(-50%)',
             }}
           >
             50%
@@ -116,13 +105,10 @@ const ParamControlNetBeginEnd = (props: Props) => {
             sx={{
               insetInlineStart: 'unset !important',
               insetInlineEnd: '0 !important',
-                  ...SLIDER_MARK_STYLES,
             }}
           >
             100%
           </RangeSliderMark>
-            </>
-          )}
         </RangeSlider>
       </HStack>
     </FormControl>

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetWeight.tsx

@@ -8,11 +8,10 @@ import { memo, useCallback, useMemo } from 'react';
 
 type ParamControlNetWeightProps = {
   controlNetId: string;
-  mini?: boolean;
 };
 
 const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
-  const { controlNetId, mini = false } = props;
+  const { controlNetId } = props;
   const dispatch = useAppDispatch();
   const selector = useMemo(
     () =>
@@ -35,13 +34,12 @@ const ParamControlNetWeight = (props: ParamControlNetWeightProps) => {
   return (
     <IAISlider
       label={'Weight'}
-      sliderFormLabelProps={{ pb: 2 }}
       value={weight}
       onChange={handleWeightChanged}
       min={0}
       max={2}
       step={0.01}
-      withSliderMarks={!mini}
+      withSliderMarks
       sliderMarks={[0, 1, 2]}
     />
   );