Merge pull request #276 from nulib/3824-single-asset-info

Add copy link to download and embed assets.
nulib · May 3, 2023 · de1bd27 · de1bd27
2 parents 219d782 + 4094638
commit de1bd27
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 9 deletions.
diff --git a/components/Shared/CopyText.styled.ts b/components/Shared/CopyText.styled.ts
@@ -23,7 +23,13 @@ const StyledCopyText = styled("button", {
   cursor: "pointer",
   color: "$purple",
   fontWeight: "700",
-  fontSize: "$3",
+  fontSize: "$gr3",
+  whiteSpace: "nowrap",
+
+  svg: {
+    height: "calc($gr3 - 3px)",
+    marginRight: "$gr1",
+  },
 
   "&:hover": {
     textDecoration: "underline",

diff --git a/components/Shared/CopyText.tsx b/components/Shared/CopyText.tsx
@@ -1,24 +1,29 @@
 import { CopyStatus, useCopyToClipboard } from "@/hooks/useCopyToClipboard";
+import React, { ReactElement } from "react";
 import {
   StyledCopyText,
   StyledStatus,
 } from "@/components/Shared/CopyText.styled";
-import React from "react";
 
-const CopyTextStatus: React.FC<{ status: CopyStatus }> = ({ status }) => {
+export const CopyTextStatus: React.FC<{ status: CopyStatus }> = ({
+  status,
+}) => {
   if (!status) return null;
 
   return <StyledStatus data-copy-status={status}>{status}</StyledStatus>;
 };
 
-export const CopyText: React.FC<{ textPrompt: string; textToCopy: string }> = ({
-  textPrompt,
-  textToCopy,
-}) => {
+export const CopyText: React.FC<{
+  renderIcon?: () => ReactElement;
+  textPrompt: string;
+  textToCopy: string;
+}> = ({ renderIcon, textPrompt, textToCopy }) => {
   const [copyStatus, copyText] = useCopyToClipboard(textToCopy);
+  const icon = renderIcon ? renderIcon() : null;
+
   return (
     <StyledCopyText onClick={copyText}>
-      {textPrompt} <CopyTextStatus status={copyStatus} />
+      {icon} {textPrompt} <CopyTextStatus status={copyStatus} />
     </StyledCopyText>
   );
 };

diff --git a/components/Shared/SVG/IIIF.tsx b/components/Shared/SVG/IIIF.tsx
@@ -0,0 +1,43 @@
+const IIIF = () => {
+  const red = "#ed1d33";
+  const blue = "#2873ab";
+
+  return (
+    <svg viewBox="0 0 493.35999 441.33334" id="iiif-logo" version="1.1">
+      <title>IIIF Logo</title>
+      <g transform="matrix(1.3333333,0,0,-1.3333333,0,441.33333)">
+        <g transform="scale(0.1)">
+          <path
+            style={{ fill: blue }}
+            d="M 65.2422,2178.75 775.242,1915 773.992,15 65.2422,276.25 v 1902.5"
+          />
+          <path
+            style={{ fill: blue }}
+            d="m 804.145,2640.09 c 81.441,-240.91 -26.473,-436.2 -241.04,-436.2 -214.558,0 -454.511,195.29 -535.9527,436.2 -81.4335,240.89 26.4805,436.18 241.0387,436.18 214.567,0 454.512,-195.29 535.954,-436.18"
+          />
+          <path
+            style={{ fill: red }}
+            d="M 1678.58,2178.75 968.578,1915 969.828,15 1678.58,276.25 v 1902.5"
+          />
+          <path
+            style={{ fill: red }}
+            d="m 935.082,2640.09 c -81.437,-240.91 26.477,-436.2 241.038,-436.2 214.56,0 454.51,195.29 535.96,436.2 81.43,240.89 -26.48,436.18 -241.04,436.18 -214.57,0 -454.52,-195.29 -535.958,-436.18"
+          />
+          <path
+            style={{ fill: blue }}
+            d="m 1860.24,2178.75 710,-263.75 -1.25,-1900 -708.75,261.25 v 1902.5"
+          />
+          <path
+            style={{ fill: blue }}
+            d="m 2603.74,2640.09 c 81.45,-240.91 -26.47,-436.2 -241.03,-436.2 -214.58,0 -454.52,195.29 -535.96,436.2 -81.44,240.89 26.48,436.18 241.03,436.18 214.57,0 454.51,-195.29 535.96,-436.18"
+          />
+          <path
+            style={{ fill: red }}
+            d="m 3700.24,3310 v -652.5 c 0,0 -230,90 -257.5,-142.5 -2.5,-247.5 0,-336.25 0,-336.25 l 257.5,83.75 V 1690 l -258.61,-92.5 V 262.5 L 2735.24,0 v 2360 c 0,0 -15,850 965,950"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
+export default IIIF;
diff --git a/components/Work/ActionsDialog/DownloadAndShare.styled.ts b/components/Work/ActionsDialog/DownloadAndShare.styled.ts
@@ -1,3 +1,4 @@
+import { StyledCopyText } from "@/components/Shared/CopyText.styled";
 import { styled } from "@/stitches.config";
 
 /* eslint sort-keys: 0 */
@@ -46,9 +47,20 @@ const ItemActions = styled("ul", {
     margin: "0 $3 0 0",
     fontSize: "$3",
 
-    "a, a:visited": {
+    [`${StyledCopyText}`]: {
       color: "$black50",
       textDecoration: "underline",
+      fontWeight: "400",
+      padding: "0",
+
+      "&:hover, &:focus": {
+        textDecoration: "none",
+      },
+    },
+
+    "a, a:visited": {
+      color: "$black50 !important",
+      textDecoration: "underline",
     },
 
     "a:hover, a:focus": {

diff --git a/components/Work/ActionsDialog/DownloadAndShare.tsx b/components/Work/ActionsDialog/DownloadAndShare.tsx
@@ -20,6 +20,7 @@ import ActionsDialogAside from "@/components/Work/ActionsDialog/Aside";
 import Announcement from "@/components/Shared/Announcement";
 import CopyText from "@/components/Shared/CopyText";
 import { DefinitionListWrapper } from "@/components/Shared/DefinitionList.styled";
+import IIIF from "@/components/Shared/SVG/IIIF";
 import React from "react";
 import SharedSocial from "@/components/Shared/Social";
 import SimpleSelect from "@/components/Shared/SimpleSelect.styled";
@@ -124,6 +125,8 @@ const Item: React.FC<ItemProps> = ({ item, showEmbedWarning }) => {
   const [color, setColor] = React.useState("default");
   const [width, setWidth] = React.useState(3000);
 
+  const iiifImageInfo = `${getInfoResponse(item)}/info.json`;
+
   const colors = [
     {
       label: "Default",
@@ -224,6 +227,13 @@ const Item: React.FC<ItemProps> = ({ item, showEmbedWarning }) => {
                 Embed HTML
               </a>
             </li>
+            <li>
+              <CopyText
+                renderIcon={IIIF}
+                textPrompt="Copy IIIF"
+                textToCopy={iiifImageInfo}
+              />
+            </li>
           </ItemActions>
         </ItemContent>
       </ItemRow>