Merge pull request #430 from omnivore-app/fix/pdf-article-actions

2022-04-14 19:44:17 -07:00
parent c8e2af40ab 7e9e678e0d
commit 7133182f46
7 changed files with 70 additions and 44 deletions
--- a/packages/web/components/patterns/PrimaryHeader.tsx
+++ b/packages/web/components/patterns/PrimaryHeader.tsx
@ -26,6 +26,7 @@ type HeaderProps = {
  isFixedPosition: boolean
  scrollElementRef?: React.RefObject<HTMLDivElement>
  toolbarControl?: JSX.Element
+  alwaysDisplayToolbar?: boolean
  setShowLogoutConfirmation: (showShareModal: boolean) => void
  setShowKeyboardCommandsModal: (showShareModal: boolean) => void
 }
@ -128,6 +129,7 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
        isVisible={true}
        isFixedPosition={true}
        toolbarControl={props.toolbarControl}
+        alwaysDisplayToolbar={props.alwaysDisplayToolbar}
      />
    </>
  )
@ -143,6 +145,7 @@ type NavHeaderProps = {
  isVisible?: boolean
  isFixedPosition: boolean
  toolbarControl?: JSX.Element
+  alwaysDisplayToolbar?: boolean
 }

 function NavHeader(props: NavHeaderProps): JSX.Element {
@ -187,7 +190,7 @@ function NavHeader(props: NavHeaderProps): JSX.Element {
          <HStack distribution="end" alignment="center" css={{
            height: '100%', width: '100%',
            mr: '16px',
-            display: 'none',
+            display: props.alwaysDisplayToolbar ? 'flex' : 'none',
            '@lgDown': {
              display: 'flex',
            },
--- a/packages/web/components/templates/PrimaryLayout.tsx
+++ b/packages/web/components/templates/PrimaryLayout.tsx
@ -23,6 +23,7 @@ type PrimaryLayoutProps = {
  pageMetaDataProps?: PageMetaDataProps
  scrollElementRef?: MutableRefObject<HTMLDivElement | null>
  headerToolbarControl?: JSX.Element
+  alwaysDisplayToolbar?: boolean
 }

 export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
@ -75,8 +76,9 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
          userInitials={viewerData?.me?.name.charAt(0) ?? ''}
          profileImageURL={viewerData?.me?.profile.pictureUrl}
          isFixedPosition={true}
-          toolbarControl={props.headerToolbarControl}
          scrollElementRef={props.scrollElementRef}
+          toolbarControl={props.headerToolbarControl}
+          alwaysDisplayToolbar={props.alwaysDisplayToolbar}
          setShowLogoutConfirmation={setShowLogoutConfirmation}
          setShowKeyboardCommandsModal={setShowKeyboardCommandsModal}
        />
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@ -1,7 +1,6 @@
 import { Separator } from "@radix-ui/react-separator"
 import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa } from "phosphor-react"
 import { ArticleAttributes } from "../../../lib/networking/queries/useGetArticleQuery"
-import { useGetUserPreferences } from "../../../lib/networking/queries/useGetUserPreferences"
 import { Button } from "../../elements/Button"
 import { Dropdown } from "../../elements/DropdownElements"
 import { Box, SpanBox } from "../../elements/LayoutPrimitives"
@ -9,15 +8,15 @@ import { TooltipWrapped } from "../../elements/Tooltip"
 import { styled, theme } from "../../tokens/stitches.config"
 import { SetLabelsControl } from "./SetLabelsControl"
 import { ReaderSettingsControl } from "./ReaderSettingsControl"
-import { usePersistedState } from "../../../lib/hooks/usePersistedState"

-export type ArticleActionsMenuLayout = 'horizontal' | 'vertical'
+export type ArticleActionsMenuLayout = 'top' | 'side'

 type ArticleActionsMenuProps = {
  article: ArticleAttributes
  layout: ArticleActionsMenuLayout
  lineHeight: number
  marginWidth: number
+  showReaderDisplaySettings?: boolean
  articleActionHandler: (action: string, arg?: unknown) => void
 }

@ -32,7 +31,7 @@ const MenuSeparator = (props: MenuSeparatorProps): JSX.Element => {
    borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
    my: '8px',
  })
-  return (props.layout == 'vertical' ? <LineSeparator /> : <></>)
+  return (props.layout == 'side' ? <LineSeparator /> : <></>)
 }

 type ActionDropdownProps = {
@ -45,10 +44,10 @@ const ActionDropdown = (props: ActionDropdownProps): JSX.Element => {
  return <Dropdown
    showArrow={true}
    css={{ m: '0px', p: '0px', overflow: 'hidden', width: '265px', maxWidth: '265px', '@smDown': { width: '230px' } }}
-    side={props.layout == 'vertical' ? 'right' : 'bottom'}
-    sideOffset={props.layout == 'vertical' ? 8 : 0}
-    align={props.layout == 'vertical' ? 'start' : 'center'}
-    alignOffset={props.layout == 'vertical' ? -18 : undefined}
+    side={props.layout == 'side' ? 'right' : 'bottom'}
+    sideOffset={props.layout == 'side' ? 8 : 0}
+    align={props.layout == 'side' ? 'start' : 'center'}
+    alignOffset={props.layout == 'side' ? -18 : undefined}
    triggerElement={props.triggerElement}
  >
    {props.children}
@ -62,32 +61,35 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
      css={{
        display: 'flex',
        alignItems: 'center',
-        flexDirection: props.layout == 'vertical' ? 'column' : 'row',
-        justifyContent: props.layout == 'vertical' ? 'center' : 'flex-end',
-        gap: props.layout == 'vertical' ? '8px' : '24px',
+        flexDirection: props.layout == 'side' ? 'column' : 'row',
+        justifyContent: props.layout == 'side' ? 'center' : 'flex-end',
+        gap: props.layout == 'side' ? '8px' : '24px',
        paddingTop: '6px',
      }}
    >
-
-      <ActionDropdown
-        layout={props.layout}
-        triggerElement={
-          <TooltipWrapped
-            tooltipContent="Adjust Display Settings"
-            tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+      {props.showReaderDisplaySettings && (
+        <>
+          <ActionDropdown
+            layout={props.layout}
+            triggerElement={
+              <TooltipWrapped
+                tooltipContent="Adjust Display Settings"
+                tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+              >
+                <TextAa size={24} color={theme.colors.readerFont.toString()} />
+              </TooltipWrapped>
+            }
          >
-            <TextAa size={24} color={theme.colors.readerFont.toString()} />
-          </TooltipWrapped>
-        }
-      >
-        <ReaderSettingsControl
-          lineHeight={props.lineHeight}
-          marginWidth={props.marginWidth}
-          articleActionHandler={props.articleActionHandler}
-        />
-      </ActionDropdown>
+            <ReaderSettingsControl
+              lineHeight={props.lineHeight}
+              marginWidth={props.marginWidth}
+              articleActionHandler={props.articleActionHandler}
+            />
+          </ActionDropdown>

-      <MenuSeparator layout={props.layout} />
+          <MenuSeparator layout={props.layout} />
+        </>
+      )}

      <SpanBox css={{
        'display': 'flex',
@ -100,7 +102,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
          triggerElement={
            <TooltipWrapped
              tooltipContent="Edit labels"
-              tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+              tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
          >
            <TagSimple size={24} color={theme.colors.readerFont.toString()} />
          </TooltipWrapped>
@ -127,7 +129,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
      <Button style='articleActionIcon' onClick={() => props.articleActionHandler('showHighlights')}>
        <TooltipWrapped
          tooltipContent="View Highlights"
-          tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+          tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
        >
          <HighlighterCircle size={24} color={theme.colors.readerFont.toString()} />
        </TooltipWrapped>
@ -138,7 +140,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
      <Button style='articleActionIcon' onClick={() => props.articleActionHandler('archive')}>
        <TooltipWrapped
          tooltipContent="Archive"
-          tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
+          tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
        >
          <ArchiveBox size={24} color={theme.colors.readerFont.toString()} />
        </TooltipWrapped>
--- a/packages/web/components/templates/article/ArticleContainer.tsx
+++ b/packages/web/components/templates/article/ArticleContainer.tsx
@ -35,7 +35,6 @@ type ArticleContainerProps = {
 export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
  const [showShareModal, setShowShareModal] = useState(false)
  const [showReportIssuesModal, setShowReportIssuesModal] = useState(false)
-  const [showHighlightsModal, setShowHighlightsModal] = useState(props.showHighlightsModal)
  const [fontSize, setFontSize] = useState(props.fontSize ?? 20)

  const updateFontSize = async (newFontSize: number) => {
--- a/packages/web/components/templates/article/HighlightsModal.tsx
+++ b/packages/web/components/templates/article/HighlightsModal.tsx
@ -19,7 +19,7 @@ import { Pen, Trash } from 'phosphor-react'

 type HighlightsModalProps = {
  highlights: Highlight[]
-  deleteHighlightAction: (highlightId: string) => void
+  deleteHighlightAction?: (highlightId: string) => void
  onOpenChange: (open: boolean) => void
 }

@ -59,9 +59,12 @@ export function HighlightsModal(props: HighlightsModalProps): JSX.Element {
              <ModalHighlightView
                key={highlight.id}
                highlight={highlight}
-                deleteHighlightAction={() =>
-                  props.deleteHighlightAction(highlight.id)
-                }
+                showDelete={!!props.deleteHighlightAction}
+                deleteHighlightAction={() => {
+                  if (props.deleteHighlightAction) {
+                    props.deleteHighlightAction(highlight.id)
+                  }
+                }}
              />
            ))}
            {props.highlights.length === 0 && (
@ -78,6 +81,7 @@ export function HighlightsModal(props: HighlightsModalProps): JSX.Element {

 type ModalHighlightViewProps = {
  highlight: Highlight
+  showDelete: boolean
  deleteHighlightAction: () => void
 }

@ -112,9 +116,11 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
          />
        )}
      </Button> */}
-      <Button style="ghost" onClick={() => setShowDeleteConfirmation(true)}>
-        <Trash width={18} height={18} color={theme.colors.grayText.toString()} />
-      </Button>
+      {props.showDelete && (
+        <Button style="ghost" onClick={() => setShowDeleteConfirmation(true)}>
+          <Trash width={18} height={18} color={theme.colors.grayText.toString()} />
+        </Button>
+      )}
    </HStack>
  )

--- a/packages/web/components/templates/article/PdfArticleContainer.tsx
+++ b/packages/web/components/templates/article/PdfArticleContainer.tsx
@ -15,10 +15,13 @@ import { ShareHighlightModal } from './ShareHighlightModal'
 import { useCanShareNative } from '../../../lib/hooks/useCanShareNative'
 import { webBaseURL } from '../../../lib/appConfig'
 import { pspdfKitKey } from '../../../lib/appConfig'
+import { HighlightsModal } from './HighlightsModal'

 export type PdfArticleContainerProps = {
  viewerUsername: string
  article: ArticleAttributes
+  showHighlightsModal: boolean
+  setShowHighlightsModal: React.Dispatch<React.SetStateAction<boolean>>
 }

 export default function PdfArticleContainer(
@ -348,6 +351,12 @@ export default function PdfArticleContainer(
          }}
        />
      )}
+      {props.showHighlightsModal && (
+        <HighlightsModal
+          highlights={props.article.highlights}
+          onOpenChange={() => props.setShowHighlightsModal(false)}
+        />
+      )}
    </Box>
  )
 }
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@ -164,12 +164,14 @@ export default function Home(): JSX.Element {
        headerToolbarControl={
          <ArticleActionsMenu
            article={article}
-            layout='horizontal'
+            layout='top'
            lineHeight={lineHeight}
            marginWidth={marginWidth}
+            showReaderDisplaySettings={article.contentReader != 'PDF'}
            articleActionHandler={actionHandler}
          />
        }
+        alwaysDisplayToolbar={article.contentReader == 'PDF'}
        pageMetaDataProps={{
          title: article.title,
          path: router.pathname,
@ -199,9 +201,10 @@ export default function Home(): JSX.Element {
          {article.contentReader !== 'PDF' ? (
            <ArticleActionsMenu
              article={article}
-              layout='vertical'
+              layout='side'
              lineHeight={lineHeight}
              marginWidth={marginWidth}
+              showReaderDisplaySettings={true}
              articleActionHandler={actionHandler}
            />
          ) : null}
@ -209,6 +212,8 @@ export default function Home(): JSX.Element {
          {article.contentReader == 'PDF' ? (
            <PdfArticleContainerNoSSR
              article={article}
+              showHighlightsModal={showHighlightsModal}
+              setShowHighlightsModal={setShowHighlightsModal}
              viewerUsername={viewerData.me?.profile?.username}
            />
          ) : (