Do not display tabs with no content (#2468)

This commit is contained in:
WithoutPants
2022-04-03 07:44:39 +10:00
committed by GitHub
parent f9cf77e3ed
commit 0ee8930bdd
5 changed files with 259 additions and 184 deletions

View File

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

View File

@@ -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<IProps> = ({ performer }) => {
<Tab eventKey="details" title={intl.formatMessage({ id: "details" })}>
<PerformerDetailsPanel performer={performer} />
</Tab>
<Tab
eventKey="scenes"
title={
<React.Fragment>
{intl.formatMessage({ id: "scenes" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(performer.scene_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<PerformerScenesPanel performer={performer} />
</Tab>
<Tab
eventKey="galleries"
title={
<React.Fragment>
{intl.formatMessage({ id: "galleries" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(performer.gallery_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<PerformerGalleriesPanel performer={performer} />
</Tab>
<Tab
eventKey="images"
title={
<React.Fragment>
{intl.formatMessage({ id: "images" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(performer.image_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<PerformerImagesPanel performer={performer} />
</Tab>
<Tab
eventKey="movies"
title={
<React.Fragment>
{intl.formatMessage({ id: "movies" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(performer.movie_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<PerformerMoviesPanel performer={performer} />
</Tab>
{renderNonZero(
performer.scene_count,
<Tab
eventKey="scenes"
title={
<React.Fragment>
{intl.formatMessage({ id: "scenes" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(performer.scene_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<PerformerScenesPanel performer={performer} />
</Tab>
)}
{renderNonZero(
performer.gallery_count,
<Tab
eventKey="galleries"
title={
<React.Fragment>
{intl.formatMessage({ id: "galleries" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(performer.gallery_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<PerformerGalleriesPanel performer={performer} />
</Tab>
)}
{renderNonZero(
performer.image_count,
<Tab
eventKey="images"
title={
<React.Fragment>
{intl.formatMessage({ id: "images" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(performer.image_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<PerformerImagesPanel performer={performer} />
</Tab>
)}
{renderNonZero(
performer.movie_count,
<Tab
eventKey="movies"
title={
<React.Fragment>
{intl.formatMessage({ id: "movies" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(performer.movie_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<PerformerMoviesPanel performer={performer} />
</Tab>
)}
</Tabs>
</React.Fragment>
);

View File

@@ -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<IProps> = ({ 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<IProps> = ({ 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<IProps> = ({ studio }) => {
activeKey={activeTabKey}
onSelect={setActiveTabKey}
>
<Tab
eventKey="scenes"
title={
<React.Fragment>
{intl.formatMessage({ id: "scenes" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(studio.scene_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<StudioScenesPanel studio={studio} />
</Tab>
<Tab
eventKey="galleries"
title={
<React.Fragment>
{intl.formatMessage({ id: "galleries" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(studio.gallery_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<StudioGalleriesPanel studio={studio} />
</Tab>
<Tab
eventKey="images"
title={
<React.Fragment>
{intl.formatMessage({ id: "images" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(studio.image_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<StudioImagesPanel studio={studio} />
</Tab>
{renderNonZero(
studio.scene_count,
<Tab
eventKey="scenes"
title={
<React.Fragment>
{intl.formatMessage({ id: "scenes" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(studio.scene_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<StudioScenesPanel studio={studio} />
</Tab>
)}
{renderNonZero(
studio.gallery_count,
<Tab
eventKey="galleries"
title={
<React.Fragment>
{intl.formatMessage({ id: "galleries" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(studio.gallery_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<StudioGalleriesPanel studio={studio} />
</Tab>
)}
{renderNonZero(
studio.image_count,
<Tab
eventKey="images"
title={
<React.Fragment>
{intl.formatMessage({ id: "images" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(studio.image_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<StudioImagesPanel studio={studio} />
</Tab>
)}
<Tab
eventKey="performers"
title={intl.formatMessage({ id: "performers" })}
>
<StudioPerformersPanel studio={studio} />
</Tab>
<Tab
eventKey="movies"
title={
<React.Fragment>
{intl.formatMessage({ id: "movies" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(studio.movie_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<StudioMoviesPanel studio={studio} />
</Tab>
<Tab
eventKey="childstudios"
title={
<React.Fragment>
{intl.formatMessage({ id: "subsidiary_studios" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(studio.child_studios?.length)}
</Badge>
</React.Fragment>
}
>
<StudioChildrenPanel studio={studio} />
</Tab>
{renderNonZero(
studio.movie_count,
<Tab
eventKey="movies"
title={
<React.Fragment>
{intl.formatMessage({ id: "movies" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(studio.movie_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<StudioMoviesPanel studio={studio} />
</Tab>
)}
{renderNonZero(
studio.child_studios?.length,
<Tab
eventKey="childstudios"
title={
<React.Fragment>
{intl.formatMessage({ id: "subsidiary_studios" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(studio.child_studios?.length)}
</Badge>
</React.Fragment>
}
>
<StudioChildrenPanel studio={studio} />
</Tab>
)}
</Tabs>
</div>
{renderDeleteAlert()}

View File

@@ -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<IProps> = ({ 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<IProps> = ({ tag }) => {
activeKey={activeTabKey}
onSelect={setActiveTabKey}
>
<Tab
eventKey="scenes"
title={
<React.Fragment>
{intl.formatMessage({ id: "scenes" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(tag.scene_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<TagScenesPanel tag={tag} />
</Tab>
<Tab
eventKey="images"
title={
<React.Fragment>
{intl.formatMessage({ id: "images" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(tag.image_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<TagImagesPanel tag={tag} />
</Tab>
<Tab
eventKey="galleries"
title={
<React.Fragment>
{intl.formatMessage({ id: "galleries" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(tag.gallery_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<TagGalleriesPanel tag={tag} />
</Tab>
<Tab
eventKey="markers"
title={
<React.Fragment>
{intl.formatMessage({ id: "markers" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(tag.scene_marker_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<TagMarkersPanel tag={tag} />
</Tab>
<Tab
eventKey="performers"
title={
<React.Fragment>
{intl.formatMessage({ id: "performers" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(tag.performer_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<TagPerformersPanel tag={tag} />
</Tab>
{renderNonZero(
tag.scene_count,
<Tab
eventKey="scenes"
title={
<React.Fragment>
{intl.formatMessage({ id: "scenes" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(tag.scene_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<TagScenesPanel tag={tag} />
</Tab>
)}
{renderNonZero(
tag.image_count,
<Tab
eventKey="images"
title={
<React.Fragment>
{intl.formatMessage({ id: "images" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(tag.image_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<TagImagesPanel tag={tag} />
</Tab>
)}
{renderNonZero(
tag.gallery_count,
<Tab
eventKey="galleries"
title={
<React.Fragment>
{intl.formatMessage({ id: "galleries" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(tag.gallery_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<TagGalleriesPanel tag={tag} />
</Tab>
)}
{renderNonZero(
tag.scene_marker_count,
<Tab
eventKey="markers"
title={
<React.Fragment>
{intl.formatMessage({ id: "markers" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(tag.scene_marker_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<TagMarkersPanel tag={tag} />
</Tab>
)}
{renderNonZero(
tag.performer_count,
<Tab
eventKey="performers"
title={
<React.Fragment>
{intl.formatMessage({ id: "performers" })}
<Badge className="left-spacing" pill variant="secondary">
{intl.formatNumber(tag.performer_count ?? 0)}
</Badge>
</React.Fragment>
}
>
<TagPerformersPanel tag={tag} />
</Tab>
)}
</Tabs>
</div>
{renderDeleteAlert()}

View File

@@ -0,0 +1,9 @@
function renderNonZero(count: number | undefined | null, element: JSX.Element) {
if (!count) {
return undefined;
}
return element;
}
export default renderNonZero;