prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Always display the dropdown menu on touch devices

Browse source
This commit is contained in:
Jackson Harper 2023-06-26 16:27:31 +08:00
parent b6cbbd765d
commit 3f17538cb8
3 changed files with 66 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
View file

@ -6,6 +6,22 @@ import { Box, SpanBox } from '../../elements/LayoutPrimitives'
dayjs.extend(relativeTime)
export const MenuStyle = {
display: 'flex',
marginLeft: 'auto',
height: '30px',
width: '30px',
mt: '-5px',
mr: '-5px',
pt: '2px',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '1000px',
'&:hover': {
bg: '$thBackground4',
},
}
export const MetaStyle = {
width: '100%',
color: '$thTextSubtle3',

26
packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
View file

@ -14,6 +14,7 @@ import {
MetaStyle,
siteName,
TitleStyle,
MenuStyle,
} from './LibraryCardStyles'
import { sortedLabels } from '../../../lib/labelsSort'
import { LibraryHoverActions } from './LibraryHoverActions'
@ -25,6 +26,8 @@ import {
offset,
autoUpdate,
} from '@floating-ui/react'
import { CardMenu } from '../CardMenu'
import { DotsThree } from 'phosphor-react'
dayjs.extend(relativeTime)
@ -145,6 +148,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
const { isChecked, setIsChecked, item } = props
const [menuOpen, setMenuOpen] = useState(false)
const originText = siteName(props.item.originalArticleUrl, props.item.url)
const handleCheckChanged = useCallback(() => {
@ -161,13 +165,33 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
distribution="start"
>
<LibraryItemMetadata item={props.item} />
{props.inMultiSelect && (
{props.inMultiSelect ? (
<SpanBox css={{ marginLeft: 'auto' }}>
<CardCheckbox
isChecked={props.isChecked}
handleChanged={handleCheckChanged}
/>
</SpanBox>
) : (
<Box
css={{
...MenuStyle,
visibility: menuOpen ? 'visible' : 'hidden',
'@media (hover: none)': {
visibility: 'unset',
},
}}
>
<CardMenu
item={props.item}
viewer={props.viewer}
onOpenChange={(open) => setMenuOpen(open)}
actionHandler={props.handleAction}
triggerElement={
<DotsThree size={25} weight="bold" color="#ADADAD" />
}
/>
</Box>
)}
</HStack>

27
packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
View file

@ -10,6 +10,7 @@ import {
MetaStyle,
siteName,
TitleStyle,
MenuStyle,
} from './LibraryCardStyles'
import { sortedLabels } from '../../../lib/labelsSort'
import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/homeFeed/LibraryFilterMenu'
@ -22,6 +23,8 @@ import {
offset,
autoUpdate,
} from '@floating-ui/react'
import { CardMenu } from '../CardMenu'
import { DotsThree } from 'phosphor-react'
export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
const [isHovered, setIsHovered] = useState(false)
@ -34,7 +37,6 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
middleware: [
offset({
mainAxis: -25,
// crossAxis: -10,
}),
size(),
],
@ -126,6 +128,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
export function LibraryListCardContent(
props: LinkedItemCardProps
): JSX.Element {
const [menuOpen, setMenuOpen] = useState(false)
const { isChecked, setIsChecked, item } = props
const originText = siteName(props.item.originalArticleUrl, props.item.url)
@ -137,13 +140,33 @@ export function LibraryListCardContent(
<>
<HStack css={MetaStyle} distribution="start">
<LibraryItemMetadata item={props.item} showProgress={true} />
{props.inMultiSelect && (
{props.inMultiSelect ? (
<SpanBox css={{ marginLeft: 'auto' }}>
<CardCheckbox
isChecked={props.isChecked}
handleChanged={handleCheckChanged}
/>
</SpanBox>
) : (
<Box
css={{
...MenuStyle,
visibility: menuOpen ? 'visible' : 'hidden',
'@media (hover: none)': {
visibility: 'unset',
},
}}
>
<CardMenu
item={props.item}
viewer={props.viewer}
onOpenChange={(open) => setMenuOpen(open)}
actionHandler={props.handleAction}
triggerElement={
<DotsThree size={25} weight="bold" color="#ADADAD" />
}
/>
</Box>
)}
</HStack>
<VStack