Merge pull request #3852 from nyatinte/feat/resizable-notebook

Added resize functionality to notebooks of Article and PDF
omnivore-app · Apr 23, 2024 · 6db838c · 6db838c
2 parents fc80d1c + 3c765c9
commit 6db838c
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 146 deletions.
diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -26,13 +26,12 @@ import { isTouchScreenDevice } from '../../../lib/deviceType'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
 import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { SetHighlightLabelsModalPresenter } from './SetLabelsModalPresenter'
-import SlidingPane from 'react-sliding-pane'
 import 'react-sliding-pane/dist/react-sliding-pane.css'
 import { NotebookContent } from './Notebook'
 import { NotebookHeader } from './NotebookHeader'
 import useGetWindowDimensions from '../../../lib/hooks/useGetWindowDimensions'
 import { ConfirmationModal } from '../../patterns/ConfirmationModal'
-import { Resizable } from 're-resizable'
+import { ResizableSidebar } from './ResizableSidebar'
 
 type HighlightsLayerProps = {
  viewer: UserBasicData
@@ -81,15 +80,13 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
  const focusedHighlightMousePos = useRef({ pageX: 0, pageY: 0 })
 
  const [currentHighlightIdx, setCurrentHighlightIdx] = useState(0)
- const [focusedHighlight, setFocusedHighlight] = useState<
- Highlight | undefined
- >(undefined)
+ const [focusedHighlight, setFocusedHighlight] =
+ useState<Highlight | undefined>(undefined)
 
  const [selectionData, setSelectionData] = useSelection(highlightLocations)
 
- const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
- undefined
- )
+ const [labelsTarget, setLabelsTarget] =
+ useState<Highlight | undefined>(undefined)
 
  const [
  confirmDeleteHighlightWithNoteId,
@@ -577,7 +574,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
  selectionData,
  setSelectionData,
  updateHighlightColor,
- confirmDeleteHighlightWithNoteId,
  ]
  )
 
@@ -848,72 +844,41 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
  />
  </>
  )}
