diff --git a/frontend/src/common/components/IAIIconButton.tsx b/frontend/src/common/components/IAIIconButton.tsx index 8ea459164c..de8765c395 100644 --- a/frontend/src/common/components/IAIIconButton.tsx +++ b/frontend/src/common/components/IAIIconButton.tsx @@ -17,7 +17,7 @@ interface Props extends IconButtonProps { const IAIIconButton = (props: Props) => { const { tooltip = '', - tooltipPlacement = 'top', + tooltipPlacement = 'bottom', styleClass, onClick, cursor, diff --git a/frontend/src/common/components/InvokeImageUploader.scss b/frontend/src/common/components/InvokeImageUploader.scss index 1b5d695777..3b49c9a8cb 100644 --- a/frontend/src/common/components/InvokeImageUploader.scss +++ b/frontend/src/common/components/InvokeImageUploader.scss @@ -24,7 +24,14 @@ .image-upload-child { display: flex; flex-direction: column; - row-gap: 3rem; align-items: center; justify-content: center; + text-align: center; + + svg { + width: 4rem !important; + } + h2 { + font-size: 1.2rem !important; + } } diff --git a/frontend/src/common/components/InvokeImageUploader.tsx b/frontend/src/common/components/InvokeImageUploader.tsx index e794870491..86e3f898e8 100644 --- a/frontend/src/common/components/InvokeImageUploader.tsx +++ b/frontend/src/common/components/InvokeImageUploader.tsx @@ -1,4 +1,4 @@ -import { Button, Heading, useToast } from '@chakra-ui/react'; +import { Heading, useToast } from '@chakra-ui/react'; import { useCallback } from 'react'; import { FileRejection } from 'react-dropzone'; import { FaUpload } from 'react-icons/fa'; @@ -42,7 +42,11 @@ export default function InvokeImageUploader(props: InvokeImageUploaderProps) {
diff --git a/frontend/src/features/gallery/CurrentImageButtons.tsx b/frontend/src/features/gallery/CurrentImageButtons.tsx index 07ed8d561d..5439cce9d6 100644 --- a/frontend/src/features/gallery/CurrentImageButtons.tsx +++ b/frontend/src/features/gallery/CurrentImageButtons.tsx @@ -140,7 +140,8 @@ const CurrentImageButtons = ({ image }: CurrentImageButtonsProps) => { [image] ); - const handleClickUseSeed = () => image.metadata && dispatch(setSeed(image.metadata.image.seed)); + const handleClickUseSeed = () => + image.metadata && dispatch(setSeed(image.metadata.image.seed)); useHotkeys( 's', () => { diff --git a/frontend/src/features/gallery/CurrentImageDisplay.scss b/frontend/src/features/gallery/CurrentImageDisplay.scss index af1d9f51ef..3fefcc80cb 100644 --- a/frontend/src/features/gallery/CurrentImageDisplay.scss +++ b/frontend/src/features/gallery/CurrentImageDisplay.scss @@ -18,6 +18,10 @@ justify-content: center; align-items: center; column-gap: 0.5rem; + + .chakra-popover__popper { + z-index: 11; + } } .current-image-viewer { diff --git a/frontend/src/features/gallery/ImageGallery.scss b/frontend/src/features/gallery/ImageGallery.scss index 7e62890676..d2e11ec7f4 100644 --- a/frontend/src/features/gallery/ImageGallery.scss +++ b/frontend/src/features/gallery/ImageGallery.scss @@ -89,10 +89,12 @@ .image-gallery-container-placeholder { display: flex; + flex-direction: column; background-color: var(--background-color-secondary); border-radius: 0.5rem; place-items: center; - padding: 2rem 0; + padding: 2rem; + text-align: center; p { color: var(--subtext-color-bright); diff --git a/frontend/src/features/gallery/ImageGallery.tsx b/frontend/src/features/gallery/ImageGallery.tsx index dd64544a40..0594dbbdf6 100644 --- a/frontend/src/features/gallery/ImageGallery.tsx +++ b/frontend/src/features/gallery/ImageGallery.tsx @@ -21,7 +21,7 @@ import { } from './gallerySlice'; import HoverableImage from './HoverableImage'; import { setShouldShowGallery } from '../gallery/gallerySlice'; -import { ButtonGroup, Spacer, useToast } from '@chakra-ui/react'; +import { ButtonGroup, useToast } from '@chakra-ui/react'; import { CSSTransition } from 'react-transition-group'; import { Direction } from 're-resizable/lib/resizer'; import { imageGallerySelector } from './gallerySliceSelectors'; @@ -77,6 +77,13 @@ export default function ImageGallery() { setGallerySize((prevSize) => { return { ...prevSize, width: Math.min(Number(prevSize.width), 200) }; }); + } else if (activeTabName === 'img2img' && shouldPinGallery) { + setGalleryMaxSize((prevSize) => { + return { ...prevSize, width: '490', height: '100%' }; + }); + setGallerySize((prevSize) => { + return { ...prevSize, width: Math.min(Number(prevSize.width), 490) }; + }); } else { setGalleryMaxSize((prevSize) => { return { ...prevSize, width: '590', height: '100%' }; @@ -319,12 +326,6 @@ export default function ImageGallery() { }} >
- {/*{activeTabName !== 'inpainting' ? ( - <> -

Your Invocations

- - - ) : null}*/}
{ }; return (
- +
{name}
diff --git a/frontend/src/features/tabs/ImageToImage/ImageToImage.scss b/frontend/src/features/tabs/ImageToImage/ImageToImage.scss index 11ec6e8c21..b2b81adc3c 100644 --- a/frontend/src/features/tabs/ImageToImage/ImageToImage.scss +++ b/frontend/src/features/tabs/ImageToImage/ImageToImage.scss @@ -49,6 +49,5 @@ img { border-radius: 0.5rem; object-fit: contain; - width: auto; } } diff --git a/frontend/src/features/tabs/ImageToImage/ImageToImageDisplay.tsx b/frontend/src/features/tabs/ImageToImage/ImageToImageDisplay.tsx index 3d0b1f733e..d3c5f56c85 100644 --- a/frontend/src/features/tabs/ImageToImage/ImageToImageDisplay.tsx +++ b/frontend/src/features/tabs/ImageToImage/ImageToImageDisplay.tsx @@ -27,7 +27,7 @@ const ImageToImageDisplay = () => { return (
-
{imageToImageComponent}
+
{imageToImageComponent}
{currentImage && (
diff --git a/frontend/src/features/tabs/Inpainting/Inpainting.scss b/frontend/src/features/tabs/Inpainting/Inpainting.scss index e8bcc7d51a..28e627ca1d 100644 --- a/frontend/src/features/tabs/Inpainting/Inpainting.scss +++ b/frontend/src/features/tabs/Inpainting/Inpainting.scss @@ -19,6 +19,16 @@ column-gap: 0.5rem; } + .inpainting-button-dropdown { + display: flex; + flex-direction: column; + row-gap: 0.5rem; + } + + .inpainting-color-picker { + margin-left: 1rem !important; + } + .inpainting-slider-numberinput { display: flex; column-gap: 1rem; @@ -80,10 +90,4 @@ inset: 0 auto auto -75px !important; } } - - .current-image-options { - .chakra-popover__popper { - z-index: 11; - } - } } diff --git a/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx b/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx index f092fab39b..a7416b2dce 100644 --- a/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx +++ b/frontend/src/features/tabs/Inpainting/InpaintingControls.tsx @@ -2,6 +2,7 @@ import { useToast } from '@chakra-ui/react'; import { useHotkeys } from 'react-hotkeys-hook'; import { FaEraser, + FaMask, FaPaintBrush, FaPalette, FaPlus, @@ -36,6 +37,7 @@ import IAIPopover from '../../../common/components/IAIPopover'; import IAIColorPicker from '../../../common/components/IAIColorPicker'; import { RgbaColor } from 'react-colorful'; import { setShowDualDisplay } from '../../options/optionsSlice'; +import { useState } from 'react'; const InpaintingControls = () => { const { @@ -54,6 +56,9 @@ const InpaintingControls = () => { const dispatch = useAppDispatch(); const toast = useToast(); + // Button State Controllers + const [maskOptionsOpen, setMaskOptionsOpen] = useState(false); + /** * Hotkeys */ @@ -334,39 +339,71 @@ const InpaintingControls = () => {
setMaskOptionsOpen(true)} + onClose={() => setMaskOptionsOpen(false)} triggerComponent={ } - isDisabled={!shouldShowMask} + aria-label="Mask Options" + tooltip="Mask Options" + icon={} cursor={'pointer'} + isDisabled={isMaskEmpty} + data-selected={maskOptionsOpen} /> } > - +
+ : + } + onClick={handleToggleShouldShowMask} + /> + + ) : ( + + ) + } + onClick={handleToggleShouldInvertMask} + isDisabled={!shouldShowMask} + /> + } + isDisabled={!shouldShowMask} + cursor={'pointer'} + /> + } + > + + +
: } - onClick={handleToggleShouldShowMask} - /> - - ) : ( - - ) - } - onClick={handleToggleShouldInvertMask} - isDisabled={!shouldShowMask} + aria-label="Clear Mask (Shift+C)" + tooltip="Clear Mask (Shift+C)" + icon={} + onClick={handleClearMask} + isDisabled={isMaskEmpty || !shouldShowMask} />
@@ -384,28 +421,23 @@ const InpaintingControls = () => { onClick={handleRedo} isDisabled={!canRedo || !shouldShowMask} /> - } - onClick={handleClearMask} - isDisabled={isMaskEmpty || !shouldShowMask} - /> +
+ +
} + icon={} onClick={handleClearImage} - // isDisabled={} - /> - } - data-selected={showDualDisplay} - onClick={handleDualDisplay} />
+ } + data-selected={showDualDisplay} + onClick={handleDualDisplay} + />
); }; diff --git a/frontend/src/features/tabs/Inpainting/index.tsx b/frontend/src/features/tabs/Inpainting/index.tsx index ebee54de60..4b63c43412 100644 --- a/frontend/src/features/tabs/Inpainting/index.tsx +++ b/frontend/src/features/tabs/Inpainting/index.tsx @@ -6,7 +6,7 @@ export default function InpaintingWorkarea() { return ( } - className="inpainting-workarea-overrides" + styleClass="inpainting-workarea-overrides" > diff --git a/frontend/src/features/tabs/InvokeWorkarea.scss b/frontend/src/features/tabs/InvokeWorkarea.scss index 0d3c4206da..8d857d2c4e 100644 --- a/frontend/src/features/tabs/InvokeWorkarea.scss +++ b/frontend/src/features/tabs/InvokeWorkarea.scss @@ -42,13 +42,5 @@ border-radius: 0.5rem; padding: 1rem; } - - .workarea-split-view-left { - padding-right: 0.5rem; - } - - .workarea-split-view-right { - padding-left: 0.5rem; - } } } diff --git a/frontend/src/features/tabs/InvokeWorkarea.tsx b/frontend/src/features/tabs/InvokeWorkarea.tsx index cacbc6d4f8..4350cc45ac 100644 --- a/frontend/src/features/tabs/InvokeWorkarea.tsx +++ b/frontend/src/features/tabs/InvokeWorkarea.tsx @@ -6,16 +6,21 @@ import ShowHideGalleryButton from '../gallery/ShowHideGalleryButton'; type InvokeWorkareaProps = { optionsPanel: ReactNode; children: ReactNode; + styleClass?: string; }; const InvokeWorkarea = (props: InvokeWorkareaProps) => { - const { optionsPanel, children } = props; + const { optionsPanel, children, styleClass } = props; const { shouldShowGallery, shouldHoldGalleryOpen, shouldPinGallery } = useAppSelector((state: RootState) => state.gallery); return ( -
+
{optionsPanel}
{children}