diff --git a/package.json b/package.json index 75c8451ab..18c575907 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", + "@radix-ui/themes": "^3.0.2", "@stitches/react": "^1.2.8", "flexsearch": "^0.7.43", "hls.js": "^1.5.3", diff --git a/pages/docs/image.mdx b/pages/docs/image.mdx index f738e3f76..f23585ac6 100644 --- a/pages/docs/image.mdx +++ b/pages/docs/image.mdx @@ -14,7 +14,12 @@ A UI component that renders a _pan and deep-zoom_ Image viewer using [OpenSeadra -
+
=16.0.0} diff --git a/src/components/Image/Controls/Button.styled.tsx b/src/components/Image/Controls/Button.styled.tsx index 78309947e..22f3f16e9 100644 --- a/src/components/Image/Controls/Button.styled.tsx +++ b/src/components/Image/Controls/Button.styled.tsx @@ -1,49 +1,18 @@ +import { IconButton } from "@radix-ui/themes"; import { styled } from "src/styles/stitches.config"; -const Item = styled("button", { - display: "flex", - height: "2rem", - width: "2rem", - borderRadius: "2rem", - padding: "0", - margin: "0", - fontFamily: "inherit", - background: "none", - backgroundColor: "$primary", - border: "none", - color: "white", +const Item = styled(IconButton, { cursor: "pointer", - marginLeft: "0.618rem", - filter: "drop-shadow(2px 2px 5px #0003)", - transition: "$all", - boxSizing: "content-box !important", - - "&:first-child": { - marginLeft: "0", - }, - - "@xs": { - marginBottom: "0.618rem", - marginLeft: "0", - - "&:last-child": { - marginBottom: "0", - }, - }, + alignContent: "center", + display: "inline-flex !important", svg: { + color: "currentColor", + fill: "currentColor", + stroke: "currentColor", + transition: "$all", height: "60%", width: "60%", - padding: "20%", - fill: "$secondary", - stroke: "$secondary", - filter: "drop-shadow(2px 2px 5px #0003)", - transition: "$all", - boxSizing: "inherit", - }, - - "&:hover, &:focus": { - backgroundColor: "$accent", }, "&[data-button=rotate-right]": { diff --git a/src/components/Image/Controls/Button.tsx b/src/components/Image/Controls/Button.tsx index 9d150fed6..254bc3eea 100644 --- a/src/components/Image/Controls/Button.tsx +++ b/src/components/Image/Controls/Button.tsx @@ -16,6 +16,7 @@ const Button: React.FC = ({ className, id, label, children }) => { className={className} data-testid="openseadragon-button" data-button={dataButton} + size="2" > = ({ className, id, label, children }) => { data-testid="openseadragon-button-svg" focusable="false" viewBox="0 0 512 512" - role="img" > {label} {children} diff --git a/src/components/Image/Controls/Controls.styled.tsx b/src/components/Image/Controls/Controls.styled.tsx index 1ca007601..3215204bd 100644 --- a/src/components/Image/Controls/Controls.styled.tsx +++ b/src/components/Image/Controls/Controls.styled.tsx @@ -1,11 +1,11 @@ +import { Flex } from "@radix-ui/themes"; import { styled } from "src/styles/stitches.config"; -const Wrapper = styled("div", { +const Wrapper = styled(Flex, { position: "absolute", zIndex: "1", top: "1rem", right: "1rem", - display: "flex", "@xs": { flexDirection: "column", diff --git a/src/components/Image/Controls/Controls.tsx b/src/components/Image/Controls/Controls.tsx index 171c711fa..c77442488 100644 --- a/src/components/Image/Controls/Controls.tsx +++ b/src/components/Image/Controls/Controls.tsx @@ -102,6 +102,7 @@ const Controls = ({ {config.showZoomControl && ( <> diff --git a/src/components/Image/Image.styled.tsx b/src/components/Image/Image.styled.tsx index 61bc98955..0f892edf1 100644 --- a/src/components/Image/Image.styled.tsx +++ b/src/components/Image/Image.styled.tsx @@ -8,12 +8,11 @@ const Navigator = styled("div", { width: "161.8px", height: "100px", backgroundColor: "#000D", - boxShadow: "5px 5px 5px #0002", - borderRadius: "3px", + boxShadow: "var(--shadow-3)", ".displayregion": { - border: " 3px solid $accent !important", - boxShadow: "0 0 3px #0006", + border: " 2px solid var(--accent-10) !important", + boxShadow: "var(--shadow-3)", }, "@sm": { @@ -28,16 +27,14 @@ const Navigator = styled("div", { }); const Viewport = styled("div", { - position: "relative", + position: "absolute", width: "100%", height: "100%", zIndex: "0", }); const Wrapper = styled("div", { - width: "100%", - height: "100%", - maxHeight: "100vh", + objectFit: "cover", background: "transparent", backgroundSize: "contain", color: "white", diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx index bb74e5213..7879b918a 100644 --- a/src/components/Image/index.tsx +++ b/src/components/Image/index.tsx @@ -1,3 +1,5 @@ +import "@radix-ui/themes/styles.css"; + import { parseImageBody, parseSrc } from "src/lib/openseadragon-helpers"; import { ErrorBoundary } from "react-error-boundary"; @@ -7,6 +9,7 @@ import { LabeledIIIFExternalWebResource } from "src/types/presentation-3"; import OSD from "src/components/Image/OSD/OSD"; import { Options } from "openseadragon"; import React from "react"; +import { Theme } from "@radix-ui/themes"; import defaultOpenSeadragonConfig from "src/components/Image/OSD/defaults"; import { getLabelAsString } from "src/lib/label-helpers"; import { v4 as uuidv4 } from "uuid"; @@ -47,15 +50,17 @@ const CloverImage: React.FC = ({ return ( - + + + ); }; diff --git a/src/components/Primitives/Markup/Markup.tsx b/src/components/Primitives/Markup/Markup.tsx index a8e7637a0..a5cc0e989 100644 --- a/src/components/Primitives/Markup/Markup.tsx +++ b/src/components/Primitives/Markup/Markup.tsx @@ -7,10 +7,11 @@ import { createMarkup, sanitizeAttributes } from "src/lib/html-element"; import { PrimitivesMarkup } from "src/types/primitives"; import React from "react"; +import { Text } from "@radix-ui/themes"; import { getLabelAsString } from "src/lib/label-helpers"; import { styled } from "src/styles/stitches.config"; -const StyledMarkup = styled("span", {}); +const StyledMarkup = styled(Text, {}); const Markup: React.FC = (props) => { const { as, markup } = props; diff --git a/src/components/Primitives/Metadata/Item.tsx b/src/components/Primitives/Metadata/Item.tsx index bb0e6e993..08d3d5727 100644 --- a/src/components/Primitives/Metadata/Item.tsx +++ b/src/components/Primitives/Metadata/Item.tsx @@ -1,8 +1,9 @@ -import React from "react"; +import CustomValue from "../Value/CustomValue"; +import { DataList } from "@radix-ui/themes"; import Label from "../Label/Label"; -import Value from "../Value/Value"; import { PrimitivesMetadataItem } from "src/types/primitives"; -import CustomValue from "../Value/CustomValue"; +import React from "react"; +import Value from "../Value/Value"; import { getLabelAsString } from "src/lib/label-helpers"; const MetadataItem: React.FC = (props) => { @@ -17,11 +18,11 @@ const MetadataItem: React.FC = (props) => { .toLowerCase(); return ( -
-
+ ); }; diff --git a/src/components/Primitives/Metadata/Metadata.tsx b/src/components/Primitives/Metadata/Metadata.tsx index bc662c7eb..142b37c4f 100644 --- a/src/components/Primitives/Metadata/Metadata.tsx +++ b/src/components/Primitives/Metadata/Metadata.tsx @@ -1,3 +1,4 @@ +import { DataList } from "@radix-ui/themes"; import MetadataItem from "src/components/Primitives/Metadata/Item"; import { PrimitivesMetadata } from "src/types/primitives"; import { PrimitivesProvider } from "src/context/primitives-context"; @@ -34,7 +35,7 @@ const Metadata: React.FC = (props) => { : undefined)} > {metadata.length > 0 && ( - + {metadata.map((item, index) => { const customValue = customValueContent ? parseCustomContent(item.label, customValueContent) @@ -49,7 +50,7 @@ const Metadata: React.FC = (props) => { /> ); })} - + )} ); diff --git a/src/components/Primitives/RequiredStatement/RequiredStatement.tsx b/src/components/Primitives/RequiredStatement/RequiredStatement.tsx index 4f5a5b7fc..2c80f41e6 100644 --- a/src/components/Primitives/RequiredStatement/RequiredStatement.tsx +++ b/src/components/Primitives/RequiredStatement/RequiredStatement.tsx @@ -1,3 +1,4 @@ +import { DataList } from "@radix-ui/themes"; import MetadataItem from "src/components/Primitives/Metadata/Item"; import { PrimitivesProvider } from "src/context/primitives-context"; import { PrimitivesRequiredStatement } from "src/types/primitives"; @@ -6,7 +7,7 @@ import { getRealPropertyValue } from "src/lib/utils"; import { sanitizeAttributes } from "src/lib/html-element"; import { styled } from "src/styles/stitches.config"; -const StyledRequiredStatement = styled("dl", {}); +const StyledRequiredStatement = styled(DataList.Root, {}); const RequiredStatement: React.FC = (props) => { const { as, requiredStatement } = props; @@ -27,7 +28,7 @@ const RequiredStatement: React.FC = (props) => { ? { initialState: { delimiter: delimiter as string } } : undefined)} > - + diff --git a/src/components/Primitives/Value/CustomValue.tsx b/src/components/Primitives/Value/CustomValue.tsx index fcaf016d4..a47bdd5ac 100644 --- a/src/components/Primitives/Value/CustomValue.tsx +++ b/src/components/Primitives/Value/CustomValue.tsx @@ -1,11 +1,12 @@ import React, { Fragment, cloneElement } from "react"; +import { DataList } from "@radix-ui/themes"; import { PrimitivesCustomValue } from "src/types/primitives"; import { getLabelEntries } from "src/lib/label-helpers"; import { styled } from "src/styles/stitches.config"; import { usePrimitivesContext } from "src/context/primitives-context"; -const StyledCustomValue = styled("span", {}); +const StyledCustomValue = styled(DataList.Value, {}); const CustomValue: React.FC = ({ as = "dd", diff --git a/src/components/Primitives/Value/Value.tsx b/src/components/Primitives/Value/Value.tsx index 39918f9c7..e15e6e07d 100644 --- a/src/components/Primitives/Value/Value.tsx +++ b/src/components/Primitives/Value/Value.tsx @@ -1,6 +1,6 @@ -import React from "react"; -import { PrimitivesValue } from "src/types/primitives"; import Markup from "src/components/Primitives/Markup/Markup"; +import { PrimitivesValue } from "src/types/primitives"; +import React from "react"; const Value: React.FC = ({ as = "dd", lang, value }) => ( diff --git a/src/components/UI/Tag/Tag.tsx b/src/components/UI/Tag/Tag.tsx index 3ac423a4a..d81e52cba 100644 --- a/src/components/UI/Tag/Tag.tsx +++ b/src/components/UI/Tag/Tag.tsx @@ -8,7 +8,6 @@ export const Tag = styled("div", { // Custom display: "inline-flex", alignItems: "center", - borderRadius: "5px", padding: "$1", marginBottom: "$2", marginRight: "$2", diff --git a/src/components/Viewer/InformationPanel/InformationPanel.tsx b/src/components/Viewer/InformationPanel/InformationPanel.tsx index c4c675f79..dc1071cca 100644 --- a/src/components/Viewer/InformationPanel/InformationPanel.tsx +++ b/src/components/Viewer/InformationPanel/InformationPanel.tsx @@ -1,10 +1,4 @@ -import { - Content, - List, - Scroll, - Trigger, - Wrapper, -} from "src/components/Viewer/InformationPanel/InformationPanel.styled"; +import { Box, Flex, ScrollArea, Tabs } from "@radix-ui/themes"; import React, { useEffect, useState } from "react"; import { ViewerContextStore, @@ -27,6 +21,7 @@ import { setupPlugins } from "src/lib/plugin-helpers"; import ErrorFallback from "src/components/UI/ErrorFallback/ErrorFallback"; import { ErrorBoundary } from "react-error-boundary"; +import { Scroll } from "./InformationPanel.styled"; const UserScrollTimeout = 1500; // 1500ms without a user-generated scroll event reverts to auto-scrolling @@ -147,68 +142,117 @@ export const InformationPanel: React.FC = ({ }; return ( - - - {renderAbout && About} - {renderContentSearch && contentSearchResource && ( - - - )} - {renderAnnotation && - annotationResources && - annotationResources.map((resource, i) => ( - - - ))} - - {pluginsWithInfoPanel && - pluginsWithInfoPanel.map((plugin, i) => ( - - - ))} - - - {renderAbout && ( - - - - )} - {renderContentSearch && contentSearchResource && ( - - - - )} - {renderAnnotation && - annotationResources && - annotationResources.map((annotationPage) => ( - - - - ))} - - {pluginsWithInfoPanel && - pluginsWithInfoPanel.map((plugin, i) => - renderPluginInformationPanel(plugin, i), + // + // + // {renderAbout && About} + // {renderContentSearch && contentSearchResource && ( + // + // + // )} + // {renderAnnotation && + // annotationResources && + // annotationResources.map((resource, i) => ( + // + // + // ))} + + // {pluginsWithInfoPanel && + // pluginsWithInfoPanel.map((plugin, i) => ( + // + // + // ))} + // + // + // {renderAbout && ( + // + // + // + // )} + // {renderContentSearch && contentSearchResource && ( + // + // + // + // )} + // {renderAnnotation && + // annotationResources && + // annotationResources.map((annotationPage) => ( + // + // + // + // ))} + + // {pluginsWithInfoPanel && + // pluginsWithInfoPanel.map((plugin, i) => + // renderPluginInformationPanel(plugin, i), + // )} + // + // + + + + {renderAbout && ( + About )} - - + + {renderAnnotation && + annotationResources && + annotationResources.map((resource, i) => ( + + + ))} + + + + {renderAbout && ( + + + + )} + + {renderAnnotation && + annotationResources && + annotationResources.map((annotationPage) => { + return ( + + + + ); + })} + + + + ); }; diff --git a/src/components/Viewer/Media/Controls.styled.tsx b/src/components/Viewer/Media/Controls.styled.tsx index f88d8b9f4..a8434027d 100644 --- a/src/components/Viewer/Media/Controls.styled.tsx +++ b/src/components/Viewer/Media/Controls.styled.tsx @@ -1,82 +1,36 @@ +import { Flex, IconButton, TextField } from "@radix-ui/themes"; + import { styled } from "src/styles/stitches.config"; -const Form = styled("div", { +const Form = styled(Flex, { position: "absolute", right: "1rem", top: "1rem", - display: "flex", - justifyContent: "flex-end", zIndex: "1", }); -const Input = styled("input", { - flexGrow: "1", - border: "none", - backgroundColor: "$secondaryMuted", - color: "$primary", - marginRight: "1rem", - height: "2rem", - padding: "0 1rem", - borderRadius: "2rem", - fontFamily: "inherit", - fontSize: "1rem", - lineHeight: "1rem", - boxShadow: "inset 1px 1px 2px #0003", - - "&::placeholder": { - color: "$primaryMuted", - }, +const Input = styled(TextField.Root, { + width: "100%", }); -const Button = styled("button", { - display: "flex", - background: "none", - border: "none", - width: "2rem !important", - height: "2rem !important", - padding: "0", - margin: "0", - fontWeight: "700", - borderRadius: "2rem", - backgroundColor: "$accent", - color: "$secondary", +const Button = styled(IconButton, { cursor: "pointer", - boxSizing: "content-box !important", - transition: "$all", svg: { + color: "currentColor", + fill: "currentColor", + stroke: "currentColor", + transition: "$all", height: "60%", width: "60%", - padding: "20%", - fill: "$secondary", - stroke: "$secondary", - opacity: "1", - filter: "drop-shadow(5px 5px 5px #000D)", - boxSizing: "inherit", - transition: "$all", - }, - - "&:disabled": { - backgroundColor: "transparent", - boxShadow: "none", - svg: { opacity: "0.25" }, }, }); -const Direction = styled("div", { - display: "flex", - marginRight: "0.618rem", - backgroundColor: "$accentAlt", - borderRadius: "2rem", - boxShadow: "5px 5px 5px #0003", - color: "$secondary", - alignItems: "center", - - "> span": { - display: "flex", - margin: "0 0.5rem", - fontSize: "0.7222rem", - }, +const Direction = styled(Flex, { + marginRight: "var(--space-3)", + backgroundColor: "var(--gray-4)", + borderRadius: "var(--radius-6)", + boxShadow: "var(--shadow-3)", }); const Wrapper = styled("div", { diff --git a/src/components/Viewer/Media/Controls.tsx b/src/components/Viewer/Media/Controls.tsx index cb8ad4631..c0b9f1e96 100644 --- a/src/components/Viewer/Media/Controls.tsx +++ b/src/components/Viewer/Media/Controls.tsx @@ -7,6 +7,7 @@ import { } from "src/components/Viewer/Media/Controls.styled"; import React, { useEffect, useState } from "react"; +import { Text } from "@radix-ui/themes"; import useKeyPress from "src/hooks/useKeyPress"; interface Props { @@ -110,12 +111,12 @@ const Controls: React.FC = ({ return ( -
+ {toggleFilter && ( )} {!toggleFilter && ( - + - + {activeIndex + 1} of {canvasLength} - +