From 0842aba57cf565c64a68e9eb0e0e89bc00a12c03 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 14 Apr 2022 15:53:51 -0700
Subject: [PATCH] Always display the article actions toolbar on top for PDFs

Because we dont have margin space on PDFs we want to always
display this on top.
---
 .../web/components/patterns/PrimaryHeader.tsx |  5 +-
 .../components/templates/PrimaryLayout.tsx    |  4 +-
 .../templates/article/ArticleActionsMenu.tsx  | 66 ++++++++++---------
 .../web/pages/[username]/[slug]/index.tsx     |  7 +-
 4 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/packages/web/components/patterns/PrimaryHeader.tsx b/packages/web/components/patterns/PrimaryHeader.tsx
index 79294d02f..12c7e4754 100644
--- 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',
             },
diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx
index 56e85a419..e077a3dbf 100644
--- 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}
         />
diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index 880cfea9a..9b82691f0 100644
--- 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>
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 18bd8a00c..9179327ce 100644
--- 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'
+            alwaysDisplay={true}
             lineHeight={lineHeight}
             marginWidth={marginWidth}
             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={false}
               articleActionHandler={actionHandler}
             />
           ) : null}