diff --git a/ui/v2.5/src/components/Performers/PerformerPopover.tsx b/ui/v2.5/src/components/Performers/PerformerPopover.tsx index 04cbf8e87..52f825a50 100644 --- a/ui/v2.5/src/components/Performers/PerformerPopover.tsx +++ b/ui/v2.5/src/components/Performers/PerformerPopover.tsx @@ -9,10 +9,12 @@ import { Placement } from "react-bootstrap/esm/Overlay"; interface IPeromerPopoverCardProps { id: string; + cardClassName?: string; } export const PerformerPopoverCard: React.FC = ({ id, + cardClassName, }) => { const { data, loading, error } = useFindPerformer(id); @@ -29,7 +31,7 @@ export const PerformerPopoverCard: React.FC = ({ const performer = data.findPerformer; return ( -
+
); @@ -40,6 +42,7 @@ interface IPeroformerPopoverProps { hide?: boolean; placement?: Placement; target?: React.RefObject; + cardClassName?: string; } export const PerformerPopover: React.FC = ({ @@ -48,6 +51,7 @@ export const PerformerPopover: React.FC = ({ children, placement = "top", target, + cardClassName, }) => { const { configuration: config } = useConfigurationContext(); @@ -63,7 +67,7 @@ export const PerformerPopover: React.FC = ({ placement={placement} enterDelay={500} leaveDelay={100} - content={} + content={} > {children} diff --git a/ui/v2.5/src/components/Tagger/scenes/MatchedPerformerPreview.tsx b/ui/v2.5/src/components/Tagger/scenes/MatchedPerformerPreview.tsx new file mode 100644 index 000000000..24d2b63b6 --- /dev/null +++ b/ui/v2.5/src/components/Tagger/scenes/MatchedPerformerPreview.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { Placement } from "react-bootstrap/esm/Overlay"; +import { PerformerPopover } from "src/components/Performers/PerformerPopover"; + +interface IMatchedPerformerPreviewProps { + performerID?: string | null; + placement?: Placement; +} + +export const MatchedPerformerPreview: React.FC = ({ + performerID, + placement = "right", + children, +}) => { + if (!performerID) { + return <>{children}; + } + + return ( + + {children} + + ); +}; + diff --git a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx index 53caba2ff..c57f3dad2 100755 --- a/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx +++ b/ui/v2.5/src/components/Tagger/scenes/PerformerResult.tsx @@ -12,6 +12,7 @@ import { getStashboxBase } from "src/utils/stashbox"; import { ExternalLink } from "src/components/Shared/ExternalLink"; import { Link } from "react-router-dom"; import { LinkButton } from "../LinkButton"; +import { MatchedPerformerPreview } from "./MatchedPerformerPreview"; const PerformerLink: React.FC<{ performer: GQL.ScrapedPerformer | Performer; @@ -133,11 +134,13 @@ const PerformerResult: React.FC = ({ : - + + +
diff --git a/ui/v2.5/src/components/Tagger/styles.scss b/ui/v2.5/src/components/Tagger/styles.scss index 0e9db45a6..006dba876 100644 --- a/ui/v2.5/src/components/Tagger/styles.scss +++ b/ui/v2.5/src/components/Tagger/styles.scss @@ -95,6 +95,16 @@ } } +.tagger-matched-performer-popover { + .card { + width: 200px; + } + + .performer-card-image { + max-height: 300px; + } +} + .selected-result { background-color: hsl(204, 20%, 30%); border-radius: 3px;