DonVoo/Mail-Graveyard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make transfer panes resizable

Browse source
This commit is contained in:
DonVoo 2026-07-13 09:14:24 +02:00
parent c7f6750d6c
commit 97a65dbbd4
3 changed files with 51 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

42
frontend-js/dist/app.js vendored
View file

@ -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")));
})();

2
frontend-js/dist/style.css vendored
View file

@ -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 {