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

Image gallery resize/style tweaks

Browse Source
This commit is contained in:
psychedelicious 2022-11-20 19:37:00 +11:00 committed by blessedcoolant
parent 5ed6a31b97
commit 3f6b275bec
1 changed files with 20 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/features/gallery/components/ImageGallery.tsx
View File

@ -40,6 +40,7 @@ import { BiReset } from 'react-icons/bi';
import IAICheckbox from 'common/components/IAICheckbox'; import IAICheckbox from 'common/components/IAICheckbox';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice'; import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
import _ from 'lodash'; import _ from 'lodash';
import IAIButton from 'common/components/IAIButton';
const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 320; const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 320;
@ -84,9 +85,9 @@ export default function ImageGallery() {
} }
if (activeTabName === 'unifiedCanvas') { if (activeTabName === 'unifiedCanvas') {
dispatch(setGalleryWidth(190));
setGalleryMinWidth(190); setGalleryMinWidth(190);
setGalleryMaxWidth(190); setGalleryMaxWidth(450);
dispatch(setDoesCanvasNeedScaling(true));
} else if (activeTabName === 'img2img') { } else if (activeTabName === 'img2img') {
dispatch( dispatch(
setGalleryWidth(Math.min(Math.max(Number(galleryWidth), 0), 490)) setGalleryWidth(Math.min(Math.max(Number(galleryWidth), 0), 490))
@ -140,7 +141,7 @@ export default function ImageGallery() {
const handleChangeGalleryImageMinimumWidth = (v: number) => { const handleChangeGalleryImageMinimumWidth = (v: number) => {
dispatch(setGalleryImageMinimumWidth(v)); dispatch(setGalleryImageMinimumWidth(v));
dispatch(setDoesCanvasNeedScaling(true)); // dispatch(setDoesCanvasNeedScaling(true));
}; };
const setCloseGalleryTimer = () => { const setCloseGalleryTimer = () => {
@ -277,6 +278,7 @@ export default function ImageGallery() {
useEffect(() => { useEffect(() => {
function handleClickOutside(e: MouseEvent) { function handleClickOutside(e: MouseEvent) {
if ( if (
!shouldPinGallery &&
galleryRef.current && galleryRef.current &&
!galleryRef.current.contains(e.target as Node) !galleryRef.current.contains(e.target as Node)
) { ) {
@ -287,7 +289,7 @@ export default function ImageGallery() {
return () => { return () => {
document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener('mousedown', handleClickOutside);
}; };
}, [handleCloseGallery]); }, [handleCloseGallery, shouldPinGallery]);
return ( return (
<CSSTransition <CSSTransition
@ -302,7 +304,6 @@ export default function ImageGallery() {
style={{ zIndex: shouldPinGallery ? 1 : 100 }} style={{ zIndex: shouldPinGallery ? 1 : 100 }}
data-pinned={shouldPinGallery} data-pinned={shouldPinGallery}
ref={galleryRef} ref={galleryRef}
// onMouseLeave={setCloseGalleryTimer}
onMouseLeave={!shouldPinGallery ? setCloseGalleryTimer : undefined} onMouseLeave={!shouldPinGallery ? setCloseGalleryTimer : undefined}
onMouseEnter={!shouldPinGallery ? cancelCloseGalleryTimer : undefined} onMouseEnter={!shouldPinGallery ? cancelCloseGalleryTimer : undefined}
onMouseOver={!shouldPinGallery ? cancelCloseGalleryTimer : undefined} onMouseOver={!shouldPinGallery ? cancelCloseGalleryTimer : undefined}
@ -312,16 +313,7 @@ export default function ImageGallery() {
maxWidth={galleryMaxWidth} maxWidth={galleryMaxWidth}
className={'image-gallery-popup'} className={'image-gallery-popup'}
handleStyles={{ left: { width: '15px' } }} handleStyles={{ left: { width: '15px' } }}
enable={{ enable={{ left: true }}
top: false,
right: false,
bottom: false,
left: true,
topRight: false,
bottomRight: false,
bottomLeft: false,
topLeft: false,
}}
size={{ size={{
width: galleryWidth, width: galleryWidth,
height: shouldPinGallery ? '100%' : '100vh', height: shouldPinGallery ? '100%' : '100vh',
@ -355,9 +347,9 @@ export default function ImageGallery() {
Number(galleryMaxWidth) Number(galleryMaxWidth)
); );
if (newWidth >= 280 && !shouldShowButtons) { if (newWidth >= 315 && !shouldShowButtons) {
setShouldShowButtons(true); setShouldShowButtons(true);
} else if (newWidth < 280 && shouldShowButtons) { } else if (newWidth < 315 && shouldShowButtons) {
setShouldShowButtons(false); setShouldShowButtons(false);
} }
@ -377,24 +369,26 @@ export default function ImageGallery() {
> >
{shouldShowButtons ? ( {shouldShowButtons ? (
<> <>
<Button <IAIButton
size={'sm'}
data-selected={currentCategory === 'result'} data-selected={currentCategory === 'result'}
onClick={() => dispatch(setCurrentCategory('result'))} onClick={() => dispatch(setCurrentCategory('result'))}
> >
Invocations Generations
</Button> </IAIButton>
<Button <IAIButton
size={'sm'}
data-selected={currentCategory === 'user'} data-selected={currentCategory === 'user'}
onClick={() => dispatch(setCurrentCategory('user'))} onClick={() => dispatch(setCurrentCategory('user'))}
> >
User Uploads
</Button> </IAIButton>
</> </>
) : ( ) : (
<> <>
<IAIIconButton <IAIIconButton
aria-label="Show Invocations" aria-label="Show Generations"
tooltip="Show Invocations" tooltip="Show Generations"
data-selected={currentCategory === 'result'} data-selected={currentCategory === 'result'}
icon={<FaImage />} icon={<FaImage />}
onClick={() => dispatch(setCurrentCategory('result'))} onClick={() => dispatch(setCurrentCategory('result'))}
@ -432,12 +426,8 @@ export default function ImageGallery() {
onChange={handleChangeGalleryImageMinimumWidth} onChange={handleChangeGalleryImageMinimumWidth}
min={32} min={32}
max={256} max={256}
// width={100} hideTooltip={true}
label={'Image Size'} label={'Image Size'}
// formLabelProps={{ style: { fontSize: '0.9rem' } }}
// sliderThumbTooltipProps={{
// label: `${galleryImageMinimumWidth}px`,
// }}
/> />
<IAIIconButton <IAIIconButton
size={'sm'} size={'sm'}