Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put the highlight menu in a container

Browse Source
This commit is contained in:
Jackson Harper
2023-06-23 20:37:31 +08:00
parent 630a11e878
commit cdaa0c2876
6 changed files with 51 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/components/patterns/ArticleNotes.tsx
View File

@ -182,7 +182,6 @@ export function MarkdownNote(props: MarkdownNote): JSX.Element {
css={{
width: '100%',
...RcEditorStyles(isDark, true),
pr: '25px',
}}
onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.code.toLowerCase() === 'escape') {

41
packages/web/components/patterns/HighlightView.tsx
View File

@ -15,12 +15,22 @@ import { HighlightViewNote } from './HighlightNotes'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { isDarkTheme } from '../../lib/themeUpdater'
import { HighlightsMenu } from '../templates/homeFeed/HighlightItem'
import { ReadableItem } from '../../lib/networking/queries/useGetLibraryItemsQuery'
import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
type HighlightViewProps = {
item: ReadableItem
viewer: UserBasicData
highlight: Highlight
author?: string
title?: string
updateHighlight: (highlight: Highlight) => void
viewInReader: (highlightId: string) => void
setLabelsTarget: (target: Highlight) => void
setShowConfirmDeleteHighlightId: (set: string) => void
}
const StyledQuote = styled(Blockquote, {
@ -38,13 +48,14 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
const [noteMode, setNoteMode] = useState<'preview' | 'edit'>('preview')
return (
<HStack
<VStack
css={{
p: '5px',
p: '0px',
width: '100%',
alignItems: 'stretch',
bg: isDark ? '#3D3D3D' : '$thBackground',
borderRadius: '6px',
border: '1px solid $thBorderSubtle',
boxShadow: '0px 4px 4px rgba(33, 33, 33, 0.1)',
'@mdDown': {
p: '0px',
@ -52,6 +63,27 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
}}
>
<VStack
css={{
borderBottom: '1px solid $thBorderSubtle',
width: '100%',
height: '40px',
paddingRight: '10px',
}}
distribution="end"
alignment="end"
>
<HighlightsMenu
item={props.item}
viewer={props.viewer}
highlight={props.highlight}
viewInReader={props.viewInReader}
setLabelsTarget={props.setLabelsTarget}
setShowConfirmDeleteHighlightId={
props.setShowConfirmDeleteHighlightId
}
/>
</VStack>
{/* <VStack
css={{
minHeight: '100%',
width: '10px',
@ -63,7 +95,6 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
},
}}
>
{/* <CaretDown size={12} color="#898989" weight="fill" /> */}
<Box
css={{
width: '2px',
@ -75,7 +106,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
marginBottom: '25px',
}}
/>
</VStack>
</VStack> */}
<VStack
css={{
@ -140,6 +171,6 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
/>
</HStack>
</VStack>
</HStack>
</VStack>
)
}

2
packages/web/components/patterns/LibraryCards/LibraryHighlightGridCard.tsx
View File

@ -130,6 +130,8 @@ export function LibraryHighlightGridCard(
<SpanBox key={`hv-${highlight.id}`}>
<HighlightView
key={highlight.id}
viewer={props.viewer}
item={props.item}
highlight={highlight}
updateHighlight={(highlight) => {
console.log('updated highlight: ', highlight)

17
packages/web/components/templates/article/HighlightViewItem.tsx
View File

@ -2,7 +2,7 @@ import { useState } from 'react'
import { Highlight } from '../../../lib/networking/fragments/highlightFragment'
import { ReadableItem } from '../../../lib/networking/queries/useGetLibraryItemsQuery'
import { UserBasicData } from '../../../lib/networking/queries/useGetViewerQuery'
import { HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
import { HighlightView } from '../../patterns/HighlightView'
import { HighlightsMenu } from '../homeFeed/HighlightItem'
@ -35,19 +35,18 @@ export function HighlightViewItem(props: HighlightViewItemProps): JSX.Element {
>
<VStack css={{ width: '100%', height: '100%' }}>
<HighlightView
viewer={props.viewer}
item={props.item}
highlight={props.highlight}
updateHighlight={props.updateHighlight}
viewInReader={props.viewInReader}
setLabelsTarget={props.setSetLabelsTarget}
setShowConfirmDeleteHighlightId={
props.setShowConfirmDeleteHighlightId
}
/>
<SpanBox css={{ mb: '15px' }} />
</VStack>
<HighlightsMenu
item={props.item}
viewer={props.viewer}
highlight={props.highlight}
viewInReader={props.viewInReader}
setLabelsTarget={props.setSetLabelsTarget}
setShowConfirmDeleteHighlightId={props.setShowConfirmDeleteHighlightId}
/>
</HStack>
)
}

5
packages/web/components/templates/article/Notebook.tsx
View File

@ -367,7 +367,10 @@ export function NotebookContent(props: NotebookContentProps): JSX.Element {
<SetHighlightLabelsModalPresenter
highlight={labelsTarget}
highlightId={labelsTarget.id}
onOpenChange={() => setLabelsTarget(undefined)}
onOpenChange={() => {
mutate()
setLabelsTarget(undefined)
}}
/>
)}
{props.showConfirmDeleteNote && (

1
packages/web/components/templates/homeFeed/HighlightItem.tsx
View File

@ -66,6 +66,7 @@ export function HighlightsMenu(props: HighlightsMenuProps): JSX.Element {
triggerElement={
<Box
css={{
marginLeft: 'auto',
display: 'flex',
height: '20px',
width: '20px',