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

Move pane toggle buttons beside dropdowns

Browse source
This commit is contained in:
DonVoo 2026-07-06 15:12:55 +02:00
parent d2f0383796
commit fa9edca3bd
3 changed files with 17 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

4
backend/00-router.go
View file

@ -43,9 +43,9 @@ func renderShell(w http.ResponseWriter, active, readingPane string) {
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=20260706-3"> <link rel="stylesheet" href="/static/style.css?v=20260706-4">
<script src="/static/htmx.min.js"></script> <script src="/static/htmx.min.js"></script>
<script src="/static/app.js?v=20260706-3" defer></script></head> <script src="/static/app.js?v=20260706-4" defer></script></head>
<body class="ol2013"> <body class="ol2013">
<header class="ribbon"> <header class="ribbon">
<nav class="ribbon-tabs"> <nav class="ribbon-tabs">

20
backend/08-viewer.go
View file

@ -282,11 +282,11 @@ func renderInitialReadPane(body string) string {
func renderInitialSourceSelectPane(body string) string { func renderInitialSourceSelectPane(body string) string {
var b strings.Builder var b strings.Builder
b.WriteString(`<div class="pane-head mode-head"><div class="mode-switch"><button class="btn compact active" type="button">Quelle</button><button class="btn secondary compact" type="button" hx-get="/view/target/select" hx-target="#read" hx-swap="innerHTML">Ziel</button></div><form class="target-select-form"><select id="source-account-select" name="source" class="target-select">`) b.WriteString(`<div class="pane-head mode-head"><span class="mode-label">Quelle</span><form class="target-select-form"><select id="source-account-select" name="source" class="target-select">`)
for _, opt := range sourceAccountOptions() { for _, opt := range sourceAccountOptions() {
fmt.Fprintf(&b, `<option value="%s">%s</option>`, html.EscapeString(opt.Value), html.EscapeString(opt.Label)) fmt.Fprintf(&b, `<option value="%s">%s</option>`, html.EscapeString(opt.Value), html.EscapeString(opt.Label))
} }
b.WriteString(`</select></form></div><div class="read-body">`) b.WriteString(`</select></form><button class="btn secondary compact" type="button" hx-get="/view/target/select" hx-target="#read" hx-swap="innerHTML">Ziel</button></div><div class="read-body">`)
b.WriteString(body) b.WriteString(body)
b.WriteString(`</div>`) b.WriteString(`</div>`)
return b.String() return b.String()
@ -294,7 +294,7 @@ func renderInitialSourceSelectPane(body string) string {
func renderInitialTargetSelectPane(selected string) string { func renderInitialTargetSelectPane(selected string) string {
var b strings.Builder var b strings.Builder
b.WriteString(`<div class="pane-head mode-head"><div class="mode-switch"><button class="btn secondary compact" type="button" hx-get="/view/source/select" hx-target="#read" hx-swap="innerHTML">Quelle</button><button class="btn compact active" type="button">Ziel</button></div><form class="target-select-form"><select id="target-account-select" name="target_account" class="target-select"><option value="">Automatisch</option>`) b.WriteString(`<div class="pane-head mode-head"><span class="mode-label">Ziel</span><form class="target-select-form"><select id="target-account-select" name="target_account" class="target-select"><option value="">Automatisch</option>`)
for _, opt := range targetAccountOptions() { for _, opt := range targetAccountOptions() {
attr := "" attr := ""
if opt.Value == selected { if opt.Value == selected {
@ -302,7 +302,7 @@ func renderInitialTargetSelectPane(selected string) string {
} }
fmt.Fprintf(&b, `<option value="%s"%s>%s</option>`, html.EscapeString(opt.Value), attr, html.EscapeString(opt.Label)) fmt.Fprintf(&b, `<option value="%s"%s>%s</option>`, html.EscapeString(opt.Value), attr, html.EscapeString(opt.Label))
} }
b.WriteString(`</select></form></div><div class="read-body"><div class="ef-empty">Nachricht waehlen.</div></div>`) b.WriteString(`</select></form><button class="btn secondary compact" type="button" hx-get="/view/source/select" hx-target="#read" hx-swap="innerHTML">Quelle</button></div><div class="read-body"><div class="ef-empty">Nachricht waehlen.</div></div>`)
return b.String() return b.String()
} }
@ -479,8 +479,7 @@ func messageIDHeader(raw []byte) string {
func renderTargetAccountSelect(account, folder, selected string, index int) string { func renderTargetAccountSelect(account, folder, selected string, index int) string {
options := targetAccountOptions() options := targetAccountOptions()
var b strings.Builder var b strings.Builder
fmt.Fprintf(&b, `<div class="pane-head mode-head"><div class="mode-switch"><button class="btn secondary compact" type="button" hx-get="/view/message?source=%s&amp;folder=%s&amp;index=%d&amp;target_account=%s" hx-target="#read" hx-swap="innerHTML">Quelle</button><button class="btn compact active" type="button">Ziel</button></div><form class="target-select-form"`, b.WriteString(`<div class="pane-head mode-head"><span class="mode-label">Ziel</span><form class="target-select-form"`)
urlEsc(sourceDisplayLabel(account)), urlEsc(folder), index, urlEsc(selected))
if account != "" && folder != "" && index >= 0 { if account != "" && folder != "" && index >= 0 {
fmt.Fprintf(&b, ` hx-get="/view/target" hx-target="#read" hx-swap="innerHTML" hx-trigger="change from:#target-account-select"`) fmt.Fprintf(&b, ` hx-get="/view/target" hx-target="#read" hx-swap="innerHTML" hx-trigger="change from:#target-account-select"`)
} }
@ -497,7 +496,8 @@ func renderTargetAccountSelect(account, folder, selected string, index int) stri
} }
fmt.Fprintf(&b, `<option value="%s"%s>%s</option>`, html.EscapeString(opt.Value), attr, html.EscapeString(opt.Label)) fmt.Fprintf(&b, `<option value="%s"%s>%s</option>`, html.EscapeString(opt.Value), attr, html.EscapeString(opt.Label))
} }
b.WriteString(`</select></form></div>`) fmt.Fprintf(&b, `</select></form><button class="btn secondary compact" type="button" hx-get="/view/message?source=%s&amp;folder=%s&amp;index=%d&amp;target_account=%s" hx-target="#read" hx-swap="innerHTML">Quelle</button></div>`,
urlEsc(sourceDisplayLabel(account)), urlEsc(folder), index, urlEsc(selected))
if account != "" && folder != "" && index >= 0 { if account != "" && folder != "" && index >= 0 {
fmt.Fprintf(&b, `<div class="drop-zone" data-drop-target="manual-copy" data-source="%s" data-folder="%s" data-index="%d">Mail hier ablegen fuer manuellen Umzug</div>`, fmt.Fprintf(&b, `<div class="drop-zone" data-drop-target="manual-copy" data-source="%s" data-folder="%s" data-index="%d">Mail hier ablegen fuer manuellen Umzug</div>`,
html.EscapeString(sourceDisplayLabel(account)), html.EscapeString(folder), index) html.EscapeString(sourceDisplayLabel(account)), html.EscapeString(folder), index)
@ -507,12 +507,11 @@ func renderTargetAccountSelect(account, folder, selected string, index int) stri
func renderSourcePaneHead(account, folder, targetAccount string, index int) string { func renderSourcePaneHead(account, folder, targetAccount string, index int) string {
var b strings.Builder var b strings.Builder
fmt.Fprintf(&b, `<div class="pane-head mode-head"><div class="mode-switch"><button class="btn compact active" type="button">Quelle</button><button class="btn secondary compact" type="button" hx-get="/view/target?source=%s&amp;folder=%s&amp;index=%d&amp;target_account=%s" hx-target="#read" hx-swap="innerHTML">Ziel</button></div><form class="target-select-form" hx-get="/view/message" hx-target="#read" hx-swap="innerHTML" hx-trigger="change from:#source-account-select"> fmt.Fprintf(&b, `<div class="pane-head mode-head"><span class="mode-label">Quelle</span><form class="target-select-form" hx-get="/view/message" hx-target="#read" hx-swap="innerHTML" hx-trigger="change from:#source-account-select">
<input type="hidden" name="folder" value="%s"> <input type="hidden" name="folder" value="%s">
<input type="hidden" name="index" value="%d"> <input type="hidden" name="index" value="%d">
<input type="hidden" name="target_account" value="%s"> <input type="hidden" name="target_account" value="%s">
<select id="source-account-select" name="source" class="target-select">`, <select id="source-account-select" name="source" class="target-select">`,
urlEsc(sourceDisplayLabel(account)), urlEsc(folder), index, urlEsc(targetAccount),
html.EscapeString(folder), index, html.EscapeString(targetAccount)) html.EscapeString(folder), index, html.EscapeString(targetAccount))
for _, opt := range sourceAccountOptions() { for _, opt := range sourceAccountOptions() {
attr := "" attr := ""
@ -521,7 +520,8 @@ func renderSourcePaneHead(account, folder, targetAccount string, index int) stri
} }
fmt.Fprintf(&b, `<option value="%s"%s>%s</option>`, html.EscapeString(opt.Value), attr, html.EscapeString(opt.Label)) fmt.Fprintf(&b, `<option value="%s"%s>%s</option>`, html.EscapeString(opt.Value), attr, html.EscapeString(opt.Label))
} }
b.WriteString(`</select></form></div>`) fmt.Fprintf(&b, `</select></form><button class="btn secondary compact" type="button" hx-get="/view/target?source=%s&amp;folder=%s&amp;index=%d&amp;target_account=%s" hx-target="#read" hx-swap="innerHTML">Ziel</button></div>`,
urlEsc(sourceDisplayLabel(account)), urlEsc(folder), index, urlEsc(targetAccount))
return b.String() return b.String()
} }

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

@ -90,19 +90,14 @@ body.resizing { cursor: col-resize; user-select: none; }
} }
.mode-head { .mode-head {
display: grid; display: grid;
grid-template-columns: auto minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
.mode-switch { .mode-label {
display: flex; min-width: 44px;
align-items: center; color: var(--ol-muted);
gap: 4px; font-weight: 700;
min-width: 0;
}
.mode-switch .btn.active {
background: var(--ol-blue);
color: #fff;
} }
.target-select-form { margin: 0; min-width: 0; } .target-select-form { margin: 0; min-width: 0; }
.target-select { .target-select {