Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-18 21:04:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Do not display tabs with no content (#2468)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

1
ui/v2.5/src/components/Changelog/versions/v0140.md
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)) * Add python location in System Settings for script scrapers and plugins. ([#2409](https://github.com/stashapp/stash/pull/2409))
### 🎨 Improvements ### 🎨 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)) * 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)) * 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)) * Maintain lightbox settings and add lightbox settings to Interface settings page. ([#2406](https://github.com/stashapp/stash/pull/2406))

117
ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx
View File

@@ -30,6 +30,7 @@ import { PerformerImagesPanel } from "./PerformerImagesPanel";
import { PerformerEditPanel } from "./PerformerEditPanel"; import { PerformerEditPanel } from "./PerformerEditPanel";
import { PerformerSubmitButton } from "./PerformerSubmitButton"; import { PerformerSubmitButton } from "./PerformerSubmitButton";
import GenderIcon from "../GenderIcon"; import GenderIcon from "../GenderIcon";
import renderNonZero from "src/utils/render";
interface IProps { interface IProps {
performer: GQL.PerformerDataFragment; performer: GQL.PerformerDataFragment;
@@ -184,58 +185,70 @@ const PerformerPage: React.FC<IProps> = ({ performer }) => {
<Tab eventKey="details" title={intl.formatMessage({ id: "details" })}> <Tab eventKey="details" title={intl.formatMessage({ id: "details" })}>
<PerformerDetailsPanel performer={performer} /> <PerformerDetailsPanel performer={performer} />
</Tab> </Tab>
<Tab {renderNonZero(
eventKey="scenes" performer.scene_count,
title={ <Tab
<React.Fragment> eventKey="scenes"
{intl.formatMessage({ id: "scenes" })} title={
<Badge className="left-spacing" pill variant="secondary"> <React.Fragment>
{intl.formatNumber(performer.scene_count ?? 0)} {intl.formatMessage({ id: "scenes" })}
</Badge> <Badge className="left-spacing" pill variant="secondary">
</React.Fragment> {intl.formatNumber(performer.scene_count ?? 0)}
} </Badge>
> </React.Fragment>
<PerformerScenesPanel performer={performer} /> }
</Tab> >
<Tab <PerformerScenesPanel performer={performer} />
eventKey="galleries" </Tab>
title={ )}
<React.Fragment> {renderNonZero(
{intl.formatMessage({ id: "galleries" })} performer.gallery_count,
<Badge className="left-spacing" pill variant="secondary"> <Tab
{intl.formatNumber(performer.gallery_count ?? 0)} eventKey="galleries"
</Badge> title={
</React.Fragment> <React.Fragment>
} {intl.formatMessage({ id: "galleries" })}
> <Badge className="left-spacing" pill variant="secondary">
<PerformerGalleriesPanel performer={performer} /> {intl.formatNumber(performer.gallery_count ?? 0)}
</Tab> </Badge>
<Tab </React.Fragment>
eventKey="images" }
title={ >
<React.Fragment> <PerformerGalleriesPanel performer={performer} />
{intl.formatMessage({ id: "images" })} </Tab>
<Badge className="left-spacing" pill variant="secondary"> )}
{intl.formatNumber(performer.image_count ?? 0)} {renderNonZero(
</Badge> performer.image_count,
</React.Fragment> <Tab
} eventKey="images"
> title={
<PerformerImagesPanel performer={performer} /> <React.Fragment>
</Tab> {intl.formatMessage({ id: "images" })}
<Tab <Badge className="left-spacing" pill variant="secondary">
eventKey="movies" {intl.formatNumber(performer.image_count ?? 0)}
title={ </Badge>
<React.Fragment> </React.Fragment>
{intl.formatMessage({ id: "movies" })} }
<Badge className="left-spacing" pill variant="secondary"> >
{intl.formatNumber(performer.movie_count ?? 0)} <PerformerImagesPanel performer={performer} />
</Badge> </Tab>
</React.Fragment> )}
} {renderNonZero(
> performer.movie_count,
<PerformerMoviesPanel 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>
)}
</Tabs> </Tabs>
</React.Fragment> </React.Fragment>
); );

157
ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
View File

@@ -28,6 +28,7 @@ import { StudioPerformersPanel } from "./StudioPerformersPanel";
import { StudioEditPanel } from "./StudioEditPanel"; import { StudioEditPanel } from "./StudioEditPanel";
import { StudioDetailsPanel } from "./StudioDetailsPanel"; import { StudioDetailsPanel } from "./StudioDetailsPanel";
import { StudioMoviesPanel } from "./StudioMoviesPanel"; import { StudioMoviesPanel } from "./StudioMoviesPanel";
import renderNonZero from "src/utils/render";
interface IProps { interface IProps {
studio: GQL.StudioDataFragment; 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 = const activeTabKey =
tab === "childstudios" || tab === "childstudios" ||
tab === "images" || tab === "images" ||
@@ -160,7 +170,7 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
tab === "performers" || tab === "performers" ||
tab === "movies" tab === "movies"
? tab ? tab
: "scenes"; : defaultTab;
const setActiveTabKey = (newTab: string | null) => { const setActiveTabKey = (newTab: string | null) => {
if (tab !== newTab) { if (tab !== newTab) {
const tabParam = newTab === "scenes" ? "" : `/${newTab}`; const tabParam = newTab === "scenes" ? "" : `/${newTab}`;
@@ -216,77 +226,92 @@ const StudioPage: React.FC<IProps> = ({ studio }) => {
activeKey={activeTabKey} activeKey={activeTabKey}
onSelect={setActiveTabKey} onSelect={setActiveTabKey}
> >
<Tab {renderNonZero(
eventKey="scenes" studio.scene_count,
title={ <Tab
<React.Fragment> eventKey="scenes"
{intl.formatMessage({ id: "scenes" })} title={
<Badge className="left-spacing" pill variant="secondary"> <React.Fragment>
{intl.formatNumber(studio.scene_count ?? 0)} {intl.formatMessage({ id: "scenes" })}
</Badge> <Badge className="left-spacing" pill variant="secondary">
</React.Fragment> {intl.formatNumber(studio.scene_count ?? 0)}
} </Badge>
> </React.Fragment>
<StudioScenesPanel studio={studio} /> }
</Tab> >
<Tab <StudioScenesPanel studio={studio} />
eventKey="galleries" </Tab>
title={ )}
<React.Fragment> {renderNonZero(
{intl.formatMessage({ id: "galleries" })} studio.gallery_count,
<Badge className="left-spacing" pill variant="secondary"> <Tab
{intl.formatNumber(studio.gallery_count ?? 0)} eventKey="galleries"
</Badge> title={
</React.Fragment> <React.Fragment>
} {intl.formatMessage({ id: "galleries" })}
> <Badge className="left-spacing" pill variant="secondary">
<StudioGalleriesPanel studio={studio} /> {intl.formatNumber(studio.gallery_count ?? 0)}
</Tab> </Badge>
<Tab </React.Fragment>
eventKey="images" }
title={ >
<React.Fragment> <StudioGalleriesPanel studio={studio} />
{intl.formatMessage({ id: "images" })} </Tab>
<Badge className="left-spacing" pill variant="secondary"> )}
{intl.formatNumber(studio.image_count ?? 0)} {renderNonZero(
</Badge> studio.image_count,
</React.Fragment> <Tab
} eventKey="images"
> title={
<StudioImagesPanel studio={studio} /> <React.Fragment>
</Tab> {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 <Tab
eventKey="performers" eventKey="performers"
title={intl.formatMessage({ id: "performers" })} title={intl.formatMessage({ id: "performers" })}
> >
<StudioPerformersPanel studio={studio} /> <StudioPerformersPanel studio={studio} />
</Tab> </Tab>
<Tab {renderNonZero(
eventKey="movies" studio.movie_count,
title={ <Tab
<React.Fragment> eventKey="movies"
{intl.formatMessage({ id: "movies" })} title={
<Badge className="left-spacing" pill variant="secondary"> <React.Fragment>
{intl.formatNumber(studio.movie_count ?? 0)} {intl.formatMessage({ id: "movies" })}
</Badge> <Badge className="left-spacing" pill variant="secondary">
</React.Fragment> {intl.formatNumber(studio.movie_count ?? 0)}
} </Badge>
> </React.Fragment>
<StudioMoviesPanel studio={studio} /> }
</Tab> >
<Tab <StudioMoviesPanel studio={studio} />
eventKey="childstudios" </Tab>
title={ )}
<React.Fragment> {renderNonZero(
{intl.formatMessage({ id: "subsidiary_studios" })} studio.child_studios?.length,
<Badge className="left-spacing" pill variant="secondary"> <Tab
{intl.formatNumber(studio.child_studios?.length)} eventKey="childstudios"
</Badge> title={
</React.Fragment> <React.Fragment>
} {intl.formatMessage({ id: "subsidiary_studios" })}
> <Badge className="left-spacing" pill variant="secondary">
<StudioChildrenPanel studio={studio} /> {intl.formatNumber(studio.child_studios?.length)}
</Tab> </Badge>
</React.Fragment>
}
>
<StudioChildrenPanel studio={studio} />
</Tab>
)}
</Tabs> </Tabs>
</div> </div>
{renderDeleteAlert()} {renderDeleteAlert()}

159
ui/v2.5/src/components/Tags/TagDetails/Tag.tsx
View File

@@ -30,6 +30,7 @@ import { TagGalleriesPanel } from "./TagGalleriesPanel";
import { TagDetailsPanel } from "./TagDetailsPanel"; import { TagDetailsPanel } from "./TagDetailsPanel";
import { TagEditPanel } from "./TagEditPanel"; import { TagEditPanel } from "./TagEditPanel";
import { TagMergeModal } from "./TagMergeDialog"; import { TagMergeModal } from "./TagMergeDialog";
import renderNonZero from "src/utils/render";
interface IProps { interface IProps {
tag: GQL.TagDataFragment; tag: GQL.TagDataFragment;
@@ -56,13 +57,24 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
const [updateTag] = useTagUpdate(); const [updateTag] = useTagUpdate();
const [deleteTag] = useTagDestroy({ id: tag.id }); 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 = const activeTabKey =
tab === "markers" || tab === "markers" ||
tab === "images" || tab === "images" ||
tab === "performers" || tab === "performers" ||
tab === "galleries" tab === "galleries"
? tab ? tab
: "scenes"; : defaultTab;
const setActiveTabKey = (newTab: string | null) => { const setActiveTabKey = (newTab: string | null) => {
if (tab !== newTab) { if (tab !== newTab) {
const tabParam = newTab === "scenes" ? "" : `/${newTab}`; const tabParam = newTab === "scenes" ? "" : `/${newTab}`;
@@ -298,71 +310,86 @@ const TagPage: React.FC<IProps> = ({ tag }) => {
activeKey={activeTabKey} activeKey={activeTabKey}
onSelect={setActiveTabKey} onSelect={setActiveTabKey}
> >
<Tab {renderNonZero(
eventKey="scenes" tag.scene_count,
title={ <Tab
<React.Fragment> eventKey="scenes"
{intl.formatMessage({ id: "scenes" })} title={
<Badge className="left-spacing" pill variant="secondary"> <React.Fragment>
{intl.formatNumber(tag.scene_count ?? 0)} {intl.formatMessage({ id: "scenes" })}
</Badge> <Badge className="left-spacing" pill variant="secondary">
</React.Fragment> {intl.formatNumber(tag.scene_count ?? 0)}
} </Badge>
> </React.Fragment>
<TagScenesPanel tag={tag} /> }
</Tab> >
<Tab <TagScenesPanel tag={tag} />
eventKey="images" </Tab>
title={ )}
<React.Fragment> {renderNonZero(
{intl.formatMessage({ id: "images" })} tag.image_count,
<Badge className="left-spacing" pill variant="secondary"> <Tab
{intl.formatNumber(tag.image_count ?? 0)} eventKey="images"
</Badge> title={
</React.Fragment> <React.Fragment>
} {intl.formatMessage({ id: "images" })}
> <Badge className="left-spacing" pill variant="secondary">
<TagImagesPanel tag={tag} /> {intl.formatNumber(tag.image_count ?? 0)}
</Tab> </Badge>
<Tab </React.Fragment>
eventKey="galleries" }
title={ >
<React.Fragment> <TagImagesPanel tag={tag} />
{intl.formatMessage({ id: "galleries" })} </Tab>
<Badge className="left-spacing" pill variant="secondary"> )}
{intl.formatNumber(tag.gallery_count ?? 0)} {renderNonZero(
</Badge> tag.gallery_count,
</React.Fragment> <Tab
} eventKey="galleries"
> title={
<TagGalleriesPanel tag={tag} /> <React.Fragment>
</Tab> {intl.formatMessage({ id: "galleries" })}
<Tab <Badge className="left-spacing" pill variant="secondary">
eventKey="markers" {intl.formatNumber(tag.gallery_count ?? 0)}
title={ </Badge>
<React.Fragment> </React.Fragment>
{intl.formatMessage({ id: "markers" })} }
<Badge className="left-spacing" pill variant="secondary"> >
{intl.formatNumber(tag.scene_marker_count ?? 0)} <TagGalleriesPanel tag={tag} />
</Badge> </Tab>
</React.Fragment> )}
} {renderNonZero(
> tag.scene_marker_count,
<TagMarkersPanel tag={tag} /> <Tab
</Tab> eventKey="markers"
<Tab title={
eventKey="performers" <React.Fragment>
title={ {intl.formatMessage({ id: "markers" })}
<React.Fragment> <Badge className="left-spacing" pill variant="secondary">
{intl.formatMessage({ id: "performers" })} {intl.formatNumber(tag.scene_marker_count ?? 0)}
<Badge className="left-spacing" pill variant="secondary"> </Badge>
{intl.formatNumber(tag.performer_count ?? 0)} </React.Fragment>
</Badge> }
</React.Fragment> >
} <TagMarkersPanel tag={tag} />
> </Tab>
<TagPerformersPanel 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> </Tabs>
</div> </div>
{renderDeleteAlert()} {renderDeleteAlert()}

9
ui/v2.5/src/utils/render.tsx Normal file
View File

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