- <SlidingPane
- className="sliding-pane-class"
- isOpen={props.showHighlightsModal}
- width="fit-content"
- hideHeader={true}
- from="right"
- overlayClassName="slide-panel-overlay"
- onRequestClose={() => {
+ <ResizableSidebar
+ isShow={props.showHighlightsModal}
+ onClose={() => {
  props.setShowHighlightsModal(false)
  }}
  >
- <Resizable
- onResize={(_e, _direction, ref) => {
- if (parseInt(ref.style.width) < 210) {
- props.setShowHighlightsModal(false)
- }
- }}
- defaultSize={{
- width: windowDimensions.width < 600 ? '100%' : '420px',
- height: '100%',
- }}
- enable={
- windowDimensions.width < 600
- ? false
- : {
- top: false,
- right: false,
- bottom: false,
- left: true,
- topRight: false,
- bottomRight: false,
- bottomLeft: false,
- topLeft: false,
- }
- }
- >
- <NotebookHeader
- viewer={props.viewer}
- item={props.item}
- setShowNotebook={props.setShowHighlightsModal}
- />
- <NotebookContent
- viewer={props.viewer}
- item={props.item}
- // highlights={highlights}
- // onClose={handleCloseNotebook}
- viewInReader={(highlightId) => {
- // The timeout here is a bit of a hack to work around rerendering
- setTimeout(() => {
- const target = document.querySelector(
- `[omnivore-highlight-id="${highlightId}"]`
- )
- target?.scrollIntoView({
- block: 'center',
- behavior: 'auto',
- })
- }, 1)
- history.replaceState(
- undefined,
- window.location.href,
- `#${highlightId}`
+ <NotebookHeader
+ viewer={props.viewer}
+ item={props.item}
+ setShowNotebook={props.setShowHighlightsModal}
+ />
+ <NotebookContent
+ viewer={props.viewer}
+ item={props.item}
+ // highlights={highlights}
+ // onClose={handleCloseNotebook}
+ viewInReader={(highlightId) => {
+ // The timeout here is a bit of a hack to work around rerendering
+ setTimeout(() => {
+ const target = document.querySelector(
+ `[omnivore-highlight-id="${highlightId}"]`
  )
- }}
- />
- </Resizable>
- </SlidingPane>
+ target?.scrollIntoView({
+ block: 'center',
+ behavior: 'auto',
+ })
+ }, 1)
+ history.replaceState(
+ undefined,
+ window.location.href,
+ `#${highlightId}`
+ )
+ }}
+ />
+ </ResizableSidebar>
  </>
  )
 }
diff --git a/packages/web/components/templates/article/NotebookPresenter.tsx b/packages/web/components/templates/article/NotebookPresenter.tsx
@@ -1,12 +1,11 @@
 import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
-import SlidingPane from 'react-sliding-pane'
 import 'react-sliding-pane/dist/react-sliding-pane.css'
 import { NotebookContent } from './Notebook'
 import { NotebookHeader } from './NotebookHeader'
-import useGetWindowDimensions from '../../../lib/hooks/useGetWindowDimensions'
 import { useRouter } from 'next/router'
 import { showErrorToast } from '../../../lib/toastHelpers'
+import { ResizableSidebar } from './ResizableSidebar'
 
 type NotebookPresenterProps = {
  viewer: UserBasicData
@@ -18,52 +17,39 @@ type NotebookPresenterProps = {
 }
 
 export const NotebookPresenter = (props: NotebookPresenterProps) => {
- const windowDimensions = useGetWindowDimensions()
  const router = useRouter()
 
  return (
- <SlidingPane
- className="sliding-pane-class"
- isOpen={props.open}
- width={windowDimensions.width < 600 ? '100%' : '420px'}
- hideHeader={true}
- from="right"
- overlayClassName="slide-panel-overlay"
- onRequestClose={() => {
- props.setOpen(false)
- }}
- >
- <>
- <NotebookHeader
- viewer={props.viewer}
- item={props.item}
- setShowNotebook={props.setOpen}
- />
- <NotebookContent
- viewer={props.viewer}
- item={props.item}
- viewInReader={(highlightId) => {
- if (!router || !router.isReady || !props.viewer) {
- showErrorToast('Error navigating to highlight')
- return
- }
- router.push(
- {
- pathname: '/[username]/[slug]',
- query: {
- username: props.viewer.profile.username,
- slug: props.item.slug,
- },
- hash: highlightId,
+ <ResizableSidebar isShow={props.open} onClose={() => props.setOpen(false)}>
+ <NotebookHeader
+ viewer={props.viewer}
+ item={props.item}
+ setShowNotebook={props.setOpen}
+ />
+ <NotebookContent
+ viewer={props.viewer}
+ item={props.item}
+ viewInReader={(highlightId) => {
+ if (!router || !router.isReady || !props.viewer) {
+ showErrorToast('Error navigating to highlight')
+ return
+ }
+ router.push(
+ {
+ pathname: '/[username]/[slug]',
+ query: {
+ username: props.viewer.profile.username,
+ slug: props.item.slug,
  },
- `/${props.viewer.profile.username}/${props.item.slug}#${highlightId}`,
- {
- scroll: false,
- }
- )
- }}
- />
- </>
- </SlidingPane>
+ hash: highlightId,
+ },
+ `/${props.viewer.profile.username}/${props.item.slug}#${highlightId}`,
+ {
+ scroll: false,
+ }
+ )
+ }}
+ />
+ </ResizableSidebar>
  )
 }
diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx
@@ -16,11 +16,11 @@ import { HighlightNoteModal } from './HighlightNoteModal'
 import { showErrorToast } from '../../../lib/toastHelpers'
 import { DEFAULT_HEADER_HEIGHT } from '../homeFeed/HeaderSpacer'
 import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
-import SlidingPane from 'react-sliding-pane'
 import 'react-sliding-pane/dist/react-sliding-pane.css'
 import { NotebookContent } from './Notebook'
 import { NotebookHeader } from './NotebookHeader'
 import useWindowDimensions from '../../../lib/hooks/useGetWindowDimensions'
+import { ResizableSidebar } from './ResizableSidebar'
 
 export type PdfArticleContainerProps = {
  viewer: UserBasicData
@@ -35,9 +35,8 @@ export default function PdfArticleContainer(
  const containerRef = useRef<HTMLDivElement | null>(null)
  const [notebookKey, setNotebookKey] = useState<string>(uuidv4())
  const [noteTarget, setNoteTarget] = useState<Highlight | undefined>(undefined)
- const [noteTargetPageIndex, setNoteTargetPageIndex] = useState<
- number | undefined
- >(undefined)
+ const [noteTargetPageIndex, setNoteTargetPageIndex] =
+ useState<number | undefined>(undefined)
  const highlightsRef = useRef<Highlight[]>([])
 
  const annotationOmnivoreId = (annotation: Annotation): string | undefined => {
@@ -595,35 +594,28 @@ export default function PdfArticleContainer(
  }}
  />
  )}
- <SlidingPane
- className="sliding-pane-class"
- isOpen={props.showHighlightsModal}
- width={windowDimensions.width < 600 ? '100%' : '420px'}
- hideHeader={true}
- from="right"
- overlayClassName="slide-panel-overlay"
- onRequestClose={() => {
+ <ResizableSidebar
+ isShow={props.showHighlightsModal}
+ onClose={() => {
  props.setShowHighlightsModal(false)
  }}
  >
- <>
- <NotebookHeader
- viewer={props.viewer}
- item={props.article}
- setShowNotebook={props.setShowHighlightsModal}
- />
- <NotebookContent
- viewer={props.viewer}
- item={props.article}
- viewInReader={(highlightId) => {
- const event = new CustomEvent('scrollToHighlightId', {
- detail: highlightId,
- })
- document.dispatchEvent(event)
- }}
- />
- </>
- </SlidingPane>
+ <NotebookHeader
+ viewer={props.viewer}
+ item={props.article}
+ setShowNotebook={props.setShowHighlightsModal}
+ />
+ <NotebookContent
+ viewer={props.viewer}
+ item={props.article}
+ viewInReader={(highlightId) => {
+ const event = new CustomEvent('scrollToHighlightId', {
+ detail: highlightId,
+ })
+ document.dispatchEvent(event)
+ }}
+ />
+ </ResizableSidebar>
  </Box>
  )
 }
diff --git a/packages/web/components/templates/article/ResizableSidebar.tsx b/packages/web/components/templates/article/ResizableSidebar.tsx
@@ -0,0 +1,55 @@
+import SlidingPane from 'react-sliding-pane'
+import { Resizable, ResizeCallback } from 're-resizable'
+import useGetWindowDimensions from '../../../lib/hooks/useGetWindowDimensions'
+
+type ResizableSidebarProps = {
+ isShow: boolean
+ onClose: () => void
+ children: React.ReactNode
+}
+
+export function ResizableSidebar(props: ResizableSidebarProps): JSX.Element {
+ const windowDimensions = useGetWindowDimensions()
+
+ const handleResize: ResizeCallback = (_e, _direction, ref) => {
+ if (parseInt(ref.style.width) < 210) {
+ props.onClose()
+ }
+ }
+
+ return (
+ <SlidingPane
+ className="sliding-pane-class"
+ isOpen={props.isShow}
+ width="fit-content"
+ hideHeader={true}
+ from="right"
+ overlayClassName="slide-panel-overlay"
+ onRequestClose={props.onClose}
+ >
+ <Resizable
+ onResize={handleResize}
+ defaultSize={{
+ width: windowDimensions.width < 600 ? '100%' : '420px',
+ height: '100%',
+ }}
+ enable={
+ windowDimensions.width < 600
+ ? false
+ : {
+ top: false,
+ right: false,
+ bottom: false,
+ left: true,
+ topRight: false,
+ bottomRight: false,
+ bottomLeft: false,
+ topLeft: false,
+ }
+ }
+ >
+ {props.children}
+ </Resizable>
+ </SlidingPane>
+ )
+}