From b40211a6e08e295348b93d2aac154fac508c37f0 Mon Sep 17 00:00:00 2001 From: Harvey Tindall Date: Mon, 5 Aug 2024 20:23:10 +0100 Subject: [PATCH] settings: add loader, improve css a bit Loader appears on about/user profiles area. These two are now shown next to each other. on small screens, the sidebar list of sections is displayed without a card around it, and the top left/right corner buttons on all pages are correctly aligned with the content. --- css/base.css | 4 +- html/admin.html | 22 ++++---- html/form.html | 2 +- html/setup.html | 2 +- html/user.html | 4 +- ts/modules/settings.ts | 120 ++++++++++++++++++++++------------------- 6 files changed, 84 insertions(+), 70 deletions(-) diff --git a/css/base.css b/css/base.css index 844cc08..f021e90 100644 --- a/css/base.css +++ b/css/base.css @@ -66,14 +66,14 @@ html:not(.dark) .card.\@low:not(.\~neutral):not(.\~positive):not(.\~urge):not(.\ margin: 5% 20% 5% 20%; } -@media (max-width: 1100px) { +@media (max-width: 1024px) { .page-container { margin: 2%; margin-top: 5rem; } } -@media screen and (max-width: 1000px) { +@media screen and (max-width: 1024px) { :root { font-size: 0.9rem; } diff --git a/html/admin.html b/html/admin.html index cd72885..ac07dfd 100644 --- a/html/admin.html +++ b/html/admin.html @@ -535,7 +535,7 @@
-
+
@@ -558,7 +558,7 @@
{{ if .userPageEnabled }} -
+
{{ .strings.myAccount }}
{{ end }} @@ -895,7 +895,7 @@
-
+
{{ .strings.settings }} @@ -912,16 +912,18 @@
-
+
- - + + +
+ +
+ {{ .strings.aboutProgram }} + {{ .strings.userProfiles }}
- - {{ .strings.aboutProgram }} - {{ .strings.userProfiles }}
-
+
{{ .strings.noResultsFound }} diff --git a/html/form.html b/html/form.html index 6927e93..ff35807 100644 --- a/html/form.html +++ b/html/form.html @@ -35,7 +35,7 @@
{{ template "account-linking.html" . }} -
+
diff --git a/html/setup.html b/html/setup.html index 9551a66..e768bfb 100644 --- a/html/setup.html +++ b/html/setup.html @@ -7,7 +7,7 @@
-
+
diff --git a/html/user.html b/html/user.html index 6e15a71..bcd5463 100644 --- a/html/user.html +++ b/html/user.html @@ -79,7 +79,7 @@ {{ template "login-modal.html" . }} {{ template "account-linking.html" . }}
-
+
@@ -102,7 +102,7 @@ {{ .strings.logout }}
-
+
{{ .strings.admin }}
diff --git a/ts/modules/settings.ts b/ts/modules/settings.ts index 321b3be..b319595 100644 --- a/ts/modules/settings.ts +++ b/ts/modules/settings.ts @@ -627,6 +627,8 @@ export class settingsList { private _saveNoRestart = document.getElementById("settings-apply-no-restart") as HTMLSpanElement; private _saveRestart = document.getElementById("settings-apply-restart") as HTMLSpanElement; + private _loader = document.getElementById("settings-loader") as HTMLDivElement; + private _panel = document.getElementById("settings-panel") as HTMLDivElement; private _sidebar = document.getElementById("settings-sidebar") as HTMLDivElement; private _visibleSection: string; @@ -650,7 +652,7 @@ export class settingsList { this._sections[name] = section; this._panel.appendChild(this._sections[name].asElement()); const button = document.createElement("span") as HTMLSpanElement; - button.classList.add("button", "~neutral", "@low", "settings-section-button", "justify-between", "mb-2"); + button.classList.add("button", "~neutral", "@low", "settings-section-button", "justify-between"); button.textContent = s.meta.name; if (subButton) { button.appendChild(subButton); } button.onclick = () => { this._showPanel(name); }; @@ -905,63 +907,73 @@ export class settingsList { window.modals.matrix.show(); } - reload = () => _get("/config", null, (req: XMLHttpRequest) => { - if (req.readyState == 4) { - if (req.status != 200) { - window.notifications.customError("settingsLoadError", window.lang.notif("errorLoadSettings")); - return; - } - this._settings = req.response as Settings; - for (let name of this._settings.order) { - if (name in this._sections) { - this._sections[name].update(this._settings.sections[name]); - } else { - if (name == "messages" || name == "user_page") { - const editButton = document.createElement("div"); - editButton.classList.add("tooltip", "left"); - editButton.innerHTML = ` - - - - - ${window.lang.get("strings", "customizeMessages")} - - `; - (editButton.querySelector("span.button") as HTMLSpanElement).onclick = () => { - this._messageEditor.showList(name == "messages" ? "email" : "user"); - }; - this.addSection(name, this._settings.sections[name], editButton); - } else if (name == "updates") { - const icon = document.createElement("span") as HTMLSpanElement; - if (window.updater.updateAvailable) { - icon.classList.add("button", "~urge"); - icon.innerHTML = ``; - icon.onclick = () => window.updater.checkForUpdates(window.modals.updateInfo.show); - } - this.addSection(name, this._settings.sections[name], icon); - } else if (name == "matrix" && !window.matrixEnabled) { - const addButton = document.createElement("div"); - addButton.classList.add("tooltip", "left"); - addButton.innerHTML = ` - + - - ${window.lang.strings("linkMatrix")} - - `; - (addButton.querySelector("span.button") as HTMLSpanElement).onclick = this._addMatrix; - this.addSection(name, this._settings.sections[name], addButton); + reload = () => { + for (let i = 0; i < this._loader.children.length; i++) { + this._loader.children[i].classList.add("invisible"); + } + addLoader(this._loader, false, true); + _get("/config", null, (req: XMLHttpRequest) => { + if (req.readyState == 4) { + if (req.status != 200) { + window.notifications.customError("settingsLoadError", window.lang.notif("errorLoadSettings")); + return; + } + this._settings = req.response as Settings; + for (let name of this._settings.order) { + if (name in this._sections) { + this._sections[name].update(this._settings.sections[name]); } else { - this.addSection(name, this._settings.sections[name]); + if (name == "messages" || name == "user_page") { + const editButton = document.createElement("div"); + editButton.classList.add("tooltip", "left"); + editButton.innerHTML = ` + + + + + ${window.lang.get("strings", "customizeMessages")} + + `; + (editButton.querySelector("span.button") as HTMLSpanElement).onclick = () => { + this._messageEditor.showList(name == "messages" ? "email" : "user"); + }; + this.addSection(name, this._settings.sections[name], editButton); + } else if (name == "updates") { + const icon = document.createElement("span") as HTMLSpanElement; + if (window.updater.updateAvailable) { + icon.classList.add("button", "~urge"); + icon.innerHTML = ``; + icon.onclick = () => window.updater.checkForUpdates(window.modals.updateInfo.show); + } + this.addSection(name, this._settings.sections[name], icon); + } else if (name == "matrix" && !window.matrixEnabled) { + const addButton = document.createElement("div"); + addButton.classList.add("tooltip", "left"); + addButton.innerHTML = ` + + + + ${window.lang.strings("linkMatrix")} + + `; + (addButton.querySelector("span.button") as HTMLSpanElement).onclick = this._addMatrix; + this.addSection(name, this._settings.sections[name], addButton); + } else { + this.addSection(name, this._settings.sections[name]); + } } } + removeLoader(this._loader); + for (let i = 0; i < this._loader.children.length; i++) { + this._loader.children[i].classList.remove("invisible"); + } + this._showPanel(this._settings.order[0]); + document.dispatchEvent(new CustomEvent("settings-loaded")); + document.dispatchEvent(new CustomEvent("settings-advancedState", { detail: false })); + this._saveButton.classList.add("unfocused"); + this._needsRestart = false; } - this._showPanel(this._settings.order[0]); - document.dispatchEvent(new CustomEvent("settings-loaded")); - document.dispatchEvent(new CustomEvent("settings-advancedState", { detail: false })); - this._saveButton.classList.add("unfocused"); - this._needsRestart = false; - } - }) + }) + }; // FIXME: Search "About" & "User profiles", pseudo-search "User profiles" for things like "Ombi", "Referrals", etc. search = (query: string) => {