Better handling article notes

2023-06-27 14:26:22 +08:00
parent 80652dcf23
commit 5925f50826
10 changed files with 67 additions and 89 deletions
--- a/packages/web/components/patterns/ArticleNotes.tsx
+++ b/packages/web/components/patterns/ArticleNotes.tsx
@ -7,27 +7,14 @@ import {
  useRef,
  useState,
 } from 'react'
-import { formattedShortTime } from '../../lib/dateFormatting'
-import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
+import { VStack } from '../elements/LayoutPrimitives'

 import MarkdownIt from 'markdown-it'
 import MdEditor, { Plugins } from 'react-markdown-editor-lite'
 import 'react-markdown-editor-lite/lib/index.css'
-import ReactMarkdown from 'react-markdown'
 import throttle from 'lodash/throttle'
 import { updateHighlightMutation } from '../../lib/networking/mutations/updateHighlightMutation'
 import { Highlight } from '../../lib/networking/fragments/highlightFragment'
-import { Button } from '../elements/Button'
-import {
-  ModalContent,
-  ModalOverlay,
-  ModalRoot,
-} from '../elements/ModalPrimitives'
-import { CloseButton } from '../elements/CloseButton'
-import { StyledText } from '../elements/StyledText'
-import remarkGfm from 'remark-gfm'
-import MDEditorSavePlugin from './MDEditorSavePlugin'
-import HandleFullScreen from './MDEditorSavePlugin'
 import Counter from './MDEditorSavePlugin'
 import { isDarkTheme } from '../../lib/themeUpdater'
 import { RcEditorStyles } from './RcEditorStyles'
--- a/packages/web/components/patterns/HighlightNotes.tsx
+++ b/packages/web/components/patterns/HighlightNotes.tsx
@ -275,7 +275,9 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
              color: props.text ? '$thHighContrast' : '#898989',
              borderRadius: '5px',
              background:
-                props.text && props.fillBackground ? '$thBackground5' : 'unset',
+                props.text && props.fillBackground
+                  ? '$thNotebookTextBackground'
+                  : 'unset',
              '> *': {
                m: '0px',
              },
--- a/packages/web/components/patterns/RcEditorStyles.tsx
+++ b/packages/web/components/patterns/RcEditorStyles.tsx
@ -1,7 +1,7 @@
 export const RcEditorStyles = (isDark: boolean, shadow: boolean) => {
  return {
    '.rc-md-editor .rc-md-navigation': {
-      background: 'var(--colors-grayBg)',
+      background: '$grayBg',
      borderBottom: '1px solid $thBorderSubtle',
    },
    '.rc-md-editor': {
--- a/packages/web/components/templates/KeyboardShortcutListModal.tsx
+++ b/packages/web/components/templates/KeyboardShortcutListModal.tsx
@ -125,7 +125,7 @@ const readerCommands = () => {
      callback: () => {},
    },
    {
-      actionDescription: 'Open Notebook',
+      actionDescription: 'Toggle Notebook open',
      shortcutKeys: ['t'],
      shortcutKeyDescription: 't',
      callback: () => {},
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@ -742,46 +742,44 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
          />
        </>
      )}
-      {props.showHighlightsModal && (
-        <SlidingPane
-          className="sliding-pane-class"
-          isOpen={props.showHighlightsModal}
-          width={windowDimensions.width < 600 ? '100%' : '420px'}
-          hideHeader={true}
-          from="right"
-          overlayClassName="slide-panel-overlay"
-          onRequestClose={() => {
-            props.setShowHighlightsModal(false)
-          }}
-        >
-          <>
-            <NotebookHeader 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}`
+      <SlidingPane
+        className="sliding-pane-class"
+        isOpen={props.showHighlightsModal}
+        width={windowDimensions.width < 600 ? '100%' : '420px'}
+        hideHeader={true}
+        from="right"
+        overlayClassName="slide-panel-overlay"
+        onRequestClose={() => {
+          props.setShowHighlightsModal(false)
+        }}
+      >
+        <>
+          <NotebookHeader 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}"]`
                )
-              }}
-            />
-          </>
-        </SlidingPane>
-      )}
+                target?.scrollIntoView({
+                  block: 'center',
+                  behavior: 'auto',
+                })
+              }, 1)
+              history.replaceState(
+                undefined,
+                window.location.href,
+                `#${highlightId}`
+              )
+            }}
+          />
+        </>
+      </SlidingPane>
    </>
  )
 }
