waffle/frontend/src/components/Message.svelte

102 lines
2.8 KiB
Svelte
Raw Normal View History

<script>
2022-09-01 19:56:19 +03:00
import { CornerUpLeftIcon, MoreVerticalIcon } from "svelte-feather-icons";
2022-09-03 20:46:27 +03:00
import { getItem } from "../storage";
2022-09-03 17:30:39 +03:00
import { overlayStore, OverlayType, setMessageInputEvent, userInfoStore } from "../stores";
2022-04-26 23:15:49 +03:00
export let message;
2022-09-01 19:56:19 +03:00
const reply = () => {
let replyString = "";
const messageLines = message.content.split("\n");
messageLines.forEach(line => {
replyString += `> ${line}\n`;
});
replyString += `@${message.author_username}: `;
2022-09-01 19:56:19 +03:00
setMessageInputEvent.update(replyString);
};
</script>
<style>
.message {
display: flex;
align-items: flex-start;
2022-09-03 20:46:27 +03:00
align-items: center;
2022-08-31 16:12:54 +03:00
overflow-x: hidden;
word-break: break-all;
padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-normplus);
}
.message.pinged {
background-color: var(--background-color-2);
}
2022-04-26 23:15:49 +03:00
.message .edit-message {
visibility: hidden;
}
.message:hover {
background-color: var(--background-color-3);
2022-04-26 23:15:49 +03:00
}
.message:hover .edit-message {
visibility: visible;
}
.message-content {
color: var(--foreground-color-2);
2022-05-07 16:50:04 +03:00
white-space: pre-wrap;
}
.pending {
color: var(--foreground-color-3);
}
.author {
flex-shrink: 0;
font-weight: bold;
margin-right: var(--space-xs);
}
2022-04-26 23:15:49 +03:00
.edit-message {
flex-shrink: 0;
2022-04-26 23:15:49 +03:00
float: right;
}
2022-09-03 20:46:27 +03:00
.date {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--background-color-2);
padding-top: 1px;
padding-bottom: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
border-radius: 9999px;
font-size: small;
visibility: hidden;
margin-left: auto;
}
.message:hover .date {
visibility: visible;
}
</style>
<div class="message" class:pinged={ userInfoStore.value && message.content.includes(`@${userInfoStore.value.username}`) }>
<span class="author">{ message.author_username }</span>
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
2022-09-03 20:46:27 +03:00
<span class="date">{ new Intl.DateTimeFormat(getItem("ui:locale"), { hour: "numeric", minute: "numeric" }).format(new Date(parseInt(message.created_at))) }</span>
<button class="icon-button edit-message" on:click="{ reply }" aria-label="Reply to Message">
2022-09-01 19:56:19 +03:00
<CornerUpLeftIcon />
</button>
{#if userInfoStore.value && (message.author_id === userInfoStore.value.id || userInfoStore.value.is_superuser)}
2022-09-03 17:30:39 +03:00
<button class="icon-button edit-message" on:click="{ () => overlayStore.push(OverlayType.EditMessage, { message }) }" aria-label="Edit Message">
<MoreVerticalIcon />
</button>
{/if}
</div>