diff --git a/ui/v2.5/src/components/Changelog/versions/v0100.md b/ui/v2.5/src/components/Changelog/versions/v0100.md index bc3612504..15cff6428 100644 --- a/ui/v2.5/src/components/Changelog/versions/v0100.md +++ b/ui/v2.5/src/components/Changelog/versions/v0100.md @@ -13,6 +13,7 @@ * Support filtering Movies by Performers. ([#1675](https://github.com/stashapp/stash/pull/1675)) ### 🎨 Improvements +* Added date and details to Gallery card, and move image count to icon. ([#1763](https://github.com/stashapp/stash/pull/1763)) * Optimised image thumbnail generation (optionally using `libvips`) and made optional. ([#1655](https://github.com/stashapp/stash/pull/1655)) * Added missing image table indexes, resulting in a significant performance improvement. ([#1740](https://github.com/stashapp/stash/pull/1740)) * Support scraper script logging to specific log levels. ([#1648](https://github.com/stashapp/stash/pull/1648)) diff --git a/ui/v2.5/src/components/Galleries/GalleryCard.tsx b/ui/v2.5/src/components/Galleries/GalleryCard.tsx index 857ca7f0c..3e211f06c 100644 --- a/ui/v2.5/src/components/Galleries/GalleryCard.tsx +++ b/ui/v2.5/src/components/Galleries/GalleryCard.tsx @@ -2,10 +2,16 @@ import { Button, ButtonGroup } from "react-bootstrap"; import React from "react"; import { Link } from "react-router-dom"; import * as GQL from "src/core/generated-graphql"; -import { FormattedPlural } from "react-intl"; import { useConfiguration } from "src/core/StashService"; -import { GridCard, HoverPopover, Icon, TagLink } from "src/components/Shared"; -import { TextUtils } from "src/utils"; +import { + GridCard, + HoverPopover, + Icon, + TagLink, + TruncatedText, +} from "src/components/Shared"; +import { PopoverCountButton } from "src/components/Shared/PopoverCountButton"; +import { NavUtils, TextUtils } from "src/utils"; import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton"; import { RatingBanner } from "../Shared/RatingBanner"; @@ -62,6 +68,18 @@ export const GalleryCard: React.FC = (props) => { return ; } + function maybeRenderImagesPopoverButton() { + if (!props.gallery.image_count) return; + + return ( + + ); + } + function maybeRenderSceneStudioOverlay() { if (!props.gallery.studio) return; @@ -99,12 +117,14 @@ export const GalleryCard: React.FC = (props) => { props.gallery.scenes.length > 0 || props.gallery.performers.length > 0 || props.gallery.tags.length > 0 || - props.gallery.organized + props.gallery.organized || + props.gallery.image_count > 0 ) { return ( <>
+ {maybeRenderImagesPopoverButton()} {maybeRenderTagPopoverButton()} {maybeRenderPerformerPopoverButton()} {maybeRenderScenePopoverButton()} @@ -140,15 +160,10 @@ export const GalleryCard: React.FC = (props) => { overlays={maybeRenderSceneStudioOverlay()} details={ <> - - {props.gallery.image_count}  - - . - + {props.gallery.date} +

+ +

} popovers={maybeRenderPopoverButtonGroup()} diff --git a/ui/v2.5/src/utils/navigation.ts b/ui/v2.5/src/utils/navigation.ts index 929b76654..2f36c7f41 100644 --- a/ui/v2.5/src/utils/navigation.ts +++ b/ui/v2.5/src/utils/navigation.ts @@ -15,6 +15,7 @@ import { Criterion, CriterionValue, } from "src/models/list-filter/criteria/criterion"; +import { GalleriesCriterion } from "src/models/list-filter/criteria/galleries"; function addExtraCriteria( dest: Criterion[], @@ -206,6 +207,21 @@ const makeSceneMarkerUrl = ( return `/scenes/${sceneMarker.scene.id}?t=${sceneMarker.seconds}`; }; +const makeGalleryImagesUrl = ( + gallery: Partial, + extraCriteria?: Criterion[] +) => { + if (!gallery.id) return "#"; + const filter = new ListFilterModel(GQL.FilterMode.Images); + const criterion = new GalleriesCriterion(); + criterion.value = [ + { id: gallery.id, label: gallery.title || `Gallery ${gallery.id}` }, + ]; + filter.criteria.push(criterion); + addExtraCriteria(filter.criteria, extraCriteria); + return `/images?${filter.makeQueryParameters()}`; +}; + export default { makePerformerScenesUrl, makePerformerImagesUrl, @@ -222,4 +238,5 @@ export default { makeSceneMarkerUrl, makeMovieScenesUrl, makeChildStudiosUrl, + makeGalleryImagesUrl, };