diff --git a/dist/index.css b/dist/index.css index 28bad232..dd89615c 100644 --- a/dist/index.css +++ b/dist/index.css @@ -856,8 +856,8 @@ body[showing-chat] #chat-page-wrapper { } } -/* src/View/Components/fileBrowser.css */ -.file-browser { +/* src/View/Components/splitModal.css */ +.split-modal { width: 100%; height: 100%; display: flex; @@ -866,7 +866,7 @@ body[showing-chat] #chat-page-wrapper { scroll-behavior: smooth; scroll-snap-type: x mandatory; } -.file-browser > div { +.split-modal > div { display: flex; flex-direction: column; width: 100%; @@ -874,33 +874,33 @@ body[showing-chat] #chat-page-wrapper { flex: 0; scroll-snap-align: center; } -.file-browser .scroll-area { +.split-modal .scroll-area { flex: 1; width: 100%; overflow-y: auto; padding: var(--content-padding); } -.file-browser .detail-button-wrapper { +.split-modal .detail-button-wrapper { display: flex; justify-content: end; border-top: 1px solid var(--border); padding: var(--content-padding); } -.file-browser .detail-button-wrapper button { +.split-modal .detail-button-wrapper button { max-width: 100%; } -.file-browser code { +.split-modal code { width: 100%; height: 100%; font-size: 0.9rem; } @media (min-width: 640px) { - .file-browser > div { + .split-modal > div { width: 50%; min-width: 50%; flex: 1; } - .file-browser .detail-button-wrapper { + .split-modal .detail-button-wrapper { display: none; } } diff --git a/dist/index.js b/dist/index.js index 6224eb3c..e832fc3d 100644 --- a/dist/index.js +++ b/dist/index.js @@ -2748,6 +2748,12 @@ addChatPlaceholder: "Add chat", addChatButton: "Add chat" }, + settings: { + pages: { + appearance: "Appearance", + regional: "Language & Region" + } + }, connectionModal: { connectionModalHeadline: "Manage Connections", /// @@ -6194,6 +6200,9 @@ this.usernameInput = new State(""); this.firstDayOfWeekInput = new State("0"); this.isShowingSettingsModal = new State(false); + this.selectedModalPage = new State( + 0 /* Appearance */ + ); // guards this.cannotSetName = createProxyState( [this.usernameInput], @@ -6214,6 +6223,9 @@ this.hideSettingsModal = () => { this.isShowingSettingsModal.value = false; }; + this.showModalPage = (page) => { + this.selectedModalPage.value = page; + }; this.settingsModel = settingsModel2; this.username.value = settingsModel2.username; this.usernameInput.value = settingsModel2.username; @@ -6222,6 +6234,21 @@ } }; + // src/View/Components/splitModal.tsx + function SplitModal(leftView, rightView, scrollButtonLabel) { + const view = /* @__PURE__ */ createElement("div", { class: "split-modal" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": leftView }), /* @__PURE__ */ createElement("div", { class: "detail-button-wrapper" }, /* @__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; + } + return view; + } + // src/View/Components/directoryItemList.tsx function DirectoryItemList(storageViewModel2, pathString = PATH_COMPONENT_SEPARATOR) { const StringToDirectoryItemList = (pathString2) => DirectoryItemList(storageViewModel2, pathString2); @@ -6271,8 +6298,8 @@ )); } - // src/View/Components/fileBrowser.tsx - function FileBrowser(storageViewModel2) { + // src/View/Modals/storageModal.tsx + function StorageModal(storageViewModel2) { const detailView = createProxyState( [storageViewModel2.selectedPath], () => { @@ -6300,22 +6327,11 @@ )); } ); - const view = /* @__PURE__ */ createElement("div", { class: "file-browser" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area" }, DirectoryItemList(storageViewModel2)), /* @__PURE__ */ createElement("div", { class: "detail-button-wrapper" }, /* @__PURE__ */ createElement("button", { class: "ghost", "on:click": scrollToDetails }, /* @__PURE__ */ createElement( - "span", - { - class: "ellipsis", - "subscribe:innerText": storageViewModel2.selectedFileName - } - ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))), /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": detailView })); - function scrollToDetails() { - view.scrollLeft = view.scrollWidth; - } - return view; - } - - // src/View/Modals/storageModal.tsx - function StorageModal(storageViewModel2) { - return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": storageViewModel2.isShowingStorageModal }, /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }, FileBrowser(storageViewModel2)), /* @__PURE__ */ createElement("button", { "on:click": storageViewModel2.hideStorageModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))); + return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": storageViewModel2.isShowingStorageModal }, /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }, SplitModal( + new State(DirectoryItemList(storageViewModel2)), + detailView, + storageViewModel2.selectedFileName + )), /* @__PURE__ */ createElement("button", { "on:click": storageViewModel2.hideStorageModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))); } // src/ViewModel/Global/storageViewModel.ts @@ -6574,7 +6590,35 @@ // 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")))); + return /* @__PURE__ */ createElement( + "div", + { + class: "modal", + "toggle:open": settingsViewModel2.isShowingSettingsModal + }, + /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }, SplitModal( + new State(SettingsLeftPane(settingsViewModel2)), + new State(/* @__PURE__ */ createElement("span", null, "settings")), + new State("") + )), /* @__PURE__ */ createElement("button", { "on:click": settingsViewModel2.hideSettingsModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))) + ); + } + function SettingsLeftPane(settingsViewModel2) { + return /* @__PURE__ */ createElement("div", { class: "flex-column" }, SettingsPaneButton(settingsViewModel2, 0 /* Appearance */, translations.settings.pages.appearance), SettingsPaneButton(settingsViewModel2, 1 /* Regional */, translations.settings.pages.regional)); + } + function SettingsPaneButton(settingsViewModel2, page, label) { + const isSelected = createProxyState( + [settingsViewModel2.selectedModalPage], + () => settingsViewModel2.selectedModalPage.value == page + ); + return /* @__PURE__ */ createElement( + "button", + { + "toggle:selected": isSelected, + "on:click": () => settingsViewModel2.showModalPage(page) + }, + label + ); } // src/index.tsx diff --git a/src/View/Components/fileBrowser.tsx b/src/View/Components/fileBrowser.tsx deleted file mode 100644 index 0db341aa..00000000 --- a/src/View/Components/fileBrowser.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import "./fileBrowser.css"; - -import * as React from "bloatless-react"; - -import { DangerousActionButton } from "./dangerousActionButton"; -import { DirectoryItemList } from "./directoryItemList"; -import { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel"; -import StorageViewModel from "../../ViewModel/Global/storageViewModel"; -import { translations } from "../translations"; - -export function FileBrowser(storageViewModel: StorageViewModel) { - const detailView = React.createProxyState( - [storageViewModel.selectedPath], - () => { - if (storageViewModel.selectedPath.value == PATH_COMPONENT_SEPARATOR) - return ( -
- - {translations.storage.noItemSelected} - - -
- - {DangerousActionButton( - translations.storage.removeJunkButton, - "delete_forever", - storageViewModel.removeJunk, - )} -
- ); - - return ( -
-
-
- {translations.storage.path} - -
-
-
-
- {translations.storage.content} - -
-
- - {DangerousActionButton( - translations.storage.deleteItem, - "delete_forever", - storageViewModel.deleteSelectedItem, - )} -
- ); - }, - ); - - const view = ( -
-
-
- {DirectoryItemList(storageViewModel)} -
-
- -
-
-
-
- ); - - function scrollToDetails() { - view.scrollLeft = view.scrollWidth; - } - - return view; -} diff --git a/src/View/Components/fileBrowser.css b/src/View/Components/splitModal.css similarity index 75% rename from src/View/Components/fileBrowser.css rename to src/View/Components/splitModal.css index 367c5beb..82acfcc4 100644 --- a/src/View/Components/fileBrowser.css +++ b/src/View/Components/splitModal.css @@ -1,4 +1,4 @@ -.file-browser { +.split-modal { width: 100%; height: 100%; @@ -10,7 +10,7 @@ scroll-snap-type: x mandatory; } -.file-browser > div { +.split-modal > div { display: flex; flex-direction: column; @@ -21,7 +21,7 @@ scroll-snap-align: center; } -.file-browser .scroll-area { +.split-modal .scroll-area { flex: 1; width: 100%; overflow-y: auto; @@ -29,7 +29,7 @@ padding: var(--content-padding); } -.file-browser .detail-button-wrapper { +.split-modal .detail-button-wrapper { display: flex; justify-content: end; @@ -37,11 +37,11 @@ padding: var(--content-padding); } -.file-browser .detail-button-wrapper button { +.split-modal .detail-button-wrapper button { max-width: 100%; } -.file-browser code { +.split-modal code { width: 100%; height: 100%; @@ -49,14 +49,14 @@ } @media (min-width: 640px) { - .file-browser > div { + .split-modal > div { width: 50%; min-width: 50%; flex: 1; } - .file-browser .detail-button-wrapper { + .split-modal .detail-button-wrapper { display: none; } } diff --git a/src/View/Components/splitModal.tsx b/src/View/Components/splitModal.tsx new file mode 100644 index 00000000..2e89d30d --- /dev/null +++ b/src/View/Components/splitModal.tsx @@ -0,0 +1,33 @@ +import "./splitModal.css"; + +import * as React from "bloatless-react"; + +export function SplitModal( + leftView: React.State, + rightView: React.State, + scrollButtonLabel: React.State, +) { + const view = ( +
+
+
+
+ +
+
+
+
+ ); + + function scrollToDetails() { + view.scrollLeft = view.scrollWidth; + } + + return view; +} diff --git a/src/View/Modals/settingsModal.tsx b/src/View/Modals/settingsModal.tsx index d9000a8a..61c356a3 100644 --- a/src/View/Modals/settingsModal.tsx +++ b/src/View/Modals/settingsModal.tsx @@ -1,15 +1,25 @@ 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"; +import SettingsViewModel, { + SettingsModalPages, +} from "../../ViewModel/Global/settingsViewModel"; +import { SplitModal } from "../Components/splitModal"; export function SettingsModal(settingsViewModel: SettingsViewModel) { return ( -
+
-
+
+ {SplitModal( + new React.State(SettingsLeftPane(settingsViewModel)), + new React.State(settings), + new React.State(""), + )} +
); } + +function SettingsLeftPane(settingsViewModel: SettingsViewModel) { + return ( +
+ {SettingsPaneButton( + settingsViewModel, + SettingsModalPages.Appearance, + translations.settings.pages.appearance, + )} + {SettingsPaneButton( + settingsViewModel, + SettingsModalPages.Regional, + translations.settings.pages.regional, + )} +
+ ); +} + +function SettingsPaneButton( + settingsViewModel: SettingsViewModel, + page: SettingsModalPages, + label: string, +) { + const isSelected = React.createProxyState( + [settingsViewModel.selectedModalPage], + () => settingsViewModel.selectedModalPage.value == page, + ); + + return ( + + ); +} diff --git a/src/View/Modals/storageModal.tsx b/src/View/Modals/storageModal.tsx index 1ac981fa..d99c6328 100644 --- a/src/View/Modals/storageModal.tsx +++ b/src/View/Modals/storageModal.tsx @@ -1,14 +1,77 @@ import * as React from "bloatless-react"; -import { FileBrowser } from "../Components/fileBrowser"; +import { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel"; import StorageViewModel from "../../ViewModel/Global/storageViewModel"; import { translations } from "../translations"; +import { SplitModal } from "../Components/splitModal"; +import { DangerousActionButton } from "../Components/dangerousActionButton"; +import { DirectoryItemList } from "../Components/directoryItemList"; + export function StorageModal(storageViewModel: StorageViewModel) { + const detailView = React.createProxyState( + [storageViewModel.selectedPath], + () => { + if (storageViewModel.selectedPath.value == PATH_COMPONENT_SEPARATOR) + return ( +
+ + {translations.storage.noItemSelected} + + +
+ + {DangerousActionButton( + translations.storage.removeJunkButton, + "delete_forever", + storageViewModel.removeJunk, + )} +
+ ); + + return ( +
+
+
+ {translations.storage.path} + +
+
+
+
+ {translations.storage.content} + +
+
+ + {DangerousActionButton( + translations.storage.deleteItem, + "delete_forever", + storageViewModel.deleteSelectedItem, + )} +
+ ); + }, + ); return (
-
{FileBrowser(storageViewModel)}
+
+ {SplitModal( + new React.State(DirectoryItemList(storageViewModel)), + detailView, + storageViewModel.selectedFileName, + )} +