From 0ee8930bdd190ebf39b8123d11f24deabf4c172f Mon Sep 17 00:00:00 2001 From: WithoutPants <53250216+WithoutPants@users.noreply.github.com> Date: Sun, 3 Apr 2022 07:44:39 +1000 Subject: [PATCH] Do not display tabs with no content (#2468) --- .../components/Changelog/versions/v0140.md | 1 + .../Performers/PerformerDetails/Performer.tsx | 117 +++++++------ .../Studios/StudioDetails/Studio.tsx | 157 +++++++++-------- .../src/components/Tags/TagDetails/Tag.tsx | 159 ++++++++++-------- ui/v2.5/src/utils/render.tsx | 9 + 5 files changed, 259 insertions(+), 184 deletions(-) create mode 100644 ui/v2.5/src/utils/render.tsx diff --git a/ui/v2.5/src/components/Changelog/versions/v0140.md b/ui/v2.5/src/components/Changelog/versions/v0140.md index f0206b1b7..783ee2a7a 100644 --- a/ui/v2.5/src/components/Changelog/versions/v0140.md +++ b/ui/v2.5/src/components/Changelog/versions/v0140.md @@ -2,6 +2,7 @@ * Add python location in System Settings for script scrapers and plugins. ([#2409](https://github.com/stashapp/stash/pull/2409)) ### 🎨 Improvements +* Hide tabs with no content in Performer, Studio and Tag pages. ([#2468](https://github.com/stashapp/stash/pull/2468)) * Added support for bulk editing most performer fields. ([#2467](https://github.com/stashapp/stash/pull/2467)) * Changed video player to videojs. ([#2100](https://github.com/stashapp/stash/pull/2100)) * Maintain lightbox settings and add lightbox settings to Interface settings page. ([#2406](https://github.com/stashapp/stash/pull/2406)) diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx index 2a848e72d..2e4dd11e0 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx @@ -30,6 +30,7 @@ import { PerformerImagesPanel } from "./PerformerImagesPanel"; import { PerformerEditPanel } from "./PerformerEditPanel"; import { PerformerSubmitButton } from "./PerformerSubmitButton"; import GenderIcon from "../GenderIcon"; +import renderNonZero from "src/utils/render"; interface IProps { performer: GQL.PerformerDataFragment; @@ -184,58 +185,70 @@ const PerformerPage: React.FC = ({ performer }) => { - - {intl.formatMessage({ id: "scenes" })} - - {intl.formatNumber(performer.scene_count ?? 0)} - - - } - > - - - - {intl.formatMessage({ id: "galleries" })} - - {intl.formatNumber(performer.gallery_count ?? 0)} - - - } - > - - - - {intl.formatMessage({ id: "images" })} - - {intl.formatNumber(performer.image_count ?? 0)} - - - } - > - - - - {intl.formatMessage({ id: "movies" })} - - {intl.formatNumber(performer.movie_count ?? 0)} - - - } - > - - + {renderNonZero( + performer.scene_count, + + {intl.formatMessage({ id: "scenes" })} + + {intl.formatNumber(performer.scene_count ?? 0)} + + + } + > + + + )} + {renderNonZero( + performer.gallery_count, + + {intl.formatMessage({ id: "galleries" })} + + {intl.formatNumber(performer.gallery_count ?? 0)} + + + } + > + + + )} + {renderNonZero( + performer.image_count, + + {intl.formatMessage({ id: "images" })} + + {intl.formatNumber(performer.image_count ?? 0)} + + + } + > + + + )} + {renderNonZero( + performer.movie_count, + + {intl.formatMessage({ id: "movies" })} + + {intl.formatNumber(performer.movie_count ?? 0)} + + + } + > + + + )} ); diff --git a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx index 56875b40c..eb4bb525b 100644 --- a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx +++ b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx @@ -28,6 +28,7 @@ import { StudioPerformersPanel } from "./StudioPerformersPanel"; import { StudioEditPanel } from "./StudioEditPanel"; import { StudioDetailsPanel } from "./StudioDetailsPanel"; import { StudioMoviesPanel } from "./StudioMoviesPanel"; +import renderNonZero from "src/utils/render"; interface IProps { studio: GQL.StudioDataFragment; @@ -153,6 +154,15 @@ const StudioPage: React.FC = ({ studio }) => { } } + const defaultTab = + studio?.scene_count ?? 0 > 0 + ? "scenes" + : studio?.gallery_count ?? 0 > 0 + ? "galleries" + : studio?.image_count ?? 0 > 0 + ? "images" + : "performers"; + const activeTabKey = tab === "childstudios" || tab === "images" || @@ -160,7 +170,7 @@ const StudioPage: React.FC = ({ studio }) => { tab === "performers" || tab === "movies" ? tab - : "scenes"; + : defaultTab; const setActiveTabKey = (newTab: string | null) => { if (tab !== newTab) { const tabParam = newTab === "scenes" ? "" : `/${newTab}`; @@ -216,77 +226,92 @@ const StudioPage: React.FC = ({ studio }) => { activeKey={activeTabKey} onSelect={setActiveTabKey} > - - {intl.formatMessage({ id: "scenes" })} - - {intl.formatNumber(studio.scene_count ?? 0)} - - - } - > - - - - {intl.formatMessage({ id: "galleries" })} - - {intl.formatNumber(studio.gallery_count ?? 0)} - - - } - > - - - - {intl.formatMessage({ id: "images" })} - - {intl.formatNumber(studio.image_count ?? 0)} - - - } - > - - + {renderNonZero( + studio.scene_count, + + {intl.formatMessage({ id: "scenes" })} + + {intl.formatNumber(studio.scene_count ?? 0)} + + + } + > + + + )} + {renderNonZero( + studio.gallery_count, + + {intl.formatMessage({ id: "galleries" })} + + {intl.formatNumber(studio.gallery_count ?? 0)} + + + } + > + + + )} + {renderNonZero( + studio.image_count, + + {intl.formatMessage({ id: "images" })} + + {intl.formatNumber(studio.image_count ?? 0)} + + + } + > + + + )} - - {intl.formatMessage({ id: "movies" })} - - {intl.formatNumber(studio.movie_count ?? 0)} - - - } - > - - - - {intl.formatMessage({ id: "subsidiary_studios" })} - - {intl.formatNumber(studio.child_studios?.length)} - - - } - > - - + {renderNonZero( + studio.movie_count, + + {intl.formatMessage({ id: "movies" })} + + {intl.formatNumber(studio.movie_count ?? 0)} + + + } + > + + + )} + {renderNonZero( + studio.child_studios?.length, + + {intl.formatMessage({ id: "subsidiary_studios" })} + + {intl.formatNumber(studio.child_studios?.length)} + + + } + > + + + )} {renderDeleteAlert()} diff --git a/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx b/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx index 47bb279f8..eb383d3d8 100644 --- a/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx +++ b/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx @@ -30,6 +30,7 @@ import { TagGalleriesPanel } from "./TagGalleriesPanel"; import { TagDetailsPanel } from "./TagDetailsPanel"; import { TagEditPanel } from "./TagEditPanel"; import { TagMergeModal } from "./TagMergeDialog"; +import renderNonZero from "src/utils/render"; interface IProps { tag: GQL.TagDataFragment; @@ -56,13 +57,24 @@ const TagPage: React.FC = ({ tag }) => { const [updateTag] = useTagUpdate(); const [deleteTag] = useTagDestroy({ id: tag.id }); + const defaultTab = + tag?.scene_count ?? 0 > 0 + ? "scenes" + : tag?.image_count ?? 0 > 0 + ? "images" + : tag?.gallery_count ?? 0 > 0 + ? "galleries" + : tag?.scene_marker_count ?? 0 > 0 + ? "markers" + : "performers"; + const activeTabKey = tab === "markers" || tab === "images" || tab === "performers" || tab === "galleries" ? tab - : "scenes"; + : defaultTab; const setActiveTabKey = (newTab: string | null) => { if (tab !== newTab) { const tabParam = newTab === "scenes" ? "" : `/${newTab}`; @@ -298,71 +310,86 @@ const TagPage: React.FC = ({ tag }) => { activeKey={activeTabKey} onSelect={setActiveTabKey} > - - {intl.formatMessage({ id: "scenes" })} - - {intl.formatNumber(tag.scene_count ?? 0)} - - - } - > - - - - {intl.formatMessage({ id: "images" })} - - {intl.formatNumber(tag.image_count ?? 0)} - - - } - > - - - - {intl.formatMessage({ id: "galleries" })} - - {intl.formatNumber(tag.gallery_count ?? 0)} - - - } - > - - - - {intl.formatMessage({ id: "markers" })} - - {intl.formatNumber(tag.scene_marker_count ?? 0)} - - - } - > - - - - {intl.formatMessage({ id: "performers" })} - - {intl.formatNumber(tag.performer_count ?? 0)} - - - } - > - - + {renderNonZero( + tag.scene_count, + + {intl.formatMessage({ id: "scenes" })} + + {intl.formatNumber(tag.scene_count ?? 0)} + + + } + > + + + )} + {renderNonZero( + tag.image_count, + + {intl.formatMessage({ id: "images" })} + + {intl.formatNumber(tag.image_count ?? 0)} + + + } + > + + + )} + {renderNonZero( + tag.gallery_count, + + {intl.formatMessage({ id: "galleries" })} + + {intl.formatNumber(tag.gallery_count ?? 0)} + + + } + > + + + )} + {renderNonZero( + tag.scene_marker_count, + + {intl.formatMessage({ id: "markers" })} + + {intl.formatNumber(tag.scene_marker_count ?? 0)} + + + } + > + + + )} + {renderNonZero( + tag.performer_count, + + {intl.formatMessage({ id: "performers" })} + + {intl.formatNumber(tag.performer_count ?? 0)} + + + } + > + + + )} {renderDeleteAlert()} diff --git a/ui/v2.5/src/utils/render.tsx b/ui/v2.5/src/utils/render.tsx new file mode 100644 index 000000000..2fbea7c46 --- /dev/null +++ b/ui/v2.5/src/utils/render.tsx @@ -0,0 +1,9 @@ +function renderNonZero(count: number | undefined | null, element: JSX.Element) { + if (!count) { + return undefined; + } + + return element; +} + +export default renderNonZero;