Buttons.

nulib · Oct 31, 2024 · 4f9595f · 4f9595f
1 parent 37058f8
commit 4f9595f
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 49 deletions.
diff --git a/components/Shared/CopyText.styled.ts b/components/Shared/CopyText.styled.ts
@@ -6,13 +6,12 @@ const StyledStatus = styled("span", {
   display: "flex",
   alignContent: "center",
   alignItems: "center",
-  padding: "0 $gr1",
-  marginLeft: "$gr1",
-  backgroundColor: "$darkBlueA",
-  color: "$white",
+  color: "$darkBlueA",
   borderRadius: "3px",
   fontSize: "$gr1",
   textTransform: "uppercase",
+  position: "absolute",
+  right: "-1.25em",
 });
 
 const StyledCopyText = styled("button", {
@@ -30,6 +29,8 @@ const StyledCopyText = styled("button", {
   textDecorationThickness: "min(2px,max(1px,.05em))",
   textUnderlineOffset: "calc(.05em + 2px)",
   textDecorationColor: "$purple10",
+  position: "relative",
+  zIndex: "0",
 
   svg: {
     height: "calc($gr3 - 3px)",

diff --git a/components/Shared/IIIF/Share.tsx b/components/Shared/IIIF/Share.tsx
@@ -5,7 +5,6 @@ import { IconChevronDown, IconExternalLink } from "../SVG/Icons";
 
 import CopyText from "../CopyText";
 import IIIFLogo from "../SVG/IIIF";
-import { color } from "framer-motion";
 import { styled } from "@/stitches.config";
 
 const IIIFShare = ({ uri }: { uri: string }) => {
@@ -27,15 +26,35 @@ const IIIFShare = ({ uri }: { uri: string }) => {
           sideOffset={3}
           collisionPadding={19}
         >
+          <StyledDropdownLabel>View in...</StyledDropdownLabel>
           <Dropdown.Item>
             <a
               href={`https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content=${uri}`}
               target="_blank"
               rel="noreferrer"
             >
-              View in Clover IIIF
+              Clover IIIF
             </a>
           </Dropdown.Item>
+          <Dropdown.Item>
+            <a
+              href={`https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content=${uri}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Mirador
+            </a>
+          </Dropdown.Item>
+          <Dropdown.Item>
+            <a
+              href={`https://samvera-labs.github.io/clover-iiif/docs/viewer/demo?iiif-content=${uri}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Theseus
+            </a>
+          </Dropdown.Item>
+          <StyledDropdownSeparator />
           <Dropdown.Item>
             <a href={uri} target="_blank" rel="noreferrer">
               View Raw JSON
@@ -44,6 +63,7 @@ const IIIFShare = ({ uri }: { uri: string }) => {
           <Dropdown.Item>
             <CopyText textPrompt="Copy IIIF JSON" textToCopy={uri} />
           </Dropdown.Item>
+          <StyledDropdownSeparator />
           <Dropdown.Item>
             <a
               href="https://iiif.io/get-started/why-iiif/"
@@ -55,8 +75,8 @@ const IIIFShare = ({ uri }: { uri: string }) => {
               <Icon
                 style={{
                   display: "inline-flex",
-                  width: "16px",
-                  height: "16px",
+                  width: "12px",
+                  height: "12px",
                   color: "$black50",
                   fill: "$black50",
                   marginLeft: "0.25em",
@@ -107,6 +127,7 @@ const StyledIIIFShare = styled("div", {
 
         "svg path": {
           stroke: "$black50 !important",
+          fill: "none !important",
         },
       },
     },
@@ -118,9 +139,13 @@ const StyledIIIFShare = styled("div", {
     },
 
     "&:hover, &:active ": {
-      color: "$black",
+      color: "$purple",
       fill: "$black",
-      backgroundColor: "$gray6",
+      backgroundColor: "$purple10",
+
+      "> span:last-child svg path": {
+        stroke: "$purple !important",
+      },
     },
   },
 });
@@ -134,30 +159,16 @@ const StyledIIIFShareContent = styled(Dropdown.Content, {
   display: "flex",
   flexDirection: "column",
   fontSize: "$gr2 ",
-  fontFamily: "$northwesternSansRegular",
   minWidth: "160px",
   gap: "$gr2",
 
   a: {
-    textDecoration: "underline",
-    textDecorationThickness: "min(2px,max(1px,.05em))",
-    textUnderlineOffset: "calc(.05em + 2px)",
-    textDecorationColor: "$purple10",
-    color: "$black50",
-
-    "&[data-id='what-is-iiif']": {
-      display: "flex",
-
-      [`${IconStyled}`]: {
-        marginTop: "-3px",
-      },
-    },
+    color: "$purple",
+    display: "flex",
 
-    "&:hover, &:active": {
-      svg: {
-        color: "$purple",
-        fill: "$purple",
-      },
+    svg: {
+      color: "$purple",
+      fill: "$purple",
     },
   },
 
@@ -167,17 +178,19 @@ const StyledIIIFShareContent = styled(Dropdown.Content, {
     padding: "0 !important",
     fontWeight: "400",
     lineHeight: "inherit !important",
-    textDecoration: "underline",
-    textDecorationThickness: "min(2px,max(1px,.05em))",
-    textUnderlineOffset: "calc(.05em + 2px)",
-    textDecorationColor: "$purple10",
-    color: "$black50",
-
-    "&:hover": {
-      color: "$purple",
-      fill: "$purple",
-    },
+    textDecoration: "none",
+    color: "$purple",
   },
 });
 
+const StyledDropdownLabel = styled(Dropdown.Separator, {
+  fontSize: "$gr2 ",
+  color: "$black50",
+});
+
+const StyledDropdownSeparator = styled(Dropdown.Separator, {
+  height: "1px",
+  backgroundColor: "$gray6",
+});
+
 export default IIIFShare;
diff --git a/hooks/useCopyToClipboard.ts b/hooks/useCopyToClipboard.ts
@@ -1,18 +1,22 @@
-import { useCallback, useEffect, useState } from "react";
+import { MouseEvent, useCallback, useEffect, useState } from "react";
 
-export type CopyStatus = "copied" | "failed" | undefined;
+export type CopyStatus = "✔" | "✗" | undefined;
 
 export const useCopyToClipboard = (
   text: string,
-  notifyTimeout = 2500,
-): [CopyStatus, () => void] => {
+  notifyTimeout = 5000,
+): [CopyStatus, (event: MouseEvent) => void] => {
   const [copyStatus, setCopyStatus] = useState<CopyStatus>();
-  const copy = useCallback(() => {
-    navigator.clipboard.writeText(text).then(
-      () => setCopyStatus("copied"),
-      () => setCopyStatus("failed"),
-    );
-  }, [text]);
+  const copy = useCallback(
+    (event: MouseEvent) => {
+      event?.preventDefault();
+      navigator.clipboard.writeText(text).then(
+        () => setCopyStatus("✔"),
+        () => setCopyStatus("✗"),
+      );
+    },
+    [text],
+  );
 
   useEffect(() => {
     if (!copyStatus) {