Internationalise tooltip

stashapp · Sep 20, 2023 · 01c0639 · 01c0639
1 parent cd51732
commit 01c0639
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/ui/v2.5/src/components/Shared/TagLink.tsx b/ui/v2.5/src/components/Shared/TagLink.tsx
@@ -12,6 +12,7 @@ import { markerTitle } from "src/core/markers";
 import { Placement } from "react-bootstrap/esm/Overlay";
 import { faFolderTree } from "@fortawesome/free-solid-svg-icons";
 import { Icon } from "../Shared/Icon";
+import { FormattedMessage } from "react-intl";
 
 type SceneMarkerFragment = Pick<GQL.SceneMarker, "id" | "title" | "seconds"> & {
   scene: Pick<GQL.Scene, "id">;
@@ -191,6 +192,7 @@ interface ITagLinkProps {
   className?: string;
   hoverPlacement?: Placement;
   showHierarchyIcon?: boolean;
+  hierarchyTooltipID?: string;
 }
 
 export const TagLink: React.FC<ITagLinkProps> = ({
@@ -199,6 +201,7 @@ export const TagLink: React.FC<ITagLinkProps> = ({
   className,
   hoverPlacement,
   showHierarchyIcon = false,
+  hierarchyTooltipID,
 }) => {
   const link = useMemo(() => {
     switch (linkType) {
@@ -217,20 +220,25 @@ export const TagLink: React.FC<ITagLinkProps> = ({
 
   const title = tag.name || "";
 
+  const tooltip = useMemo(() => {
+    if (!hierarchyTooltipID) {
+      return <></>;
+    }
+
+    return (
+      <Tooltip id="tag-hierarchy-tooltip">
+        <FormattedMessage id={hierarchyTooltipID} />
+      </Tooltip>
+    );
+  }, [hierarchyTooltipID]);
+
   return (
     <CommonLinkComponent link={link} className={className}>
       <TagPopover id={tag.id ?? ""} placement={hoverPlacement}>
         <Link to={link}>
           {title}
           {showHierarchyIcon && (
-            <OverlayTrigger
-              placement="top"
-              overlay={
-                <Tooltip id="tag-hierarchy-tooltip">
-                  Explore tag hierarchy
-                </Tooltip>
-              }
-            >
+            <OverlayTrigger placement="top" overlay={tooltip}>
               <span className="icon-wrapper">
                 <span className="vertical-line">|</span>
                 <Icon icon={faFolderTree} className="tag-icon" />

diff --git a/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx b/ui/v2.5/src/components/Tags/TagDetails/TagDetailsPanel.tsx
@@ -23,6 +23,7 @@ export const TagDetailsPanel: React.FC<ITagDetails> = ({ tag, fullWidth }) => {
             hoverPlacement="bottom"
             linkType="details"
             showHierarchyIcon={p.parent_count !== 0}
+            hierarchyTooltipID="tag_parent_tooltip"
           />
         ))}
       </>
@@ -43,6 +44,7 @@ export const TagDetailsPanel: React.FC<ITagDetails> = ({ tag, fullWidth }) => {
             hoverPlacement="bottom"
             linkType="details"
             showHierarchyIcon={c.child_count !== 0}
+            hierarchyTooltipID="tag_sub_tag_tooltip"
           />
         ))}
       </>

diff --git a/ui/v2.5/src/locales/en-GB.json b/ui/v2.5/src/locales/en-GB.json
@@ -1319,6 +1319,8 @@
   "synopsis": "Synopsis",
   "tag": "Tag",
   "tag_count": "Tag Count",
+  "tag_parent_tooltip": "Has parent tags",
+  "tag_sub_tag_tooltip": "Has sub-tags",
   "tags": "Tags",
   "tattoos": "Tattoos",
   "title": "Title",