Refine dialog styling and options.

components/Shared/Dialog.styled.ts

@@ -29,7 +29,7 @@ const DialogBody = styled("div", {
   maxHeight: "calc(100% - 3.5rem)",
   minHeight: "calc(100% - 3.5rem)",
   overflow: "scroll",
-  padding: "$gr3",
+  padding: "0 $gr3 $gr3",
 
   "&:before": {
     position: "absolute",

components/Shared/IIIF/ContentState.styled.tsx

@@ -0,0 +1,111 @@
+import { color } from "framer-motion";
+import { styled } from "@/stitches.config";
+
+const StyledIIIFContentState = styled("div", {
+  marginRight: "$gr3",
+});
+
+const StyledIIIFContentStateButton = styled("button", {
+  background: "transparent",
+  border: "none",
+  display: "flex",
+  fontFamily: "$northwesternSansRegular",
+  fontSize: "$gr3",
+  color: "$black50",
+  gap: "$gr2",
+  height: "$gr4",
+  alignItems: "center",
+  borderRadius: "1em",
+  padding: "0 $gr2",
+
+  "&:hover, &:active": {
+    backgroundColor: "$purple10",
+    color: "$purple",
+    cursor: "pointer",
+  },
+
+  svg: {
+    fill: "$purple",
+    height: "$gr3",
+  },
+});
+
+const StyledIIIFContentStateURI = styled("div", {
+  background: "$gray6",
+  borderRadius: "1em",
+  padding: "$gr2",
+  paddingRight: "$gr3",
+  marginBottom: "$gr2",
+  width: "100%",
+  display: "flex",
+  justifyContent: "space-between",
+
+  input: {
+    background: "transparent",
+    border: "none",
+    flexGrow: 1,
+    fontFamily: "$northwesternSansRegular",
+    fontSize: "$gr2",
+    paddingRight: "$gr2",
+    color: "$black50",
+    maskImage:
+      "linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0))",
+  },
+
+  button: {
+    fontFamily: "$northwesternSansBold",
+    fontSize: "$gr2",
+    fontWeight: "400",
+  },
+});
+
+const StyledIIIFContentStateOptions = styled("div", {
+  fontSize: "$gr3",
+  display: "flex",
+  flexDirection: "column",
+  gap: "$gr1",
+  padding: "$gr1 $gr2",
+
+  label: {
+    display: "inline-flex",
+    fontSize: "$gr2",
+    gap: "$gr1",
+    alignItems: "center",
+
+    em: {
+      color: "$black50",
+      fontStyle: "normal",
+      fontFamily: "$northwesternSansBold",
+    },
+  },
+
+  textarea: {
+    height: "$gr6 !important",
+    border: "1px solid $black20",
+    padding: "$gr2",
+    borderRadius: "3px",
+  },
+});
+
+const StyledIIIFContentStateActiveFile = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  fontFamily: "$northwesternSansBold",
+
+  em: {
+    marginRight: "$gr1",
+  },
+});
+
+const StyledIIIFContentStateInner = styled("div", {
+  flexGrow: 1,
+});
+
+export {
+  StyledIIIFContentState,
+  StyledIIIFContentStateActiveFile,
+  StyledIIIFContentStateButton,
+  StyledIIIFContentStateInner,
+  StyledIIIFContentStateOptions,
+  StyledIIIFContentStateURI,
+};

components/Shared/IIIF/ContentState.tsx

@@ -1,7 +1,26 @@
+import {
+  StyledIIIFContentState,
+  StyledIIIFContentStateActiveFile,
+  StyledIIIFContentStateButton,
+  StyledIIIFContentStateInner,
+  StyledIIIFContentStateOptions,
+  StyledIIIFContentStateURI,
+} from "./ContentState.styled";
+import { useRef, useState } from "react";
+
+import ActionsDialogAside from "@/components/Work/ActionsDialog/Aside";
+import { ActionsDialogStyled } from "@/components/Work/ActionsDialog/ActionsDialog.styled";
+import { Button } from "@nulib/design-system";
 import CopyText from "@/components/Shared/CopyText";
+import Heading from "@/components/Heading/Heading";
+import Image from "next/image";
+import { Label } from "@samvera/clover-iiif/primitives";
+import ShareIcon from "./ShareIcon";
 import SharedDialog from "@/components/Shared/Dialog";
+import SharedSocial from "../Social";
 import { encodeContentState } from "@iiif/helpers";
-import { useState } from "react";
+import { rem } from "@/styles/global";
+import { useWorkState } from "@/context/work-context";
 
 interface IIIFContentStateProps {
   contentState: any;
@@ -11,8 +30,32 @@ const IIIFContentState: React.FC<IIIFContentStateProps> = ({
   contentState,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [isNote, setIsNote] = useState(false);
+  const [isCurrentFileset, setIsCurrentFileset] = useState(false);
+  const [note, setNote] = useState("");
+
+  const noteRef = useRef<HTMLTextAreaElement>(null);
+
+  const {
+    workState: { manifest, work },
+  } = useWorkState();
+
+  const activeCanvasId = JSON.parse(contentState)?.target?.id;
+  const activeCanvas = manifest?.items?.find(
+    (item) => item.id === activeCanvasId,
+  );
+  const activeCanvasThumbnail = activeCanvas?.thumbnail?.[0]?.id;
+
+  const canvasCount = manifest?.items?.length;
+  const canvasIndex =
+    Number(manifest?.items?.findIndex((item) => item.id === activeCanvasId)) +
+    1;
+
+  const activeCanvasResourceType =
+    // @ts-ignore
+    activeCanvas?.items?.[0]?.items?.[0]?.body?.type;
 
-  const title = "Demo Content State";
+  const title = "Share";
 
   function handleClick() {
     setIsOpen(true);
@@ -26,21 +69,115 @@ const IIIFContentState: React.FC<IIIFContentStateProps> = ({
   uri.searchParams.set("iiif-content", encodeContentState(contentState));
   const shareUrl = uri.toString();
 
+  function handleIsCurrentFileSetChange(
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) {
+    setIsCurrentFileset(event.target.checked);
+  }
+
+  function handleIsNoteChange(event: React.ChangeEvent<HTMLInputElement>) {
+    setIsNote(event.target.checked);
+  }
+
   return (
-    <div>
-      <button onClick={handleClick}>{title}</button>
+    <StyledIIIFContentState>
+      <StyledIIIFContentStateButton onClick={handleClick}>
+        <ShareIcon />
+        <span>{title}</span>
+      </StyledIIIFContentStateButton>
       <SharedDialog
         title={title}
         handleCloseClick={close}
         isOpen={isOpen}
         size="small"
       >
-        <>
-          <textarea style={{ width: "100%" }}>{contentState}</textarea>
-          <CopyText textPrompt="Share Current State" textToCopy={shareUrl} />
-        </>
+        {work && (
+          <ActionsDialogStyled>
+            <ActionsDialogAside>
+              {work.title && work.thumbnail && (
+                <SharedSocial
+                  title={work.title}
+                  media={work.thumbnail}
+                  description={work.description}
+                />
+              )}
+            </ActionsDialogAside>
+            <StyledIIIFContentStateInner>
+              <Heading
+                as="h3"
+                css={{ margin: "0", fontSize: "1em !important" }}
+              >
+                Current Item
+              </Heading>
+              <StyledIIIFContentStateURI>
+                <input value={shareUrl} />
+                <CopyText textPrompt="Copy" textToCopy={shareUrl} />
+              </StyledIIIFContentStateURI>
+              <StyledIIIFContentStateOptions>
+                <label>
+                  <input
+                    type="checkbox"
+                    onChange={handleIsCurrentFileSetChange}
+                  />
+                  <span>Share active file</span>
+                  <StyledIIIFContentStateActiveFile>
+                    <em>
+                      {canvasIndex} of {canvasCount}
+                    </em>
+                    <Image
+                      alt="Thumbnail of the active canvas"
+                      width={rem}
+                      height={rem}
+                      src={activeCanvasThumbnail as string}
+                      style={{
+                        objectFit: "cover",
+                        borderRadius: "3px",
+                        marginLeft: "0.5em",
+                        marginRight: "0.5em",
+                        marginTop: "-2px",
+                      }}
+                    />
+                    <Label label={activeCanvas?.label} />
+                  </StyledIIIFContentStateActiveFile>
+                </label>
+
+                {isCurrentFileset ? (
+                  ["Video", "Audio"].includes(activeCanvasResourceType) ? (
+                    <label>
+                      <input type="checkbox" />
+                      <span>
+                        Start at <em>5:39</em>
+                      </span>
+                    </label>
+                  ) : (
+                    <label>
+                      <input type="checkbox" />
+                      <span>Share zoom level</span>
+                    </label>
+                  )
+                ) : null}
+
+                <label>
+                  <input type="checkbox" onChange={handleIsNoteChange} />
+                  <span>Add note</span>
+                </label>
+                <textarea
+                  ref={noteRef}
+                  style={{ display: isNote ? "block" : "none" }}
+                />
+
+                <div style={{ marginTop: "1em", fontSize: "100% !important" }}>
+                  <Button isPrimary isLowercase>
+                    Copy Share URL
+                  </Button>
+                </div>
+              </StyledIIIFContentStateOptions>
+              {/* <textarea style={{ width: "100%" }}>{contentState}</textarea> */}
+            </StyledIIIFContentStateInner>
+          </ActionsDialogStyled>
+        )}
       </SharedDialog>
-    </div>
+    </StyledIIIFContentState>
   );
 };
 

components/Shared/IIIF/ShareIcon.tsx

@@ -0,0 +1,9 @@
+const ShareIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path d="M58.79 439.13A16 16 0 0148 424c0-73.1 14.68-131.56 43.65-173.77 35-51 90.21-78.46 164.35-81.87V88a16 16 0 0127.05-11.57l176 168a16 16 0 010 23.14l-176 168A16 16 0 01256 424v-79.77c-45 1.36-79 8.65-106.07 22.64-29.25 15.12-50.46 37.71-73.32 67a16 16 0 01-17.82 5.28z" />
+    </svg>
+  );
+};
+
+export default ShareIcon;

components/Work/ActionsDialog/ActionsDialog.styled.ts

@@ -4,24 +4,28 @@ import { styled } from "@/stitches.config";
 
 const ActionsDialogAsideStyled = styled("aside", {
   width: "25%",
-  padding: "0 2rem 0 0 ",
+
+  variants: {
+    dialogSize: {
+      small: {
+        width: "33.33%",
+      },
+    },
+  },
 
   "@sm": {
     width: "100%",
-    paddingRight: "0",
   },
 });
 
 const Content = styled("div", {
-  width: "75%",
-
-  "@sm": {
-    width: "100%",
-  },
+  flexGrow: 1,
 });
 
 const ActionsDialogStyled = styled("section", {
   display: "flex",
+  gap: "$gr4",
+  width: "100%",
 
   "@sm": {
     flexDirection: "column",

components/Work/ActionsDialog/Aside.tsx

@@ -4,18 +4,23 @@ import { useWorkState } from "@/context/work-context";
 
 interface ActionsDialogAsideProps {
   children?: React.ReactNode | React.ReactNode[];
+  dialogSize?: "small" | undefined;
 }
 
 const ActionsDialogAside: React.FC<ActionsDialogAsideProps> = ({
   children,
+  dialogSize,
 }) => {
   const { workState } = useWorkState();
   const { work } = workState;
 
   const WorkType = () => <>{work?.work_type}</>;
 
   return (
-    <ActionsDialogAsideStyled data-testid="actions-dialog-aside">
+    <ActionsDialogAsideStyled
+      dialogSize={dialogSize}
+      data-testid="actions-dialog-aside"
+    >
       {work && (
         <Card
           title={work.title || ""}

next.config.js

@@ -53,6 +53,7 @@ module.exports = withBundleAnalyzer({
       "dcapi.rdc-staging.library.northwestern.edu",
       "iiif.dc.library.northwestern.edu",
       "iiif.dc.library.northwestern.edu",
+      "iiif.stack.rdc-staging.library.northwestern.edu",
       "api.dc.library.northwestern.edu",
     ],
   },