mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-18 19:23:40 +00:00
Show popover on hover on desktop
This commit is contained in:
parent
2fba7a8c77
commit
c651bc26f0
@ -2,11 +2,7 @@
|
||||
|
||||
- [ ] Show loading/success on zap invoice screen
|
||||
- [ ] Fix iOS/safari/firefox
|
||||
- [ ] Add dynamic title tag
|
||||
- [ ] Show more link on long notes (rather than just an ellipsis)
|
||||
- [ ] Show popover on delayed hover rather than click (on mobile, keep it click)
|
||||
- [ ] QR code component that sizes input to qr code width to make it tidy
|
||||
- [ ] Auto-follow hodlbod and fiatjaf, auto join relay when creating new account
|
||||
|
||||
# Image uploads
|
||||
|
||||
@ -48,6 +44,10 @@
|
||||
|
||||
# More
|
||||
|
||||
- [ ] Onboarding
|
||||
- [ ] Auto-follow hodlbod
|
||||
- [ ] Add a friendly tour
|
||||
- [ ] Send a note to @coracle for help
|
||||
- [ ] https://media.nostr.band/
|
||||
- [ ] Make the note relays button modal make sense, one relay with no explanation is not good
|
||||
- [ ] Linkify invoices
|
||||
|
@ -4,6 +4,8 @@
|
||||
import tippy from 'tippy.js'
|
||||
import {onMount} from 'svelte'
|
||||
|
||||
export let triggerType = 'click'
|
||||
|
||||
let trigger
|
||||
let tooltip
|
||||
let instance
|
||||
@ -13,18 +15,21 @@
|
||||
appendTo: () => document.body,
|
||||
allowHTML: true,
|
||||
interactive: true,
|
||||
trigger: 'click',
|
||||
trigger: triggerType,
|
||||
animation: 'shift-away',
|
||||
onShow: () => {
|
||||
const [tooltipContents] = tooltip.children
|
||||
|
||||
instance.popper.querySelector('.tippy-content').appendChild(tooltipContents)
|
||||
instance.popper.addEventListener('mouseleave', e => instance.hide())
|
||||
instance.popper.addEventListener('click', e => {
|
||||
if (e.target.closest('.tippy-close')) {
|
||||
instance.hide()
|
||||
}
|
||||
})
|
||||
// If we've already triggered it, tooltipContents will be empty
|
||||
if (tooltipContents) {
|
||||
instance.popper.querySelector('.tippy-content').appendChild(tooltipContents)
|
||||
instance.popper.addEventListener('mouseleave', e => instance.hide())
|
||||
instance.popper.addEventListener('click', e => {
|
||||
if (e.target.closest('.tippy-close')) {
|
||||
instance.hide()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onHidden: () => {
|
||||
const [tooltipContents] = instance.popper.querySelector('.tippy-content').children
|
||||
|
@ -145,3 +145,4 @@ export const renderContent = content => {
|
||||
return content.trim()
|
||||
}
|
||||
|
||||
export const isMobile = localStorage.mobile || window.navigator.maxTouchPoints > 1
|
||||
|
@ -9,7 +9,7 @@
|
||||
import {quantify} from 'hurdak/lib/hurdak'
|
||||
import {Tags, findRootId, findReplyId, displayPerson, isLike} from 'src/util/nostr'
|
||||
import {formatTimestamp, now, tryJson, stringToColor, formatSats, fetchJson} from 'src/util/misc'
|
||||
import {extractUrls} from "src/util/html"
|
||||
import {extractUrls, isMobile} from "src/util/html"
|
||||
import {invoiceAmount} from 'src/util/lightning'
|
||||
import ImageCircle from 'src/partials/ImageCircle.svelte'
|
||||
import QRCode from 'src/partials/QRCode.svelte'
|
||||
@ -341,7 +341,7 @@
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 flex-grow min-w-0">
|
||||
<div class="flex items-center justify-between">
|
||||
<Popover>
|
||||
<Popover triggerType={isMobile ? 'click' : 'mouseenter'}>
|
||||
<div slot="trigger">
|
||||
<Anchor type="unstyled" class="text-lg font-bold flex gap-2 items-center">
|
||||
<span>{displayPerson($person)}</span>
|
||||
|
Loading…
Reference in New Issue
Block a user