blob: d3ecbd8e18145dc6fbde56f93877d60464d09396 (
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
|
<script>
import { currentUser } from '../store';
import { deleteMessage } from '../apiServer';
export let at;
export let sender;
export let message;
let timestamp = new Date(at).toTimeString();
function handleDeleteMessage() {
deleteMessage(message.id);
}
</script>
<div class="hover:bg-zinc-300 flex flex-row">
<div class="sender basis-20 text-right mr-1">
@{sender.name}:
</div>
<div class="body grow">
{message.body}
</div>
<div class="timestamp basis-6">
<!-- TODO: this is too long and looks awful. -->
<!-- {timestamp} -->
</div>
{#if sender.id === $currentUser?.id}
<div class="controls basis-1 hidden relative -top-3 rounded-md border-2 border-slate-600 px-1 bg-slate-300">
<button on:click|preventDefault={handleDeleteMessage}>🗑</button>
</div>
{/if}
</div>
<style>
div:hover .controls {
display: block;
}
</style>
|
