add MessageInfoModal

2024-07-21 13:13:41 +02:00
parent a0932c2198
commit ca8f1d3348
10 changed files with 409 additions and 78 deletions
@@ -0,0 +1,84 @@
+import * as React from "bloatless-react";
+
+import ChatMessageViewModel from "../../Model/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>
+  );
+}