Add classnames to count popovers (#1813)

This commit is contained in:
WithoutPants
2021-10-06 21:12:28 +11:00
committed by GitHub
parent 11fa8ce581
commit 47ae1be53c
9 changed files with 66 additions and 16 deletions

View File

@@ -36,7 +36,11 @@ export const GalleryCard: React.FC<IProps> = (props) => {
));
return (
<HoverPopover placement="bottom" content={popoverContent}>
<HoverPopover
className="scene-count"
placement="bottom"
content={popoverContent}
>
<Button className="minimal">
<Icon icon="play-circle" />
<span>{props.gallery.scenes.length}</span>
@@ -53,7 +57,11 @@ export const GalleryCard: React.FC<IProps> = (props) => {
));
return (
<HoverPopover placement="bottom" content={popoverContent}>
<HoverPopover
className="tag-count"
placement="bottom"
content={popoverContent}
>
<Button className="minimal">
<Icon icon="tag" />
<span>{props.gallery.tags.length}</span>
@@ -73,6 +81,7 @@ export const GalleryCard: React.FC<IProps> = (props) => {
return (
<PopoverCountButton
className="image-count"
type="image"
count={props.gallery.image_count}
url={NavUtils.makeGalleryImagesUrl(props.gallery)}

View File

@@ -27,7 +27,11 @@ export const ImageCard: React.FC<IImageCardProps> = (
));
return (
<HoverPopover placement="bottom" content={popoverContent}>
<HoverPopover
className="tag-count"
placement="bottom"
content={popoverContent}
>
<Button className="minimal">
<Icon icon="tag" />
<span>{props.image.tags.length}</span>

View File

@@ -41,7 +41,11 @@ export const MovieCard: FunctionComponent<IProps> = (props: IProps) => {
));
return (
<HoverPopover placement="bottom" content={popoverContent}>
<HoverPopover
className="scene-count"
placement="bottom"
content={popoverContent}
>
<Button className="minimal">
<Icon icon="play-circle" />
<span>{props.movie.scenes.length}</span>

View File

@@ -74,6 +74,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
return (
<PopoverCountButton
className="scene-count"
type="scene"
count={performer.scene_count}
url={NavUtils.makePerformerScenesUrl(performer, extraCriteria?.scenes)}
@@ -86,6 +87,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
return (
<PopoverCountButton
className="image-count"
type="image"
count={performer.image_count}
url={NavUtils.makePerformerImagesUrl(performer, extraCriteria?.images)}
@@ -98,6 +100,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
return (
<PopoverCountButton
className="gallery-count"
type="gallery"
count={performer.gallery_count}
url={NavUtils.makePerformerGalleriesUrl(
@@ -117,7 +120,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
return (
<HoverPopover placement="bottom" content={popoverContent}>
<Button className="minimal">
<Button className="minimal tag-count">
<Icon icon="tag" />
<span>{performer.tags.length}</span>
</Button>
@@ -130,6 +133,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
return (
<PopoverCountButton
className="movie-count"
type="movie"
count={performer.movie_count}
url={NavUtils.makePerformerMoviesUrl(performer, extraCriteria?.movies)}

View File

@@ -139,7 +139,11 @@ export const SceneCard: React.FC<ISceneCardProps> = (
));
return (
<HoverPopover placement="bottom" content={popoverContent}>
<HoverPopover
className="tag-count"
placement="bottom"
content={popoverContent}
>
<Button className="minimal">
<Icon icon="tag" />
<span>{props.scene.tags.length}</span>
@@ -181,7 +185,7 @@ export const SceneCard: React.FC<ISceneCardProps> = (
<HoverPopover
placement="bottom"
content={popoverContent}
className="tag-tooltip"
className="movie-count tag-tooltip"
>
<Button className="minimal">
<Icon icon="film" />
@@ -200,7 +204,11 @@ export const SceneCard: React.FC<ISceneCardProps> = (
});
return (
<HoverPopover placement="bottom" content={popoverContent}>
<HoverPopover
className="marker-count"
placement="bottom"
content={popoverContent}
>
<Button className="minimal">
<Icon icon="map-marker-alt" />
<span>{props.scene.scene_markers.length}</span>
@@ -212,7 +220,7 @@ export const SceneCard: React.FC<ISceneCardProps> = (
function maybeRenderOCounter() {
if (props.scene.o_counter) {
return (
<div>
<div className="o-counter">
<Button className="minimal">
<span className="fa-icon">
<SweatDrops />
@@ -232,7 +240,11 @@ export const SceneCard: React.FC<ISceneCardProps> = (
));
return (
<HoverPopover placement="bottom" content={popoverContent}>
<HoverPopover
className="gallery-count"
placement="bottom"
content={popoverContent}
>
<Button className="minimal">
<Icon icon="images" />
<span>{props.scene.galleries.length}</span>
@@ -244,7 +256,7 @@ export const SceneCard: React.FC<ISceneCardProps> = (
function maybeRenderOrganized() {
if (props.scene.organized) {
return (
<div>
<div className="organized">
<Button className="minimal">
<Icon icon="box" />
</Button>

View File

@@ -30,7 +30,11 @@ export const PerformerPopoverButton: React.FC<IProps> = ({ performers }) => {
));
return (
<HoverPopover placement="bottom" content={popoverContent}>
<HoverPopover
className="performer-count"
placement="bottom"
content={popoverContent}
>
<Button className="minimal">
<Icon icon="user" />
<span>{performers.length}</span>

View File

@@ -7,12 +7,18 @@ import Icon from "./Icon";
type PopoverLinkType = "scene" | "image" | "gallery" | "movie";
interface IProps {
className?: string;
url: string;
type: PopoverLinkType;
count: number;
}
export const PopoverCountButton: React.FC<IProps> = ({ url, type, count }) => {
export const PopoverCountButton: React.FC<IProps> = ({
className,
url,
type,
count,
}) => {
const intl = useIntl();
function getIcon() {
@@ -61,7 +67,7 @@ export const PopoverCountButton: React.FC<IProps> = ({ url, type, count }) => {
}
return (
<Link to={url} title={getTitle()}>
<Link className={className} to={url} title={getTitle()}>
<Button className="minimal">
<Icon icon={getIcon()} />
<span>{count}</span>

View File

@@ -58,6 +58,7 @@ export const StudioCard: React.FC<IProps> = ({
return (
<PopoverCountButton
className="scene-count"
type="scene"
count={studio.scene_count}
url={NavUtils.makeStudioScenesUrl(studio)}
@@ -70,6 +71,7 @@ export const StudioCard: React.FC<IProps> = ({
return (
<PopoverCountButton
className="image-count"
type="image"
count={studio.image_count}
url={NavUtils.makeStudioImagesUrl(studio)}
@@ -82,6 +84,7 @@ export const StudioCard: React.FC<IProps> = ({
return (
<PopoverCountButton
className="gallery-count"
type="gallery"
count={studio.gallery_count}
url={NavUtils.makeStudioGalleriesUrl(studio)}
@@ -94,6 +97,7 @@ export const StudioCard: React.FC<IProps> = ({
return (
<PopoverCountButton
className="movie-count"
type="movie"
count={studio.movie_count}
url={NavUtils.makeStudioMoviesUrl(studio)}

View File

@@ -75,6 +75,7 @@ export const TagCard: React.FC<IProps> = ({
return (
<PopoverCountButton
className="scene-count"
type="scene"
count={tag.scene_count}
url={NavUtils.makeTagScenesUrl(tag)}
@@ -86,7 +87,7 @@ export const TagCard: React.FC<IProps> = ({
if (!tag.scene_marker_count) return;
return (
<Link to={NavUtils.makeTagSceneMarkersUrl(tag)}>
<Link className="marker-count" to={NavUtils.makeTagSceneMarkersUrl(tag)}>
<Button className="minimal">
<Icon icon="map-marker-alt" />
<span>{tag.scene_marker_count}</span>
@@ -100,6 +101,7 @@ export const TagCard: React.FC<IProps> = ({
return (
<PopoverCountButton
className="image-count"
type="image"
count={tag.image_count}
url={NavUtils.makeTagImagesUrl(tag)}
@@ -112,6 +114,7 @@ export const TagCard: React.FC<IProps> = ({
return (
<PopoverCountButton
className="gallery-count"
type="gallery"
count={tag.gallery_count}
url={NavUtils.makeTagGalleriesUrl(tag)}
@@ -123,7 +126,7 @@ export const TagCard: React.FC<IProps> = ({
if (!tag.performer_count) return;
return (
<Link to={NavUtils.makeTagPerformersUrl(tag)}>
<Link className="performer-count" to={NavUtils.makeTagPerformersUrl(tag)}>
<Button className="minimal">
<Icon icon="user" />
<span>{tag.performer_count}</span>