VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup, prepare BoardSettingsModal

Browse Source
This commit is contained in:
marlon-erler
2024-07-23 13:09:46 +02:00
parent 3aae049106
commit 3eb823c305
11 changed files with 222 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/View/Components/chatMessage.tsx
+3 -8
View File
@@ -1,16 +1,11 @@
import * as React from "bloatless-react";
import { ChatMessageInfoModal } from "./chatMessageInfoModal";
import { ChatMessageInfoModal } from "../Modals/chatMessageInfoModal";
import { ChatMessageStatus } from "../../Model/Chat/chatModel";
import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
import { translations } from "../translations";
export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
const isInfoModalOpen = new React.State(false);
function openModal() {
isInfoModalOpen.value = true;
}
const statusIcon = React.createProxyState(
[chatMessageViewModel.status],
() => {
@@ -49,7 +44,7 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
<div class="button-container">
<button
on:click={openModal}
on:click={chatMessageViewModel.showInfoModal}
aria-label={
translations.chatPage.message.showMessageInfoButtonAudioLabel
}
@@ -59,7 +54,7 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
</div>
</div>
{ChatMessageInfoModal(chatMessageViewModel, isInfoModalOpen)}
{ChatMessageInfoModal(chatMessageViewModel)}
</div>
);
}
src/View/Components/chatMessageInfoModal.tsx
-84
View File
@@ -1,84 +0,0 @@
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>
);
}