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

Merge pull request #3622 from omnivore-app/debug/web-menu-debugging

Browse Source 
Fix package dependencies for hover actions
This commit is contained in:
Jackson Harper
2024-03-05 12:50:28 +08:00
committed by GitHub
parent 74129ffbd7 4b627d9058
commit 62bfbd57ba
12 changed files with 560 additions and 934 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/components/elements/DropdownElements.tsx
View File

@ -48,6 +48,7 @@ const StyledTriggerItem = styled(Trigger, {
export const DropdownContent = styled(Content, {
width: 195,
zIndex: 100,
backgroundColor: '$grayBg',
borderRadius: '6px',
outline: '1px solid #323232',

17
packages/web/components/elements/InfoLink.tsx
View File

@ -1,18 +1,11 @@
import { Info } from 'phosphor-react'
import { VStack } from '../elements/LayoutPrimitives'
import { theme } from '../tokens/stitches.config'
import { TooltipWrapped } from './Tooltip'
import { EditInfoIcon } from './icons/EditInfoIcon'
type InfoLinkProps = {
href: string
}
const TooltipStyle = {
backgroundColor: '#F9D354',
color: '#0A0806',
}
export function InfoLink(props: InfoLinkProps): JSX.Element {
return (
<VStack
@ -25,15 +18,9 @@ export function InfoLink(props: InfoLinkProps): JSX.Element {
style={{ textDecoration: 'none', width: '24px', height: '24px' }}
target="_blank"
rel="noreferrer"
title="Lean more"
>
<TooltipWrapped
tooltipContent="Learn More"
tooltipSide={'top'}
style={TooltipStyle}
arrowStyles={{ fill: '#F9D354' }}
>
<EditInfoIcon size={24} color={theme.colors.grayText.toString()} />
</TooltipWrapped>
<EditInfoIcon size={24} color={theme.colors.grayText.toString()} />
</a>
</VStack>
)

75
packages/web/components/elements/MobileInstallHelp.tsx
View File

@ -6,7 +6,6 @@ import {
} from 'phosphor-react'
import { Box, HStack } from '../elements/LayoutPrimitives'
import { StyledText, StyledAnchor } from '../elements/StyledText'
import { TooltipWrapped } from './Tooltip'
const TooltipStyle = {
backgroundColor: '#F9D354',
@ -234,51 +233,45 @@ export default function MobileInstallHelp({
}
>
{platformSizes.map((item, idx) => (
<TooltipWrapped
<Box
key={`platformSize-${idx}`}
tooltipContent={item.label}
tooltipSide={'top'}
style={TooltipStyle}
arrowStyles={{ fill: '#F9D354' }}
title={item.label}
css={{
ml: '$1',
}}
>
<Box
<StyledAnchor
onClick={() => setSelectedTooltip(item.label)}
css={{
ml: '$1',
mx: 'auto',
borderRadius: '50%',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
height: 35,
width: 35,
cursor: 'pointer',
backgroundColor: '$labelButtonsBg',
...(selectedTooltip !== item.label && {
filter: 'grayscale(1)',
}),
'&:focus': {
filter: 'grayscale(0)',
},
'&:active': {
filter: 'grayscale(0)',
},
'@lg': {
transition: 'filter .3s linear',
'&:hover': {
filter: 'grayscale(0)',
},
},
}}
>
<StyledAnchor
onClick={() => setSelectedTooltip(item.label)}
css={{
mx: 'auto',
borderRadius: '50%',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
height: 35,
width: 35,
cursor: 'pointer',
backgroundColor: '$labelButtonsBg',
...(selectedTooltip !== item.label && {
filter: 'grayscale(1)',
}),
'&:focus': {
filter: 'grayscale(0)',
},
'&:active': {
filter: 'grayscale(0)',
},
'@lg': {
transition: 'filter .3s linear',
'&:hover': {
filter: 'grayscale(0)',
},
},
}}
>
{item.icon}
</StyledAnchor>
</Box>
</TooltipWrapped>
{item.icon}
</StyledAnchor>
</Box>
))}
</HStack>
</HStack>

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

@ -1,97 +0,0 @@
import React, { FC } from 'react'
import { styled, keyframes } from '@stitches/react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
const slideUpAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateY(2px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
})
const slideRightAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateX(-2px)' },
'100%': { opacity: 1, transform: 'translateX(0)' },
})
const slideDownAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateY(-2px)' },
'100%': { opacity: 1, transform: 'translateY(0)' },
})
const slideLeftAndFade = keyframes({
'0%': { opacity: 0, transform: 'translateX(2px)' },
'100%': { opacity: 1, transform: 'translateX(0)' },
})
const StyledContent = styled(TooltipPrimitive.Content, {
borderRadius: 4,
padding: '8px 13px',
fontSize: 12,
color: '#FFFFFF',
backgroundColor: '#1C1C1E',
'@media (prefers-reduced-motion: no-preference)': {
animationDuration: '400ms',
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
animationFillMode: 'forwards',
willChange: 'transform, opacity',
'&[data-state="delayed-open"]': {
'&[data-side="top"]': { animationName: slideDownAndFade },
'&[data-side="right"]': { animationName: slideLeftAndFade },
'&[data-side="bottom"]': { animationName: slideUpAndFade },
'&[data-side="left"]': { animationName: slideRightAndFade },
},
},
})
const StyledArrow = styled(TooltipPrimitive.Arrow, {
fill: '#1C1C1E',
})
export const TooltipProvider = TooltipPrimitive.Provider
export const Tooltip = TooltipPrimitive.Root
export const TooltipTrigger = TooltipPrimitive.Trigger
export const TooltipContent = StyledContent
export const TooltipArrow = StyledArrow
type TooltipWrappedProps = {
children: React.ReactNode;
tooltipContent: string;
active?: boolean;
tooltipSide?: TooltipPrimitive.TooltipContentProps['side']
align?: TooltipPrimitive.TooltipContentProps['align']
alignOffset?: TooltipPrimitive.TooltipContentProps['alignOffset']
arrowStyles?: TooltipPrimitive.TooltipArrowProps['style']
style?: TooltipPrimitive.TooltipContentProps['style']
}
const DefaultTooltipStyle = {
backgroundColor: '#F9D354',
color: '#0A0806',
}
const DefaultArrowStyle = {
fill: '#F9D354'
}
export const TooltipWrapped: FC<TooltipWrappedProps> = ({
children,
active,
tooltipContent,
tooltipSide,
arrowStyles,
...props
}) => {
return (
<Tooltip open={active}>
<TooltipTrigger asChild>{children}</TooltipTrigger>
<TooltipContent
sideOffset={5}
side={tooltipSide}
style={DefaultTooltipStyle}
{...props}
>
{tooltipContent}
<TooltipArrow style={arrowStyles ?? DefaultArrowStyle} />
</TooltipContent>
</Tooltip>
)
}

9
packages/web/components/patterns/ConfirmationModal.tsx
View File

@ -19,15 +19,8 @@ type ConfirmationModalProps = {
}
export function ConfirmationModal(props: ConfirmationModalProps): JSX.Element {
const safeOnOpenChange = useCallback(
(open: boolean) => {
document.body.style.removeProperty('pointer-events')
props.onOpenChange(open)
},
[props]
)
return (
<ModalRoot defaultOpen onOpenChange={safeOnOpenChange}>
<ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
<ModalOverlay />
<ModalContent css={{ bg: '$grayBg', maxWidth: '20em', zIndex: '20' }}>
<VStack alignment="center" distribution="center" css={{ p: '15px' }}>

3
packages/web/components/patterns/LibraryCards/LibraryHoverActions.tsx
View File

@ -50,6 +50,9 @@ export const LibraryHoverActions = (props: LibraryHoverActionsProps) => {
'0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);',
},
}}
onClick={(event) => {
event.stopPropagation()
}}
>
<Button
title="View notebook (t)"

11
packages/web/components/templates/article/SetLabelsModal.tsx
View File

@ -170,17 +170,8 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
}
}, [highlightLastLabel, selectedLabels, dispatchLabels])
const safeOnOpenChange = useCallback(
(open: boolean) => {
console.log('safe on open change called')
document.body.style.removeProperty('pointer-events')
props.onOpenChange(open)
},
[props]
)
return (
<ModalRoot defaultOpen onOpenChange={safeOnOpenChange}>
<ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
<Dialog.Portal>
<ModalOverlay />
<ModalContent

64
packages/web/components/templates/article/ShareModal.tsx
View File

@ -16,7 +16,6 @@ import { useCopyLink } from '../../../lib/hooks/useCopyLink'
import { CloseIcon } from '../../elements/images/CloseIcon'
import { OmnivoreLogoIcon } from '../../elements/images/OmnivoreNameLogo'
import { useState } from 'react'
import { TooltipWrapped } from '../../elements/Tooltip'
import { TwitterLogo, FacebookLogo } from 'phosphor-react'
type ShareType = 'link' | 'highlight'
@ -102,49 +101,36 @@ export function ShareModalLayout(props: ShareModalLayoutProps): JSX.Element {
<StyledText style="boldText" css={{ m: '0' }}>
Secret URL
</StyledText>
<TooltipWrapped
tooltipContent="Link copied!"
tooltipSide="top"
active={isLinkCopied}
<button
onClick={toggleSwitch}
className="track"
style={{
background:
'linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;',
}}
arrowStyles={{
fill: 'linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;',
display: 'flex',
padding: '2px',
flexDirection: `${switchOn ? 'row-reverse' : 'row'}`,
alignItems: 'center',
width: '40px',
height: '24px',
background: `${
switchOn ? 'rgba(255, 210, 52, 1)' : 'rgba(10, 8, 6, 0.15)'
}`,
borderRadius: '12px',
borderColor: theme.colors.grayBorder.toString(),
borderWidth: 1,
borderStyle: 'solid',
}}
>
<button
onClick={toggleSwitch}
className="track"
<div
className="thumb"
style={{
display: 'flex',
padding: '2px',
flexDirection: `${switchOn ? 'row-reverse' : 'row'}`,
alignItems: 'center',
width: '40px',
height: '24px',
background: `${
switchOn ? 'rgba(255, 210, 52, 1)' : 'rgba(10, 8, 6, 0.15)'
}`,
borderRadius: '12px',
borderColor: theme.colors.grayBorder.toString(),
borderWidth: 1,
borderStyle: 'solid',
width: '20px',
height: '20px',
borderRadius: '20px',
background: 'rgba(255, 255, 255, 1)',
border: '2px solid rgba(0, 0, 0, 0.06)',
}}
>
<div
className="thumb"
style={{
width: '20px',
height: '20px',
borderRadius: '20px',
background: 'rgba(255, 255, 255, 1)',
border: '2px solid rgba(0, 0, 0, 0.06)',
}}
></div>
</button>
</TooltipWrapped>
></div>
</button>
{switchOn && (
<Button style="ctaModal" onClick={copyLink}>
Copy Link

10
packages/web/package.json
View File

@ -20,14 +20,13 @@
"@radix-ui/react-avatar": "^0.1.1",
"@radix-ui/react-checkbox": "^0.1.5",
"@radix-ui/react-dialog": "1.0.5",
"@radix-ui/react-dropdown-menu": "^0.1.6",
"@radix-ui/react-dropdown-menu": "1.0.0",
"@radix-ui/react-id": "^0.1.1",
"@radix-ui/react-popover": "1.0.6",
"@radix-ui/react-popover": "1.0.7",
"@radix-ui/react-progress": "^1.0.1",
"@radix-ui/react-separator": "^0.1.0",
"@radix-ui/react-slider": "^1.1.0",
"@radix-ui/react-switch": "^1.0.1",
"@radix-ui/react-tooltip": "^0.1.7",
"@sentry/nextjs": "^7.42.0",
"@stitches/react": "^1.2.5",
"antd": "4.24.3",
@ -51,6 +50,7 @@
"pspdfkit": "^2023.4.6",
"react": "^18.2.0",
"react-color": "^2.19.3",
"react-colorful": "^5.5.1",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-hot-toast": "^2.1.1",
@ -62,7 +62,7 @@
"react-spinners": "^0.13.7",
"react-super-responsive-table": "^5.2.1",
"react-topbar-progress-indicator": "^4.1.1",
"remark-gfm": "^4.0.0",
"remark-gfm": "^3.0.1",
"sharp": "^0.32.6",
"swr": "^1.0.1",
"uuid": "^8.3.2",
@ -106,4 +106,4 @@
"volta": {
"extends": "../../package.json"
}
}
}

7
packages/web/pages/_app.tsx
View File

@ -5,7 +5,6 @@ import type { AppProps } from 'next/app'
import { IdProvider } from '@radix-ui/react-id'
import { NextRouter, useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { TooltipProvider } from '../components/elements/Tooltip'
import TopBarProgress from 'react-topbar-progress-indicator'
import {
KBarProvider,
@ -66,7 +65,7 @@ const generateActions = (router: NextRouter) => {
return defaultActions
}
function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
export function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
const router = useRouter()
useEffect(() => {
@ -90,9 +89,7 @@ function OmnivoreApp({ Component, pageProps }: AppProps): JSX.Element {
</KBarPositioner>
</KBarPortal>
<IdProvider>
<TooltipProvider delayDuration={200}>
<Component {...pageProps} />
</TooltipProvider>
<Component {...pageProps} />
</IdProvider>
</KBarProvider>
)

47
packages/web/pages/settings/labels.tsx
View File

@ -20,7 +20,6 @@ import { StyledText } from '../../components/elements/StyledText'
import { ArrowClockwise, DotsThree, PencilSimple, Trash } from 'phosphor-react'
import { GenericTableCardProps } from '../../utils/settings-page/labels/types'
import { labelColorObjects } from '../../utils/settings-page/labels/labelColorObjects'
import { TooltipWrapped } from '../../components/elements/Tooltip'
import { LabelColorDropdown } from '../../components/elements/LabelColorDropdown'
import {
Dropdown,
@ -146,8 +145,9 @@ export default function LabelsPage(): JSX.Element {
const [descriptionInputText, setDescriptionInputText] = useState<string>('')
const [isCreateMode, setIsCreateMode] = useState<boolean>(false)
const [windowWidth, setWindowWidth] = useState<number>(0)
const [confirmRemoveLabelId, setConfirmRemoveLabelId] =
useState<string | null>(null)
const [confirmRemoveLabelId, setConfirmRemoveLabelId] = useState<
string | null
>(null)
const [showLabelPageHelp, setShowLabelPageHelp] = usePersistedState<boolean>({
key: `--settings-labels-show-help`,
initialValue: true,
@ -655,30 +655,23 @@ function GenericTableCard(
/>
)}
{showInput && (
<TooltipWrapped
tooltipSide={'top'}
tooltipContent="Random Color"
arrowStyles={{ fill: '#F9D354' }}
style={{ backgroundColor: '#F9D354', color: 'black' }}
>
<Box css={{ py: 4 }}>
<IconButton
style="ctaWhite"
css={{
mr: '$1',
width: 40,
height: 40,
background: '$labelButtonsBg',
}}
onClick={() => handleGenerateRandomColor(label?.id)}
disabled={
!(isCreateMode && !label) && !(editingLabelId === label?.id)
}
>
<ArrowClockwise size={16} color={iconColor} />
</IconButton>
</Box>
</TooltipWrapped>
<Box title="Random color" css={{ py: 4 }}>
<IconButton
style="ctaWhite"
css={{
mr: '$1',
width: 40,
height: 40,
background: '$labelButtonsBg',
}}
onClick={() => handleGenerateRandomColor(label?.id)}
disabled={
!(isCreateMode && !label) && !(editingLabelId === label?.id)
}
>
<ArrowClockwise size={16} color={iconColor} />
</IconButton>
</Box>
)}
{!showInput && (
<Box css={{ marginLeft: 'auto', '@md': { display: 'none' } }}>

1153
yarn.lock
View File

File diff suppressed because it is too large Load Diff