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

Add tooltips to article actions

Browse Source
This commit is contained in:
Jackson Harper
2022-04-11 08:58:48 -07:00
parent 23416cd1e7
commit 9a627c225e
2 changed files with 45 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/web/components/elements/Tooltip.tsx
View File

@ -62,6 +62,15 @@ type TooltipWrappedProps = {
style?: TooltipPrimitive.TooltipContentProps['style']
}
const DefaultTooltipStyle = {
backgroundColor: '#F9D354',
color: '#0A0806',
}
const DefaultArrowStyle = {
fill: '#F9D354'
}
export const TooltipWrapped: FC<TooltipWrappedProps> = ({
children,
active,
@ -73,9 +82,14 @@ export const TooltipWrapped: FC<TooltipWrappedProps> = ({
return (
<Tooltip open={active}>
<TooltipTrigger asChild>{children}</TooltipTrigger>
<TooltipContent sideOffset={5} side={tooltipSide} {...props}>
<TooltipContent
sideOffset={5}
side={tooltipSide}
style={DefaultTooltipStyle}
{...props}
>
{tooltipContent}
<TooltipArrow style={arrowStyles} />
<TooltipArrow style={arrowStyles ?? DefaultArrowStyle} />
</TooltipContent>
</Tooltip>
)

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

@ -4,7 +4,8 @@ import { ArticleAttributes } from "../../../lib/networking/queries/useGetArticle
import { useGetUserPreferences } from "../../../lib/networking/queries/useGetUserPreferences"
import { Button } from "../../elements/Button"
import { Dropdown } from "../../elements/DropdownElements"
import { Box, SpanBox } from "../../elements/LayoutPrimitives"
import { Box } from "../../elements/LayoutPrimitives"
import { TooltipWrapped } from "../../elements/Tooltip"
import { styled, theme } from "../../tokens/stitches.config"
import { EditLabelsControl } from "./EditLabelsControl"
import { ReaderSettings } from "./ReaderSettingsModal"
@ -59,22 +60,23 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
<Box
css={{
display: 'flex',
flexDirection: props.layout == 'vertical' ? 'column' : 'row',
alignItems: 'center',
flexDirection: props.layout == 'vertical' ? 'column' : 'row',
justifyContent: props.layout == 'vertical' ? 'center' : 'flex-end',
gap: props.layout == 'vertical' ? '8px' : '20px',
paddingTop: '6px',
height: '100%',
width: '100%',
m: '0px',
}}
>
<ActionDropdown
layout={props.layout}
triggerElement={
<SpanBox css={{ width: '100%', marginLeft: 'auto', marginRight: 'auto' }}>
<TextAa size={24} color={theme.colors.readerFont.toString()} />
</SpanBox>
<TooltipWrapped
tooltipContent="Adjust Display Settings"
tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
>
<TextAa size={24} color={theme.colors.readerFont.toString()} />
</TooltipWrapped>
}
>
<ReaderSettings userPreferences={preferencesData} articleActionHandler={props.articleActionHandler} />
@ -85,9 +87,12 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
<ActionDropdown
layout={props.layout}
triggerElement={
<SpanBox css={{ width: '100%', marginLeft: 'auto', marginRight: 'auto' }}>
<TagSimple size={24} color={theme.colors.readerFont.toString()} />
</SpanBox>
<TooltipWrapped
tooltipContent="Edit Tags"
tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
>
<TagSimple size={24} color={theme.colors.readerFont.toString()} />
</TooltipWrapped>
}
>
<EditLabelsControl
@ -106,13 +111,23 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
</SpanBox>
</Button> */}
<Button style='articleActionIcon' onClick={() => props.articleActionHandler('showHighlights')}>
<HighlighterCircle size={24} color={theme.colors.readerFont.toString()} />
</Button>
<TooltipWrapped
tooltipContent="View Highlights"
tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
>
<Button style='articleActionIcon'>
<HighlighterCircle size={24} color={theme.colors.readerFont.toString()} />
</Button>
</TooltipWrapped>
<MenuSeparator layout={props.layout} />
<Button style='articleActionIcon' onClick={() => props.articleActionHandler('archive')}>
<ArchiveBox size={24} color={theme.colors.readerFont.toString()} />
<TooltipWrapped
tooltipContent="Archive"
tooltipSide={props.layout == 'vertical' ? 'right' : 'bottom'}
>
<ArchiveBox size={24} color={theme.colors.readerFont.toString()} />
</TooltipWrapped>
</Button>
{/* <MenuSeparator layout={props.layout} />