diff --git a/ui/v2.5/src/core/files.ts b/ui/v2.5/src/core/files.ts index d17d34d16..b90d10193 100644 --- a/ui/v2.5/src/core/files.ts +++ b/ui/v2.5/src/core/files.ts @@ -6,7 +6,7 @@ export interface IFile { } interface IObjectWithFiles { - files?: IFile[]; + files?: GQL.Maybe; } export interface IObjectWithTitleFiles extends IObjectWithFiles { diff --git a/ui/v2.5/src/core/galleries.ts b/ui/v2.5/src/core/galleries.ts index bedc2453e..722ba8d3b 100644 --- a/ui/v2.5/src/core/galleries.ts +++ b/ui/v2.5/src/core/galleries.ts @@ -6,7 +6,7 @@ interface IFile { } interface IGallery { - files: IFile[]; + files: GQL.Maybe; folder?: GQL.Maybe; } diff --git a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx index 0af1e835b..6e4eb856a 100644 --- a/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx +++ b/ui/v2.5/src/hooks/Lightbox/Lightbox.tsx @@ -44,11 +44,13 @@ import { faSearchMinus, faTimes, faBars, + faImages, } from "@fortawesome/free-solid-svg-icons"; import { RatingSystem } from "src/components/Shared/Rating/RatingSystem"; import { useDebounce } from "../debounce"; import { isVideo } from "src/utils/visualFile"; import { imageTitle } from "src/core/files"; +import { galleryTitle } from "src/core/galleries"; const CLASSNAME = "Lightbox"; const CLASSNAME_HEADER = `${CLASSNAME}-header`; @@ -62,6 +64,8 @@ const CLASSNAME_OPTIONS_INLINE = `${CLASSNAME_OPTIONS}-inline`; const CLASSNAME_RIGHT = `${CLASSNAME_HEADER}-right`; const CLASSNAME_FOOTER = `${CLASSNAME}-footer`; const CLASSNAME_FOOTER_LEFT = `${CLASSNAME_FOOTER}-left`; +const CLASSNAME_FOOTER_CENTER = `${CLASSNAME_FOOTER}-center`; +const CLASSNAME_FOOTER_RIGHT = `${CLASSNAME_FOOTER}-right`; const CLASSNAME_DISPLAY = `${CLASSNAME}-display`; const CLASSNAME_CAROUSEL = `${CLASSNAME}-carousel`; const CLASSNAME_INSTANT = `${CLASSNAME_CAROUSEL}-instant`; @@ -933,14 +937,30 @@ export const LightboxComponent: React.FC = ({ )} -
+
{currentImage && ( - close()}> - {title ?? ""} - + <> + close()} + > + {title ?? ""} + + {currentImage.galleries?.length ? ( + close()} + > + + {galleryTitle(currentImage.galleries[0])} + + ) : null} + )}
-
+
); diff --git a/ui/v2.5/src/hooks/Lightbox/lightbox.scss b/ui/v2.5/src/hooks/Lightbox/lightbox.scss index b12de3cf9..95a5fbc42 100644 --- a/ui/v2.5/src/hooks/Lightbox/lightbox.scss +++ b/ui/v2.5/src/hooks/Lightbox/lightbox.scss @@ -105,10 +105,25 @@ padding-left: 1em; } + &-center { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 1em; + text-align: center; + } + a { color: $text-color; - font-weight: bold; text-decoration: none; + + .fa-icon { + margin-right: 0.5rem; + } + + &.image-link { + font-weight: bold; + } } } diff --git a/ui/v2.5/src/hooks/Lightbox/types.ts b/ui/v2.5/src/hooks/Lightbox/types.ts index 56c9d6b71..58cdc8434 100644 --- a/ui/v2.5/src/hooks/Lightbox/types.ts +++ b/ui/v2.5/src/hooks/Lightbox/types.ts @@ -14,6 +14,17 @@ interface IFiles { video_codec?: GQL.Maybe; } +interface IWithPath { + path: string; +} + +export interface IGallery { + id: string; + title?: GQL.Maybe; + files?: GQL.Maybe; + folder?: GQL.Maybe; +} + export interface ILightboxImage { id?: string; title?: GQL.Maybe; @@ -21,6 +32,7 @@ export interface ILightboxImage { o_counter?: GQL.Maybe; paths: IImagePaths; visual_files?: IFiles[]; + galleries?: GQL.Maybe; } export interface IChapter {