Scene selection improvements (#642)

* Select subsequent scenes on card click

ui/v2.5/src/components/Changelog/versions/v030.tsx

@@ -9,6 +9,7 @@ const markup = `
 *  Add support for parent/child studios.
 
 ### 🎨 Improvements
+*  Allow click and click-drag selection after selecting scene.
 *  Added multi-scene edit dialog.
 *  Moved images to separate tables, increasing performance.
 *  Add gallery grid view.

ui/v2.5/src/components/Scenes/SceneCard.tsx

@@ -10,6 +10,7 @@ import { TextUtils } from "src/utils";
 
 interface ISceneCardProps {
   scene: GQL.SlimSceneDataFragment;
+  selecting?: boolean;
   selected: boolean | undefined;
   zoomIndex: number;
   onSelectedChanged: (selected: boolean, shiftKey: boolean) => void;
@@ -221,11 +222,42 @@ export const SceneCard: React.FC<ISceneCardProps> = (
     }
     hoverHandler.onMouseEnter();
   }
+
   function onMouseLeave() {
     hoverHandler.onMouseLeave();
     setPreviewPath("");
   }
 
+  function handleSceneClick(
+    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  ) {
+    const { shiftKey } = event;
+
+    if (props.selecting) {
+      props.onSelectedChanged(!props.selected, shiftKey);
+      event.preventDefault();
+    }
+  }
+
+  function handleDrag(event: React.DragEvent<HTMLAnchorElement>) {
+    if (props.selecting) {
+      event.dataTransfer.setData("text/plain", "");
+      event.dataTransfer.setDragImage(new Image(), 0, 0);
+    }
+  }
+
+  function handleDragOver(event: React.DragEvent<HTMLAnchorElement>) {
+    const ev = event;
+    const shiftKey = false;
+
+    if (props.selecting && !props.selected) {
+      props.onSelectedChanged(true, shiftKey);
+    }
+
+    ev.dataTransfer.dropEffect = "move";
+    ev.preventDefault();
+  }
+
   function isPortrait() {
     const { file } = props.scene;
     const width = file.width ? file.width : 0;
@@ -253,7 +285,14 @@ export const SceneCard: React.FC<ISceneCardProps> = (
         }}
       />
 
-      <Link to={`/scenes/${props.scene.id}`} className="scene-card-link">
+      <Link
+        to={`/scenes/${props.scene.id}`}
+        className="scene-card-link"
+        onClick={handleSceneClick}
+        onDragStart={handleDrag}
+        onDragOver={handleDragOver}
+        draggable={props.selecting}
+      >
         {maybeRenderRatingBanner()}
         {maybeRenderSceneStudioOverlay()}
         {maybeRenderSceneSpecsOverlay()}

ui/v2.5/src/components/Scenes/SceneList.tsx

@@ -100,6 +100,7 @@ export const SceneList: React.FC<ISceneList> = ({
         key={scene.id}
         scene={scene}
         zoomIndex={zoomIndex}
+        selecting={selectedIds.size > 0}
         selected={selectedIds.has(scene.id)}
         onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
           listData.onSelectChange(scene.id, selected, shiftKey)

ui/v2.5/src/components/Scenes/styles.scss

@@ -24,17 +24,6 @@
   }
 }
 
-.scene-card-check {
-  left: 0.5rem;
-  margin-top: -12px;
-  opacity: 0.5;
-  padding-left: 15px;
-  position: absolute;
-  top: 0.7rem;
-  width: 1.2rem;
-  z-index: 1;
-}
-
 .performer-tag-container,
 .movie-tag-container {
   display: inline-block;
@@ -189,6 +178,21 @@
     position: relative;
   }
 
+  .scene-card-check {
+    left: 0.5rem;
+    margin-top: -12px;
+    opacity: 0;
+    padding-left: 15px;
+    position: absolute;
+    top: 0.7rem;
+    width: 1.2rem;
+    z-index: 1;
+
+    &:checked {
+      opacity: 0.75;
+    }
+  }
+
   .scene-specs-overlay,
   .rating-banner,
   .scene-studio-overlay {
@@ -207,6 +211,11 @@
       opacity: 0.75;
       transition: opacity 0.5s;
     }
+
+    .scene-card-check {
+      opacity: 0.75;
+      transition: opacity 0.5s;
+    }
   }
 }