Rooba
/
stash
mirror of https://github.com/stashapp/stash.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ImageDetailPanel Patch Component (#5245)

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 { FormattedMessage, useIntl } from "react-intl";
import { PhotographerLink } from "src/components/Shared/Link";
import { PatchComponent } from "../../../patch";
interface IImageDetailProps {
image: GQL.ImageDataFragment;
}
export const ImageDetailPanel: React.FC<IImageDetailProps> = (props) => {
const intl = useIntl();
export const ImageDetailPanel: React.FC<IImageDetailProps> = PatchComponent(
"ImageDetailPanel",
(props) => {
const intl = useIntl();
function renderDetails() {
if (!props.image.details) return;
return (
<>
<h6>
<FormattedMessage id="details" />:{" "}
</h6>
<p className="pre">{props.image.details}</p>
</>
);
}
function renderDetails() {
if (!props.image.details) return;
return (
<>
<h6>
<FormattedMessage id="details" />:{" "}
</h6>
<p className="pre">{props.image.details}</p>
</>
);
}
function renderTags() {
if (props.image.tags.length === 0) return;
const tags = props.image.tags.map((tag) => (
<TagLink key={tag.id} tag={tag} linkType="image" />
));
return (
<>
<h6>
<FormattedMessage
id="countables.tags"
values={{ count: props.image.tags.length }}
/>
</h6>
{tags}
</>
);
}
function renderTags() {
if (props.image.tags.length === 0) return;
const tags = props.image.tags.map((tag) => (
<TagLink key={tag.id} tag={tag} linkType="image" />
));
return (
<>
<h6>
<FormattedMessage
id="countables.tags"
values={{ count: props.image.tags.length }}
/>
</h6>
{tags}
</>
);
}
function renderPerformers() {
if (props.image.performers.length === 0) return;
const performers = sortPerformers(props.image.performers);
const cards = performers.map((performer) => (
<PerformerCard
key={performer.id}
performer={performer}
ageFromDate={props.image.date ?? undefined}
/>
));
function renderPerformers() {
if (props.image.performers.length === 0) return;
const performers = sortPerformers(props.image.performers);
const cards = performers.map((performer) => (
<PerformerCard
key={performer.id}
performer={performer}
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 (
<>
<h6>
<FormattedMessage
id="countables.performers"
values={{ count: props.image.performers.length }}
/>
</h6>
<div className="row justify-content-center image-performers">
{cards}
<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>
</>
);
}
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.sort`
- `Icon`
- `ImageDetailPanel`
- `ModalSetting`
- `MovieIDSelect`
- `MovieSelect`