mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-05 12:53:43 +00:00
Add modal for note detail
This commit is contained in:
parent
9a929ce78d
commit
fef1aa6ce3
@ -4,10 +4,15 @@
|
||||
|
||||
import {onMount} from "svelte"
|
||||
import {writable} from "svelte/store"
|
||||
import {fly} from "svelte/transition"
|
||||
import {fly, fade} from "svelte/transition"
|
||||
import {cubicInOut} from "svelte/easing"
|
||||
import {Router, Route, links, navigate} from "svelte-routing"
|
||||
import {globalHistory} from "svelte-routing/src/history"
|
||||
import {hasParent} from 'src/util/html'
|
||||
import {store as toast} from "src/state/toast"
|
||||
import {modal} from "src/state/app"
|
||||
import {user} from 'src/state/user'
|
||||
import NoteDetail from "src/partials/NoteDetail.svelte"
|
||||
import NotFound from "src/routes/NotFound.svelte"
|
||||
import Notes from "src/routes/Notes.svelte"
|
||||
import Login from "src/routes/Login.svelte"
|
||||
@ -31,11 +36,16 @@
|
||||
export let url = ""
|
||||
|
||||
onMount(() => {
|
||||
// Close menu on click outside
|
||||
document.querySelector("html").addEventListener("click", e => {
|
||||
if (e.target !== menuIcon) {
|
||||
menuIsOpen.set(false)
|
||||
}
|
||||
})
|
||||
|
||||
globalHistory.listen(() => {
|
||||
modal.set(null)
|
||||
})
|
||||
})
|
||||
|
||||
// Give the animation a moment to finish
|
||||
@ -47,6 +57,8 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:body on:keydown={e => e.key === 'Escape' && modal.set(null)} />
|
||||
|
||||
<Router {url}>
|
||||
<div use:links class="h-full">
|
||||
<div class="pt-16 text-white h-full">
|
||||
@ -127,6 +139,22 @@
|
||||
<h1 class="staatliches text-3xl">Coracle</h1>
|
||||
</div>
|
||||
|
||||
{#if $modal}
|
||||
<div class="fixed inset-0">
|
||||
<div
|
||||
class="absolute inset-0 opacity-75 bg-black cursor-pointer"
|
||||
transition:fade
|
||||
on:click={e => modal.set(null)} />
|
||||
<div class="absolute inset-0 mt-20 sm:mt-32 modal-content" transition:fly={{y: 1000, opacity: 1}}>
|
||||
<dialog open class="bg-dark border-t border-solid border-medium h-full w-full">
|
||||
{#if $modal.note}
|
||||
<NoteDetail note={$modal.note} />
|
||||
{/if}
|
||||
</dialog>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $toast}
|
||||
<div
|
||||
class="fixed bottom-0 left-0 right-0 pointer-events-none"
|
||||
|
@ -1,17 +1,19 @@
|
||||
<script>
|
||||
import cx from 'classnames'
|
||||
import {fly} from 'svelte/transition'
|
||||
import {navigate} from 'svelte-routing'
|
||||
import {ellipsize} from 'hurdak/src/core'
|
||||
import {hasParent} from 'src/util/html'
|
||||
import {accounts} from "src/state/app"
|
||||
import {accounts, modal} from "src/state/app"
|
||||
import {formatTimestamp} from 'src/util/misc'
|
||||
import UserBadge from "src/partials/UserBadge.svelte"
|
||||
|
||||
export let note
|
||||
export let interactive = false
|
||||
|
||||
const onClick = e => {
|
||||
if (!['I'].includes(e.target.tagName) && !hasParent('a', e.target)) {
|
||||
navigate(`/notes/${note.id}`)
|
||||
modal.set({note})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -19,7 +21,10 @@
|
||||
<li
|
||||
in:fly={{y: 20}}
|
||||
on:click={onClick}
|
||||
class="py-2 px-3 chat-message flex flex-col gap-2 hover:bg-dark border border-solid border-black hover:border-medium transition-all cursor-pointer">
|
||||
class={cx("py-2 px-3 flex flex-col gap-2 text-white", {
|
||||
"hover:bg-dark transition-all cursor-pointer": interactive,
|
||||
"border border-solid border-black hover:border-medium": interactive,
|
||||
})}>
|
||||
<div class="flex gap-4 items-center justify-between">
|
||||
<UserBadge user={$accounts[note.pubkey]} />
|
||||
<p class="text-sm text-light">{formatTimestamp(note.created_at)}</p>
|
||||
|
13
src/partials/NoteDetail.svelte
Normal file
13
src/partials/NoteDetail.svelte
Normal file
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import {onMount} from 'svelte'
|
||||
import {ensureAccount} from 'src/state/app'
|
||||
import Note from 'src/partials/Note.svelte'
|
||||
|
||||
export let note
|
||||
|
||||
onMount(() => {
|
||||
ensureAccount(note.account)
|
||||
})
|
||||
</script>
|
||||
|
||||
<Note note={note} />
|
@ -34,7 +34,7 @@
|
||||
|
||||
<ul class="py-8 flex flex-col gap-4 max-w-xl m-auto">
|
||||
{#each reverse(notes) as n}
|
||||
<Note note={n} />
|
||||
<Note interactive note={n} />
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
|
@ -54,7 +54,7 @@
|
||||
<div class="h-px bg-medium" in:fly={{y: 20, delay: 200}} />
|
||||
<div class="flex flex-col gap-4" in:fly={{y: 20, delay: 400}}>
|
||||
{#each reverse(notes) as note}
|
||||
<Note note={note} />
|
||||
<Note interactive note={note} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -4,6 +4,8 @@ import {getLocalJson, setLocalJson, now, timedelta} from "src/util/misc"
|
||||
import {user} from 'src/state/user'
|
||||
import {nostr} from 'src/state/nostr'
|
||||
|
||||
export const modal = writable(null)
|
||||
|
||||
export const rooms = writable(getLocalJson("coracle/rooms") || {})
|
||||
|
||||
rooms.subscribe($rooms => {
|
||||
|
@ -46,8 +46,8 @@ export const stripExifData = async file => {
|
||||
}
|
||||
|
||||
export const hasParent = (tag, e) => {
|
||||
while (e.parentNode) {
|
||||
if (e.parentNode.tagName === tag.toUpperCase()) {
|
||||
while (e) {
|
||||
if (e.tagName === tag.toUpperCase()) {
|
||||
return true
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user