58 lines
1.4 KiB
Svelte
58 lines
1.4 KiB
Svelte
<script>
|
|
import { MoreVerticalIcon } from "svelte-feather-icons";
|
|
import { overlayStore, userInfoStore } from "../stores";
|
|
|
|
export let message;
|
|
</script>
|
|
|
|
<style>
|
|
.message {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
overflow-x: none;
|
|
word-break: break-all;
|
|
padding: var(--space-xxs) var(--space-normplus) var(--space-xxs) var(--space-normplus);
|
|
}
|
|
|
|
.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);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.pending {
|
|
color: var(--foreground-color-3);
|
|
}
|
|
|
|
.author {
|
|
flex-shrink: 0;
|
|
font-weight: bold;
|
|
margin-right: var(--space-xs);
|
|
}
|
|
|
|
.edit-message {
|
|
flex-shrink: 0;
|
|
float: right;
|
|
}
|
|
</style>
|
|
|
|
<div class="message">
|
|
<span class="author">{ message.author_username }</span>
|
|
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
|
|
{#if userInfoStore.value && (message.author_id === userInfoStore.value.id || userInfoStore.value.is_superuser)}
|
|
<button class="icon-button icon-button-auto edit-message" on:click="{ () => overlayStore.open('editMessage', { message }) }">
|
|
<MoreVerticalIcon />
|
|
</button>
|
|
{/if}
|
|
</div>
|