mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-29 00:10:52 +00:00
Put notification details in a modal
This commit is contained in:
parent
070bed6912
commit
862f1a6678
@ -3,6 +3,7 @@
|
||||
# 0.3.3
|
||||
|
||||
- [x] Add ability to start a chat from the messages list page (NIP 24 only)
|
||||
- [x] Move notification info to modal
|
||||
|
||||
# 0.3.2
|
||||
|
||||
|
@ -16,6 +16,7 @@
|
||||
import NoteShare from "src/app/views/NoteShare.svelte"
|
||||
import PublishInfo from "src/app/views/PublishInfo.svelte"
|
||||
import NoteDetail from "src/app/views/NoteDetail.svelte"
|
||||
import NotificationInfo from "src/app/views/NotificationInfo.svelte"
|
||||
import ThreadDetail from "src/app/views/ThreadDetail.svelte"
|
||||
import PersonDetail from "src/app/views/PersonDetail.svelte"
|
||||
import PersonList from "src/app/shared/PersonList.svelte"
|
||||
@ -42,6 +43,8 @@
|
||||
<NoteZap note={m.note} />
|
||||
{:else if m.type === "note/share"}
|
||||
<NoteShare note={m.note} />
|
||||
{:else if m.type === "notification/info"}
|
||||
<NotificationInfo zaps={m.zaps} likes={m.likes} replies={m.replies} />
|
||||
{:else if m.type === "thread/detail"}
|
||||
<ThreadDetail anchorId={m.anchorId} relays={m.relays} />
|
||||
{:else if m.type === "publish/info"}
|
||||
|
@ -6,9 +6,7 @@
|
||||
import PersonCircle from "src/app/shared/PersonCircle.svelte"
|
||||
import PersonName from "src/app/shared/PersonName.svelte"
|
||||
import Card from "src/partials/Card.svelte"
|
||||
import Popover from "src/partials/Popover.svelte"
|
||||
import NoteContent from "src/app/shared/NoteContent.svelte"
|
||||
import NotificationSection from "src/app/views/NotificationSection.svelte"
|
||||
import {modal} from "src/partials/state"
|
||||
|
||||
export let event
|
||||
@ -35,6 +33,8 @@
|
||||
|
||||
return "reacted to"
|
||||
})
|
||||
|
||||
const showDetails = () => modal.push({type: "notification/info", zaps, likes, replies})
|
||||
</script>
|
||||
|
||||
{#if note}
|
||||
@ -51,24 +51,10 @@
|
||||
<span>mentioned you.</span>
|
||||
</div>
|
||||
{:else}
|
||||
<Popover>
|
||||
<div slot="trigger">
|
||||
<div on:click={showDetails}>
|
||||
{quantify(pubkeys.length, "person", "people")}
|
||||
{actionText} your note.
|
||||
</div>
|
||||
<div slot="tooltip" class="flex flex-col gap-4 py-2">
|
||||
{#if zaps.length > 0}
|
||||
<NotificationSection pubkeys={pluck("pubkey", zaps)}>Zapped by</NotificationSection>
|
||||
{/if}
|
||||
{#if likes.length > 0}
|
||||
<NotificationSection pubkeys={pluck("pubkey", likes)}>Liked by</NotificationSection>
|
||||
{/if}
|
||||
{#if replies.length > 0}
|
||||
<NotificationSection pubkeys={pluck("pubkey", replies)}
|
||||
>Replies</NotificationSection>
|
||||
{/if}
|
||||
</div>
|
||||
</Popover>
|
||||
{/if}
|
||||
<small>
|
||||
{formatTimestamp(event.created_at)}
|
||||
|
22
src/app/views/NotificationInfo.svelte
Normal file
22
src/app/views/NotificationInfo.svelte
Normal file
@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
import {pluck} from 'ramda'
|
||||
import type {Event} from 'src/engine/types'
|
||||
import Content from "src/partials/Content.svelte"
|
||||
import NotificationSection from "src/app/views/NotificationSection.svelte"
|
||||
|
||||
export let zaps: Event[]
|
||||
export let likes: Event[]
|
||||
export let replies: Event[]
|
||||
</script>
|
||||
|
||||
<Content>
|
||||
{#if zaps.length > 0}
|
||||
<NotificationSection label="Zapped by" pubkeys={pluck("pubkey", zaps)} />
|
||||
{/if}
|
||||
{#if likes.length > 0}
|
||||
<NotificationSection label="Liked by" pubkeys={pluck("pubkey", likes)} />
|
||||
{/if}
|
||||
{#if replies.length > 0}
|
||||
<NotificationSection label="Replies" pubkeys={pluck("pubkey", replies)} />
|
||||
{/if}
|
||||
</Content>
|
@ -1,14 +1,13 @@
|
||||
<script lang="ts">
|
||||
import PersonBadge from "src/app/shared/PersonBadge.svelte"
|
||||
|
||||
export let label
|
||||
export let pubkeys
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<slot />
|
||||
<div class="flex flex-col gap-2">
|
||||
<p class="text-xl">{label}</p>
|
||||
<div class="flex flex-col gap-4">
|
||||
{#each pubkeys as pubkey}
|
||||
<PersonBadge {pubkey} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user