Backup_Repos/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-06 16:34:02 +01:00
Code Issues Projects Releases Wiki Activity

ImageDetailPanel Patch Component (#5245)

Browse source
This commit is contained in:
GlitchGal 2024-09-11 03:56:17 +02:00 committed by GitHub
parent a3838734c5
commit 129dd0ffcc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 119 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

232
ui/v2.5/src/components/Images/ImageDetails/ImageDetailPanel.tsx
View file

@ -6,131 +6,135 @@ import { PerformerCard } from "src/components/Performers/PerformerCard";
import { sortPerformers } from "src/core/performers"; import { sortPerformers } from "src/core/performers";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import { PhotographerLink } from "src/components/Shared/Link"; import { PhotographerLink } from "src/components/Shared/Link";
import { PatchComponent } from "../../../patch";
interface IImageDetailProps { interface IImageDetailProps {
image: GQL.ImageDataFragment; image: GQL.ImageDataFragment;
} }
export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => { export const ImageDetailPanel: React.FC<IImageDetailProps> = PatchComponent(
const intl = useIntl(); "ImageDetailPanel",
(props) => {
const intl = useIntl();
function renderDetails() { function renderDetails() {
if (!props.image.details) return; if (!props.image.details) return;
return ( return (
<> <>
<h6> <h6>
<FormattedMessage id="details" />:{" "} <FormattedMessage id="details" />:{" "}
</h6> </h6>
<p className="pre">{props.image.details}</p> <p className="pre">{props.image.details}</p>
</> </>
); );
} }
function renderTags() { function renderTags() {
if (props.image.tags.length === 0) return; if (props.image.tags.length === 0) return;
const tags = props.image.tags.map((tag) => ( const tags = props.image.tags.map((tag) => (
<TagLink key={tag.id} tag={tag} linkType="image" /> <TagLink key={tag.id} tag={tag} linkType="image" />
)); ));
return ( return (
<> <>
<h6> <h6>
<FormattedMessage <FormattedMessage
id="countables.tags" id="countables.tags"
values={{ count: props.image.tags.length }} values={{ count: props.image.tags.length }}
/> />
</h6> </h6>
{tags} {tags}
</> </>
); );
} }
function renderPerformers() { function renderPerformers() {
if (props.image.performers.length === 0) return; if (props.image.performers.length === 0) return;
const performers = sortPerformers(props.image.performers); const performers = sortPerformers(props.image.performers);
const cards = performers.map((performer) => ( const cards = performers.map((performer) => (
<PerformerCard <PerformerCard
key={performer.id} key={performer.id}
performer={performer} performer={performer}
ageFromDate={props.image.date ?? undefined} ageFromDate={props.image.date ?? undefined}
/> />
)); ));
return (
<>
<h6>
<FormattedMessage
id="countables.performers"
values={{ count: props.image.performers.length }}
/>
</h6>
<div className="row justify-content-center image-performers">
{cards}
</div>
</>
);
}
function renderGalleries() {
if (props.image.galleries.length === 0) return;
const galleries = props.image.galleries.map((gallery) => (
<GalleryLink key={gallery.id} gallery={gallery} />
));
return (
<>
<h6>
<FormattedMessage
id="countables.galleries"
values={{ count: props.image.galleries.length }}
/>
</h6>
{galleries}
</>
);
}
// filename should use entire row if there is no studio
const imageDetailsWidth = props.image.studio ? "col-9" : "col-12";
return ( return (
<> <>
<h6> <div className="row">
<FormattedMessage <div className={`${imageDetailsWidth} col-12 image-details`}>
id="countables.performers" {renderGalleries()}
values={{ count: props.image.performers.length }} {
/> <h6>
</h6> {" "}
<div className="row justify-content-center image-performers"> <FormattedMessage id="created_at" />:{" "}
{cards} {TextUtils.formatDateTime(intl, props.image.created_at)}{" "}
</h6>
}
{
<h6>
<FormattedMessage id="updated_at" />:{" "}
{TextUtils.formatDateTime(intl, props.image.updated_at)}{" "}
</h6>
}
{props.image.code && (
<h6>
<FormattedMessage id="scene_code" />: {props.image.code}{" "}
</h6>
)}
{props.image.photographer && (
<h6>
<FormattedMessage id="photographer" />:{" "}
<PhotographerLink
photographer={props.image.photographer}
linkType="image"
/>
</h6>
)}
</div>
</div>
<div className="row">
<div className="col-12">
{renderDetails()}
{renderTags()}
{renderPerformers()}
</div>
</div> </div>
</> </>
); );
} }
);
function renderGalleries() {
if (props.image.galleries.length === 0) return;
const galleries = props.image.galleries.map((gallery) => (
<GalleryLink key={gallery.id} gallery={gallery} />
));
return (
<>
<h6>
<FormattedMessage
id="countables.galleries"
values={{ count: props.image.galleries.length }}
/>
</h6>
{galleries}
</>
);
}
// filename should use entire row if there is no studio
const imageDetailsWidth = props.image.studio ? "col-9" : "col-12";
return (
<>
<div className="row">
<div className={`${imageDetailsWidth} col-12 image-details`}>
{renderGalleries()}
{
<h6>
{" "}
<FormattedMessage id="created_at" />:{" "}
{TextUtils.formatDateTime(intl, props.image.created_at)}{" "}
</h6>
}
{
<h6>
<FormattedMessage id="updated_at" />:{" "}
{TextUtils.formatDateTime(intl, props.image.updated_at)}{" "}
</h6>
}
{props.image.code && (
<h6>
<FormattedMessage id="scene_code" />: {props.image.code}{" "}
</h6>
)}
{props.image.photographer && (
<h6>
<FormattedMessage id="photographer" />:{" "}
<PhotographerLink
photographer={props.image.photographer}
linkType="image"
/>
</h6>
)}
</div>
</div>
<div className="row">
<div className="col-12">
{renderDetails()}
{renderTags()}
{renderPerformers()}
</div>
</div>
</>
);
};

1
ui/v2.5/src/docs/en/Manual/UIPluginApi.md
View file

@ -151,6 +151,7 @@ Returns `void`.
- `GallerySelect` - `GallerySelect`
- `GallerySelect.sort` - `GallerySelect.sort`
- `Icon` - `Icon`
- `ImageDetailPanel`
- `ModalSetting` - `ModalSetting`
- `MovieIDSelect` - `MovieIDSelect`
- `MovieSelect` - `MovieSelect`