diff --git a/ui/v2.5/src/components/Galleries/GalleryListTable.tsx b/ui/v2.5/src/components/Galleries/GalleryListTable.tsx index 7e6a561886b..68f926587e2 100644 --- a/ui/v2.5/src/components/Galleries/GalleryListTable.tsx +++ b/ui/v2.5/src/components/Galleries/GalleryListTable.tsx @@ -134,6 +134,16 @@ export const GalleryListTable: React.FC = ( ); + const PathCell = (scene: GQL.SlimGalleryDataFragment) => ( + + ); + interface IColumnSpec { value: string; label: string; @@ -211,6 +221,11 @@ export const GalleryListTable: React.FC = ( label: intl.formatMessage({ id: "photographer" }), render: (s) => <>{s.photographer}, }, + { + value: "path", + label: intl.formatMessage({ id: "path" }), + render: PathCell, + }, ]; const defaultColumns = allColumns diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss index 5b1e3b845b6..eeaa8527a65 100644 --- a/ui/v2.5/src/components/List/styles.scss +++ b/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; } diff --git a/ui/v2.5/src/components/Scenes/SceneListTable.tsx b/ui/v2.5/src/components/Scenes/SceneListTable.tsx index 33581baa47b..0365e768793 100644 --- a/ui/v2.5/src/components/Scenes/SceneListTable.tsx +++ b/ui/v2.5/src/components/Scenes/SceneListTable.tsx @@ -226,7 +226,7 @@ export const SceneListTable: React.FC = ( ); const AudioCodecCell = (scene: GQL.SlimSceneDataFragment) => ( -
    +
      {scene.files.map((file) => (
    • {file.audio_codec} @@ -245,6 +245,16 @@ export const SceneListTable: React.FC = (
    ); + const PathCell = (scene: GQL.SlimSceneDataFragment) => ( +
      + {scene.files.map((file) => ( +
    • + {file.path} +
    • + ))} +
    + ); + interface IColumnSpec { value: string; label: string; @@ -343,6 +353,11 @@ export const SceneListTable: React.FC = ( label: intl.formatMessage({ id: "resolution" }), render: ResolutionCell, }, + { + value: "path", + label: intl.formatMessage({ id: "path" }), + render: PathCell, + }, { value: "filesize", label: intl.formatMessage({ id: "filesize" }),