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

Fixes gallery width on lightbox, fixes gallery button expansion

Browse Source
This commit is contained in:
psychedelicious 2022-11-21 20:56:48 +11:00 committed by blessedcoolant
parent e821b97cfc
commit 11969c2e2e
3 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/features/gallery/components/ImageGallery.scss
View File

@ -43,7 +43,7 @@
border-radius: 0.5rem; border-radius: 0.5rem;
border-left-width: 0.3rem; border-left-width: 0.3rem;
border-color: var(--resizeable-handle-border-color); border-color: var(--tab-list-text-inactive);
&[data-resize-alert='true'] { &[data-resize-alert='true'] {
border-color: var(--status-bad-color); border-color: var(--status-bad-color);

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

@ -56,6 +56,8 @@ const GALLERY_TAB_WIDTHS: Record<
postprocess: { galleryMinWidth: 200, galleryMaxWidth: 500 }, postprocess: { galleryMinWidth: 200, galleryMaxWidth: 500 },
}; };
const LIGHTBOX_GALLERY_WIDTH = 400;
export default function ImageGallery() { export default function ImageGallery() {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -76,10 +78,16 @@ export default function ImageGallery() {
galleryWidth, galleryWidth,
isLightBoxOpen, isLightBoxOpen,
isStaging, isStaging,
shouldEnableResize,
} = useAppSelector(imageGallerySelector); } = useAppSelector(imageGallerySelector);
const { galleryMinWidth, galleryMaxWidth } = console.log(isLightBoxOpen);
GALLERY_TAB_WIDTHS[activeTabName]; const { galleryMinWidth, galleryMaxWidth } = isLightBoxOpen
? {
galleryMinWidth: LIGHTBOX_GALLERY_WIDTH,
galleryMaxWidth: LIGHTBOX_GALLERY_WIDTH,
}
: GALLERY_TAB_WIDTHS[activeTabName];
const [shouldShowButtons, setShouldShowButtons] = useState<boolean>( const [shouldShowButtons, setShouldShowButtons] = useState<boolean>(
galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH
@ -92,6 +100,12 @@ export default function ImageGallery() {
const galleryContainerRef = useRef<HTMLDivElement>(null); const galleryContainerRef = useRef<HTMLDivElement>(null);
const timeoutIdRef = useRef<number | null>(null); const timeoutIdRef = useRef<number | null>(null);
useEffect(() => {
if (galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH) {
setShouldShowButtons(false);
}
}, [galleryWidth]);
const handleSetShouldPinGallery = () => { const handleSetShouldPinGallery = () => {
dispatch(setShouldPinGallery(!shouldPinGallery)); dispatch(setShouldPinGallery(!shouldPinGallery));
dispatch(setDoesCanvasNeedScaling(true)); dispatch(setDoesCanvasNeedScaling(true));
@ -256,10 +270,16 @@ export default function ImageGallery() {
> >
<Resizable <Resizable
minWidth={galleryMinWidth} minWidth={galleryMinWidth}
maxWidth={shouldPinGallery ? galleryMaxWidth : undefined} maxWidth={shouldPinGallery ? galleryMaxWidth : window.innerWidth}
className={'image-gallery-popup'} className={'image-gallery-popup'}
handleStyles={{ left: { width: '15px' } }} handleStyles={{
enable={{ left: true }} left: {
width: '15px',
},
}}
enable={{
left: shouldEnableResize,
}}
size={{ size={{
width: galleryWidth, width: galleryWidth,
height: shouldPinGallery ? '100%' : '100vh', height: shouldPinGallery ? '100%' : '100vh',
@ -316,7 +336,9 @@ export default function ImageGallery() {
const newWidth = _.clamp( const newWidth = _.clamp(
Number(galleryWidth) + delta.width, Number(galleryWidth) + delta.width,
galleryMinWidth, galleryMinWidth,
Number(galleryMaxWidth) Number(
shouldPinGallery ? galleryMaxWidth : 0.95 * window.innerWidth
)
); );
if ( if (

5
frontend/src/features/gallery/store/gallerySliceSelectors.ts
View File

@ -49,6 +49,11 @@ export const imageGallerySelector = createSelector(
galleryWidth, galleryWidth,
isLightBoxOpen, isLightBoxOpen,
isStaging, isStaging,
shouldEnableResize:
isLightBoxOpen ||
(activeTabName === 'unifiedCanvas' && shouldPinGallery)
? false
: true,
}; };
}, },
{ {