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

View file

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