--- a/packages/web/components/templates/article/Notebook.tsx
+++ b/packages/web/components/templates/article/Notebook.tsx
@ -212,44 +212,22 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {

  return (
    <VStack
+      tabIndex={-1}
      distribution="start"
      css={{
        height: '100%',
        width: '100%',
-        p: '20px',
+        px: '20px',

        bg: '$thLibrarySearchbox',
        '@mdDown': { p: '15px' },
      }}
    >
-      {/* <HStack
-        css={{
-          width: '100%',
-          gap: '30px',
-          fontSize: '13px',
-          borderBottom: '1px solid $thBorderSubtle',
-        }}
-        distribution="start"
-        alignment="start"
-      >
-        <SectionTitle
-          title="Article Note"
-          selected={tabSelected == 'note'}
-          setSelected={() => setTabSelected('note')}
-        />
-        <SectionTitle
-          title="Highlights"
-          selected={tabSelected == 'highlights'}
-          setSelected={() => setTabSelected('highlights')}
-        />
-      </HStack> */}
-
-      {/* {tabSelected == 'note' && ( */}
      <>
        <HStack
          alignment="start"
          distribution="start"
-          css={{ width: '100%', mt: '20px', gap: '10px' }}
+          css={{ width: '100%', gap: '10px', mt: '25px' }}
        >
          <ArticleNotes
            targetId={props.item.id}
@ -291,7 +269,7 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
        </HStack>
      </>

-      <VStack css={{ mt: '20px', gap: '30px' }}>
+      <VStack css={{ mt: '25px', gap: '25px' }}>
        {sortedHighlights.map((highlight) => (
          <HighlightViewItem
            key={highlight.id}
--- a/packages/web/components/templates/article/NotebookHeader.tsx
+++ b/packages/web/components/templates/article/NotebookHeader.tsx
@ -11,6 +11,9 @@ import { HStack } from '../../elements/LayoutPrimitives'
 import { MenuTrigger } from '../../elements/MenuTrigger'
 import { StyledText } from '../../elements/StyledText'
 import { NotebookModal } from './NotebookModal'
+import { Sidebar } from 'phosphor-react'
+import { theme } from '../../tokens/stitches.config'
+import { Button } from '../../elements/Button'

 type NotebookHeaderProps = {
  setShowNotebook: (set: boolean) => void
@ -35,9 +38,10 @@ export const NotebookHeader = (props: NotebookHeaderProps) => {
        overflow: 'clip',
        background: '$thLibrarySearchbox',
        zIndex: 10,
+        borderBottom: '1px solid $thNotebookBorder',
      }}
    >
-      <StyledText style="modalHeadline" css={{ color: '$thTextSubtle2' }}>
+      <StyledText style="modalHeadline" css={{ color: '$thNotebookSubtle' }}>
        Notebook
      </StyledText>
      <HStack
@ -50,7 +54,7 @@ export const NotebookHeader = (props: NotebookHeaderProps) => {
        distribution="center"
        alignment="center"
      >
-        <Dropdown triggerElement={<MenuTrigger />}>
+        {/* <Dropdown triggerElement={<MenuTrigger />}>
          <DropdownOption
            onSelect={() => {
              // exportHighlights()
@ -63,8 +67,10 @@ export const NotebookHeader = (props: NotebookHeaderProps) => {
            }}
            title="Delete Article Note"
          />
-        </Dropdown>
-        <CloseButton close={handleClose} />
+        </Dropdown> */}
+        <Button style="plainIcon" onClick={() => props.setShowNotebook(false)}>
+          <Sidebar size={25} color={theme.colors.thNotebookSubtle.toString()} />
+        </Button>
      </HStack>
    </HStack>
  )
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@ -350,7 +350,11 @@ export function HomeFeedContainer(): JSX.Element {
        setLabelsTarget(item)
        break
      case 'open-notebook':
-        setNotebookTarget(item)
+        if (!notebookTarget) {
+          setNotebookTarget(item)
+        } else {
+          setNotebookTarget(undefined)
+        }
        break
      case 'unsubscribe':
        performActionOnItem('unsubscribe', item)
@ -489,6 +493,7 @@ export function HomeFeedContainer(): JSX.Element {
          handleCardAction('set-labels', activeItem)
          break
        case 'openNotebook':
+          console.log('openNotebook: ', notebookTarget)
          handleCardAction('open-notebook', activeItem)
          break
        case 'sortDescending':
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@ -183,6 +183,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
        thNotebookSubtle: '#6A6968',
        thNotebookBorder: '#D9D9D9',
        thNotebookBackground: '#FCFCFC',
+        thNotebookTextBackground: '#EBEBEB',

        thTextContrast: '#1E1E1E',
        thTextContrast2: '#3D3D3D',
@ -280,7 +281,8 @@ const darkThemeSpec = {

    thNotebookSubtle: '#898989',
    thNotebookBorder: '#898989',
-    thNotebookBackground: '#3D3D3D',
+    thNotebookBackground: '#3B3938',
+    thNotebookTextBackground: '#3D3D3D',
    thNotebookHighContrast: '#2A2A2A',

    thTextContrast: '#FFFFFF',
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@ -350,7 +350,7 @@ export default function Home(): JSX.Element {
        name: 'Notebook',
        shortcut: ['t'],
        perform: () => {
-          setShowHighlightsModal(true)
+          setShowHighlightsModal(!showHighlightsModal)
        },
      },
      {