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

Add Metadata To Viewer

Browse Source
This commit is contained in:
blessedcoolant 2022-11-13 09:24:48 +13:00
parent 0a2e67df1a
commit 00e2674076
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/features/lightbox/Lightbox.scss
View File

@ -24,6 +24,11 @@
position: absolute; position: absolute;
top: 1rem; top: 1rem;
} }
.image-metadata-viewer {
left: 0;
max-height: 100%;
}
} }
.lightbox-close-btn { .lightbox-close-btn {

14
frontend/src/features/lightbox/Lightbox.tsx
View File

@ -8,6 +8,7 @@ import {
selectPrevImage, selectPrevImage,
} from 'features/gallery/gallerySlice'; } from 'features/gallery/gallerySlice';
import ImageGallery from 'features/gallery/ImageGallery'; import ImageGallery from 'features/gallery/ImageGallery';
import ImageMetadataViewer from 'features/gallery/ImageMetaDataViewer/ImageMetadataViewer';
import { setIsLightBoxOpen } from 'features/options/optionsSlice'; import { setIsLightBoxOpen } from 'features/options/optionsSlice';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
@ -103,10 +104,15 @@ export default function Lightbox() {
</div> </div>
)} )}
{viewerImageToDisplay && ( {viewerImageToDisplay && (
<ReactPanZoom <>
image={viewerImageToDisplay.url} <ReactPanZoom
styleClass="lightbox-image" image={viewerImageToDisplay.url}
/> styleClass="lightbox-image"
/>
{shouldShowImageDetails && (
<ImageMetadataViewer image={viewerImageToDisplay} />
)}
</>
)} )}
</div> </div>
<ImageGallery /> <ImageGallery />