mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-29 00:10:52 +00:00
Clean up wot popover
This commit is contained in:
parent
847bd78311
commit
4f8a1e961e
@ -16,7 +16,6 @@
|
||||
import cx from "classnames"
|
||||
import {derived} from "svelte/store"
|
||||
import {session, deriveProfileDisplay} from "@welshman/app"
|
||||
import {isMobile} from "src/util/html"
|
||||
import Popover from "src/partials/Popover.svelte"
|
||||
import Anchor from "src/partials/Anchor.svelte"
|
||||
import WotScore from "src/partials/WotScore.svelte"
|
||||
@ -32,20 +31,9 @@
|
||||
const npubDisplay = displayPubkey(pubkey)
|
||||
const profileDisplay = deriveProfileDisplay(pubkey)
|
||||
const accent = $following || pubkey === $session?.pubkey
|
||||
|
||||
function handleClick(event: MouseEvent) {
|
||||
if (isMobile) {
|
||||
const target = event.target as HTMLElement
|
||||
const popoverBlock = (event.currentTarget as HTMLElement).querySelector(".popover-block")
|
||||
|
||||
if (popoverBlock && popoverBlock.contains(target)) {
|
||||
event.stopPropagation()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<button type="button" class={cx("flex gap-1", $$props.class)} on:click={handleClick}>
|
||||
<div class={cx("flex gap-1", $$props.class)}>
|
||||
<div class="flex flex-col overflow-hidden text-ellipsis">
|
||||
<span class="cy-person-name">{$profileDisplay}</span>
|
||||
{#if $profileDisplay != npubDisplay}
|
||||
@ -58,8 +46,8 @@
|
||||
{/if}
|
||||
</div>
|
||||
{#if $session}
|
||||
<div class="popover-block flex gap-1 font-normal">
|
||||
<Popover triggerType="mouseenter">
|
||||
<div class="flex gap-1 font-normal" on:click|stopPropagation>
|
||||
<Popover triggerType="mouseenter" opts={{hideOnClick: true}}>
|
||||
<div slot="trigger">
|
||||
<WotScore score={wotScore} max={$maxWot} {accent} />
|
||||
</div>
|
||||
@ -70,4 +58,4 @@
|
||||
</Popover>
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
@ -20,13 +20,9 @@
|
||||
let trigger
|
||||
let tooltip
|
||||
|
||||
$: adjustedTriggerType = isMobile && triggerType === "mouseenter" ? "click" : triggerType
|
||||
$: adjustedTriggerType = isMobile ? "click" : triggerType
|
||||
|
||||
onMount(() => {
|
||||
if (!adjustedTriggerType) {
|
||||
return
|
||||
}
|
||||
|
||||
instance = tippy(trigger, {
|
||||
...opts,
|
||||
theme,
|
||||
@ -84,10 +80,8 @@
|
||||
<slot name="trigger" />
|
||||
</div>
|
||||
|
||||
{#if adjustedTriggerType}
|
||||
<div bind:this={tooltip} class="hidden">
|
||||
<div bind:this={tooltip} class="hidden">
|
||||
<div>
|
||||
<slot name="tooltip" {instance} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user