garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

scrolling on mobile triggers a click outside

Browse Source
This commit is contained in:
Athou
2022-10-27 14:37:06 +02:00
parent b06187ddf7
commit b3700dc09e
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
commafeed-client/src/components/content/FeedEntryFooter.tsx
View File

@@ -1,5 +1,6 @@
import { t } from "@lingui/macro" import { t } from "@lingui/macro"
import { Checkbox, Group, Indicator, MultiSelect, Popover } from "@mantine/core" import { Checkbox, Group, Indicator, MultiSelect, Popover } from "@mantine/core"
import { useMediaQuery } from "@mantine/hooks"
import { Constants } from "app/constants" import { Constants } from "app/constants"
import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/slices/entries" import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/slices/entries"
import { useAppDispatch, useAppSelector } from "app/store" import { useAppDispatch, useAppSelector } from "app/store"
@@ -17,6 +18,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
const [scrollPosition, setScrollPosition] = useState(0) const [scrollPosition, setScrollPosition] = useState(0)
const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings) const sharingSettings = useAppSelector(state => state.user.settings?.sharingSettings)
const tags = useAppSelector(state => state.user.tags) const tags = useAppSelector(state => state.user.tags)
const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint}px)`)
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const showSharingButtons = const showSharingButtons =
@@ -60,7 +62,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
/> />
{showSharingButtons && ( {showSharingButtons && (
<Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]}> <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]} closeOnClickOutside={!mobile}>
<Popover.Target> <Popover.Target>
<ActionButton icon={<TbShare size={18} />} label={t`Share`} /> <ActionButton icon={<TbShare size={18} />} label={t`Share`} />
</Popover.Target> </Popover.Target>
@@ -71,7 +73,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
)} )}
{tags && ( {tags && (
<Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]}> <Popover withArrow withinPortal shadow="md" positionDependencies={[scrollPosition]} closeOnClickOutside={!mobile}>
<Popover.Target> <Popover.Target>
<Indicator label={props.entry.tags.length} showZero={false} dot={false} inline size={16}> <Indicator label={props.entry.tags.length} showZero={false} dot={false} inline size={16}>
<ActionButton icon={<TbTag size={18} />} label={t`Tags`} /> <ActionButton icon={<TbTag size={18} />} label={t`Tags`} />