Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Themes #202

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update information panel.
mathewjordan committed Jul 11, 2024
commit 0293625397f2bd66396955e79e2d3eaa37964612
103 changes: 5 additions & 98 deletions src/components/Viewer/InformationPanel/InformationPanel.styled.tsx
Original file line number Diff line number Diff line change
@@ -1,110 +1,17 @@
import React, { ReactNode } from "react";
import * as Tabs from "@radix-ui/react-tabs";
import { ScrollArea, Tabs } from "@radix-ui/themes";

import { styled } from "src/styles/stitches.config";

const Wrapper = styled(Tabs.Root, {
const StyledTabsRoot = styled(Tabs.Root, {
display: "flex",
flexDirection: "column",
width: "100%",
height: "100%",
flexGrow: "1",
flexShrink: "0",
position: "relative",
zIndex: "1",
maskImage: `linear-gradient(180deg, rgba(0, 0, 0, 1) calc(100% - 2rem), transparent 100%)`,

"@sm": {
marginTop: "0.5rem",
boxShadow: "none",
},
});

const List = styled(Tabs.List, {
display: "flex",
flexGrow: "0",
margin: "0 1.618rem",
borderBottom: "4px solid #6663",

"@sm": {
margin: "0 1rem",
},
});

const Trigger = styled(Tabs.Trigger, {
display: "flex",
position: "relative",
padding: "0.5rem 1rem",
background: "none",
backgroundColor: "transparent",
fontFamily: "inherit",
border: "none",
opacity: "0.7",
fontSize: "1rem",
marginRight: "1rem",
lineHeight: "1rem",
whiteSpace: "nowrap",
cursor: "pointer",
fontWeight: 400,
transition: "$all",

"&::after": {
width: "0",
height: "4px",
content: "",
position: "absolute",
bottom: "-4px",
left: "0",
transition: "$all",
},

"&[data-state='active']": {
opacity: "1",
fontWeight: 700,

"&::after": {
width: "100%",
backgroundColor: "$accent",
},
},
});

const Content = styled(Tabs.Content, {
display: "flex",
flexGrow: "1",
flexShrink: "0",
position: "absolute",
top: "0",
left: "0",

"&[data-state='active']": {
width: "100%",
height: "calc(100% - 2rem)",
padding: "1.618rem 0",
},
});

interface Scrollable {
handleScroll?: (e) => void;
children?: ReactNode;
className?: string;
}

const ScrollableComponent: React.FC<Scrollable> = ({
handleScroll,
children,
className,
}) => (
<div className={className} onScroll={handleScroll}>
{children}
</div>
);

const Scroll = styled(ScrollableComponent, {
position: "relative",
height: "100%",
width: "100%",
overflowY: "scroll",
const StyledScrollArea = styled(ScrollArea, {
flexGrow: 1,
});

export { Content, List, Scroll, Trigger, Wrapper };
export { StyledScrollArea, StyledTabsRoot };
176 changes: 66 additions & 110 deletions src/components/Viewer/InformationPanel/InformationPanel.tsx
Original file line number Diff line number Diff line change
@@ -21,7 +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";
import { StyledScrollArea, StyledTabsRoot } from "./InformationPanel.styled";

const UserScrollTimeout = 1500; // 1500ms without a user-generated scroll event reverts to auto-scrolling

@@ -142,117 +142,73 @@ export const InformationPanel: React.FC<NavigatorProps> = ({
};

return (
// <Wrapper
// data-testid="information-panel"
// defaultValue={activeResource}
// onValueChange={handleValueChange}
// orientation="horizontal"
// value={activeResource}
// className="clover-viewer-information-panel"
// >
// <List aria-label="select chapter" data-testid="information-panel-list">
// {renderAbout && <Trigger value="manifest-about">About</Trigger>}
// {renderContentSearch && contentSearchResource && (
// <Trigger value="manifest-content-search">
// <Label label={contentSearchResource.label as InternationalString} />
// </Trigger>
// )}
// {renderAnnotation &&
// annotationResources &&
// annotationResources.map((resource, i) => (
// <Trigger key={i} value={resource.id}>
// <Label label={resource.label as InternationalString} />
// </Trigger>
// ))}

// {pluginsWithInfoPanel &&
// pluginsWithInfoPanel.map((plugin, i) => (
// <Trigger key={i} value={plugin.id}>
// <Label
// label={plugin.informationPanel?.label as InternationalString}
// />
// </Trigger>
// ))}
// </List>
// <Scroll handleScroll={handleScroll}>
// {renderAbout && (
// <Content value="manifest-about">
// <Information />
// </Content>
// )}
// {renderContentSearch && contentSearchResource && (
// <Content value="manifest-content-search">
// <ContentSearch
// searchServiceUrl={searchServiceUrl}
// setContentSearchResource={setContentSearchResource}
// activeCanvas={activeCanvas}
// annotationPage={contentSearchResource}
// />
// </Content>
// )}
// {renderAnnotation &&
// annotationResources &&
// annotationResources.map((annotationPage) => (
// <Content key={annotationPage.id} value={annotationPage.id}>
// <AnnotationPage annotationPage={annotationPage} />
// </Content>
// ))}

// {pluginsWithInfoPanel &&
// pluginsWithInfoPanel.map((plugin, i) =>
// renderPluginInformationPanel(plugin, i),
// )}
// </Scroll>
// </Wrapper>
<Box style={{ width: "100%", height: "100%" }}>
<Tabs.Root
data-testid="information-panel"
defaultValue={activeResource}
onValueChange={handleValueChange}
orientation="horizontal"
value={activeResource}
className="clover-viewer-information-panel"
<StyledTabsRoot
data-testid="information-panel"
defaultValue={activeResource}
onValueChange={handleValueChange}
orientation="horizontal"
value={activeResource}
className="clover-viewer-information-panel"
>
<Tabs.List
aria-label="select chapter"
data-testid="information-panel-list"
>
<Tabs.List
aria-label="select chapter"
data-testid="information-panel-list"
>
{renderAbout && (
<Tabs.Trigger value="manifest-about">About</Tabs.Trigger>
{renderAbout && (
<Tabs.Trigger value="manifest-about">About</Tabs.Trigger>
)}
{renderContentSearch && contentSearchResource && (
<Tabs.Trigger value="manifest-content-search">
<Label label={contentSearchResource.label as InternationalString} />
</Tabs.Trigger>
)}
{renderAnnotation &&
annotationResources &&
annotationResources.map((resource, i) => (
<Tabs.Trigger key={i} value={resource.id}>
<Label label={resource.label as InternationalString} />
</Tabs.Trigger>
))}

{pluginsWithInfoPanel &&
pluginsWithInfoPanel.map((plugin, i) => (
<Tabs.Trigger key={i} value={plugin.id}>
<Label
label={plugin.informationPanel?.label as InternationalString}
/>
</Tabs.Trigger>
))}
</Tabs.List>
<StyledScrollArea>
{renderAbout && (
<Tabs.Content value="manifest-about">
<Information />
</Tabs.Content>
)}
{renderContentSearch && contentSearchResource && (
<Tabs.Content value="manifest-content-search">
<ContentSearch
searchServiceUrl={searchServiceUrl}
setContentSearchResource={setContentSearchResource}
activeCanvas={activeCanvas}
annotationPage={contentSearchResource}
/>
</Tabs.Content>
)}
{renderAnnotation &&
annotationResources &&
annotationResources.map((annotationPage) => (
<Tabs.Content key={annotationPage.id} value={annotationPage.id}>
<AnnotationPage annotationPage={annotationPage} />
</Tabs.Content>
))}

{pluginsWithInfoPanel &&
pluginsWithInfoPanel.map((plugin, i) =>
renderPluginInformationPanel(plugin, i),
)}

{renderAnnotation &&
annotationResources &&
annotationResources.map((resource, i) => (
<Tabs.Trigger key={i} value={resource.id}>
<Label label={resource.label as InternationalString} />
</Tabs.Trigger>
))}
</Tabs.List>
<ScrollArea style={{ height: "500px" }}>
<Scroll>
{renderAbout && (
<Tabs.Content value="manifest-about">
<Information />
</Tabs.Content>
)}

{renderAnnotation &&
annotationResources &&
annotationResources.map((annotationPage) => {
return (
<Tabs.Content
key={annotationPage.id}
value={annotationPage.id}
>
<AnnotationPage annotationPage={annotationPage} />
</Tabs.Content>
);
})}
</Scroll>
</ScrollArea>
</Tabs.Root>
</Box>
</StyledScrollArea>
</StyledTabsRoot>
);
};

53 changes: 21 additions & 32 deletions src/components/Viewer/Viewer/Content.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
import {
AnnotationPageNormalized,
Canvas,
IIIFExternalWebResource,
} from "@iiif/presentation-3";
import { AnnotationResource, AnnotationResources } from "src/types/annotations";
import {
Aside,
CollapsibleContent,
CollapsibleTrigger,
Content,
Main,
MediaWrapper,
} from "src/components/Viewer/Viewer/Viewer.styled";
import {
Canvas,
IIIFExternalWebResource,
AnnotationPageNormalized,
} from "@iiif/presentation-3";

import { AnnotationResources, AnnotationResource } from "src/types/annotations";
import InformationPanel from "src/components/Viewer/InformationPanel/InformationPanel";
import Media from "src/components/Viewer/Media/Media";
import Painting from "../Painting/Painting";
import Painting from "src/components/Viewer/Painting/Painting";
import React from "react";
import { useViewerState } from "src/context/viewer-context";

@@ -48,14 +46,13 @@ const ViewerContent: React.FC<ViewerContentProps> = ({
/**
* The information panel should be rendered if toggled true and if
* there is content (About or Supplementing Resources) to display.
* Alternatively, we may force it to render if annotations exist?
*/

const isAside = informationPanel?.renderAbout && isInformationOpen;

const isForcedAside =
informationPanel?.renderAnnotation &&
annotationResources.length > 0 &&
!informationPanel.open;
const isAside =
(informationPanel?.renderAbout && isInformationOpen) ||
(informationPanel?.renderAnnotation &&
annotationResources.length > 0 &&
!informationPanel.open);

return (
<Content
@@ -70,29 +67,21 @@ const ViewerContent: React.FC<ViewerContentProps> = ({
painting={painting}
/>

{isAside && (
<CollapsibleTrigger>
<span>{isInformationOpen ? "View Items" : "More Information"}</span>
</CollapsibleTrigger>
)}

{items.length > 1 && (
<MediaWrapper className="clover-viewer-media-wrapper">
<Media items={items} activeItem={0} />
</MediaWrapper>
)}
</Main>
{(isAside || isForcedAside) && (
{isAside && (
<Aside>
<CollapsibleContent>
<InformationPanel
activeCanvas={activeCanvas}
annotationResources={annotationResources}
searchServiceUrl={searchServiceUrl}
setContentSearchResource={setContentSearchResource}
contentSearchResource={contentSearchResource}
/>
</CollapsibleContent>
<InformationPanel
activeCanvas={activeCanvas}
annotationResources={annotationResources}
searchServiceUrl={searchServiceUrl}
setContentSearchResource={setContentSearchResource}
contentSearchResource={contentSearchResource}
/>
</Aside>
)}
</Content>
Loading