From 5925f508263421f08ca3b1938a1abd1a0c157053 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 27 Jun 2023 14:26:22 +0800 Subject: [PATCH] Better handling article notes --- .../web/components/patterns/ArticleNotes.tsx | 15 +--- .../components/patterns/HighlightNotes.tsx | 4 +- .../components/patterns/RcEditorStyles.tsx | 2 +- .../templates/KeyboardShortcutListModal.tsx | 2 +- .../templates/article/HighlightsLayer.tsx | 76 +++++++++---------- .../components/templates/article/Notebook.tsx | 30 +------- .../templates/article/NotebookHeader.tsx | 14 +++- .../templates/homeFeed/HomeFeedContainer.tsx | 7 +- .../web/components/tokens/stitches.config.ts | 4 +- .../web/pages/[username]/[slug]/index.tsx | 2 +- 10 files changed, 67 insertions(+), 89 deletions(-) diff --git a/packages/web/components/patterns/ArticleNotes.tsx b/packages/web/components/patterns/ArticleNotes.tsx index 8ed2a25bc..438e834ff 100644 --- 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' diff --git a/packages/web/components/patterns/HighlightNotes.tsx b/packages/web/components/patterns/HighlightNotes.tsx index 19daf58d1..253caa3d3 100644 --- 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', }, diff --git a/packages/web/components/patterns/RcEditorStyles.tsx b/packages/web/components/patterns/RcEditorStyles.tsx index b53cba22a..f0b65ad6f 100644 --- 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': { diff --git a/packages/web/components/templates/KeyboardShortcutListModal.tsx b/packages/web/components/templates/KeyboardShortcutListModal.tsx index 1b0c1d685..3285446d8 100644 --- 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: () => {}, diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx index 953e743db..26f77b028 100644 --- 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 && ( - { - props.setShowHighlightsModal(false) - }} - > - <> - - { - // 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}` + { + props.setShowHighlightsModal(false) + }} + > + <> + + { + // 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}` + ) + }} + /> + + ) } diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx index c7dcb4c8e..8565cfc6f 100644 --- 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 ( - {/* - setTabSelected('note')} - /> - setTabSelected('highlights')} - /> - */} - - {/* {tabSelected == 'note' && ( */} <> - + {sortedHighlights.map((highlight) => ( void @@ -35,9 +38,10 @@ export const NotebookHeader = (props: NotebookHeaderProps) => { overflow: 'clip', background: '$thLibrarySearchbox', zIndex: 10, + borderBottom: '1px solid $thNotebookBorder', }} > - + Notebook { distribution="center" alignment="center" > - }> + {/* }> { // exportHighlights() @@ -63,8 +67,10 @@ export const NotebookHeader = (props: NotebookHeaderProps) => { }} title="Delete Article Note" /> - - + */} + ) diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx index b119c2c39..8c886fc91 100644 --- 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': diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index 5067c66d8..6e57310c7 100644 --- 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', diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx index 4ba683215..2d1babc43 100644 --- 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) }, }, {