mirror of
https://github.com/stashapp/stash.git
synced 2025-12-15 21:03:22 +01:00
Update gallery view layout and switch libraries (#793)
* Update gallery view layout and switch libraries * Tweak gallery grid layout
This commit is contained in:
InfiniteTF
GitHub
parent
5cd7dcaeb2
commit
147f50de6b
6 changed files with 75 additions and 69 deletions
|
|
@ -36,7 +36,9 @@
|
|||
"bootstrap": "^4.5.2",
|
||||
"classnames": "^2.2.6",
|
||||
"flag-icon-css": "^3.5.0",
|
||||
"flexbin": "^0.2.0",
|
||||
"formik": "^2.1.5",
|
||||
"fslightbox-react": "^1.5.0",
|
||||
"graphql": "^15.3.0",
|
||||
"graphql-tag": "^2.11.0",
|
||||
"i18n-iso-countries": "^6.0.0",
|
||||
|
|
@ -67,6 +69,7 @@
|
|||
"@graphql-codegen/typescript-operations": "^1.17.8",
|
||||
"@graphql-codegen/typescript-react-apollo": "^2.0.6",
|
||||
"@types/classnames": "^2.2.10",
|
||||
"@types/fslightbox-react": "^1.4.0",
|
||||
"@types/lodash": "^4.14.161",
|
||||
"@types/node": "14.6.4",
|
||||
"@types/react": "16.9.43",
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export const Gallery: React.FC = () => {
|
|||
if (error) return <div>{error.message}</div>;
|
||||
|
||||
return (
|
||||
<div className="col-9 m-auto">
|
||||
<div className="col col-lg-9 m-auto">
|
||||
<GalleryViewer gallery={gallery} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,58 +1,46 @@
|
|||
import React, { FunctionComponent, useState } from "react";
|
||||
import Lightbox from "react-images";
|
||||
import Gallery from "react-photo-gallery";
|
||||
import React, { useState } from "react";
|
||||
import * as GQL from "src/core/generated-graphql";
|
||||
import FsLightbox from "fslightbox-react";
|
||||
import "flexbin/flexbin.css";
|
||||
|
||||
interface IProps {
|
||||
gallery: GQL.GalleryDataFragment;
|
||||
}
|
||||
|
||||
export const GalleryViewer: FunctionComponent<IProps> = ({ gallery }) => {
|
||||
const [currentImage, setCurrentImage] = useState<number>(0);
|
||||
const [lightboxIsOpen, setLightboxIsOpen] = useState<boolean>(false);
|
||||
export const GalleryViewer: React.FC<IProps> = ({ gallery }) => {
|
||||
const [lightboxToggle, setLightboxToggle] = useState(false);
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
function openLightbox(
|
||||
_event: React.MouseEvent<Element>,
|
||||
obj: { index: number }
|
||||
) {
|
||||
setCurrentImage(obj.index);
|
||||
setLightboxIsOpen(true);
|
||||
}
|
||||
function closeLightbox() {
|
||||
setCurrentImage(0);
|
||||
setLightboxIsOpen(false);
|
||||
}
|
||||
function gotoPrevious() {
|
||||
setCurrentImage(currentImage - 1);
|
||||
}
|
||||
function gotoNext() {
|
||||
setCurrentImage(currentImage + 1);
|
||||
}
|
||||
const openImage = (index: number) => {
|
||||
setCurrentIndex(index);
|
||||
setLightboxToggle(!lightboxToggle);
|
||||
};
|
||||
|
||||
const photos = gallery.files.map((file) => ({
|
||||
src: file.path ?? "",
|
||||
caption: file.name ?? "",
|
||||
}));
|
||||
const thumbs = gallery.files.map((file) => ({
|
||||
src: `${file.path}?thumb=true` || "",
|
||||
width: 1,
|
||||
height: 1,
|
||||
}));
|
||||
const photos = gallery.files.map((file) => file.path ?? "");
|
||||
const thumbs = gallery.files.map((file, index) => (
|
||||
<div
|
||||
role="link"
|
||||
tabIndex={index}
|
||||
key={file.index}
|
||||
onClick={() => openImage(index)}
|
||||
onKeyPress={() => openImage(index)}
|
||||
>
|
||||
<img
|
||||
src={`${file.path}?thumb=600` || ""}
|
||||
loading="lazy"
|
||||
className="gallery-image"
|
||||
alt={file.name ?? index.toString()}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Gallery photos={thumbs} columns={15} onClick={openLightbox} />
|
||||
<Lightbox
|
||||
images={photos}
|
||||
onClose={closeLightbox}
|
||||
onClickPrev={gotoPrevious}
|
||||
onClickNext={gotoNext}
|
||||
currentImage={currentImage}
|
||||
onClickImage={() =>
|
||||
window.open(photos[currentImage].src ?? "", "_blank")
|
||||
}
|
||||
isOpen={lightboxIsOpen}
|
||||
width={9999}
|
||||
<div className="gallery">
|
||||
<div className="flexbin">{thumbs}</div>
|
||||
<FsLightbox
|
||||
sourceIndex={currentIndex}
|
||||
toggler={lightboxToggle}
|
||||
sources={photos}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
/* stylelint-disable selector-class-pattern */
|
||||
.react-photo-gallery--gallery {
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
/* stylelint-enable selector-class-pattern */
|
||||
|
||||
.gallery-card {
|
||||
padding: 0.5rem;
|
||||
&.card {
|
||||
padding: 0;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-section {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
&-image {
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import {
|
|||
import { CountryFlag, Icon, LoadingIndicator } from "src/components/Shared";
|
||||
import { useToast } from "src/hooks";
|
||||
import { TextUtils } from "src/utils";
|
||||
import Lightbox from "react-images";
|
||||
import FsLightbox from "fslightbox-react";
|
||||
import { PerformerDetailsPanel } from "./PerformerDetailsPanel";
|
||||
import { PerformerOperationsPanel } from "./PerformerOperationsPanel";
|
||||
import { PerformerScenesPanel } from "./PerformerScenesPanel";
|
||||
|
|
@ -34,7 +34,7 @@ export const Performer: React.FC = () => {
|
|||
>({});
|
||||
const [imagePreview, setImagePreview] = useState<string | null>();
|
||||
const [imageEncoding, setImageEncoding] = useState<boolean>(false);
|
||||
const [lightboxIsOpen, setLightboxIsOpen] = useState(false);
|
||||
const [lightboxToggle, setLightboxToggle] = useState(false);
|
||||
|
||||
// if undefined then get the existing image
|
||||
// if null then get the default (no) image
|
||||
|
|
@ -288,8 +288,6 @@ export const Performer: React.FC = () => {
|
|||
</div>
|
||||
);
|
||||
|
||||
const photos = [{ src: activeImage, caption: "Image" }];
|
||||
|
||||
if (!performer.id) {
|
||||
return <LoadingIndicator />;
|
||||
}
|
||||
|
|
@ -300,7 +298,10 @@ export const Performer: React.FC = () => {
|
|||
{imageEncoding ? (
|
||||
<LoadingIndicator message="Encoding image..." />
|
||||
) : (
|
||||
<Button variant="link" onClick={() => setLightboxIsOpen(true)}>
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={() => setLightboxToggle(!lightboxToggle)}
|
||||
>
|
||||
<img className="performer" src={activeImage} alt="Performer" />
|
||||
</Button>
|
||||
)}
|
||||
|
|
@ -321,14 +322,7 @@ export const Performer: React.FC = () => {
|
|||
<div className="performer-tabs">{renderTabs()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Lightbox
|
||||
images={photos}
|
||||
onClose={() => setLightboxIsOpen(false)}
|
||||
currentImage={0}
|
||||
isOpen={lightboxIsOpen}
|
||||
onClickImage={() => window.open(activeImage, "_blank")}
|
||||
width={9999}
|
||||
/>
|
||||
<FsLightbox toggler={lightboxToggle} sources={[activeImage]} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2919,6 +2919,13 @@
|
|||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/fslightbox-react@^1.4.0":
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/fslightbox-react/-/fslightbox-react-1.4.0.tgz#d2b20486830745ae80318c1c478c9beae5f2cd8a"
|
||||
integrity sha512-ocIiZqFQ3BWBZB8Bp0fuNma7Eb0aOjkgk/nEUfW0omdRw4ciaVivabfsWldNuR69KwRJrvs6MZQuvVV6JEqlFg==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/glob@^7.1.1":
|
||||
version "7.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
|
||||
|
|
@ -7143,6 +7150,11 @@ flatten@^1.0.2:
|
|||
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
|
||||
integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
|
||||
|
||||
flexbin@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/flexbin/-/flexbin-0.2.0.tgz#0126306d3d595fcb7dfcb87149b9c9599ff8f4e9"
|
||||
integrity sha1-ASYwbT1ZX8t9/LhxSbnJWZ/49Ok=
|
||||
|
||||
flush-write-stream@^1.0.0:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
|
||||
|
|
@ -7338,6 +7350,11 @@ fsevents@^1.2.7:
|
|||
bindings "^1.5.0"
|
||||
nan "^2.12.1"
|
||||
|
||||
fslightbox-react@^1.5.0:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/fslightbox-react/-/fslightbox-react-1.5.0.tgz#07cf41d7ff8b02a79a0886d13519550b79dc50e5"
|
||||
integrity sha512-xBe1K06pa3opWar/xBtArsHMnxMJWsmg5EmNdDtheDL9nMCqk2AXYlNnstfYVqtJJjqNReqeL21wc52Yy4rwWg==
|
||||
|
||||
fstream@^1.0.0, fstream@^1.0.12:
|
||||
version "1.0.12"
|
||||
resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
|
||||
|
|
|
|||
Loading…
Reference in a new issue