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

Rename notes sidebar to highlights modal

Browse Source
This commit is contained in:
Jackson Harper
2022-04-11 14:46:02 -07:00
parent 8d5425bc53
commit a6566e4a9b
4 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/web/components/templates/article/ArticleContainer.tsx
View File

@ -15,6 +15,7 @@ import { updateThemeLocally } from '../../../lib/themeUpdater'
import { ArticleMutations } from '../../../lib/articleActions'
import { LabelChip } from '../../elements/LabelChip'
import { Label } from '../../../lib/networking/fragments/labelFragment'
import { HighlightsModal } from './HighlightsModal'
type ArticleContainerProps = {
article: ArticleAttributes
@ -28,11 +29,13 @@ type ArticleContainerProps = {
fontSize?: number
fontFamily?: string
lineHeight?: number
showHighlightsModal?: boolean
setShowHighlightsModal?: (show: boolean) => void
}
export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
const [showShareModal, setShowShareModal] = useState(false)
const [showNotesSidebar, setShowNotesSidebar] = useState(false)
const [showHighlightsModal, setShowHighlightsModal] = useState(false)
const [showReportIssuesModal, setShowReportIssuesModal] = useState(false)
const [fontSize, setFontSize] = useState(props.fontSize ?? 20)
@ -157,7 +160,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
<ArticleHeaderToolbar
articleTitle={props.article.title}
articleShareURL={props.highlightsBaseURL}
setShowNotesSidebar={setShowNotesSidebar}
setShowHighlightsModal={setShowHighlightsModal}
setShowShareArticleModal={setShowShareModal}
hasHighlights={props.article.highlights?.length > 0}
/>
@ -193,9 +196,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
articleId={props.article.id}
isAppleAppEmbed={props.isAppleAppEmbed}
highlightBarDisabled={props.highlightBarDisabled}
showNotesSidebar={showNotesSidebar}
showHighlightsModal={showHighlightsModal}
highlightsBaseURL={props.highlightsBaseURL}
setShowNotesSidebar={setShowNotesSidebar}
setShowHighlightsModal={setShowHighlightsModal}
articleMutations={props.articleMutations}
/>
{showReportIssuesModal ? (

4
packages/web/components/templates/article/ArticleHeaderToolbar.tsx
View File

@ -14,7 +14,7 @@ type ArticleHeaderToolbarProps = {
articleTitle: string
articleShareURL: string
hasHighlights: boolean
setShowNotesSidebar: (showNotesSidebar: boolean) => void
setShowHighlightsModal: (showHighlightsModal: boolean) => void
setShowShareArticleModal: (showShareModal: boolean) => void
}
@ -46,7 +46,7 @@ export function ArticleHeaderToolbar(
return (
<HStack distribution="between" alignment="center" css={{ gap: '$2' }}>
{props.hasHighlights && (
<Button style="plainIcon" onClick={() => props.setShowNotesSidebar(true)} title="View all your highlights and notes">
<Button style="plainIcon" onClick={() => props.setShowHighlightsModal(true)} title="View all your highlights and notes">
<CommentIcon
size={24}
strokeColor={theme.colors.grayTextContrast.toString()}

8
packages/web/components/templates/article/HighlightsLayer.tsx
View File

@ -25,9 +25,9 @@ type HighlightsLayerProps = {
articleAuthor: string
isAppleAppEmbed: boolean
highlightBarDisabled: boolean
showNotesSidebar: boolean
showHighlightsModal: boolean
highlightsBaseURL: string
setShowNotesSidebar: React.Dispatch<React.SetStateAction<boolean>>
setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
articleMutations: ArticleMutations
}
@ -466,11 +466,11 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
)
}
if (props.showNotesSidebar) {
if (props.showHighlightsModal) {
return (
<HighlightsModal
highlights={highlights}
onOpenChange={() => props.setShowNotesSidebar(false)}
onOpenChange={() => props.setShowHighlightsModal(false)}
deleteHighlightAction={(highlightId: string) => {
removeHighlightCallback(highlightId)
}}

11
packages/web/pages/[username]/[slug]/index.tsx
View File

@ -218,6 +218,8 @@ export default function Home(): JSX.Element {
margin={marginWidth}
lineHeight={lineHeight}
labels={labels}
showHighlightsModal={showHighlightsModal}
setShowHighlightsModal={setShowHighlightsModal}
articleMutations={{
createHighlightMutation,
deleteHighlightMutation,
@ -228,15 +230,6 @@ export default function Home(): JSX.Element {
/>
</VStack>
)}
{showHighlightsModal && (
<HighlightsModal
highlights={article.highlights}
onOpenChange={() => setShowHighlightsModal(false)}
deleteHighlightAction={(highlightId: string) => {
// removeHighlightCallback(highlightId)
}}
/>
)}
</PrimaryLayout>
)
}