Improved "View in separate window" with theme colors

This commit is contained in:
the-djmaze 2022-02-13 20:01:21 +01:00
parent 803113568f
commit 9d8325d5a8
2 changed files with 22 additions and 41 deletions

View file

@ -1,31 +1,24 @@
<html> <html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="user-scalable=no"/> <title></title>
<title>{{subject}}</title>
<style> <style>
html, body { html, body {
background-color: #fff;
color: #000;
font-size: 13px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
header { header {
background: #eee; background: rgba(125,128,128,0.3);
border-bottom: 1px solid #ccc; border-bottom: 1px solid #888;
padding: 0 15px;
} }
header h1 { header h1 {
font-size: 16px; font-size: 120%;
margin: 0;
} }
header * { header * {
font-size: 12px; margin: 5px 0;
padding: 5px 0;
} }
header time { header time {
@ -33,30 +26,21 @@ header time {
} }
blockquote { blockquote {
border-left: 2px solid black; border-left: 2px solid rgba(125,128,128,0.5);
margin: 0; margin: 0;
padding: 0 10px; padding: 0 0 0 10px;
} }
pre, .body-wrp.plain { pre {
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
word-break: normal; word-break: normal;
} }
.body-wrp { body > * {
padding: 15px; padding: 0.5em 1em;
} }
</style> </style>
</head> </head>
<body> <body></body>
<header>
<h1>{{subject}}</h1>
<time>{{date}}</time>
<div>{{fromCreds}}</div>
<div>{{toLabel}}: {{toCreds}}</div>
<div {{ccHide}}>{{ccLabel}}: {{ccCreds}}</div>
</header>
<div class="body-wrp {{bodyClass}}">{{html}}</div>
</body>
</html> </html>

View file

@ -491,21 +491,18 @@ export class MessageModel extends AbstractModel {
ccLine = this.ccToLine(false), ccLine = this.ccToLine(false),
m = 0 < timeStampInUTC ? new Date(timeStampInUTC * 1000) : null, m = 0 < timeStampInUTC ? new Date(timeStampInUTC * 1000) : null,
win = open(''), win = open(''),
doc = win.document; sdoc = win.document;
doc.write(PreviewHTML let subject = encodeHtml(this.subject()),
.replace(/{{subject}}/g, encodeHtml(this.subject())) mode = this.isHtml() ? 'div' : 'pre',
.replace('{{date}}', encodeHtml(m ? m.format('LLL') : '')) cc = ccLine ? `<div>${encodeHtml(i18n('GLOBAL/CC'))}: ${encodeHtml(ccLine)}</div>` : '',
.replace('{{fromCreds}}', encodeHtml(this.fromToLine(false))) style = getComputedStyle(doc.querySelector('.messageView')),
.replace('{{toCreds}}', encodeHtml(this.toToLine(false))) prop = property => style.getPropertyValue(property);
.replace('{{toLabel}}', encodeHtml(i18n('GLOBAL/TO'))) sdoc.write(PreviewHTML
.replace('{{ccHide}}', ccLine ? '' : 'hidden=""') .replace('<title>', '<title>'+subject)
.replace('{{ccCreds}}', encodeHtml(ccLine)) // eslint-disable-next-line max-len
.replace('{{ccLabel}}', encodeHtml(i18n('GLOBAL/CC'))) .replace('<body>', `<body style="background-color:${prop('background-color')};color:${prop('color')}"><header><h1>${subject}</h1><time>${encodeHtml(m ? m.format('LLL') : '')}</time><div>${encodeHtml(this.fromToLine(false))}</div><div>${encodeHtml(i18n('GLOBAL/TO'))}: ${encodeHtml(this.toToLine(false))}</div>${cc}</header><${mode}>${this.bodyAsHTML()}</${mode}>`)
.replace('{{bodyClass}}', this.isHtml() ? 'html' : 'plain')
.replace('{{html}}', this.bodyAsHTML())
); );
sdoc.close();
doc.close();
if (print) { if (print) {
setTimeout(() => win.print(), 100); setTimeout(() => win.print(), 100);