From d95ef4059a8783e92807acdb34dd059eebaad164 Mon Sep 17 00:00:00 2001
From: elkorol <57588838+elkorol@users.noreply.github.com>
Date: Tue, 21 Nov 2023 22:53:05 +0000
Subject: [PATCH] Added various tooltips (#4264)

---
 .../src/components/Galleries/GalleryCard.tsx  | 17 ++++++---
 .../components/Performers/PerformerCard.tsx   |  1 +
 ui/v2.5/src/components/Scenes/SceneCard.tsx   | 17 ++++++---
 ui/v2.5/src/components/Shared/CountryFlag.tsx | 20 ++++++++--
 .../components/Shared/PopoverCountButton.tsx  | 37 +++++++++++++++----
 ui/v2.5/src/components/Tags/TagCard.tsx       | 28 +++++++-------
 6 files changed, 81 insertions(+), 39 deletions(-)

diff --git a/ui/v2.5/src/components/Galleries/GalleryCard.tsx b/ui/v2.5/src/components/Galleries/GalleryCard.tsx
index 82ec1acc9..8dd495341 100644
--- a/ui/v2.5/src/components/Galleries/GalleryCard.tsx
+++ b/ui/v2.5/src/components/Galleries/GalleryCard.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup } from "react-bootstrap";
+import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import React from "react";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
@@ -112,11 +112,16 @@ export const GalleryCard: React.FC<IProps> = (props) => {
   function maybeRenderOrganized() {
     if (props.gallery.organized) {
       return (
-        <div className="organized">
-          <Button className="minimal">
-            <Icon icon={faBox} />
-          </Button>
-        </div>
+        <OverlayTrigger
+          overlay={<Tooltip id="organised-tooltip">{"Organized"}</Tooltip>}
+          placement="bottom"
+        >
+          <div className="organized">
+            <Button className="minimal">
+              <Icon icon={faBox} />
+            </Button>
+          </div>
+        </OverlayTrigger>
       );
     }
   }
diff --git a/ui/v2.5/src/components/Performers/PerformerCard.tsx b/ui/v2.5/src/components/Performers/PerformerCard.tsx
index d948c14aa..a143dd57e 100644
--- a/ui/v2.5/src/components/Performers/PerformerCard.tsx
+++ b/ui/v2.5/src/components/Performers/PerformerCard.tsx
@@ -237,6 +237,7 @@ export const PerformerCard: React.FC<IPerformerCardProps> = ({
           <CountryFlag
             className="performer-card__country-flag"
             country={performer.country}
+            includeOverlay
           />
           <span className="performer-card__country-string">
             {performer.country}
diff --git a/ui/v2.5/src/components/Scenes/SceneCard.tsx b/ui/v2.5/src/components/Scenes/SceneCard.tsx
index 44b8474ce..64a344e34 100644
--- a/ui/v2.5/src/components/Scenes/SceneCard.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneCard.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef } from "react";
-import { Button, ButtonGroup } from "react-bootstrap";
+import { Button, ButtonGroup, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { Link, useHistory } from "react-router-dom";
 import cx from "classnames";
 import * as GQL from "src/core/generated-graphql";
@@ -317,11 +317,16 @@ export const SceneCard: React.FC<ISceneCardProps> = (
   function maybeRenderOrganized() {
     if (props.scene.organized) {
       return (
-        <div className="organized">
-          <Button className="minimal">
-            <Icon icon={faBox} />
-          </Button>
-        </div>
+        <OverlayTrigger
+          overlay={<Tooltip id="organised-tooltip">{"Organized"}</Tooltip>}
+          placement="bottom"
+        >
+          <div className="organized">
+            <Button className="minimal">
+              <Icon icon={faBox} />
+            </Button>
+          </div>
+        </OverlayTrigger>
       );
     }
   }
diff --git a/ui/v2.5/src/components/Shared/CountryFlag.tsx b/ui/v2.5/src/components/Shared/CountryFlag.tsx
index 66c6c89ed..fae206912 100644
--- a/ui/v2.5/src/components/Shared/CountryFlag.tsx
+++ b/ui/v2.5/src/components/Shared/CountryFlag.tsx
@@ -1,17 +1,20 @@
 import React from "react";
 import { useIntl } from "react-intl";
 import { getCountryByISO } from "src/utils/country";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
 interface ICountryFlag {
   country?: string | null;
   className?: string;
   includeName?: boolean;
+  includeOverlay?: boolean;
 }
 
 export const CountryFlag: React.FC<ICountryFlag> = ({
   className,
   country: isoCountry,
   includeName,
+  includeOverlay,
 }) => {
   const { locale } = useIntl();
 
@@ -22,10 +25,19 @@ export const CountryFlag: React.FC<ICountryFlag> = ({
   return (
     <>
       {includeName ? country : ""}
-      <span
-        className={`${className ?? ""} fi fi-${isoCountry.toLowerCase()}`}
-        title={country}
-      />
+      {includeOverlay ? (
+        <OverlayTrigger
+          overlay={<Tooltip id="{country}-tooltip">{country}</Tooltip>}
+        >
+          <span
+            className={`${className ?? ""} fi fi-${isoCountry.toLowerCase()}`}
+          />
+        </OverlayTrigger>
+      ) : (
+        <span
+          className={`${className ?? ""} fi fi-${isoCountry.toLowerCase()}`}
+        />
+      )}
     </>
   );
 };
diff --git a/ui/v2.5/src/components/Shared/PopoverCountButton.tsx b/ui/v2.5/src/components/Shared/PopoverCountButton.tsx
index 6d6ef8571..2fb5c1ef4 100644
--- a/ui/v2.5/src/components/Shared/PopoverCountButton.tsx
+++ b/ui/v2.5/src/components/Shared/PopoverCountButton.tsx
@@ -4,9 +4,10 @@ import {
   faImages,
   faPlayCircle,
   faUser,
+  faMapMarkerAlt,
 } from "@fortawesome/free-solid-svg-icons";
 import React, { useMemo } from "react";
-import { Button } from "react-bootstrap";
+import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
 import { FormattedNumber, useIntl } from "react-intl";
 import { Link } from "react-router-dom";
 import { IUIConfig } from "src/core/config";
@@ -14,7 +15,13 @@ import { ConfigurationContext } from "src/hooks/Config";
 import TextUtils from "src/utils/text";
 import { Icon } from "./Icon";
 
-type PopoverLinkType = "scene" | "image" | "gallery" | "movie" | "performer";
+type PopoverLinkType =
+  | "scene"
+  | "image"
+  | "gallery"
+  | "marker"
+  | "movie"
+  | "performer";
 
 interface IProps {
   className?: string;
@@ -43,6 +50,8 @@ export const PopoverCountButton: React.FC<IProps> = ({
         return faImage;
       case "gallery":
         return faImages;
+      case "marker":
+        return faMapMarkerAlt;
       case "movie":
         return faFilm;
       case "performer":
@@ -67,6 +76,11 @@ export const PopoverCountButton: React.FC<IProps> = ({
           one: "gallery",
           other: "galleries",
         };
+      case "marker":
+        return {
+          one: "marker",
+          other: "markers",
+        };
       case "movie":
         return {
           one: "movie",
@@ -105,11 +119,18 @@ export const PopoverCountButton: React.FC<IProps> = ({
   }, [count, abbreviateCounter]);
 
   return (
-    <Link className={className} to={url} title={getTitle()}>
-      <Button className="minimal">
-        <Icon icon={getIcon()} />
-        <span>{countEl}</span>
-      </Button>
-    </Link>
+    <>
+      <OverlayTrigger
+        overlay={<Tooltip id={`${type}-count-tooltip`}>{getTitle()}</Tooltip>}
+        placement="bottom"
+      >
+        <Link className={className} to={url}>
+          <Button className="minimal">
+            <Icon icon={getIcon()} />
+            <span>{countEl}</span>
+          </Button>
+        </Link>
+      </OverlayTrigger>
+    </>
   );
 };
diff --git a/ui/v2.5/src/components/Tags/TagCard.tsx b/ui/v2.5/src/components/Tags/TagCard.tsx
index 9fd43eaa4..11c3c5223 100644
--- a/ui/v2.5/src/components/Tags/TagCard.tsx
+++ b/ui/v2.5/src/components/Tags/TagCard.tsx
@@ -1,14 +1,12 @@
-import { Button, ButtonGroup } from "react-bootstrap";
+import { ButtonGroup } from "react-bootstrap";
 import React from "react";
 import { Link } from "react-router-dom";
 import * as GQL from "src/core/generated-graphql";
 import NavUtils from "src/utils/navigation";
 import { FormattedMessage } from "react-intl";
-import { Icon } from "../Shared/Icon";
 import { TruncatedText } from "../Shared/TruncatedText";
 import { GridCard } from "../Shared/GridCard";
 import { PopoverCountButton } from "../Shared/PopoverCountButton";
-import { faMapMarkerAlt, faUser } from "@fortawesome/free-solid-svg-icons";
 
 interface IProps {
   tag: GQL.TagDataFragment;
@@ -114,12 +112,12 @@ export const TagCard: React.FC<IProps> = ({
     if (!tag.scene_marker_count) return;
 
     return (
-      <Link className="marker-count" to={NavUtils.makeTagSceneMarkersUrl(tag)}>
-        <Button className="minimal">
-          <Icon icon={faMapMarkerAlt} />
-          <span>{tag.scene_marker_count}</span>
-        </Button>
-      </Link>
+      <PopoverCountButton
+        className="marker-count"
+        type="marker"
+        count={tag.scene_marker_count}
+        url={NavUtils.makeTagSceneMarkersUrl(tag)}
+      />
     );
   }
 
@@ -153,12 +151,12 @@ export const TagCard: React.FC<IProps> = ({
     if (!tag.performer_count) return;
 
     return (
-      <Link className="performer-count" to={NavUtils.makeTagPerformersUrl(tag)}>
-        <Button className="minimal">
-          <Icon icon={faUser} />
-          <span>{tag.performer_count}</span>
-        </Button>
-      </Link>
+      <PopoverCountButton
+        className="performer-count"
+        type="performer"
+        count={tag.performer_count}
+        url={NavUtils.makeTagPerformersUrl(tag)}
+      />
     );
   }