From b94216e4c08c368b74bcc505f3d65858e62786ec Mon Sep 17 00:00:00 2001 From: marlon-erler Date: Wed, 8 Apr 2026 20:39:12 +0000 Subject: [PATCH] prepare settings modal --- dist/index.js | 19 +++++++++++++++++-- src/View/Modals/settingsModal.tsx | 20 ++++++++++++++++++++ src/View/homePage.tsx | 2 +- src/ViewModel/Global/settingsViewModel.ts | 9 +++++++++ src/index.tsx | 2 ++ 5 files changed, 49 insertions(+), 3 deletions(-) create mode 100644 src/View/Modals/settingsModal.tsx diff --git a/dist/index.js b/dist/index.js index 84add758..6224eb3c 100644 --- a/dist/index.js +++ b/dist/index.js @@ -2934,6 +2934,7 @@ yourNamePlaceholder: "Max Mustermann", setNameButtonAudioLabel: "Name speichern", firstDayOfWeekLabel: "Erster Wochentag", + settingsButton: "Einstellungen", manageStorageButton: "Daten verwalten", transferDataButton: "Daten\xFCbertragung", scrollToChatButton: "Chats", @@ -3112,6 +3113,7 @@ yourNamePlaceholder: "Juan P\xE9rez", setNameButtonAudioLabel: "establecer nombre", firstDayOfWeekLabel: "Primer d\xEDa de la semana", + settingsButton: "Ajustes", manageStorageButton: "Gestionar almacenamiento", transferDataButton: "Transferencia de datos", scrollToChatButton: "Chats", @@ -6093,7 +6095,7 @@ i.toString() == settingsViewModel2.firstDayOfWeekInput.value ) )), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("hr", null), HomePageButton( - fileTransferViewModel2.showDirectionSelectionModal, + settingsViewModel2.showSettingsModal, translations.homePage.settingsButton, "settings" ), HomePageButton( @@ -6191,6 +6193,7 @@ this.username = new State(""); this.usernameInput = new State(""); this.firstDayOfWeekInput = new State("0"); + this.isShowingSettingsModal = new State(false); // guards this.cannotSetName = createProxyState( [this.usernameInput], @@ -6205,6 +6208,12 @@ this.setFirstDayofWeek = () => { this.settingsModel.setFirstDayOfWeek(this.firstDayOfWeekInput.value); }; + this.showSettingsModal = () => { + this.isShowingSettingsModal.value = true; + }; + this.hideSettingsModal = () => { + this.isShowingSettingsModal.value = false; + }; this.settingsModel = settingsModel2; this.username.value = settingsModel2.username; this.usernameInput.value = settingsModel2.username; @@ -6563,6 +6572,11 @@ return true; } + // src/View/Modals/settingsModal.tsx + function SettingsModal(settingsViewModel2) { + return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": settingsViewModel2.isShowingSettingsModal }, /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }), /* @__PURE__ */ createElement("button", { "on:click": settingsViewModel2.hideSettingsModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))); + } + // src/index.tsx var storageModel = new StorageModel(); var settingsModel = new SettingsModel(storageModel); @@ -6613,6 +6627,7 @@ ChatPageWrapper(chatListViewModel), ConnectionModal(connectionViewModel), DataTransferModalWrapper(connectionViewModel, fileTransferViewModel), - StorageModal(storageViewModel) + StorageModal(storageViewModel), + SettingsModal(settingsViewModel) ); })(); diff --git a/src/View/Modals/settingsModal.tsx b/src/View/Modals/settingsModal.tsx new file mode 100644 index 00000000..d9000a8a --- /dev/null +++ b/src/View/Modals/settingsModal.tsx @@ -0,0 +1,20 @@ +import * as React from "bloatless-react"; + +import { FileBrowser } from "../Components/fileBrowser"; +import StorageViewModel from "../../ViewModel/Global/storageViewModel"; +import { translations } from "../translations"; +import SettingsViewModel from "../../ViewModel/Global/settingsViewModel"; + +export function SettingsModal(settingsViewModel: SettingsViewModel) { + return ( +
+
+
+ +
+
+ ); +} diff --git a/src/View/homePage.tsx b/src/View/homePage.tsx index 38a740f4..565daadb 100644 --- a/src/View/homePage.tsx +++ b/src/View/homePage.tsx @@ -131,7 +131,7 @@ export function HomePage(
{HomePageButton( - fileTransferViewModel.showDirectionSelectionModal, + settingsViewModel.showSettingsModal, translations.homePage.settingsButton, "settings", )} diff --git a/src/ViewModel/Global/settingsViewModel.ts b/src/ViewModel/Global/settingsViewModel.ts index 4fbe94c7..98349e26 100644 --- a/src/ViewModel/Global/settingsViewModel.ts +++ b/src/ViewModel/Global/settingsViewModel.ts @@ -10,6 +10,7 @@ export default class SettingsViewModel { username: React.State = new React.State(""); usernameInput: React.State = new React.State(""); firstDayOfWeekInput: React.State = new React.State("0"); + isShowingSettingsModal: React.State = new React.State(false); // guards cannotSetName: React.State = React.createProxyState( @@ -30,6 +31,14 @@ export default class SettingsViewModel { this.settingsModel.setFirstDayOfWeek(this.firstDayOfWeekInput.value); }; + showSettingsModal = (): void => { + this.isShowingSettingsModal.value = true; + } + + hideSettingsModal = (): void => { + this.isShowingSettingsModal.value = false; + } + // init constructor( public coreViewModel: CoreViewModel, diff --git a/src/index.tsx b/src/index.tsx index 810db571..6a6c1d18 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -21,6 +21,7 @@ import { StorageModal } from "./View/Modals/storageModal"; import StorageModel from "./Model/Global/storageModel"; import StorageViewModel from "./ViewModel/Global/storageViewModel"; import v1Upgrader from "./Upgrader/v1"; +import { SettingsModal } from "./View/Modals/settingsModal"; // models const storageModel = new StorageModel(); @@ -86,4 +87,5 @@ document ConnectionModal(connectionViewModel), DataTransferModalWrapper(connectionViewModel, fileTransferViewModel), StorageModal(storageViewModel), + SettingsModal(settingsViewModel), );