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

add settings pane for info

Browse Source
This commit is contained in:
marlon-erler
2026-04-09 15:45:19 +00:00
parent 31418f5df0
commit bb096e1443
7 changed files with 118 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/index.js
Vendored
+42 -23
View File
@@ -2754,7 +2754,8 @@
appearance: "Appearance",
regional: "Language+Region",
info: "About Comms"
}
},
version: "Version"
},
connectionModal: {
connectionModalHeadline: "Manage Connections",
@@ -4097,6 +4098,17 @@
));
}
// src/View/Components/infoTile.tsx
function InfoTile(icon, label, content) {
let contentState;
if (typeof content == "string") {
contentState = new State(content);
} else {
contentState = content;
}
return /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, icon), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, label), /* @__PURE__ */ createElement("b", { class: "break-word", "subscribe:innerText": contentState })));
}
// src/View/Modals/chatMessageInfoModal.tsx
function ChatMessageInfoModal(chatMessageViewModel) {
return /* @__PURE__ */ createElement(
@@ -4105,13 +4117,7 @@
class: "modal",
"toggle:open": chatMessageViewModel.isPresentingInfoModal
},
/* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.sentBy), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.sender))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.timeSent), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.dateSent))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.channel), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.channel))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messageContent), /* @__PURE__ */ createElement(
"b",
{
class: "break-word",
"subscribe:innerText": chatMessageViewModel.body
}
)))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"))), /* @__PURE__ */ createElement("hr", null), MessageReactionButtonRow(chatMessageViewModel)), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.hideInfoModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))
/* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, InfoTile("account_circle", translations.chatPage.message.sentBy, chatMessageViewModel.sender), InfoTile("schedule", translations.chatPage.message.timeSent, chatMessageViewModel.dateSent), InfoTile("forum", translations.chatPage.message.channel, chatMessageViewModel.channel), InfoTile("description", translations.chatPage.message.messageContent, chatMessageViewModel.body)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"))), /* @__PURE__ */ createElement("hr", null), MessageReactionButtonRow(chatMessageViewModel)), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.hideInfoModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))
);
}
@@ -6252,13 +6258,20 @@
// src/View/Components/splitModal.tsx
function SplitModal(leftView, rightView, scrollButtonLabel, extendedStyle = false, navigationState) {
const view = /* @__PURE__ */ createElement("div", { class: "split-modal", "toggle:extended": extendedStyle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": leftView }), /* @__PURE__ */ createElement("div", { class: "detail-button-wrapper", "toggle:hidden": navigationState != void 0 }, /* @__PURE__ */ createElement("button", { class: "ghost", "on:click": scrollToDetails }, /* @__PURE__ */ createElement(
"span",
const view = /* @__PURE__ */ createElement("div", { class: "split-modal", "toggle:extended": extendedStyle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": leftView }), /* @__PURE__ */ createElement(
"div",
{
class: "ellipsis",
"subscribe:innerText": scrollButtonLabel
}
), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))), /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": rightView }));
class: "detail-button-wrapper",
"toggle:hidden": navigationState != void 0
},
/* @__PURE__ */ createElement("button", { class: "ghost", "on:click": scrollToDetails }, /* @__PURE__ */ createElement(
"span",
{
class: "ellipsis",
"subscribe:innerText": scrollButtonLabel
}
), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"))
)), /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": rightView }));
function scrollToDetails() {
view.scrollLeft = view.scrollWidth;
}
@@ -6608,16 +6621,19 @@
// src/View/Modals/settingsModal.tsx
function SettingsModal(settingsViewModel2) {
const detailView = createProxyState([settingsViewModel2.selectedModalPage], () => {
switch (settingsViewModel2.selectedModalPage.value) {
case 0 /* Appearance */:
return /* @__PURE__ */ createElement("div", null, "Appearance");
case 1 /* Regional */:
return /* @__PURE__ */ createElement("div", null, "Regional");
case 2 /* Info */:
return /* @__PURE__ */ createElement("div", null, "Info");
const detailView = createProxyState(
[settingsViewModel2.selectedModalPage],
() => {
switch (settingsViewModel2.selectedModalPage.value) {
case 0 /* Appearance */:
return /* @__PURE__ */ createElement("div", null, "Appearance");
case 1 /* Regional */:
return /* @__PURE__ */ createElement("div", null, "Regional");
case 2 /* Info */:
return SettingsInfoPane(settingsViewModel2);
}
}
});
);
return /* @__PURE__ */ createElement(
"div",
{
@@ -6662,6 +6678,9 @@
label
);
}
function SettingsInfoPane(settingsViewModel2) {
return /* @__PURE__ */ createElement("div", { class: "slide-up" }, /* @__PURE__ */ createElement("h2", null, translations.homePage.appName), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, InfoTile("build", translations.settings.version, settingsViewModel2.coreViewModel.BUILD)));
}
// src/index.tsx
var storageModel = new StorageModel();
src/View/Components/infoTile.tsx
+14 -8
View File
@@ -1,18 +1,24 @@
import * as React from "bloatless-react";
export function InfoTile(icon: string, label: string, content: string|React.State<string>) {
let contentState: React.State<string>
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>
return (
<div class="tile">
<span class="icon">{icon}</span>
<div>
<span>{label}</span>
<b class="break-word" subscribe:innerText={contentState}></b>
</div>
</div>
</div>;
);
}
src/View/Components/splitModal.css
+1 -1
View File
@@ -1,4 +1,4 @@
.modal>div:has(.split-modal[extended]) {
.modal > div:has(.split-modal[extended]) {
max-width: 64rem;
}
src/View/Components/splitModal.tsx
+4 -1
View File
@@ -13,7 +13,10 @@ export function SplitModal(
<div class="split-modal" toggle:extended={extendedStyle}>
<div>
<div class="scroll-area" children:set={leftView}></div>
<div class="detail-button-wrapper" toggle:hidden={navigationState != undefined}>
<div
class="detail-button-wrapper"
toggle:hidden={navigationState != undefined}
>
<button class="ghost" on:click={scrollToDetails}>
<span
class="ellipsis"
src/View/Modals/chatMessageInfoModal.tsx
+20 -4
View File
@@ -18,10 +18,26 @@ export function ChatMessageInfoModal(
<h2>{translations.chatPage.message.messageInfoHeadline}</h2>
<div class="flex-column gap">
{InfoTile("account_circle", translations.chatPage.message.sentBy, chatMessageViewModel.sender)}
{InfoTile("schedule", translations.chatPage.message.timeSent, chatMessageViewModel.dateSent)}
{InfoTile("forum", translations.chatPage.message.channel, chatMessageViewModel.channel)}
{InfoTile("description", translations.chatPage.message.messageContent, chatMessageViewModel.body)}
{InfoTile(
"account_circle",
translations.chatPage.message.sentBy,
chatMessageViewModel.sender,
)}
{InfoTile(
"schedule",
translations.chatPage.message.timeSent,
chatMessageViewModel.dateSent,
)}
{InfoTile(
"forum",
translations.chatPage.message.channel,
chatMessageViewModel.channel,
)}
{InfoTile(
"description",
translations.chatPage.message.messageContent,
chatMessageViewModel.body,
)}
</div>
<hr></hr>
src/View/Modals/settingsModal.tsx
+30 -10
View File
@@ -5,18 +5,22 @@ import SettingsViewModel, {
SettingsModalPages,
} from "../../ViewModel/Global/settingsViewModel";
import { SplitModal } from "../Components/splitModal";
import { InfoTile } from "../Components/infoTile";
export function SettingsModal(settingsViewModel: SettingsViewModel) {
const detailView = React.createProxyState([settingsViewModel.selectedModalPage], () => {
switch (settingsViewModel.selectedModalPage.value) {
case SettingsModalPages.Appearance:
return <div>Appearance</div>
case SettingsModalPages.Regional:
return <div>Regional</div>
case SettingsModalPages.Info:
return <div>Info</div>
}
})
const detailView = React.createProxyState(
[settingsViewModel.selectedModalPage],
() => {
switch (settingsViewModel.selectedModalPage.value) {
case SettingsModalPages.Appearance:
return <div>Appearance</div>;
case SettingsModalPages.Regional:
return <div>Regional</div>;
case SettingsModalPages.Info:
return SettingsInfoPane(settingsViewModel);
}
},
);
return (
<div
@@ -83,3 +87,19 @@ function SettingsPaneButton(
</button>
);
}
function SettingsInfoPane(settingsViewModel: SettingsViewModel) {
return (
<div class="slide-up">
<h2>{translations.homePage.appName}</h2>
<hr></hr>
<div class="flex-column gap">
{InfoTile(
"build",
translations.settings.version,
settingsViewModel.coreViewModel.BUILD,
)}
</div>
</div>
);
}
src/View/translations.ts
+7 -1
View File
@@ -82,6 +82,8 @@ const englishTranslations = {
regional: "Language+Region",
info: "About Comms",
},
version: "Version",
},
connectionModal: {
@@ -370,8 +372,10 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
pages: {
appearance: "Erscheinungsbild",
regional: "Sprache+Region",
info: "Über Comms",
info: "Über Comms",
},
version: "Version",
},
connectionModal: {
@@ -633,6 +637,8 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
regional: "Idioma+Región",
info: "Sobre Comms",
},
version: "Versión",
},
connectionModal: {
connectionModalHeadline: "Gestionar Conexiones",