Sizing fixes on the note modal

2023-03-23 16:14:04 +08:00
parent 0b04cbef28
commit e2aaaf5a08
4 changed files with 71 additions and 184 deletions
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@ -9,8 +9,8 @@ import {
  SpanBox,
  HStack,
 } from '../elements/LayoutPrimitives'
-import { StyledText } from '../elements/StyledText'
 import { styled, theme } from '../tokens/stitches.config'
+import { HighlightViewNote } from './HighlightViewNote'

 type HighlightViewProps = {
  highlight: Highlight
@ -27,6 +27,7 @@ const StyledQuote = styled(Blockquote, {
 })

 export function HighlightView(props: HighlightViewProps): JSX.Element {
+  const [noteMode, setNoteMode] = useState<'preview' | 'edit'>('preview')
  const [isEditing, setIsEditing] = useState(false)

  const lines = useMemo(
@ -45,7 +46,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
      <VStack css={{ minHeight: '100%', width: '10px' }}>
        <Box
          css={{
-            mt: '5px',
+            mt: '8px',
            width: '10px',
            height: '10px',
            background: '#FFD234',
@ -71,7 +72,12 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
            }
          }}
        >
-          <SpanBox css={{ p: '1px', borderRadius: '2px' }}>
+          <SpanBox
+            css={{
+              p: '1px',
+              borderRadius: '2px',
+            }}
+          >
            {lines.map((line: string, index: number) => (
              <Fragment key={index}>
                {line}
@ -90,30 +96,13 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
            <LabelChip key={index} text={name || ''} color={color} />
          ))}
        </Box>
-        {!isEditing ? (
-          <StyledText
-            css={{
-              borderRadius: '5px',
-              p: '10px',
-              width: '100%',
-              marginTop: '15px',
-              color: '$thHighContrast',
-              border: '1px solid #EBEBEB',
-            }}
-            onClick={() => setIsEditing(true)}
-          >
-            {props.highlight.annotation
-              ? props.highlight.annotation
-              : 'Add notes to this highlight...'}
-          </StyledText>
-        ) : null}
-        {isEditing && (
-          <HighlightNoteTextEditArea
-            setIsEditing={setIsEditing}
-            highlight={props.highlight}
-            updateHighlight={() => {} /* props.updateHighlight */}
-          />
-        )}
+        <HighlightViewNote
+          placeHolder="Add notes to this highlight..."
+          highlight={props.highlight}
+          sizeMode={'normal'}
+          mode={noteMode}
+          setEditMode={setNoteMode}
+        />
      </VStack>
    </HStack>
  )
--- a/packages/web/components/templates/HighlightNoteBox.tsx
+++ b/packages/web/components/templates/HighlightNoteBox.tsx
@ -9,7 +9,7 @@ import {
 import { formattedShortTime } from '../../lib/dateFormatting'
 import { createHighlightMutation } from '../../lib/networking/mutations/createHighlightMutation'
 import { updateHighlightMutation } from '../../lib/networking/mutations/updateHighlightMutation'
-import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
+import { HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'

 import MarkdownIt from 'markdown-it'
 import MdEditor from 'react-markdown-editor-lite'
@ -232,7 +232,6 @@ export function HighlightNoteBox(props: NoteSectionProps): JSX.Element {
          distribution="start"
          css={{
            width: '100%',
-            // minHeight: '160px'
          }}
        >
          <StyledText
@ -260,22 +259,3 @@ export function HighlightNoteBox(props: NoteSectionProps): JSX.Element {
    </>
  )
 }
-
-// {!isEditing ? (
-//   <StyledText
-//     css={{
-//       borderRadius: '5px',
-//       p: '10px',
-//       width: '100%',
-//       marginTop: '15px',
-//       color: '$thHighContrast',
-//       border: '1px solid #EBEBEB',
-//     }}
-//     onClick={() => setIsEditing(true)}
-//   >
-//     {props.highlight.annotation
-//       ? props.highlight.annotation
-//       : 'Add notes to this highlight...'}
-//   </StyledText>
-// ) : null}
-// {isEditing && (
--- a/packages/web/components/templates/article/HighlightPostToFeedModal.tsx
+++ b/packages/web/components/templates/article/HighlightPostToFeedModal.tsx
@ -1,92 +0,0 @@
-import {
-  ModalRoot,
-  ModalContent,
-  ModalOverlay,
-} from './../../elements/ModalPrimitives'
-import { Box, HStack } from '../../elements/LayoutPrimitives'
-import { Button } from '../../elements/Button'
-import { StyledText } from '../../elements/StyledText'
-import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
-import { HighlightView } from '../../patterns/HighlightView'
-import { useCallback, useState } from 'react'
-import { StyledTextArea } from '../../elements/StyledTextArea'
-
-type HighlightPostToFeedModalProps = {
-  highlight: Highlight
-  author: string
-  title: string
-  onCommit: (highlight: Highlight, comment: string) => void
-  onOpenChange: (open: boolean) => void
-}
-
-export function HighlightPostToFeedModal(
-  props: HighlightPostToFeedModalProps
-): JSX.Element {
-  const [comment, setComment] = useState('')
-
-  const handleCommentChange = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
-      setComment(event.target.value)
-    },
-    [setComment]
-  )
-
-  const postHighlight = useCallback(async () => {
-    props.onCommit(props.highlight, comment)
-    props.onOpenChange(false)
-  }, [comment, props])
-
-  return (
-    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
-      <ModalOverlay />
-      <ModalContent
-        onPointerDownOutside={(event) => {
-          event.preventDefault()
-        }}
-        css={{ overflow: 'auto' }}
-      >
-        <Box
-          css={{
-            display: 'grid',
-            gridTemplateColumns: '1fr auto 1fr',
-            px: '$2',
-          }}
-        >
-          <Button
-            style="ctaSecondary"
-            onClick={() => {
-              props.onOpenChange(false)
-            }}
-            css={{ justifySelf: 'start' }}
-          >
-            Cancel
-          </Button>
-          <HStack alignment="center">
-            <StyledText>Post Highlight</StyledText>
-          </HStack>
-          <Button
-            style="ctaSecondary"
-            onClick={postHighlight}
-            css={{ justifySelf: 'end' }}
-          >
-            Post
-          </Button>
-        </Box>
-        <HighlightView {...props} />
-        <StyledTextArea
-          css={{
-            mt: '$2',
-            width: '95%',
-            p: '$1',
-            minHeight: '$6',
-          }}
-          autoFocus
-          placeholder={'Leave comment (optional)'}
-          value={comment}
-          onChange={handleCommentChange}
-          maxLength={1000}
-        />
-      </ModalContent>
-    </ModalRoot>
-  )
-}
--- a/packages/web/components/templates/article/NotebookModal.tsx
+++ b/packages/web/components/templates/article/NotebookModal.tsx
@ -42,6 +42,7 @@ import { nanoid } from 'nanoid'
 import throttle from 'lodash/throttle'
 import { deleteHighlightMutation } from '../../../lib/networking/mutations/deleteHighlightMutation'
 import { LibraryItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
+import { HighlightNoteBox } from '../HighlightNoteBox'

 const mdParser = new MarkdownIt()

@ -77,7 +78,7 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
  )
  const [sizeMode, setSizeMode] = useState<'normal' | 'maximized'>('normal')
  const [showConfirmDeleteNote, setShowConfirmDeleteNote] = useState(false)
-  const [notesEditMode, setNotesEditMode] = useState(true)
+  const [notesEditMode, setNotesEditMode] = useState<'edit' | 'preview'>('edit')
  const [, updateState] = useState({})

  const listReducer = (
@ -190,63 +191,72 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
        }}
        css={{
          overflow: 'auto',
-          px: '20px',
          height: sizeMode === 'normal' ? 'unset' : '100%',
          maxWidth: sizeMode === 'normal' ? '640px' : '100%',
+          minHeight: '525px',
        }}
      >
