diff --git a/packages/web/components/patterns/PrimaryHeader.tsx b/packages/web/components/patterns/PrimaryHeader.tsx index f96f5138b..57b6cc0ed 100644 --- a/packages/web/components/patterns/PrimaryHeader.tsx +++ b/packages/web/components/patterns/PrimaryHeader.tsx @@ -17,8 +17,6 @@ import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery' import { setupAnalytics } from '../../lib/analytics' import { Button } from '../elements/Button' import Link from 'next/link' -import { ArchiveBox, ArrowSquareOut, DotsThree, HighlighterCircle, TagSimple, TextAa } from 'phosphor-react' -import { ArticleActionsMenu } from '../templates/article/ArticleActionsMenu' type HeaderProps = { user?: UserBasicData @@ -28,6 +26,7 @@ type HeaderProps = { isFixedPosition: boolean scrollElementRef?: React.RefObject displayFontStepper?: boolean + toolbarControl?: JSX.Element setShowLogoutConfirmation: (showShareModal: boolean) => void setShowKeyboardCommandsModal: (showShareModal: boolean) => void } @@ -56,9 +55,6 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element { (changeset: ScrollOffsetChangeset) => { const isScrolledBeyondMinThreshold = changeset.current.y >= 50 const isScrollingDown = changeset.current.y > changeset.previous.y - - // setIsScrolled(isScrolledBeyondMinThreshold) - // setShowHeader(!(isScrollingDown && isScrolledBeyondMinThreshold)) }, 0 ) @@ -129,6 +125,7 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element { isDisplayingShadow={isScrolled} isVisible={true} isFixedPosition={true} + toolbarControl={props.toolbarControl} displayFontStepper={props.displayFontStepper} /> @@ -145,6 +142,7 @@ type NavHeaderProps = { isVisible?: boolean isFixedPosition: boolean displayFontStepper?: boolean + toolbarControl?: JSX.Element } function NavHeader(props: NavHeaderProps): JSX.Element { @@ -185,20 +183,19 @@ function NavHeader(props: NavHeaderProps): JSX.Element { - - { - console.log('action handler') - }} /> - + {props.toolbarControl && ( + + {props.toolbarControl} + + )} {props.username ? ( displayFontStepper?: boolean + headerToolbarControl?: JSX.Element } export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element { @@ -76,6 +76,7 @@ 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} displayFontStepper={props.displayFontStepper} setShowLogoutConfirmation={setShowLogoutConfirmation} diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx index 0f115e180..e28a41dca 100644 --- a/packages/web/components/templates/article/ArticleActionsMenu.tsx +++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx @@ -1,6 +1,7 @@ import { Separator } from "@radix-ui/react-separator" import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa } from "phosphor-react" import { useRef } from "react" +import { ArticleAttributes } from "../../../lib/networking/queries/useGetArticleQuery" import { useGetUserPreferences, UserPreferences } from "../../../lib/networking/queries/useGetUserPreferences" import { Button } from "../../elements/Button" import { Dropdown } from "../../elements/DropdownElements" @@ -12,6 +13,7 @@ import { ReaderSettings } from "./ReaderSettingsModal" export type ArticleActionsMenuLayout = 'horizontal' | 'vertical' type ArticleActionsMenuProps = { + article: ArticleAttributes layout: ArticleActionsMenuLayout articleActionHandler: (action: string, arg?: number) => void } @@ -39,7 +41,7 @@ type ActionDropdownProps = { const ActionDropdown = (props: ActionDropdownProps): JSX.Element => { return +{/* + */}