Hide Metadata in Info View (#4787)

* #4665 hides value of the corresponding metadata item by click on arrow

* #4787 return recall button back:)

* #4787 optional hide of metadata item, truncation and scrolling

* remove unused import

* #4787 recall parameters as separate tab in panel

* #4787 remove debug code

* fix(ui): undo changes to dist/locales/en.json

This file is autogenerated by our translation system and shouldn't be modified directly

* feat(ui): use scrollbar-enabled component for parameter recall tab

* fix(ui): revert unnecessary changes to DataViewer component

---------

Co-authored-by: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
This commit is contained in:
glibesyck 2023-10-14 13:25:07 +03:00 committed by GitHub
parent bf9f7271dd
commit 40a568c060
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 3 deletions

View File

@ -559,8 +559,10 @@
"negativePrompt": "Negative Prompt",
"noImageDetails": "No image details found",
"noMetaData": "No metadata found",
"noRecallParameters": "No parameters to recall found",
"perlin": "Perlin Noise",
"positivePrompt": "Positive Prompt",
"recallParameters": "Recall Parameters",
"scheduler": "Scheduler",
"seamless": "Seamless",
"seed": "Seed",

View File

@ -18,6 +18,7 @@ import ImageMetadataActions from './ImageMetadataActions';
import { useAppSelector } from '../../../../app/store/storeHooks';
import { configSelector } from '../../../system/store/configSelectors';
import { useTranslation } from 'react-i18next';
import ScrollableContent from 'features/nodes/components/sidePanel/ScrollableContent';
type ImageMetadataViewerProps = {
image: ImageDTO;
@ -65,19 +66,32 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
</Link>
</Flex>
<ImageMetadataActions metadata={metadata} />
<Tabs
variant="line"
sx={{ display: 'flex', flexDir: 'column', w: 'full', h: 'full' }}
sx={{
display: 'flex',
flexDir: 'column',
w: 'full',
h: 'full',
}}
>
<TabList>
<Tab>{t('metadata.recallParameters')}</Tab>
<Tab>{t('metadata.metadata')}</Tab>
<Tab>{t('metadata.imageDetails')}</Tab>
<Tab>{t('metadata.workflow')}</Tab>
</TabList>
<TabPanels>
<TabPanel>
{metadata ? (
<ScrollableContent>
<ImageMetadataActions metadata={metadata} />
</ScrollableContent>
) : (
<IAINoContentFallback label={t('metadata.noRecallParameters')} />
)}
</TabPanel>
<TabPanel>
{metadata ? (
<DataViewer data={metadata} label={t('metadata.metadata')} />