From 97a65dbbd44c642cad2a69c88a99e818365720f3 Mon Sep 17 00:00:00 2001 From: DonVoo Date: Mon, 13 Jul 2026 09:14:24 +0200 Subject: [PATCH] Make transfer panes resizable --- backend/00-router.go | 36 +++++++++++++++++--------------- frontend-js/dist/app.js | 42 +++++++++++++++++++++++++++----------- frontend-js/dist/style.css | 2 +- 3 files changed, 51 insertions(+), 29 deletions(-) diff --git a/backend/00-router.go b/backend/00-router.go index eb094ec..788ba39 100644 --- a/backend/00-router.go +++ b/backend/00-router.go @@ -73,8 +73,8 @@ func renderStartPage(w http.ResponseWriter, r *http.Request) { fmt.Fprintf(w, ` Mail-Graveyard - - + +
@@ -121,9 +121,9 @@ func renderShell(w http.ResponseWriter, r *http.Request, active, readingPane str fmt.Fprintf(w, ` Mail-Graveyard - + - +
@@ -697,9 +697,9 @@ func renderAccountsPage(w http.ResponseWriter, r *http.Request, accounts []Accou fmt.Fprintf(w, ` Konten-Verwaltung - Mail-Graveyard - + - +
@@ -743,9 +743,9 @@ func renderArchivesPage(w http.ResponseWriter, r *http.Request, archives []strin fmt.Fprintf(w, ` Archiv-mbox Verwaltung - Mail-Graveyard - + - +
@@ -791,9 +791,9 @@ func renderUsersPage(w http.ResponseWriter, r *http.Request, users []AppUser, ed fmt.Fprintf(w, ` Benutzerverwaltung - Mail-Graveyard - + - +
@@ -865,9 +865,9 @@ func renderTransferPage(w http.ResponseWriter, r *http.Request, mode transferMod fmt.Fprintf(w, ` %s - Mail-Graveyard - + - +
@@ -890,9 +890,13 @@ func renderTransferPage(w http.ResponseWriter, r *http.Request, mode transferMod
+
%s
+
%s
+
%s
+
bereit
`, @@ -1313,9 +1317,9 @@ func renderSourceEmailBoxPage(w http.ResponseWriter, r *http.Request, accounts [ fmt.Fprintf(w, ` Quell-Postfach - Mail-Graveyard - + - +
@@ -1357,9 +1361,9 @@ func renderTargetEmailBoxPage(w http.ResponseWriter, r *http.Request, accounts [ fmt.Fprintf(w, ` Ziel-Postfach - Mail-Graveyard - + - +
diff --git a/frontend-js/dist/app.js b/frontend-js/dist/app.js index 5ceb818..099d32a 100644 --- a/frontend-js/dist/app.js +++ b/frontend-js/dist/app.js @@ -1,8 +1,19 @@ (function () { - const key = "mail-graveyard-pane-widths-v2"; - const minWidths = [160, 220, 300]; const handleWidth = 6; + function storageKey(container) { + if (container.classList.contains("transfer-workbench")) return "mail-graveyard-transfer-widths-v1"; + if (container.classList.contains("four-pane")) return "mail-graveyard-four-pane-widths-v1"; + return "mail-graveyard-pane-widths-v2"; + } + + function minWidths(container) { + const count = panes(container).length; + if (container.classList.contains("transfer-workbench")) return [220, 240, 320, 240, 220]; + if (count === 4) return [160, 220, 280, 280]; + return [160, 220, 300]; + } + function panes(container) { return Array.from(container.querySelectorAll(".pane")); } @@ -12,13 +23,15 @@ } function clampWidths(widths, total) { - const next = widths.map((w, i) => Math.max(minWidths[i], Math.round(w || minWidths[i]))); - const max = Math.max(total - handleWidth * (next.length - 1), minWidths.reduce((a, b) => a + b, 0)); + const mins = minWidths(this); + const next = widths.map((w, i) => Math.max(mins[i] || mins[mins.length - 1], Math.round(w || mins[i] || mins[mins.length - 1]))); + const minTotal = mins.slice(0, next.length).reduce((a, b) => a + b, 0); + const max = Math.max(total - handleWidth * (next.length - 1), minTotal); const sum = next.reduce((a, b) => a + b, 0); if (sum > max) { let extra = sum - max; for (let i = next.length - 1; i >= 0 && extra > 0; i--) { - const canTake = Math.max(0, next[i] - minWidths[i]); + const canTake = Math.max(0, next[i] - (mins[i] || mins[mins.length - 1])); const take = Math.min(canTake, extra); next[i] -= take; extra -= take; @@ -29,20 +42,24 @@ function applyWidths(container, widths) { const total = container.getBoundingClientRect().width; - const w = clampWidths(widths, total); - container.style.gridTemplateColumns = - `${w[0]}px ${handleWidth}px ${w[1]}px ${handleWidth}px minmax(${w[2]}px, 1fr)`; - localStorage.setItem(key, JSON.stringify(w)); + const w = clampWidths.call(container, widths, total); + const columns = []; + w.forEach((width, index) => { + columns.push(index === w.length - 1 ? `minmax(${width}px, 1fr)` : `${width}px`); + if (index < w.length - 1) columns.push(`${handleWidth}px`); + }); + container.style.gridTemplateColumns = columns.join(" "); + localStorage.setItem(storageKey(container), JSON.stringify(w)); } function restore(container) { try { - const saved = JSON.parse(localStorage.getItem(key) || "null"); - if (Array.isArray(saved) && saved.length === 3) { + const saved = JSON.parse(localStorage.getItem(storageKey(container)) || "null"); + if (Array.isArray(saved) && saved.length === panes(container).length) { applyWidths(container, saved); } } catch (_) { - localStorage.removeItem(key); + localStorage.removeItem(storageKey(container)); } } @@ -89,6 +106,7 @@ }); } + window.addEventListener("DOMContentLoaded", () => bind(document.querySelector(".transfer-workbench"))); window.addEventListener("DOMContentLoaded", () => bind(document.querySelector(".four-pane"))); window.addEventListener("DOMContentLoaded", () => bind(document.querySelector(".three-pane"))); })(); diff --git a/frontend-js/dist/style.css b/frontend-js/dist/style.css index adb097a..e250872 100644 --- a/frontend-js/dist/style.css +++ b/frontend-js/dist/style.css @@ -492,7 +492,7 @@ a.tree-node { display: block; color: inherit; text-decoration: none; } .transfer-workbench { flex: 1 1 auto; display: grid; - grid-template-columns: 310px minmax(300px, 1fr) minmax(420px, 1.15fr) minmax(300px, 1fr) 310px; + grid-template-columns: 310px 6px minmax(300px, 1fr) 6px minmax(420px, 1.15fr) 6px minmax(300px, 1fr) 6px 310px; min-height: 0; } .transfer-workbench .pane:last-child {