From 41e537418b64dca3567720e6d179b4415a879a2d Mon Sep 17 00:00:00 2001
From: CJ <72030708+cj12312021@users.noreply.github.com>
Date: Mon, 5 Feb 2024 17:18:24 -0600
Subject: [PATCH] Improve list table readability (#4497)

* fixes mandatory columns bug and consistency issues
---
 .../components/Galleries/GalleryListTable.tsx |  4 +--
 ui/v2.5/src/components/List/ListTable.tsx     |  2 +-
 ui/v2.5/src/components/List/styles.scss       | 30 +++++++++++++++----
 .../src/components/Scenes/SceneListTable.tsx  | 20 ++++++-------
 ui/v2.5/src/components/Scenes/styles.scss     | 15 ----------
 ui/v2.5/src/components/Shared/Select.tsx      |  4 +--
 6 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/ui/v2.5/src/components/Galleries/GalleryListTable.tsx b/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
index b86552582f8..f378cb25729 100644
--- a/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryListTable.tsx
@@ -85,7 +85,7 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
   };
 
   const TagCell = (gallery: GQL.SlimGalleryDataFragment) => (
-    <ul className="comma-list">
+    <ul className="comma-list overflowable">
       {gallery.tags.map((tag) => (
         <li key={tag.id}>
           <Link to={NavUtils.makeTagGalleriesUrl(tag)}>
@@ -97,7 +97,7 @@ export const GalleryListTable: React.FC<IGalleryListTableProps> = (
   );
 
   const PerformersCell = (gallery: GQL.SlimGalleryDataFragment) => (
-    <ul className="comma-list">
+    <ul className="comma-list overflowable">
       {gallery.performers.map((performer) => (
         <li key={performer.id}>
           <Link to={NavUtils.makePerformerGalleriesUrl(performer)}>
diff --git a/ui/v2.5/src/components/List/ListTable.tsx b/ui/v2.5/src/components/List/ListTable.tsx
index 893c8597b57..e583c54b8c8 100644
--- a/ui/v2.5/src/components/List/ListTable.tsx
+++ b/ui/v2.5/src/components/List/ListTable.tsx
@@ -18,7 +18,7 @@ export const ColumnSelector: React.FC<{
     return allColumns.map((col) => {
       return {
         ...col,
-        disabled: col.mandatory,
+        isDisabled: col.mandatory,
       };
     });
   }, [allColumns]);
diff --git a/ui/v2.5/src/components/List/styles.scss b/ui/v2.5/src/components/List/styles.scss
index 12e6ddc075a..f67b5b8b33d 100644
--- a/ui/v2.5/src/components/List/styles.scss
+++ b/ui/v2.5/src/components/List/styles.scss
@@ -391,6 +391,15 @@ input[type="range"].zoom-slider {
       top: 0;
       z-index: 100;
     }
+
+    td:first-child {
+      padding: 0;
+    }
+
+    label {
+      margin: 0;
+      padding: 0.5rem;
+    }
   }
 
   .column-select {
@@ -398,14 +407,14 @@ input[type="range"].zoom-slider {
     padding: 7px;
   }
 
+  .select-col {
+    width: 20px;
+  }
+
   .comma-list {
     list-style: none;
     margin: 0;
-    overflow: hidden;
     padding: 4px 2px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 190px;
 
     li {
       display: inline;
@@ -420,7 +429,14 @@ input[type="range"].zoom-slider {
     }
   }
 
-  .comma-list:hover {
+  .comma-list.overflowable {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 190px;
+  }
+
+  .comma-list.overflowable:hover {
     background: #28343c;
     border: 1px solid #414c53;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.28);
@@ -438,11 +454,13 @@ input[type="range"].zoom-slider {
     z-index: 100;
   }
 
-  .comma-list li .ellips-data:hover {
+  .comma-list.overflowable li .ellips-data:hover {
     max-width: fit-content;
   }
 
   td {
+    color: hsla(0, 0%, 100%, 0.6);
+    font-weight: 500;
     position: relative;
     text-align: left;
     white-space: nowrap;
diff --git a/ui/v2.5/src/components/Scenes/SceneListTable.tsx b/ui/v2.5/src/components/Scenes/SceneListTable.tsx
index 7d8a44202de..847fd2cb3c4 100644
--- a/ui/v2.5/src/components/Scenes/SceneListTable.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneListTable.tsx
@@ -87,7 +87,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
   };
 
   const TagCell = (scene: GQL.SlimSceneDataFragment) => (
-    <ul className="comma-list">
+    <ul className="comma-list overflowable">
       {scene.tags.map((tag) => (
         <li key={tag.id}>
           <Link to={NavUtils.makeTagScenesUrl(tag)}>
@@ -99,7 +99,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
   );
 
   const PerformersCell = (scene: GQL.SlimSceneDataFragment) => (
-    <ul className="comma-list">
+    <ul className="comma-list overflowable">
       {scene.performers.map((performer) => (
         <li key={performer.id}>
           <Link to={NavUtils.makePerformerScenesUrl(performer)}>
@@ -124,7 +124,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
   };
 
   const MovieCell = (scene: GQL.SlimSceneDataFragment) => (
-    <ul className="comma-list">
+    <ul className="comma-list overflowable">
       {scene.movies.map((sceneMovie) => (
         <li key={sceneMovie.movie.id}>
           <Link to={NavUtils.makeMovieScenesUrl(sceneMovie.movie)}>
@@ -136,7 +136,7 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
   );
 
   const GalleriesCell = (scene: GQL.SlimSceneDataFragment) => (
-    <ul className="comma-list">
+    <ul className="comma-list overflowable">
       {scene.galleries.map((gallery) => (
         <li key={gallery.id}>
           <Link to={`/galleries/${gallery.id}`}>
@@ -271,10 +271,10 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
       render: DurationCell,
     },
     {
-      value: "tags",
-      label: intl.formatMessage({ id: "tags" }),
+      value: "studio",
+      label: intl.formatMessage({ id: "studio" }),
       defaultShow: true,
-      render: TagCell,
+      render: StudioCell,
     },
     {
       value: "performers",
@@ -283,10 +283,10 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
       render: PerformersCell,
     },
     {
-      value: "studio",
-      label: intl.formatMessage({ id: "studio" }),
+      value: "tags",
+      label: intl.formatMessage({ id: "tags" }),
       defaultShow: true,
-      render: StudioCell,
+      render: TagCell,
     },
     {
       value: "movies",
diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
index 147472f578e..0943160f802 100644
--- a/ui/v2.5/src/components/Scenes/styles.scss
+++ b/ui/v2.5/src/components/Scenes/styles.scss
@@ -689,21 +689,6 @@ input[type="range"].blue-slider {
   }
 }
 
-.scene-table {
-  td:first-child {
-    padding: 0;
-  }
-
-  label {
-    margin: 0;
-    padding: 0.5rem;
-  }
-}
-
-.select-col {
-  width: 20px;
-}
-
 .scrape-dialog .rating-number.disabled {
   padding-left: 0.5em;
 }
diff --git a/ui/v2.5/src/components/Shared/Select.tsx b/ui/v2.5/src/components/Shared/Select.tsx
index c2e3a6132b7..2ecf60fd784 100644
--- a/ui/v2.5/src/components/Shared/Select.tsx
+++ b/ui/v2.5/src/components/Shared/Select.tsx
@@ -843,7 +843,7 @@ export const ListSelect = <T extends {}>(props: IListSelect<T>) => {
 };
 
 type DisableOption = Option & {
-  disabled?: boolean;
+  isDisabled?: boolean;
 };
 
 interface ICheckBoxSelectProps {
@@ -861,7 +861,7 @@ export const CheckBoxSelect: React.FC<ICheckBoxSelectProps> = ({
     <reactSelectComponents.Option {...props}>
       <input
         type="checkbox"
-        disabled={props.data.disabled}
+        disabled={props.isDisabled}
         checked={props.isSelected}
         onChange={() => null}
         className="mr-1"