diff --git a/components/Shared/Dialog.styled.ts b/components/Shared/Dialog.styled.ts index f10e4c11..69c30622 100644 --- a/components/Shared/Dialog.styled.ts +++ b/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", diff --git a/components/Shared/IIIF/ContentState.styled.tsx b/components/Shared/IIIF/ContentState.styled.tsx new file mode 100644 index 00000000..1ab2048f --- /dev/null +++ b/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, +}; diff --git a/components/Shared/IIIF/ContentState.tsx b/components/Shared/IIIF/ContentState.tsx index 1806dc8f..f17bab80 100644 --- a/components/Shared/IIIF/ContentState.tsx +++ b/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 = ({ contentState, }) => { const [isOpen, setIsOpen] = useState(false); + const [isNote, setIsNote] = useState(false); + const [isCurrentFileset, setIsCurrentFileset] = useState(false); + const [note, setNote] = useState(""); + + const noteRef = useRef(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 = ({ uri.searchParams.set("iiif-content", encodeContentState(contentState)); const shareUrl = uri.toString(); + function handleIsCurrentFileSetChange( + event: React.ChangeEvent, + ) { + setIsCurrentFileset(event.target.checked); + } + + function handleIsNoteChange(event: React.ChangeEvent) { + setIsNote(event.target.checked); + } + return ( -
- + + + + {title} + - <> - - - + {work && ( + + + {work.title && work.thumbnail && ( + + )} + + + + Current Item + + + + + + + + + {isCurrentFileset ? ( + ["Video", "Audio"].includes(activeCanvasResourceType) ? ( + + ) : ( + + ) + ) : null} + + + */} + + + )} -
+ ); }; diff --git a/components/Shared/IIIF/ShareIcon.tsx b/components/Shared/IIIF/ShareIcon.tsx new file mode 100644 index 00000000..34df3a9a --- /dev/null +++ b/components/Shared/IIIF/ShareIcon.tsx @@ -0,0 +1,9 @@ +const ShareIcon = () => { + return ( + + + + ); +}; + +export default ShareIcon; diff --git a/components/Work/ActionsDialog/ActionsDialog.styled.ts b/components/Work/ActionsDialog/ActionsDialog.styled.ts index 127ed356..d004b96c 100644 --- a/components/Work/ActionsDialog/ActionsDialog.styled.ts +++ b/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", diff --git a/components/Work/ActionsDialog/Aside.tsx b/components/Work/ActionsDialog/Aside.tsx index c171b80f..d61e95f2 100644 --- a/components/Work/ActionsDialog/Aside.tsx +++ b/components/Work/ActionsDialog/Aside.tsx @@ -4,10 +4,12 @@ import { useWorkState } from "@/context/work-context"; interface ActionsDialogAsideProps { children?: React.ReactNode | React.ReactNode[]; + dialogSize?: "small" | undefined; } const ActionsDialogAside: React.FC = ({ children, + dialogSize, }) => { const { workState } = useWorkState(); const { work } = workState; @@ -15,7 +17,10 @@ const ActionsDialogAside: React.FC = ({ const WorkType = () => <>{work?.work_type}; return ( - + {work && (