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

add infotile component, use in message modal

Browse Source
This commit is contained in:
marlon-erler
2026-04-09 15:42:53 +00:00
parent 3b00395036
commit 31418f5df0
2 changed files with 23 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/View/Components/infoTile.tsx
+18
View File
@@ -0,0 +1,18 @@
import * as React from "bloatless-react";
export function InfoTile(icon: string, label: string, content: string|React.State<string>) {
let contentState: React.State<string>
if (typeof content == "string") {
contentState = new React.State(content);
} else {
contentState = content;
}
return <div class="tile">
<span class="icon">{icon}</span>
<div>
<span>{label}</span>
<b class="break-word" subscribe:innerText={contentState}></b>
</div>
</div>;
}
src/View/Modals/chatMessageInfoModal.tsx
+5 -53
View File
@@ -3,6 +3,7 @@ import * as React from "bloatless-react";
import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel"; import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
import { translations } from "../translations"; import { translations } from "../translations";
import { MessageReactionButtonRow } from "../Components/messageReactionButtonRow"; import { MessageReactionButtonRow } from "../Components/messageReactionButtonRow";
import { InfoTile } from "../Components/infoTile";
export function ChatMessageInfoModal( export function ChatMessageInfoModal(
chatMessageViewModel: ChatMessageViewModel, chatMessageViewModel: ChatMessageViewModel,
@@ -17,59 +18,10 @@ export function ChatMessageInfoModal(
<h2>{translations.chatPage.message.messageInfoHeadline}</h2> <h2>{translations.chatPage.message.messageInfoHeadline}</h2>
<div class="flex-column gap"> <div class="flex-column gap">
<div class="tile"> {InfoTile("account_circle", translations.chatPage.message.sentBy, chatMessageViewModel.sender)}
<span class="icon">account_circle</span> {InfoTile("schedule", translations.chatPage.message.timeSent, chatMessageViewModel.dateSent)}
<div> {InfoTile("forum", translations.chatPage.message.channel, chatMessageViewModel.channel)}
<span> {InfoTile("description", translations.chatPage.message.messageContent, chatMessageViewModel.body)}
{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> </div>
<hr></hr> <hr></hr>