waffle/frontend/src/components/Message.svelte
2022-04-26 23:15:49 +03:00

50 lines
1.1 KiB
Svelte

<script>
import { MoreVerticalIcon } from "svelte-feather-icons";
import { overlayStore } from "../stores";
export let message;
</script>
<style>
.message {
overflow-x: none;
word-break: break-all;
}
.message .edit-message {
visibility: hidden;
}
.message:hover {
background-color: var(--background-color-2);
}
.message:hover .edit-message {
visibility: visible;
}
.message-content {
color: var(--foreground-color-2);
}
.pending {
color: var(--foreground-color-3);
}
.author {
font-weight: bold;
margin-right: var(--space-xxs);
}
.edit-message {
float: right;
}
</style>
<div class="message">
<span class="author">{ message.author_username }</span>
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
<button class="icon-button edit-message" on:click="{ () => overlayStore.open('editMessage', { message }) }">
<MoreVerticalIcon />
</button>
</div>