add MessageInfoModal

2024-07-21 13:13:41 +02:00
parent a0932c2198
commit ca8f1d3348
10 changed files with 409 additions and 78 deletions
@@ -1,21 +1,46 @@
 import * as React from "bloatless-react";

+import { ChatMessageInfoModal } from "./chatMessageInfoModal";
 import ChatMessageViewModel from "../../Model/chatMessageViewModel";
+import { translations } from "../translations";

 export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
+  const isInfoModalOpen = new React.State(false);
+  function openModal() {
+    isInfoModalOpen.value = true;
+  }
+
  return (
    <div
      class="message-bubble"
      toggle:sentbyuser={chatMessageViewModel.sentByUser}
    >
-      <div>
-        <span class="sender-name ellipsis">{chatMessageViewModel.sender}</span>
-        <span
-          class="body"
-          subscribe:innerText={chatMessageViewModel.body}
-        ></span>
-        <span class="timestamp ellipsis">{chatMessageViewModel.dateSent}</span>
+      <div class="main">
+        <div class="text-container">
+          <span class="sender-name ellipsis">
+            {chatMessageViewModel.sender}
+          </span>
+          <span
+            class="body"
+            subscribe:innerText={chatMessageViewModel.body}
+          ></span>
+          <span class="timestamp ellipsis">
+            {chatMessageViewModel.dateSent}
+          </span>
+        </div>
+        <div class="button-container">
+          <button
+            on:click={openModal}
+            aria-label={
+              translations.chatPage.message.showMessageInfoButtonAudioLabel
+            }
+          >
+            <span class="icon">info</span>
+          </button>
+        </div>
      </div>
+
+      {ChatMessageInfoModal(chatMessageViewModel, isInfoModalOpen)}
    </div>
  );
 }