Added path column to tables in list view (#5005)

ui/v2.5/src/components/Galleries/GalleryListTable.tsx

@@ -134,6 +134,16 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
     </ul>
   );
 
+  const PathCell = (scene: GQL.SlimGalleryDataFragment) => (
+    <ul className="newline-list overflowable TruncatedText">
+      {scene.files.map((file) => (
+        <li key={file.id}>
+          <span>{file.path}</span>
+        </li>
+      ))}
+    </ul>
+  );
+
   interface IColumnSpec {
     value: string;
     label: string;
@@ -211,6 +221,11 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
       label: intl.formatMessage({ id: "photographer" }),
       render: (s) => <>{s.photographer}</>,
     },
+    {
+      value: "path",
+      label: intl.formatMessage({ id: "path" }),
+      render: PathCell,
+    },
   ];
 
   const defaultColumns = allColumns

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

@@ -444,13 +444,42 @@ input[type="range"].zoom-slider {
     }
   }
 
+  .newline-list {
+    list-style: none;
+    margin: 0;
+    padding: 4px 2px;
+
+    li {
+      display: inline;
+      white-space: pre-wrap;
+    }
+
+    li::after {
+      content: "\A";
+    }
+
+    li:last-child::after {
+      content: "";
+    }
+  }
+
+  .newline-list.overflowable,
   .comma-list.overflowable {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+  }
+
+  .comma-list.overflowable {
     width: 190px;
   }
 
+  .newline-list.overflowable {
+    -webkit-line-clamp: 1;
+    width: 700px;
+  }
+
+  .newline-list.overflowable:hover,
   .comma-list.overflowable:hover {
     background: #28343c;
     border: 1px solid #414c53;
@@ -459,7 +488,6 @@ input[type="range"].zoom-slider {
     height: auto;
     margin-left: -0.4rem;
     margin-top: -0.9rem;
-    max-width: 40rem;
     overflow: hidden;
     padding: 0.1rem 0.5rem;
     position: absolute;
@@ -469,6 +497,11 @@ input[type="range"].zoom-slider {
     z-index: 100;
   }
 
+  .comma-list.overflowable:hover {
+    max-width: 40rem;
+  }
+
+  .newline-list.overflowable li .ellips-data:hover,
   .comma-list.overflowable li .ellips-data:hover {
     max-width: fit-content;
   }

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

@@ -226,7 +226,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
   );
 
   const AudioCodecCell = (scene: GQL.SlimSceneDataFragment) => (
-    <ul className="comma-list">
+    <ul className="comma-list over">
       {scene.files.map((file) => (
         <li key={file.id}>
           <span>{file.audio_codec}</span>
@@ -245,6 +245,16 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
     </ul>
   );
 
+  const PathCell = (scene: GQL.SlimSceneDataFragment) => (
+    <ul className="newline-list overflowable TruncatedText">
+      {scene.files.map((file) => (
+        <li key={file.id}>
+          <span>{file.path}</span>
+        </li>
+      ))}
+    </ul>
+  );
+
   interface IColumnSpec {
     value: string;
     label: string;
@@ -343,6 +353,11 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
       label: intl.formatMessage({ id: "resolution" }),
       render: ResolutionCell,
     },
+    {
+      value: "path",
+      label: intl.formatMessage({ id: "path" }),
+      render: PathCell,
+    },
     {
       value: "filesize",
       label: intl.formatMessage({ id: "filesize" }),