-        <VStack distribution="start" css={{ height: '100%' }}>
+        <HStack
+          distribution="between"
+          alignment="center"
+          css={{
+            width: '100%',
+            position: 'sticky',
+            top: '0px',
+            height: '50px',
+            p: '20px',
+            bg: '$thBackground',
+            zIndex: 10,
+          }}
+        >
+          <StyledText style="modalHeadline" css={{ color: '$thTextSubtle2' }}>
+            Notebook
+          </StyledText>
          <HStack
-            distribution="between"
+            css={{
+              ml: 'auto',
+              cursor: 'pointer',
+              gap: '5px',
+              mr: '-5px',
+            }}
+            distribution="center"
            alignment="center"
-            css={{ height: '50px', width: '100%' }}
          >
-            <StyledText style="modalHeadline" css={{ color: '$thTextSubtle2' }}>
-              Notebook
-            </StyledText>
-            <HStack
-              css={{
-                ml: 'auto',
-                cursor: 'pointer',
-                gap: '5px',
-                mr: '-5px',
-              }}
-              distribution="center"
-              alignment="center"
-            >
-              <SizeToggle mode={sizeMode} setMode={setSizeMode} />
-              <Dropdown triggerElement={<MenuTrigger />}>
-                <DropdownOption
-                  onSelect={() => {
-                    exportHighlights()
-                  }}
-                  title="Export Notebook"
-                />
-                <DropdownOption
-                  onSelect={() => {
-                    setShowConfirmDeleteNote(true)
-                  }}
-                  title="Delete Document Note"
-                />
-              </Dropdown>
-              <CloseButton close={() => props.onOpenChange(false)} />
-            </HStack>
+            <SizeToggle mode={sizeMode} setMode={setSizeMode} />
+            <Dropdown triggerElement={<MenuTrigger />}>
+              <DropdownOption
+                onSelect={() => {
+                  exportHighlights()
+                }}
+                title="Export Notebook"
+              />
+              <DropdownOption
+                onSelect={() => {
+                  setShowConfirmDeleteNote(true)
+                }}
+                title="Delete Document Note"
+              />
+            </Dropdown>
+            <CloseButton close={() => props.onOpenChange(false)} />
          </HStack>
