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