Add modal mail preview

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

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">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mail-Graveyard</title>
<link rel="stylesheet" href="/static/style.css?v=20260713-5">
<script src="/static/app.js?v=20260713-5" defer></script></head>
<link rel="stylesheet" href="/static/style.css?v=20260713-6">
<script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013">
<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>
@ -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">
<meta name="viewport" content="width=device-width,initial-scale=1">
<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/app.js?v=20260713-5" defer></script></head>
<script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013">
<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>
@ -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">
<meta name="viewport" content="width=device-width,initial-scale=1">
<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/app.js?v=20260713-5" defer></script></head>
<script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013">
<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>
@ -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">
<meta name="viewport" content="width=device-width,initial-scale=1">
<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/app.js?v=20260713-5" defer></script></head>
<script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013">
<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>
@ -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">
<meta name="viewport" content="width=device-width,initial-scale=1">
<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/app.js?v=20260713-5" defer></script></head>
<script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013">
<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>
@ -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">
<meta name="viewport" content="width=device-width,initial-scale=1">
<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/app.js?v=20260713-5" defer></script></head>
<script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013">
<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>
@ -1124,7 +1124,7 @@ func renderInitialTransferPreview(leftKind, leftValue, rightKind, rightValue str
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 {
@ -1255,7 +1255,7 @@ func renderTransferRawMessages(b *strings.Builder, side, kind, value, folder str
func renderTransferPreview(kind, value, folder string, index int) string {
raw, label, err := transferRawMessage(kind, value, folder, index)
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))
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">
<meta name="viewport" content="width=device-width,initial-scale=1">
<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/app.js?v=20260713-5" defer></script></head>
<script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013">
<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>
@ -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">
<meta name="viewport" content="width=device-width,initial-scale=1">
<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/app.js?v=20260713-5" defer></script></head>
<script src="/static/app.js?v=20260713-6" defer></script></head>
<body class="ol2013">
<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>
@ -1792,11 +1792,15 @@ func renderMailboxReadPane(w io.Writer, title, account, folder string, index int
if subject == "" {
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>`,
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 {
seen := map[string]bool{}
out := make([]Account, 0, len(accounts))

View file

@ -394,7 +394,7 @@ func renderReadContent(w io.Writer, subject, from, date, body string) {
if subject == "" {
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))
}