122 lines
3 KiB
Svelte
122 lines
3 KiB
Svelte
<script>
|
|
import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";
|
|
|
|
export let message;
|
|
|
|
const reply = () => {
|
|
let replyString = "";
|
|
const messageLines = message.content.split("\n");
|
|
|
|
messageLines.forEach(line => {
|
|
replyString += `> ${line}\n`;
|
|
});
|
|
|
|
replyString += `@${message.author_username}: `;
|
|
|
|
setMessageInputEvent.emit(replyString);
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.message {
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
word-wrap: break-word;
|
|
padding: 3px 3px 3px var(--space-normplus);
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.message:hover, .message.pinged {
|
|
background-color: var(--background-color-2);
|
|
}
|
|
|
|
.message-content {
|
|
color: var(--foreground-color-2);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.pending {
|
|
color: var(--foreground-color-3);
|
|
}
|
|
|
|
.author {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
font-weight: bold;
|
|
color: var(--foreground-color-2);
|
|
}
|
|
|
|
.author-more {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.author-group {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.message-author-date {
|
|
color: var(--foreground-color-3);
|
|
font-size: 0.7rem;
|
|
margin-left: var(--space-sm);
|
|
}
|
|
|
|
.message.clumped {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.via-badge {
|
|
background-color: var(--background-color-3);
|
|
margin-left: var(--space-xs);
|
|
cursor: default;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.message-actions {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 12px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.message-actions .icon-button {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.message .message-actions {
|
|
display: none;
|
|
}
|
|
|
|
.message:hover .message-actions {
|
|
display: flex;
|
|
}
|
|
</style>
|
|
|
|
<div class="message" class:clumped={ message._clumped } class:has-children={ message._hasChildren } class:pinged={ message._mentions }>
|
|
{#if !message._clumped}
|
|
<div class="author-group">
|
|
<span class="author" class:author-more={message._viaBadge}>{ message._effectiveAuthor }</span>
|
|
{#if message._viaBadge}
|
|
<span class="user-badge via-badge">via { message._viaBadge }</span>
|
|
{/if}
|
|
<span class="message-author-date">{ message._createdAtTimeString }</span>
|
|
</div>
|
|
{/if}
|
|
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
|
|
|
|
<div class="message-actions">
|
|
<button class="icon-button material-icons-outlined" on:click="{ reply }" aria-label="Reply to Message">
|
|
reply
|
|
</button>
|
|
{#if message._editable}
|
|
<button class="icon-button material-icons-outlined" on:click="{ () => overlayStore.push(OverlayType.EditMessage, { message }) }" aria-label="Edit Message">
|
|
edit
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|