85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import * as React from "bloatless-react";
|
|
|
|
import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
|
|
import { translations } from "../translations";
|
|
|
|
export function ChatMessageInfoModal(
|
|
chatMessageViewModel: ChatMessageViewModel,
|
|
isOpen: React.State<boolean>
|
|
) {
|
|
function closeModal() {
|
|
isOpen.value = false;
|
|
}
|
|
|
|
return (
|
|
<div class="modal" toggle:open={isOpen}>
|
|
<div>
|
|
<main>
|
|
<h2>{translations.chatPage.message.messageInfoHeadline}</h2>
|
|
|
|
<div class="flex-column gap">
|
|
<div class="tile">
|
|
<span class="icon">account_circle</span>
|
|
<div>
|
|
<span>{translations.chatPage.message.sentBy}</span>
|
|
<b class="break-word">{chatMessageViewModel.sender}</b>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tile">
|
|
<span class="icon">schedule</span>
|
|
<div>
|
|
<span>{translations.chatPage.message.timeSent}</span>
|
|
<b class="break-word">{chatMessageViewModel.dateSent}</b>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tile">
|
|
<span class="icon">forum</span>
|
|
<div>
|
|
<span>{translations.chatPage.message.channel}</span>
|
|
<b class="break-word">{chatMessageViewModel.channel}</b>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tile">
|
|
<span class="icon">description</span>
|
|
<div>
|
|
<span>{translations.chatPage.message.messageContent}</span>
|
|
<b
|
|
class="break-word"
|
|
subscribe:innerText={chatMessageViewModel.body}
|
|
></b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr></hr>
|
|
|
|
<div class="flex-column gap">
|
|
<button on:click={chatMessageViewModel.copyMessage}>
|
|
{translations.chatPage.message.copyMessageButton}
|
|
<span class="icon">content_copy</span>
|
|
</button>
|
|
<button on:click={chatMessageViewModel.resendMessage}>
|
|
{translations.chatPage.message.resendMessageButton}
|
|
<span class="icon">redo</span>
|
|
</button>
|
|
<button on:click={chatMessageViewModel.decryptMessage}>
|
|
{translations.chatPage.message.decryptMessageButton}
|
|
<span class="icon">key</span>
|
|
</button>
|
|
</div>
|
|
</main>
|
|
<button
|
|
on:click={closeModal}
|
|
aria-label={translations.general.closeButton}
|
|
>
|
|
{translations.general.closeButton}
|
|
<span class="icon">close</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|