+        </HStack>
+        <VStack distribution="start" css={{ height: '100%', p: '20px' }}>
          <TitledSection
            title="ARTICLE NOTES"
-            editMode={notesEditMode}
-            setEditMode={setNotesEditMode}
+            editMode={notesEditMode == 'edit'}
+            setEditMode={(edit) => setNotesEditMode(edit ? 'edit' : 'preview')}
          />
-          <NoteSection
+          <HighlightNoteBox
            pageId={props.pageId}
+            placeHolder="Add notes to this document..."
            highlight={highlights.find((h) => h.type == 'NOTE')}
            sizeMode={sizeMode}
-            mode={notesEditMode ? 'edit' : 'read'}
+            mode={notesEditMode}
            setEditMode={setNotesEditMode}
-            dispatchList={dispatchList}
+            // dispatchList={dispatchList}
          />
          <SpanBox css={{ mt: '10px', mb: '25px' }} />
-          {props.highlights.map((highlight) => (
+          {/* {props.highlights.map((highlight) => (
            <Box key={`hn-${highlight.id}`} css={{ color: 'black' }}>
              {highlight.annotation}
              <Button
@ -257,8 +267,8 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
                DELETE
              </Button>
            </Box>
-          ))}
-          <Box css={{ overflow: 'auto', width: '100%' }}>
+          ))} */}
+          <Box css={{ width: '100%' }}>
            <TitledSection title="HIGHLIGHTS" />

            {sortedHighlights.map((highlight) => (
@ -358,7 +368,6 @@ type ModalHighlightViewProps = {

 function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
  const [hover, setHover] = useState(false)
-  const [isEditing, setIsEditing] = useState(false)

  return (
    <HStack
@ -544,6 +553,7 @@ function NoteSection(props: NoteSectionProps): JSX.Element {
              'block-quote',
              'link',
              'auto-resize',
+              'mode-toggle',
            ]}
            style={{
              width: '100%',