smueller/TK-Wiki-Newsletter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement newsletter preview copy functionality and UI enhancements

Browse Source 
- Add a new preview banner to indicate the live newsletter display.
- Introduce `copyFromPreviewFrame` function to enable copying the newsletter preview directly.
- Update copy status messages for clarity and improved user guidance.
- Revise button labels in the dashboard for better usability.
- Modify CSS for the newsletter preview frame and add styles for the new preview banner.
This commit is contained in:
smueller
2026-07-03 13:48:51 +02:00
parent 9f42cc77cc
commit 3f3223f17c
4 changed files with 70 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/templates/base.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{{ title if title else "Wiki Newsletter Admin" }}{% endblock %} · Thomas-Krenn.AG</title>
<link rel="stylesheet" href="/static/css/main.css?v=3">
<link rel="stylesheet" href="/static/css/main.css?v=4">
</head>
<body class="{% block body_class %}{% endblock %}">
<header class="topbar">

17
app/templates/dashboard.html
View File

@@ -79,14 +79,15 @@
<p class="card-desc">Formatierten Newsletter ansehen und für Outlook kopieren.</p>
</div>
</div>
<p class="hint"><strong>Empfohlen:</strong> „Im Browser öffnen“ → <strong>Strg+A</strong>, <strong>Strg+C</strong> → in Outlook <strong>Strg+V</strong>.</p>
<p class="hint">Die Vorschau unten zeigt <strong>exakt</strong>, wie der Newsletter aussieht. „Vorschau kopieren“ übernimmt dieses Layout 1:1 in die Zwischenablage.</p>
<div class="copy-actions">
<button type="button" id="open-outlook-btn" class="btn-primary">Im Browser öffnen</button>
<button type="button" id="copy-outlook-btn" class="btn-secondary">Für Outlook kopieren</button>
<button type="button" id="copy-outlook-btn" class="btn-primary">Vorschau kopieren</button>
<button type="button" id="open-outlook-btn" class="btn-secondary">Im Browser öffnen</button>
<button type="button" id="download-html-btn" class="btn-secondary">HTML herunterladen</button>
<button type="button" id="copy-html-source-btn" class="btn-outline">HTML-Quelltext</button>
<span id="copy-status" class="copy-status" aria-live="polite"></span>
</div>
<div class="preview-banner">Live-Vorschau – so wird der Newsletter dargestellt</div>
<iframe id="newsletter-preview-frame" class="newsletter-preview-frame" title="Newsletter Vorschau"></iframe>
<textarea id="newsletter-html-source" class="hidden-source" hidden readonly>{{ raw_html }}</textarea>
<textarea id="newsletter-outlook-source" class="hidden-source" hidden readonly>{{ outlook_html }}</textarea>
@@ -276,10 +277,10 @@
<div class="sidebar-card">
<h4>Outlook-Tipp</h4>
<ul>
<li>„Im Browser öffnen“ nutzen</li>
<li>Alles markieren (Strg+A)</li>
<li>Kopieren (Strg+C)</li>
<li>In Outlook einfügen</li>
<li><strong>Vorschau kopieren</strong> – übernimmt die Live-Vorschau</li>
<li>In Outlook: <strong>Strg+V</strong></li>
<li>Rechtsklick → <strong>Format beibehalten</strong></li>
<li>Bei Dunkelmodus: Outlook-Design auf „Weiß“ stellen</li>
</ul>
</div>
{% if user.role == "admin" %}
@@ -297,5 +298,5 @@
{% endblock %}
{% block scripts %}
<script src="/static/js/newsletter.js?v=6"></script>
<script src="/static/js/newsletter.js?v=8"></script>
{% endblock %}