Add lightbox preview button to image card (stashapp#2275)

* Add lightbox preview button to image card
* Always show preview button on touch screen

Author: WithoutPants

ui/v2.5/src/components/Changelog/versions/v0130.md

@@ -1,4 +1,5 @@
 ### ✨ New Features
+* Added button to image card to view image in Lightbox. ([#2275](https://github.com/stashapp/stash/pull/2275))
 * Added support for submitting performer/scene drafts to stash-box. ([#2234](https://github.com/stashapp/stash/pull/2234))
 
 ### 🎨 Improvements

ui/v2.5/src/components/Images/ImageCard.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { MouseEvent } from "react";
 import { Button, ButtonGroup } from "react-bootstrap";
 import cx from "classnames";
 import * as GQL from "src/core/generated-graphql";
@@ -14,6 +14,7 @@ interface IImageCardProps {
   selected: boolean | undefined;
   zoomIndex: number;
   onSelectedChanged: (selected: boolean, shiftKey: boolean) => void;
+  onPreview?: (ev: MouseEvent) => void;
 }
 
 export const ImageCard: React.FC<IImageCardProps> = (
@@ -119,6 +120,13 @@ export const ImageCard: React.FC<IImageCardProps> = (
               alt={props.image.title ?? ""}
               src={props.image.paths.thumbnail ?? ""}
             />
+            {props.onPreview ? (
+              <div className="preview-button">
+                <Button onClick={props.onPreview}>
+                  <Icon icon="search" />
+                </Button>
+              </div>
+            ) : undefined}
           </div>
           <RatingBanner rating={props.image.rating} />
         </>

ui/v2.5/src/components/Images/ImageList.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, MouseEvent } from "react";
 import { useIntl } from "react-intl";
 import _ from "lodash";
 import { useHistory } from "react-router-dom";
@@ -30,17 +30,55 @@ interface IImageWallProps {
   onChangePage: (page: number) => void;
   currentPage: number;
   pageCount: number;
+  handleImageOpen: (index: number) => void;
 }
 
-const ImageWall: React.FC<IImageWallProps> = ({
+const ImageWall: React.FC<IImageWallProps> = ({ images, handleImageOpen }) => {
+  const thumbs = images.map((image, index) => (
+    <div
+      role="link"
+      tabIndex={index}
+      key={image.id}
+      onClick={() => handleImageOpen(index)}
+      onKeyPress={() => handleImageOpen(index)}
+    >
+      <img
+        src={image.paths.thumbnail ?? ""}
+        loading="lazy"
+        className="gallery-image"
+        alt={image.title ?? TextUtils.fileNameFromPath(image.path)}
+      />
+    </div>
+  ));
+
+  return (
+    <div className="gallery">
+      <div className="flexbin">{thumbs}</div>
+    </div>
+  );
+};
+
+interface IImageListImages {
+  images: SlimImageDataFragment[];
+  filter: ListFilterModel;
+  selectedIds: Set<string>;
+  onChangePage: (page: number) => void;
+  pageCount: number;
+  onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
+}
+
+const ImageListImages: React.FC<IImageListImages> = ({
   images,
+  filter,
+  selectedIds,
   onChangePage,
-  currentPage,
   pageCount,
+  onSelectChange,
 }) => {
   const [slideshowRunning, setSlideshowRunning] = useState<boolean>(false);
   const handleLightBoxPage = useCallback(
     (direction: number) => {
+      const { currentPage } = filter;
       if (direction === -1) {
         if (currentPage === 1) {
           onChangePage(pageCount);
@@ -56,7 +94,7 @@ const ImageWall: React.FC<IImageWallProps> = ({
         }
       }
     },
-    [onChangePage, currentPage, pageCount]
+    [onChangePage, filter, pageCount]
   );
 
   const handleClose = useCallback(() => {
@@ -67,7 +105,7 @@ const ImageWall: React.FC<IImageWallProps> = ({
     images,
     showNavigation: false,
     pageCallback: pageCount > 1 ? handleLightBoxPage : undefined,
-    pageHeader: `Page ${currentPage} / ${pageCount}`,
+    pageHeader: `Page ${filter.currentPage} / ${pageCount}`,
     slideshowEnabled: slideshowRunning,
     onClose: handleClose,
   });
@@ -80,28 +118,54 @@ const ImageWall: React.FC<IImageWallProps> = ({
     [showLightbox]
   );
 
-  const thumbs = images.map((image, index) => (
-    <div
-      role="link"
-      tabIndex={index}
-      key={image.id}
-      onClick={() => handleImageOpen(index)}
-      onKeyPress={() => handleImageOpen(index)}
-    >
-      <img
-        src={image.paths.thumbnail ?? ""}
-        loading="lazy"
-        className="gallery-image"
-        alt={image.title ?? TextUtils.fileNameFromPath(image.path)}
+  function onPreview(index: number, ev: MouseEvent) {
+    handleImageOpen(index);
+    ev.preventDefault();
+  }
+
+  function renderImageCard(
+    index: number,
+    image: SlimImageDataFragment,
+    zoomIndex: number
+  ) {
+    return (
+      <ImageCard
+        key={image.id}
+        image={image}
+        zoomIndex={zoomIndex}
+        selecting={selectedIds.size > 0}
+        selected={selectedIds.has(image.id)}
+        onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
+          onSelectChange(image.id, selected, shiftKey)
+        }
+        onPreview={(ev) => onPreview(index, ev)}
       />
-    </div>
-  ));
+    );
+  }
 
-  return (
-    <div className="gallery">
-      <div className="flexbin">{thumbs}</div>
-    </div>
-  );
+  if (filter.displayMode === DisplayMode.Grid) {
+    return (
+      <div className="row justify-content-center">
+        {images.map((image, index) =>
+          renderImageCard(index, image, filter.zoomIndex)
+        )}
+      </div>
+    );
+  }
+  if (filter.displayMode === DisplayMode.Wall) {
+    return (
+      <ImageWall
+        images={images}
+        onChangePage={onChangePage}
+        currentPage={filter.currentPage}
+        pageCount={pageCount}
+        handleImageOpen={handleImageOpen}
+      />
+    );
+  }
+
+  // should not happen
+  return <></>;
 };
 
 interface IImageList {
@@ -237,23 +301,8 @@ export const ImageList: React.FC<IImageList> = ({
     );
   }
 
-  function renderImageCard(
-    image: SlimImageDataFragment,
-    selectedIds: Set<string>,
-    zoomIndex: number
-  ) {
-    return (
-      <ImageCard
-        key={image.id}
-        image={image}
-        zoomIndex={zoomIndex}
-        selecting={selectedIds.size > 0}
-        selected={selectedIds.has(image.id)}
-        onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
-          onSelectChange(image.id, selected, shiftKey)
-        }
-      />
-    );
+  function selectChange(id: string, selected: boolean, shiftKey: boolean) {
+    onSelectChange(id, selected, shiftKey);
   }
 
   function renderImages(
@@ -266,25 +315,17 @@ export const ImageList: React.FC<IImageList> = ({
     if (!result.data || !result.data.findImages) {
       return;
     }
-    if (filter.displayMode === DisplayMode.Grid) {
-      return (
-        <div className="row justify-content-center">
-          {result.data.findImages.images.map((image) =>
-            renderImageCard(image, selectedIds, filter.zoomIndex)
-          )}
-        </div>
-      );
-    }
-    if (filter.displayMode === DisplayMode.Wall) {
-      return (
-        <ImageWall
-          images={result.data.findImages.images}
-          onChangePage={onChangePage}
-          currentPage={filter.currentPage}
-          pageCount={pageCount}
-        />
-      );
-    }
+
+    return (
+      <ImageListImages
+        filter={filter}
+        images={result.data.findImages.images}
+        onChangePage={onChangePage}
+        onSelectChange={selectChange}
+        pageCount={pageCount}
+        selectedIds={selectedIds}
+      />
+    );
   }
 
   function renderContent(

ui/v2.5/src/index.scss

@@ -216,6 +216,50 @@ textarea.text-input {
   width: 100%;
 }
 
+.preview-button {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+
+  button.btn,
+  button.btn:not(:disabled):not(.disabled):hover,
+  button.btn:not(:disabled):not(.disabled):focus,
+  button.btn:not(:disabled):not(.disabled):active {
+    background: none;
+    border: none;
+    box-shadow: none;
+  }
+
+  .fa-icon {
+    color: $text-color;
+    filter: drop-shadow(2px 4px 6px black);
+    height: 5em;
+    opacity: 0;
+    transition: opacity 0.5s;
+    width: 5em;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  @media (hover: none), (pointer: coarse) {
+    // always show preview button when hovering not supported
+    align-items: flex-end;
+    justify-content: right;
+
+    .fa-icon {
+      height: 3em;
+      opacity: 0.8;
+      width: 3em;
+    }
+  }
+}
+
 /* this is a bit of a hack, because we can't supply direct class names
    to the react-select controls */
 /* stylelint-disable selector-class-pattern */