diff --git a/ui/v2.5/src/components/Changelog/versions/v0130.md b/ui/v2.5/src/components/Changelog/versions/v0130.md index 87c95d5f776..90bb459b404 100644 --- a/ui/v2.5/src/components/Changelog/versions/v0130.md +++ b/ui/v2.5/src/components/Changelog/versions/v0130.md @@ -1,3 +1,6 @@ +### 🎨 Improvements +Show counts on list tabs in Performer, Studio and Tag pages. ([#2169](https://github.com/stashapp/stash/pull/2169)) + ### 🐛 Bug fixes * Generate sprites for short video files. ([#2167](https://github.com/stashapp/stash/pull/2167)) * Fix stash-box scraping including underscores in ethnicity. ([#2191](https://github.com/stashapp/stash/pull/2191)) diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx index c31f7ef0a9e..94f69a1cdec 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useMemo, useState } from "react"; -import { Button, Tabs, Tab } from "react-bootstrap"; +import { Button, Tabs, Tab, Badge } from "react-bootstrap"; import { FormattedMessage, useIntl } from "react-intl"; import { useParams, useHistory } from "react-router-dom"; import { Helmet } from "react-helmet"; @@ -147,16 +147,56 @@ 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)} + + + } + > diff --git a/ui/v2.5/src/components/Settings/SettingsServicesPanel.tsx b/ui/v2.5/src/components/Settings/SettingsServicesPanel.tsx index 2bc7c97612b..e15c29ead70 100644 --- a/ui/v2.5/src/components/Settings/SettingsServicesPanel.tsx +++ b/ui/v2.5/src/components/Settings/SettingsServicesPanel.tsx @@ -117,7 +117,7 @@ export const SettingsServicesPanel: React.FC = () => { function renderDeadline(until?: string) { if (until) { const deadline = new Date(until); - return `until ${deadline.toLocaleString()}`; + return `until ${intl.formatDate(deadline)}`; } return ""; diff --git a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx index 9d95ecea774..56875b40c13 100644 --- a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx +++ b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx @@ -1,4 +1,4 @@ -import { Tabs, Tab } from "react-bootstrap"; +import { Tabs, Tab, Badge } from "react-bootstrap"; import React, { useEffect, useState } from "react"; import { useParams, useHistory } from "react-router-dom"; import { FormattedMessage, useIntl } from "react-intl"; @@ -216,16 +216,43 @@ 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)} + + + } + > = ({ studio }) => { > - + + {intl.formatMessage({ id: "movies" })} + + {intl.formatNumber(studio.movie_count ?? 0)} + + + } + > + {intl.formatMessage({ id: "subsidiary_studios" })} + + {intl.formatNumber(studio.child_studios?.length)} + + + } > diff --git a/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx b/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx index 99259be34b2..4b75d927fa3 100644 --- a/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx +++ b/ui/v2.5/src/components/Tags/TagDetails/Tag.tsx @@ -1,4 +1,4 @@ -import { Tabs, Tab, Dropdown } from "react-bootstrap"; +import { Tabs, Tab, Dropdown, Badge } from "react-bootstrap"; import React, { useEffect, useState } from "react"; import { useParams, useHistory } from "react-router-dom"; import { FormattedMessage, useIntl } from "react-intl"; @@ -297,27 +297,68 @@ 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)} + + + } > diff --git a/ui/v2.5/src/index.scss b/ui/v2.5/src/index.scss index 2ac93c8d35a..a67e1e504ac 100755 --- a/ui/v2.5/src/index.scss +++ b/ui/v2.5/src/index.scss @@ -752,3 +752,7 @@ select { background: url("data:image/svg+xml;utf8,") no-repeat right 2px center; } + +.left-spacing { + margin-left: 0.5em; +}