Improve list table readability (#4497)

* fixes mandatory columns bug and consistency issues

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)}>

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]);

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;

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",

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;
 }

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"