Add modal mail preview
This commit is contained in:
DonVoo
parent
97a65dbbd4
commit
dee6dd8cd8
4 changed files with 159 additions and 20 deletions
|
|
@ -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>⛶</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))
|
||||
|
|
|
|||
|
|
@ -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>⛶</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))
|
||||
}
|
||||
|
||||
|
|
|
|||
62
frontend-js/dist/app.js
vendored
62
frontend-js/dist/app.js
vendored
|
|
@ -235,3 +235,65 @@
|
|||
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>×</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
73
frontend-js/dist/style.css
vendored
|
|
@ -379,6 +379,7 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
|
|||
gap: 10px;
|
||||
}
|
||||
.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-meta { color: var(--ol-muted); font-size: 12px; }
|
||||
.read-pre {
|
||||
|
|
@ -388,6 +389,78 @@ a.tree-node { display: block; color: inherit; text-decoration: none; }
|
|||
line-height: 1.45;
|
||||
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; }
|
||||
.audit-note { padding: 10px 16px; border-bottom: 1px solid var(--ol-border); font-size: 12px; }
|
||||
.drop-zone {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue