blob: 2705e4bff2c3778bb6747c595ae64f6c91068b73 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<script>
import SvelteMarkdown from 'svelte-markdown';
import { currentUser, logins } from '$lib/store';
import { deleteMessage } from '$lib/apiServer';
export let at; // XXX: Omitted for now.
export let sender;
export let body;
let timestamp = new Date(at).toTimeString();
let name;
$: name = $logins.get(sender);
$: ownMessage = $currentUser.id == sender;
</script>
<div class="card card-hover m-4 relative" class:own-message={ownMessage} class:other-message={!ownMessage}>
<span class="chip variant-soft sticky top-o left-0">
<!-- TODO: should this show up for only the first of a run? -->
@{name}:
</span>
<span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
<section class="p-4">
<SvelteMarkdown source={body} />
</section>
</div>
<style>
.card .timestamp {
display: none;
}
.card:hover .timestamp {
display: flex;
}
.own-message {
width: 80%;
margin-right: auto;
}
.other-message {
width: 80%;
margin-left: auto;
}
</style>
|
