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

Add modal mail preview

Browse source
This commit is contained in:
DonVoo 2026-07-13 09:39:29 +02:00
parent 97a65dbbd4
commit dee6dd8cd8
4 changed files with 159 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

42
backend/00-router.go
View file

@ -73,8 +73,8 @@ func renderStartPage(w http.ResponseWriter, r *http.Request) {
fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8"> fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mail-Graveyard</title> <title>Mail-Graveyard</title>
<link rel="stylesheet" href="/static/style.css?v=20260713-5"> <link rel="stylesheet" href="/static/style.css?v=20260713-6">
<script src="/static/app.js?v=20260713-5" defer></script></head> <script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013"> <body class="ol2013">
<header class="ribbon"> <header class="ribbon">
<button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button> <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@ -121,9 +121,9 @@ func renderShell(w http.ResponseWriter, r *http.Request, active, readingPane str
fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8"> fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mail-Graveyard</title> <title>Mail-Graveyard</title>
<link rel="stylesheet" href="/static/style.css?v=20260713-5"> <link rel="stylesheet" href="/static/style.css?v=20260713-6">
<script src="/static/htmx.min.js"></script> <script src="/static/htmx.min.js"></script>
<script src="/static/app.js?v=20260713-5" defer></script></head> <script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013"> <body class="ol2013">
<header class="ribbon"> <header class="ribbon">
<button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button> <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@ -697,9 +697,9 @@ func renderAccountsPage(w http.ResponseWriter, r *http.Request, accounts []Accou
fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8"> fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Konten-Verwaltung - Mail-Graveyard</title> <title>Konten-Verwaltung - Mail-Graveyard</title>
<link rel="stylesheet" href="/static/style.css?v=20260713-5"> <link rel="stylesheet" href="/static/style.css?v=20260713-6">
<script src="/static/htmx.min.js"></script> <script src="/static/htmx.min.js"></script>
<script src="/static/app.js?v=20260713-5" defer></script></head> <script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013"> <body class="ol2013">
<header class="ribbon"> <header class="ribbon">
<button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button> <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@ -743,9 +743,9 @@ func renderArchivesPage(w http.ResponseWriter, r *http.Request, archives []strin
fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8"> fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Archiv-mbox Verwaltung - Mail-Graveyard</title> <title>Archiv-mbox Verwaltung - Mail-Graveyard</title>
<link rel="stylesheet" href="/static/style.css?v=20260713-5"> <link rel="stylesheet" href="/static/style.css?v=20260713-6">
<script src="/static/htmx.min.js"></script> <script src="/static/htmx.min.js"></script>
<script src="/static/app.js?v=20260713-5" defer></script></head> <script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013"> <body class="ol2013">
<header class="ribbon"> <header class="ribbon">
<button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button> <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@ -791,9 +791,9 @@ func renderUsersPage(w http.ResponseWriter, r *http.Request, users []AppUser, ed
fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8"> fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Benutzerverwaltung - Mail-Graveyard</title> <title>Benutzerverwaltung - Mail-Graveyard</title>
<link rel="stylesheet" href="/static/style.css?v=20260713-5"> <link rel="stylesheet" href="/static/style.css?v=20260713-6">
<script src="/static/htmx.min.js"></script> <script src="/static/htmx.min.js"></script>
<script src="/static/app.js?v=20260713-5" defer></script></head> <script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013"> <body class="ol2013">
<header class="ribbon"> <header class="ribbon">
<button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button> <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@ -865,9 +865,9 @@ func renderTransferPage(w http.ResponseWriter, r *http.Request, mode transferMod
fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8"> fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>%s - Mail-Graveyard</title> <title>%s - Mail-Graveyard</title>
<link rel="stylesheet" href="/static/style.css?v=20260713-5"> <link rel="stylesheet" href="/static/style.css?v=20260713-6">
<script src="/static/htmx.min.js"></script> <script src="/static/htmx.min.js"></script>
<script src="/static/app.js?v=20260713-5" defer></script></head> <script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013"> <body class="ol2013">
<header class="ribbon"> <header class="ribbon">
<button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button> <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@ -1124,7 +1124,7 @@ func renderInitialTransferPreview(leftKind, leftValue, rightKind, rightValue str
return renderTransferPreview(rightKind, rightValue, folder, 0) return renderTransferPreview(rightKind, rightValue, folder, 0)
} }
} }
return `<div class="pane-head mode-head"><span class="mode-label">Vorschau</span></div><div class="read-body"><div class="ef-empty">Nachricht links oder rechts waehlen.</div></div>` return renderEmptyPreviewPane("Nachricht links oder rechts waehlen.")
} }
func transferEmptyReason(kind string, err error) string { func transferEmptyReason(kind string, err error) string {
@ -1255,7 +1255,7 @@ func renderTransferRawMessages(b *strings.Builder, side, kind, value, folder str
func renderTransferPreview(kind, value, folder string, index int) string { func renderTransferPreview(kind, value, folder string, index int) string {
raw, label, err := transferRawMessage(kind, value, folder, index) raw, label, err := transferRawMessage(kind, value, folder, index)
if err != nil { if err != nil {
return fmt.Sprintf(`<div class="pane-head mode-head"><span class="mode-label">Vorschau</span></div><div class="read-body"><div class="ef-empty">%s</div></div>`, html.EscapeString(err.Error())) return renderEmptyPreviewPane(err.Error())
} }
msg, err := mail.ReadMessage(bytes.NewReader(raw)) msg, err := mail.ReadMessage(bytes.NewReader(raw))
var b strings.Builder var b strings.Builder
@ -1317,9 +1317,9 @@ func renderSourceEmailBoxPage(w http.ResponseWriter, r *http.Request, accounts [
fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8"> fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Quell-Postfach - Mail-Graveyard</title> <title>Quell-Postfach - Mail-Graveyard</title>
<link rel="stylesheet" href="/static/style.css?v=20260713-5"> <link rel="stylesheet" href="/static/style.css?v=20260713-6">
<script src="/static/htmx.min.js"></script> <script src="/static/htmx.min.js"></script>
<script src="/static/app.js?v=20260713-5" defer></script></head> <script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013"> <body class="ol2013">
<header class="ribbon"> <header class="ribbon">
<button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button> <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@ -1361,9 +1361,9 @@ func renderTargetEmailBoxPage(w http.ResponseWriter, r *http.Request, accounts [
fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8"> fmt.Fprintf(w, `<!doctype html><html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<title>Ziel-Postfach - Mail-Graveyard</title> <title>Ziel-Postfach - Mail-Graveyard</title>
<link rel="stylesheet" href="/static/style.css?v=20260713-5"> <link rel="stylesheet" href="/static/style.css?v=20260713-6">
<script src="/static/htmx.min.js"></script> <script src="/static/htmx.min.js"></script>
<script src="/static/app.js?v=20260713-5" defer></script></head> <script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013"> <body class="ol2013">
<header class="ribbon"> <header class="ribbon">
<button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button> <button class="app-menu-button" type="button" aria-label="Mail-Graveyard-Menue" aria-expanded="false" data-backstage-toggle><span class="mail-logo" aria-hidden="true"></span></button>
@ -1792,11 +1792,15 @@ func renderMailboxReadPane(w io.Writer, title, account, folder string, index int
if subject == "" { if subject == "" {
subject = "(ohne Betreff)" subject = "(ohne Betreff)"
} }
fmt.Fprint(w, `<div class="pane-head mode-head"><span class="mode-label">Vorschau</span></div>`) fmt.Fprint(w, `<div class="pane-head mode-head"><span class="mode-label">Vorschau</span><span></span><button class="preview-popout" type="button" title="In modalem Fenster oeffnen" aria-label="In modalem Fenster oeffnen" data-open-mail-modal>&#x26F6;</button></div>`)
fmt.Fprintf(w, `<div class="read-body"><div class="read-head"><h1 class="read-subject">%s</h1><div class="read-meta">Von: %s<br>Datum: %s<br>Postfach: %s / %s / #%d</div></div><pre class="read-pre">%s</pre></div>`, fmt.Fprintf(w, `<div class="read-body"><div class="read-head"><h1 class="read-subject">%s</h1><div class="read-meta">Von: %s<br>Datum: %s<br>Postfach: %s / %s / #%d</div></div><pre class="read-pre">%s</pre></div>`,
html.EscapeString(subject), html.EscapeString(from), html.EscapeString(date), html.EscapeString(account), html.EscapeString(folder), index+1, html.EscapeString(body)) html.EscapeString(subject), html.EscapeString(from), html.EscapeString(date), html.EscapeString(account), html.EscapeString(folder), index+1, html.EscapeString(body))
} }
func renderEmptyPreviewPane(message string) string {
return fmt.Sprintf(`<div class="pane-head mode-head"><span class="mode-label">Vorschau</span></div><div class="read-body"><div class="ef-empty">%s</div></div>`, html.EscapeString(message))
}
func accountsByTarget(accounts []Account) []Account { func accountsByTarget(accounts []Account) []Account {
seen := map[string]bool{} seen := map[string]bool{}
out := make([]Account, 0, len(accounts)) out := make([]Account, 0, len(accounts))

2
backend/08-viewer.go
View file

@ -394,7 +394,7 @@ func renderReadContent(w io.Writer, subject, from, date, body string) {
if subject == "" { if subject == "" {
subject = "(ohne Betreff)" subject = "(ohne Betreff)"
} }
fmt.Fprintf(w, `<div class="read-body"><div class="read-head"><h1 class="read-subject">%s</h1><div class="read-meta">Von: %s<br>Datum: %s</div></div><pre class="read-pre">%s</pre></div>`, fmt.Fprintf(w, `<div class="read-body"><div class="read-head with-popout"><button class="preview-popout inline" type="button" title="In modalem Fenster oeffnen" aria-label="In modalem Fenster oeffnen" data-open-mail-modal>&#x26F6;</button><h1 class="read-subject">%s</h1><div class="read-meta">Von: %s<br>Datum: %s</div></div><pre class="read-pre">%s</pre></div>`,
html.EscapeString(subject), html.EscapeString(from), html.EscapeString(date), html.EscapeString(body)) html.EscapeString(subject), html.EscapeString(from), html.EscapeString(date), html.EscapeString(body))
} }

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

@ -235,3 +235,65 @@
document.querySelector("#read").innerHTML = html; document.querySelector("#read").innerHTML = html;
}); });
})(); })();
(function () {
function ensureModal() {
let modal = document.getElementById("mailPreviewModal");
if (modal) return modal;
modal = document.createElement("div");
modal.className = "mail-modal";
modal.id = "mailPreviewModal";
modal.setAttribute("role", "dialog");
modal.setAttribute("aria-modal", "true");
modal.setAttribute("aria-label", "Mail-Grossansicht");
modal.innerHTML = `
<div class="mail-modalbox">
<div class="mail-modalhead">
<h2 id="mailPreviewModalTitle">Mail</h2>
<button class="mail-modalclose" type="button" aria-label="Schliessen" data-mail-modal-close>&times;</button>
</div>
<div class="mail-modalbody" id="mailPreviewModalBody"></div>
</div>`;
document.body.appendChild(modal);
return modal;
}
function closeModal() {
const modal = document.getElementById("mailPreviewModal");
if (modal) modal.classList.remove("open");
}
function openFromPreview(button) {
const pane = button.closest(".pane-read") || button.closest("#read") || button.closest("#transfer-preview");
if (!pane) return;
const readBody = pane.querySelector(".read-body");
if (!readBody) return;
const modal = ensureModal();
const title = readBody.querySelector(".read-subject")?.textContent?.trim() || "Mail";
const body = document.getElementById("mailPreviewModalBody");
document.getElementById("mailPreviewModalTitle").textContent = title;
body.innerHTML = "";
body.appendChild(readBody.cloneNode(true));
body.querySelectorAll("[data-open-mail-modal]").forEach((el) => el.remove());
modal.classList.add("open");
}
document.addEventListener("click", (event) => {
const open = event.target.closest("[data-open-mail-modal]");
if (open) {
event.preventDefault();
openFromPreview(open);
return;
}
if (event.target.closest("[data-mail-modal-close]")) {
closeModal();
return;
}
const modal = event.target.closest(".mail-modal");
if (modal && event.target === modal) closeModal();
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") closeModal();
});
})();

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

@ -379,6 +379,7 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
gap: 10px; gap: 10px;
} }
.read-head { border-bottom: 1px solid var(--ol-border); padding-bottom: 10px; margin-bottom: 12px; } .read-head { border-bottom: 1px solid var(--ol-border); padding-bottom: 10px; margin-bottom: 12px; }
.read-head.with-popout { position: relative; padding-right: 34px; }
.read-subject { font-size: 17px; font-weight: 600; margin: 0 0 6px; } .read-subject { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.read-meta { color: var(--ol-muted); font-size: 12px; } .read-meta { color: var(--ol-muted); font-size: 12px; }
.read-pre { .read-pre {
@ -388,6 +389,78 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
line-height: 1.45; line-height: 1.45;
margin: 0; margin: 0;
} }
.preview-popout {
justify-self: end;
width: 26px;
height: 24px;
border: 1px solid var(--ol-border);
background: #fff;
color: var(--ol-blue-dark);
cursor: pointer;
font-size: 15px;
line-height: 1;
}
.preview-popout:hover {
background: #eef6fd;
border-color: var(--ol-blue);
}
.preview-popout.inline {
position: absolute;
top: 0;
right: 0;
}
.mail-modal {
position: fixed;
inset: 0;
z-index: 60;
display: none;
padding: 28px;
background: rgba(0, 0, 0, .38);
}
.mail-modal.open { display: flex; }
.mail-modalbox {
width: min(1180px, 100%);
height: min(860px, 100%);
margin: auto;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid var(--ol-border);
box-shadow: 0 20px 70px rgba(0, 0, 0, .32);
}
.mail-modalhead {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--ol-border);
background: #eef3f8;
}
.mail-modalhead h2 {
flex: 1;
min-width: 0;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 17px;
}
.mail-modalclose {
width: 30px;
height: 28px;
border: 1px solid var(--ol-border);
background: #fff;
cursor: pointer;
font-size: 20px;
line-height: 1;
}
.mail-modalbody {
flex: 1;
min-height: 0;
overflow: auto;
padding: 20px 24px;
}
.ef-empty { color: var(--ol-muted); padding: 24px; } .ef-empty { color: var(--ol-muted); padding: 24px; }
.audit-note { padding: 10px 16px; border-bottom: 1px solid var(--ol-border); font-size: 12px; } .audit-note { padding: 10px 16px; border-bottom: 1px solid var(--ol-border); font-size: 12px; }
.drop-zone { .drop-zone {