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

move name to settings modal

Browse Source
This commit is contained in:
marlon-erler
2026-09-28 15:21:50 +02:00
parent 0afbfc2d0b
commit 22acf7f7d8
22 changed files with 743 additions and 589 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/View/Components/chatMessage.tsx
+4 -4
View File
@@ -37,10 +37,10 @@ export function ChatMessage(
{InlineReply(chatMessageViewModel)}
<div class="main tile">
<div class="text-container">
<span
class="sender-name ellipsis"
subscribe:innerText={chatMessageViewModel.contact.name}
></span>
<span
class="sender-name ellipsis"
subscribe:innerText={chatMessageViewModel.contact.name}
></span>
<span
class="body"
subscribe:innerText={chatMessageViewModel.body}
src/View/Components/inlineReply.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import { ViewController } from "../viewController";
import * as React from "../../react";
import { ContactViewModel } from "../../ViewModel/Global/contactViewModel";
import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
import {ContactViewModel} from "../../ViewModel/Global/contactViewModel";
export function InlineReply(chatMessageViewModel: ChatMessageViewModel ) {
export function InlineReply(chatMessageViewModel: ChatMessageViewModel) {
const reply = chatMessageViewModel.inlineReply;
if (reply == undefined) return <div></div>;
@@ -13,7 +13,7 @@ export function InlineReply(chatMessageViewModel: ChatMessageViewModel ) {
return (
<div class="inline-reply" on:click={scroll}>
<span subscribe:innerText={reply.contact.name}></span>
<span subscribe:innerText={reply.contact.name}></span>
<b class="ellipsis" subscribe:innerText={reply.body}></b>
</div>
);
src/View/Components/replyPreview.tsx
+22 -19
View File
@@ -7,24 +7,27 @@ export function ReplyPreview(
chatMessageViewModel: ChatMessageViewModel,
) {
return (
<div class="reply-preview">
<div class="surface blur">
<span class="secondary" subscribe:innerText={chatMessageViewModel.contact.name}></span>
<b
class="ellipsis"
subscribe:innerText={chatMessageViewModel.body}
></b>
</div>
<button
class="standard square blur"
on:click={chatMessageViewModel.cancelReply}
aria-label={
coreViewModel.translations.chatPage.message
.cancelReplyAudioLabel
}
>
<span class="icon">close</span>
</button>
</div>
<div class="reply-preview">
<div class="surface blur">
<span
class="secondary"
subscribe:innerText={chatMessageViewModel.contact.name}
></span>
<b
class="ellipsis"
subscribe:innerText={chatMessageViewModel.body}
></b>
</div>
<button
class="standard square blur"
on:click={chatMessageViewModel.cancelReply}
aria-label={
coreViewModel.translations.chatPage.message
.cancelReplyAudioLabel
}
>
<span class="icon">close</span>
</button>
</div>
);
}
src/View/Modals/settingsModal.tsx
+68 -4
View File
@@ -29,6 +29,11 @@ export function SettingsModal(
coreViewModel,
settingsViewModel,
);
case SettingsModalPages.Account:
return SettingsAccountPane(
coreViewModel,
settingsViewModel,
);
case SettingsModalPages.Regional:
return SettingsRegionalPane(
coreViewModel,
@@ -79,6 +84,12 @@ function SettingsLeftPane(
SettingsModalPages.Appearance,
coreViewModel.translations.settings.pages.appearance,
)}
{SettingsPaneButton(
coreViewModel,
settingsViewModel,
SettingsModalPages.Account,
coreViewModel.translations.settings.pages.account,
)}
{SettingsPaneButton(
coreViewModel,
settingsViewModel,
@@ -121,7 +132,7 @@ function SettingsInfoPane(
<div class="flex-column gap">
{InfoTile(
"build",
coreViewModel.translations.settings.version,
coreViewModel.translations.settings.about.version,
settingsViewModel.coreViewModel.version,
)}
@@ -135,7 +146,10 @@ function SettingsInfoPane(
</button>
<button class="standard" on:click={coreViewModel.checkUpdates}>
{coreViewModel.translations.settings.checkUpdatesButton}
{
coreViewModel.translations.settings.about
.checkUpdatesButton
}
</button>
</div>
</div>
@@ -151,7 +165,7 @@ function SettingsRegionalPane(
<h2>{coreViewModel.translations.settings.pages.regional}</h2>
<hr></hr>
<h3>{coreViewModel.translations.settings.language}</h3>
<h3>{coreViewModel.translations.settings.regional.language}</h3>
{OptionButtonList(
new React.ListState<[string, string]>(
Object.values(Languages).map((x) => [languageNames[x], x]),
@@ -160,7 +174,12 @@ function SettingsRegionalPane(
)}
<hr></hr>
<h3>{coreViewModel.translations.settings.firstDayOfWeekLabel}</h3>
<h3>
{
coreViewModel.translations.settings.regional
.firstDayOfWeekLabel
}
</h3>
{OptionButtonList(
new React.ListState<[string, string]>(
coreViewModel.translations.regional.weekdays.full.map(
@@ -173,6 +192,51 @@ function SettingsRegionalPane(
);
}
function SettingsAccountPane(
coreViewModel: CoreViewModel,
settingsViewModel: SettingsViewModel,
) {
return (
<div class="slide-up">
<h2>{coreViewModel.translations.settings.pages.account}</h2>
<hr></hr>
<label class="tile flex-no">
<span class="icon">account_circle</span>
<div>
<span>
{
coreViewModel.translations.settings.account
.yourNameLabel
}
</span>
<input
placeholder={
coreViewModel.translations.settings.account
.yourNamePlaceholder
}
bind:value={settingsViewModel.usernameInput}
on:enter={settingsViewModel.setName}
></input>
</div>
</label>
<div class="flex-row justify-end width-input">
<button
class="width-50"
on:click={settingsViewModel.setName}
toggle:disabled={settingsViewModel.cannotSetName}
aria-label={
coreViewModel.translations.settings.account
.setNameButtonAudioLabel
}
>
{coreViewModel.translations.general.setButton}
<span class="icon">check</span>
</button>
</div>
</div>
);
}
function SettingsAppearancePane(
coreViewModel: CoreViewModel,
settingsViewModel: SettingsViewModel,
src/View/homePage.tsx
-33
View File
@@ -87,39 +87,6 @@ export function HomePage(
<hr></hr>
<label class="tile flex-no">
<span class="icon">account_circle</span>
<div>
<span>
{coreViewModel.translations.homePage.yourNameLabel}
</span>
<input
placeholder={
coreViewModel.translations.homePage
.yourNamePlaceholder
}
bind:value={settingsViewModel.usernameInput}
on:enter={settingsViewModel.setName}
></input>
</div>
</label>
<div class="flex-row justify-end">
<button
class="width-50"
on:click={settingsViewModel.setName}
toggle:disabled={settingsViewModel.cannotSetName}
aria-label={
coreViewModel.translations.homePage
.setNameButtonAudioLabel
}
>
{coreViewModel.translations.general.setButton}
<span class="icon">check</span>
</button>
</div>
<hr></hr>
{HomePageButton(
settingsViewModel.showSettingsModal,
coreViewModel.translations.homePage.settingsButton,
src/View/translations.ts
+42 -33
View File
@@ -65,10 +65,6 @@ const englishTranslations = {
disconnectAudioLabel: "disconnect from server",
manageConnectionsAudioLabel: "manage connections",
yourNameLabel: "Your name",
yourNamePlaceholder: "Jane Doe",
setNameButtonAudioLabel: "set name",
settingsButton: "Settings",
manageStorageButton: "Manage storage",
transferDataButton: "Transfer or export data",
@@ -90,6 +86,7 @@ const englishTranslations = {
settings: {
pages: {
appearance: "Appearance",
account: "Account",
regional: "Language & Region",
info: "About CT",
},
@@ -100,13 +97,19 @@ const englishTranslations = {
system: "Device theme",
black: "Black",
},
version: "Version",
language: "Language",
firstDayOfWeekLabel: "First day of week",
checkUpdatesButton: "Check for updates",
account: {
yourNameLabel: "Your name",
yourNamePlaceholder: "Jane Doe",
setNameButtonAudioLabel: "set name",
},
regional: {
language: "Language",
firstDayOfWeekLabel: "First day of week",
},
about: {
version: "Version",
checkUpdatesButton: "Check for updates",
},
},
connectionModal: {
@@ -414,10 +417,6 @@ export const allTranslations: {
disconnectAudioLabel: "vom Server trennen",
manageConnectionsAudioLabel: "Verbindungen verwalten",
yourNameLabel: "Dein Name",
yourNamePlaceholder: "Max Mustermann",
setNameButtonAudioLabel: "Name speichern",
settingsButton: "Einstellungen",
manageStorageButton: "Daten verwalten",
transferDataButton: "Daten übertragen",
@@ -437,6 +436,7 @@ export const allTranslations: {
settings: {
pages: {
appearance: "Erscheinungsbild",
account: "Konto",
regional: "Sprache & Region",
info: "Über CT",
},
@@ -447,13 +447,19 @@ export const allTranslations: {
system: "Geräteeinstellung",
black: "Schwarz",
},
version: "Version",
language: "Sprache",
firstDayOfWeekLabel: "Erster Wochentag",
checkUpdatesButton: "Nach updates suchen",
account: {
yourNameLabel: "Dein Name",
yourNamePlaceholder: "Max Mustermann",
setNameButtonAudioLabel: "Namen festlegen",
},
regional: {
language: "Sprache",
firstDayOfWeekLabel: "Erster Wochentag",
},
about: {
version: "Version",
checkUpdatesButton: "Nach Updates suchen",
},
},
connectionModal: {
@@ -729,10 +735,6 @@ export const allTranslations: {
disconnectAudioLabel: "desconectar del servidor",
manageConnectionsAudioLabel: "gestionar conexiones",
yourNameLabel: "Tu nombre",
yourNamePlaceholder: "Juan Pérez",
setNameButtonAudioLabel: "establecer nombre",
settingsButton: "Ajustes",
manageStorageButton: "Gestionar almacenamiento",
transferDataButton: "Enviar o exportar archivos",
@@ -752,6 +754,7 @@ export const allTranslations: {
settings: {
pages: {
appearance: "Aspecto",
account: "Cuenta",
regional: "Idioma y Región",
info: "Sobre CT",
},
@@ -762,13 +765,19 @@ export const allTranslations: {
system: "Según dispositivo",
black: "Negro",
},
version: "Versión",
language: "Idioma",
firstDayOfWeekLabel: "Primer día de la semana",
checkUpdatesButton: "Buscar actualizaciones",
account: {
yourNameLabel: "Tu nombre",
yourNamePlaceholder: "Juan Pérez",
setNameButtonAudioLabel: "establecer nombre",
},
regional: {
language: "Idioma",
firstDayOfWeekLabel: "Primer día de la semana",
},
about: {
version: "Versión",
checkUpdatesButton: "Buscar actualisaciones",
},
},
connectionModal: {
connectionModalHeadline: "Gestionar Conexiones",