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

Always display the article actions toolbar on top for PDFs

Browse Source 
Because we dont have margin space on PDFs we want to always
display this on top.
This commit is contained in:
Jackson Harper
2022-04-14 15:53:51 -07:00
parent 0715dafd4b
commit 0842aba57c
4 changed files with 46 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/web/components/patterns/PrimaryHeader.tsx
View File

@ -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',
},

4
packages/web/components/templates/PrimaryLayout.tsx
View File

@ -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}
/>

66
packages/web/components/templates/article/ArticleActionsMenu.tsx
View File

@ -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>

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

@ -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}