mirror of
https://github.com/mjl-/mox.git
synced 2024-12-26 08:23:48 +03:00
webmail: change many inline styles to using css classes, and add dark mode
this started with looking into the dark mode of PR #163 by mattfbacon. it's a very good solution, especially for the amount of code. while looking into dark mode, some common problems with inverting colors are: - box-shadow start "glowing" which isn't great. likewise, semitransparent layers would become brighter, not darker. - while popups/overlays in light mode just stay the same white, in dark mode they should become lighter than the regular content because box shadows don't give enough contrast in dark mode. while looking at adding explicit styles for dark mode, it turns out that's easier when we work more with css rules/classes instead of inline styles (so we can use the @media rule). so we now also create css rules instead of working with inline styles a lot. benefits: - creating css rules is useful for items that repeat. they'll have a single css class. changing a style on a css class is now reflected in all elements of that kind (with that class) - css class names are helpful when inspecting the DOM while developing: they typically describe the function of the element. most css classes are defined near where they are used, often while making the element using the class (the css rule is created on first use). this changes moves colors used for styling to a single place in webmail/lib.ts. each property can get two values: one for regular/light mode, one for dark mode. that should prevent forgetting one of them and makes it easy to configure both. this change sets colors for the dark mode. i think the popups look better than in PR #163, but in other ways it may be worse. this is a start, we can tweak the styling. if we can reduce the number of needed colors some more, we could make them configurable in the webmail settings in the future. so this is also a step towards making the ui looks configurable as discussed in issue #107.
This commit is contained in:
Mechiel Lukkien
parent
195c57f06e
commit
a16c08681b
10 changed files with 1130 additions and 487 deletions
217
webmail/lib.ts
217
webmail/lib.ts
|
|
@ -1,11 +1,158 @@
|
|||
// Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
|
||||
|
||||
// For authentication/security results.
|
||||
const underlineGreen = '#50c40f'
|
||||
const underlineRed = '#e15d1c'
|
||||
const underlineBlue = '#09f'
|
||||
const underlineGrey = '#aaa'
|
||||
const underlineYellow = 'yellow'
|
||||
// We build CSS rules in JS. For several reasons:
|
||||
// - To keep the style definitions closer to their use.
|
||||
// - To make it easier to provide both light/regular and dark mode colors.
|
||||
// - To use class names for styling, instead of the the many inline styles.
|
||||
// Makes it easier to look through a DOM, and easier to change the style of all
|
||||
// instances of a class.
|
||||
|
||||
// We keep the default/regular styles and dark-mode styles in separate stylesheets.
|
||||
const cssStyle = dom.style(attr.type('text/css'))
|
||||
document.head.appendChild(cssStyle)
|
||||
const styleSheet = cssStyle.sheet!
|
||||
|
||||
const cssStyleDark = dom.style(attr.type('text/css'))
|
||||
document.head.appendChild(cssStyleDark)
|
||||
const styleSheetDark = cssStyleDark.sheet!
|
||||
styleSheetDark.insertRule('@media (prefers-color-scheme: dark) {}')
|
||||
const darkModeRule = styleSheetDark.cssRules[0] as CSSMediaRule
|
||||
|
||||
let cssRules: { [selector: string]: string} = {} // For ensuring a selector has a single definition.
|
||||
// Ensure a selector has the given style properties. If a style value is an array,
|
||||
// it must have 2 elements. The first is the default value, the second used for a
|
||||
// rule for dark mode.
|
||||
const ensureCSS = (selector: string, styles: { [prop: string]: string | number | string[] }, important?: boolean) => {
|
||||
// Check that a selector isn't added again with different styling. Only during development.
|
||||
const checkConsistency = location.hostname === 'localhost'
|
||||
if (cssRules[selector]) {
|
||||
if (checkConsistency) {
|
||||
const exp = JSON.stringify(styles)
|
||||
if (cssRules[selector] !== exp) {
|
||||
throw new Error('duplicate css rule for selector '+selector+', had '+cssRules[selector] + ', next '+exp)
|
||||
}
|
||||
}
|
||||
return
|
||||
}
|
||||
cssRules[selector] = checkConsistency ? JSON.stringify(styles) : 'x'
|
||||
|
||||
const index = styleSheet.cssRules.length
|
||||
styleSheet.insertRule(selector + ' {}', index)
|
||||
const st = (styleSheet.cssRules[index] as CSSStyleRule).style
|
||||
let darkst: CSSStyleDeclaration | undefined
|
||||
for (let [k, v] of Object.entries(styles)) {
|
||||
// We've kept the camel-case in our code which we had from when we did "st[prop] =
|
||||
// value". It is more convenient as object keys. So convert to kebab-case.
|
||||
k = k.replace(/[A-Z]/g, s => '-'+s.toLowerCase())
|
||||
if (Array.isArray(v)) {
|
||||
if (v.length !== 2) {
|
||||
throw new Error('2 elements required for light/dark mode style, got '+v.length)
|
||||
}
|
||||
if (!darkst) {
|
||||
const darkIndex = darkModeRule.cssRules.length
|
||||
darkModeRule.insertRule(selector + ' {}', darkIndex)
|
||||
darkst = (darkModeRule.cssRules[darkIndex] as CSSStyleRule).style
|
||||
}
|
||||
st.setProperty(k, ''+v[0], important ? 'important' : '')
|
||||
darkst.setProperty(k, ''+v[1], important ? 'important' : '')
|
||||
} else {
|
||||
st.setProperty(k, ''+v, important ? 'important' : '')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Ensure CSS styling exists for a class, returning the same kind of object
|
||||
// returned by dom._class, for use with dom.*-building functions.
|
||||
const css = (className: string, styles: { [prop: string]: string | number | string[] }, important?: boolean): { _class: string[] } => {
|
||||
ensureCSS('.'+className, styles, important)
|
||||
return dom._class(className)
|
||||
}
|
||||
|
||||
// todo: reduce number of colors. hopefully we can derive some colors from a few base colors (making them brighter/darker, or shifting hue, etc). then make them configurable through settings.
|
||||
// todo: add the standard padding and border-radius, perhaps more.
|
||||
// todo: could make some of these {prop: value} objects and pass them directly to css()
|
||||
const styles = {
|
||||
color: ['black', '#ddd'],
|
||||
colorMild: ['#555', '#bbb'],
|
||||
colorMilder: ['#666', '#aaa'],
|
||||
backgroundColor: ['white', '#222'],
|
||||
backgroundColorMild: ['#f8f8f8', '#080808'],
|
||||
backgroundColorMilder: ['#999', '#777'],
|
||||
borderColor: ['#ccc', '#333'],
|
||||
mailboxesTopBackgroundColor: ['#fdfdf1', 'rgb(26, 18, 0)'],
|
||||
msglistBackgroundColor: ['#f5ffff', 'rgb(4, 19, 13)'],
|
||||
boxShadow: ['0 0 20px rgba(0, 0, 0, 0.1)', '0px 0px 20px #000'],
|
||||
|
||||
buttonBackground: ['#eee', '#222'],
|
||||
buttonBorderColor: ['#888', '#666'],
|
||||
buttonHoverBackground: ['#ddd', '#333'],
|
||||
|
||||
overlayOpaqueBackgroundColor: ['#eee', '#011'],
|
||||
overlayBackgroundColor: ['rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)'],
|
||||
|
||||
popupColor: ['black', 'white'],
|
||||
popupBackgroundColor: ['white', 'rgb(49, 50, 51)'],
|
||||
popupBorderColor: ['#ccc', '#555'],
|
||||
|
||||
highlightBackground: ['gold', '#a70167'],
|
||||
highlightBorderColor: ['#8c7600', 'rgb(253, 31, 167)'],
|
||||
highlightBackgroundHover: ['#ffbd21', 'rgb(113, 4, 71)'],
|
||||
|
||||
mailboxActiveBackground: ['linear-gradient(135deg, #ffc7ab 0%, #ffdeab 100%)', 'linear-gradient(135deg, rgb(182, 61, 0) 0%, rgb(140, 90, 13) 100%)'],
|
||||
mailboxHoverBackgroundColor: ['#eee', 'rgb(66, 31, 21)'],
|
||||
|
||||
msgItemActiveBackground: ['linear-gradient(135deg, #8bc8ff 0%, #8ee5ff 100%)', 'linear-gradient(135deg, rgb(4, 92, 172) 0%, rgb(2, 123, 160) 100%)'],
|
||||
msgItemHoverBackgroundColor: ['#eee', 'rgb(7, 51, 72)'],
|
||||
msgItemFocusBorderColor: ['#2685ff', '#2685ff'],
|
||||
|
||||
buttonTristateOnBackground: ['#c4ffa9', 'rgb(39, 126, 0)'],
|
||||
buttonTristateOffBackground: ['#ffb192', 'rgb(191, 65, 15)'],
|
||||
|
||||
warningBackgroundColor: ['#ffca91', 'rgb(168, 87, 0)'],
|
||||
|
||||
successBackground: ['#d2f791', '#1fa204'],
|
||||
emphasisBackground: ['#666', '#aaa'],
|
||||
|
||||
// For authentication/security results.
|
||||
underlineGreen: '#50c40f',
|
||||
underlineRed: '#e15d1c',
|
||||
underlineBlue: '#09f',
|
||||
underlineGrey: '#888',
|
||||
}
|
||||
const styleClasses = {
|
||||
// For quoted text, with multiple levels of indentations.
|
||||
quoted: [
|
||||
css('quoted1', {color: ['#03828f', '#71f2ff']}), // red
|
||||
css('quoted2', {color: ['#c7445c', 'rgb(236, 76, 76)']}), // green
|
||||
css('quoted3', {color: ['#417c10', 'rgb(115, 230, 20)']}), // blue
|
||||
],
|
||||
// When text switches between unicode scripts.
|
||||
scriptswitch: css('scriptswitch', {textDecoration: 'underline 2px', textDecorationColor: ['#dca053', 'rgb(232, 143, 30)']}),
|
||||
textMild: css('textMild', {color: styles.colorMild}),
|
||||
// For keywords (also known as flags/labels/tags) on messages.
|
||||
keyword: css('keyword', {padding: '0 .15em', borderRadius: '.15em', fontWeight: 'normal', fontSize: '.9em', margin: '0 .15em', whiteSpace: 'nowrap', background: styles.highlightBackground, color: styles.color, border: '1px solid', borderColor: styles.highlightBorderColor}),
|
||||
msgHeaders: css('msgHeaders', {marginBottom: '1ex', width: '100%'}),
|
||||
}
|
||||
|
||||
ensureCSS('.msgHeaders td', {wordBreak: 'break-word'}) // Prevent horizontal scroll bar for long header values.
|
||||
ensureCSS('.keyword.keywordCollapsed', {opacity: .75}),
|
||||
|
||||
// Generic styling.
|
||||
ensureCSS('*', {fontSize: 'inherit', fontFamily: "'ubuntu', 'lato', sans-serif", margin: 0, padding: 0, boxSizing: 'border-box'})
|
||||
ensureCSS('.mono, .mono *', {fontFamily: "'ubuntu mono', monospace" })
|
||||
ensureCSS('table td, table th', {padding: '.15em .25em'})
|
||||
ensureCSS('.pad', {padding: '.5em'})
|
||||
ensureCSS('iframe', {border: 0})
|
||||
ensureCSS('img, embed, video, iframe', {backgroundColor: 'white', color: 'black'})
|
||||
ensureCSS(':root', {backgroundColor: styles.backgroundColor, color: styles.color })
|
||||
ensureCSS('a', {color: ['rgb(9, 107, 194)', 'rgb(99, 182, 255)']})
|
||||
ensureCSS('a:visited', {color: ['rgb(7, 4, 193)', 'rgb(199, 99, 255)']})
|
||||
|
||||
// For message view with multiple inline elements (often a single text and multiple messages).
|
||||
ensureCSS('.textmulti > *:nth-child(even)', {backgroundColor: ['#f4f4f4', '#141414']})
|
||||
ensureCSS('.textmulti > *', {padding: '2ex .5em', margin: '-.5em' /* compensate pad */ })
|
||||
ensureCSS('.textmulti > *:first-child', {padding: '.5em'})
|
||||
|
||||
|
||||
// join elements in l with the results of calls to efn. efn can return
|
||||
// HTMLElements, which cannot be inserted into the dom multiple times, hence the
|
||||
|
|
@ -83,8 +230,7 @@ const renderText = (text: string): HTMLElement => {
|
|||
if (q == 0) {
|
||||
return [addLinks(line), '\n']
|
||||
}
|
||||
q = (q-1)%3 + 1
|
||||
return dom.div(dom._class('quoted'+q), addLinks(line))
|
||||
return dom.div(styleClasses.quoted[q%styleClasses.quoted.length], addLinks(line))
|
||||
}))
|
||||
}
|
||||
|
||||
|
|
@ -133,36 +279,43 @@ const formatAddressValidated = (a: api.MessageAddress, m: api.Message, use: bool
|
|||
// historic messages were from a mailing list. We could add a heuristic based on
|
||||
// List-Id headers, but it would be unreliable...
|
||||
// todo: add field to Message with the exact results.
|
||||
let name = ''
|
||||
let color = ''
|
||||
let title = ''
|
||||
switch (m.MsgFromValidation) {
|
||||
case api.Validation.ValidationStrict:
|
||||
color = underlineGreen
|
||||
name = 'Strict'
|
||||
color = styles.underlineGreen
|
||||
title = 'Message would have matched a strict DMARC policy.'
|
||||
break
|
||||
case api.Validation.ValidationDMARC:
|
||||
color = underlineGreen
|
||||
name = 'DMARC'
|
||||
color = styles.underlineGreen
|
||||
title = 'Message matched DMARC policy of domain.'
|
||||
break
|
||||
case api.Validation.ValidationRelaxed:
|
||||
color = underlineGreen
|
||||
name = 'Relaxed'
|
||||
color = styles.underlineGreen
|
||||
title = 'Domain did not have a DMARC policy, but message would match a relaxed policy if it had existed.'
|
||||
break;
|
||||
case api.Validation.ValidationNone:
|
||||
if (m.IsForward || m.IsMailingList) {
|
||||
color = underlineBlue
|
||||
name = 'Forwardlist'
|
||||
color = styles.underlineBlue
|
||||
title = 'Message would not pass DMARC policy, but came in through a configured mailing list or forwarding address.'
|
||||
} else {
|
||||
color = underlineRed
|
||||
name = 'Bad'
|
||||
color = styles.underlineRed
|
||||
title = 'Either domain did not have a DMARC policy, or message did not adhere to it.'
|
||||
}
|
||||
break;
|
||||
default:
|
||||
// Also for zero value, when unknown. E.g. for sent messages added with IMAP.
|
||||
name = 'Unknown'
|
||||
title = 'Unknown DMARC verification result.'
|
||||
return dom.span(attr.title(title+extra), domstr)
|
||||
}
|
||||
return dom.span(attr.title(title+extra), style({borderBottom: '1.5px solid '+color, textDecoration: 'none'}), domstr)
|
||||
return dom.span(attr.title(title+extra), css('addressValidation'+name, {borderBottom: '1.5px solid', borderBottomColor: color, textDecoration: 'none'}), domstr)
|
||||
}
|
||||
|
||||
let l: (string | HTMLElement)[] = []
|
||||
|
|
@ -223,13 +376,15 @@ const loadMsgheaderView = (msgheaderelem: HTMLElement, mi: api.MessageItem, more
|
|||
const msgenv = mi.Envelope
|
||||
const received = mi.Message.Received
|
||||
const receivedlocal = new Date(received.getTime())
|
||||
const msgHeaderFieldStyle = css('msgHeaderField', {textAlign: 'right', color: styles.colorMild, whiteSpace: 'nowrap'})
|
||||
const msgAttrStyle = css('msgAttr', {padding: '0px 0.15em', fontSize: '.9em'})
|
||||
dom._kids(msgheaderelem,
|
||||
// todo: make addresses clickable, start search (keep current mailbox if any)
|
||||
dom.tr(
|
||||
dom.td('From:', style({textAlign: 'right', color: '#555', whiteSpace: 'nowrap'})),
|
||||
dom.td('From:', msgHeaderFieldStyle),
|
||||
dom.td(
|
||||
style({width: '100%'}),
|
||||
dom.div(style({display: 'flex', justifyContent: 'space-between'}),
|
||||
dom.div(css('msgFromReceivedSpread', {display: 'flex', justifyContent: 'space-between'}),
|
||||
dom.div(join((msgenv.From || []).map(a => formatAddressValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')),
|
||||
dom.div(
|
||||
attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')),
|
||||
|
|
@ -239,36 +394,36 @@ const loadMsgheaderView = (msgheaderelem: HTMLElement, mi: api.MessageItem, more
|
|||
),
|
||||
),
|
||||
(msgenv.ReplyTo || []).length === 0 ? [] : dom.tr(
|
||||
dom.td('Reply-To:', style({textAlign: 'right', color: '#555', whiteSpace: 'nowrap'})),
|
||||
dom.td('Reply-To:', msgHeaderFieldStyle),
|
||||
dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressElem(a)), () => ', ')),
|
||||
),
|
||||
dom.tr(
|
||||
dom.td('To:', style({textAlign: 'right', color: '#555', whiteSpace: 'nowrap'})),
|
||||
dom.td('To:', msgHeaderFieldStyle),
|
||||
dom.td(addressList(allAddrs, msgenv.To || [])),
|
||||
),
|
||||
(msgenv.CC || []).length === 0 ? [] : dom.tr(
|
||||
dom.td('Cc:', style({textAlign: 'right', color: '#555', whiteSpace: 'nowrap'})),
|
||||
dom.td('Cc:', msgHeaderFieldStyle),
|
||||
dom.td(addressList(allAddrs, msgenv.CC || [])),
|
||||
),
|
||||
(msgenv.BCC || []).length === 0 ? [] : dom.tr(
|
||||
dom.td('Bcc:', style({textAlign: 'right', color: '#555', whiteSpace: 'nowrap'})),
|
||||
dom.td('Bcc:', msgHeaderFieldStyle),
|
||||
dom.td(addressList(allAddrs, msgenv.BCC || [])),
|
||||
),
|
||||
dom.tr(
|
||||
dom.td('Subject:', style({textAlign: 'right', color: '#555', whiteSpace: 'nowrap'})),
|
||||
dom.td('Subject:', msgHeaderFieldStyle),
|
||||
dom.td(
|
||||
dom.div(style({display: 'flex', justifyContent: 'space-between'}),
|
||||
dom.div(css('msgSubjectAttrsSpread', {display: 'flex', justifyContent: 'space-between'}),
|
||||
dom.div(msgenv.Subject || ''),
|
||||
dom.div(
|
||||
mi.Message.IsForward ? dom.span(style({padding: '0px 0.15em', fontSize: '.9em'}), 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [],
|
||||
mi.Message.IsMailingList ? dom.span(style({padding: '0px 0.15em', fontSize: '.9em'}), 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [],
|
||||
mi.Message.ReceivedTLSVersion === 1 ? dom.span(style({padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #e15d1c'}), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [],
|
||||
mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(style({padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #50c40f'}), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [],
|
||||
mi.Message.ReceivedRequireTLS ? dom.span(style({padding: '.1em .3em', fontSize: '.9em', backgroundColor: '#d2f791', border: '1px solid #ccc', borderRadius: '3px'}), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [],
|
||||
mi.IsSigned ? dom.span(style({backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em'}), 'Message has a signature') : [],
|
||||
mi.IsEncrypted ? dom.span(style({backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em'}), 'Message is encrypted') : [],
|
||||
mi.Message.IsForward ? dom.span(msgAttrStyle, 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [],
|
||||
mi.Message.IsMailingList ? dom.span(msgAttrStyle, 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [],
|
||||
mi.Message.ReceivedTLSVersion === 1 ? dom.span(msgAttrStyle, css('msgAttrNoTLS', {borderBottom: '1.5px solid', borderBottomColor: styles.underlineRed}), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [],
|
||||
mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(msgAttrStyle, css('msgAttrTLS', {borderBottom: '1.5px solid', borderBottomColor: styles.underlineGreen}), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [],
|
||||
mi.Message.ReceivedRequireTLS ? dom.span(css('msgAttrRequireTLS', {padding: '.1em .3em', fontSize: '.9em', backgroundColor: styles.successBackground, border: '1px solid', borderColor: styles.borderColor, borderRadius: '3px'}), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [],
|
||||
mi.IsSigned ? dom.span(msgAttrStyle, css('msgAttrSigned', {backgroundColor: styles.emphasisBackground, color: styles.color, borderRadius: '.15em'}), 'Message has a signature') : [],
|
||||
mi.IsEncrypted ? dom.span(msgAttrStyle, css('msgAttrEncrypted', {backgroundColor: styles.emphasisBackground, color: styles.color, borderRadius: '.15em'}), 'Message is encrypted') : [],
|
||||
refineKeyword ? (mi.Message.Keywords || []).map(kw =>
|
||||
dom.clickbutton(dom._class('keyword'), kw, async function click() {
|
||||
dom.clickbutton(styleClasses.keyword, dom._class('keywordButton'), kw, async function click() {
|
||||
await refineKeyword(kw)
|
||||
}),
|
||||
) : [],
|
||||
|
|
@ -278,7 +433,7 @@ const loadMsgheaderView = (msgheaderelem: HTMLElement, mi: api.MessageItem, more
|
|||
),
|
||||
moreHeaders.map(k =>
|
||||
dom.tr(
|
||||
dom.td(k+':', style({textAlign: 'right', color: '#555', whiteSpace: 'nowrap'})),
|
||||
dom.td(k+':', msgHeaderFieldStyle),
|
||||
dom.td(),
|
||||
)
|
||||
),
|
||||
|
|
|
|||
|
|
@ -5,14 +5,6 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="noNeedlessFaviconRequestsPlease:" />
|
||||
<style>
|
||||
* { font-size: inherit; font-family: 'ubuntu', 'lato', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
|
||||
table td, table th { padding: .25ex .5ex; }
|
||||
.msgheaders td { word-break: break-word; /* prevent horizontal scroll bar for long header values */ }
|
||||
|
||||
.pad { padding: 1ex; }
|
||||
.scriptswitch { text-decoration: underline #dca053 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page"><div style="padding: 1em">Loading...</div></div>
|
||||
|
|
|
|||
174
webmail/msg.js
174
webmail/msg.js
|
|
@ -1047,12 +1047,140 @@ var api;
|
|||
};
|
||||
})(api || (api = {}));
|
||||
// Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
|
||||
// For authentication/security results.
|
||||
const underlineGreen = '#50c40f';
|
||||
const underlineRed = '#e15d1c';
|
||||
const underlineBlue = '#09f';
|
||||
const underlineGrey = '#aaa';
|
||||
const underlineYellow = 'yellow';
|
||||
// We build CSS rules in JS. For several reasons:
|
||||
// - To keep the style definitions closer to their use.
|
||||
// - To make it easier to provide both light/regular and dark mode colors.
|
||||
// - To use class names for styling, instead of the the many inline styles.
|
||||
// Makes it easier to look through a DOM, and easier to change the style of all
|
||||
// instances of a class.
|
||||
// We keep the default/regular styles and dark-mode styles in separate stylesheets.
|
||||
const cssStyle = dom.style(attr.type('text/css'));
|
||||
document.head.appendChild(cssStyle);
|
||||
const styleSheet = cssStyle.sheet;
|
||||
const cssStyleDark = dom.style(attr.type('text/css'));
|
||||
document.head.appendChild(cssStyleDark);
|
||||
const styleSheetDark = cssStyleDark.sheet;
|
||||
styleSheetDark.insertRule('@media (prefers-color-scheme: dark) {}');
|
||||
const darkModeRule = styleSheetDark.cssRules[0];
|
||||
let cssRules = {}; // For ensuring a selector has a single definition.
|
||||
// Ensure a selector has the given style properties. If a style value is an array,
|
||||
// it must have 2 elements. The first is the default value, the second used for a
|
||||
// rule for dark mode.
|
||||
const ensureCSS = (selector, styles, important) => {
|
||||
// Check that a selector isn't added again with different styling. Only during development.
|
||||
const checkConsistency = location.hostname === 'localhost';
|
||||
if (cssRules[selector]) {
|
||||
if (checkConsistency) {
|
||||
const exp = JSON.stringify(styles);
|
||||
if (cssRules[selector] !== exp) {
|
||||
throw new Error('duplicate css rule for selector ' + selector + ', had ' + cssRules[selector] + ', next ' + exp);
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
cssRules[selector] = checkConsistency ? JSON.stringify(styles) : 'x';
|
||||
const index = styleSheet.cssRules.length;
|
||||
styleSheet.insertRule(selector + ' {}', index);
|
||||
const st = styleSheet.cssRules[index].style;
|
||||
let darkst;
|
||||
for (let [k, v] of Object.entries(styles)) {
|
||||
// We've kept the camel-case in our code which we had from when we did "st[prop] =
|
||||
// value". It is more convenient as object keys. So convert to kebab-case.
|
||||
k = k.replace(/[A-Z]/g, s => '-' + s.toLowerCase());
|
||||
if (Array.isArray(v)) {
|
||||
if (v.length !== 2) {
|
||||
throw new Error('2 elements required for light/dark mode style, got ' + v.length);
|
||||
}
|
||||
if (!darkst) {
|
||||
const darkIndex = darkModeRule.cssRules.length;
|
||||
darkModeRule.insertRule(selector + ' {}', darkIndex);
|
||||
darkst = darkModeRule.cssRules[darkIndex].style;
|
||||
}
|
||||
st.setProperty(k, '' + v[0], important ? 'important' : '');
|
||||
darkst.setProperty(k, '' + v[1], important ? 'important' : '');
|
||||
}
|
||||
else {
|
||||
st.setProperty(k, '' + v, important ? 'important' : '');
|
||||
}
|
||||
}
|
||||
};
|
||||
// Ensure CSS styling exists for a class, returning the same kind of object
|
||||
// returned by dom._class, for use with dom.*-building functions.
|
||||
const css = (className, styles, important) => {
|
||||
ensureCSS('.' + className, styles, important);
|
||||
return dom._class(className);
|
||||
};
|
||||
// todo: reduce number of colors. hopefully we can derive some colors from a few base colors (making them brighter/darker, or shifting hue, etc). then make them configurable through settings.
|
||||
// todo: add the standard padding and border-radius, perhaps more.
|
||||
// todo: could make some of these {prop: value} objects and pass them directly to css()
|
||||
const styles = {
|
||||
color: ['black', '#ddd'],
|
||||
colorMild: ['#555', '#bbb'],
|
||||
colorMilder: ['#666', '#aaa'],
|
||||
backgroundColor: ['white', '#222'],
|
||||
backgroundColorMild: ['#f8f8f8', '#080808'],
|
||||
backgroundColorMilder: ['#999', '#777'],
|
||||
borderColor: ['#ccc', '#333'],
|
||||
mailboxesTopBackgroundColor: ['#fdfdf1', 'rgb(26, 18, 0)'],
|
||||
msglistBackgroundColor: ['#f5ffff', 'rgb(4, 19, 13)'],
|
||||
boxShadow: ['0 0 20px rgba(0, 0, 0, 0.1)', '0px 0px 20px #000'],
|
||||
buttonBackground: ['#eee', '#222'],
|
||||
buttonBorderColor: ['#888', '#666'],
|
||||
buttonHoverBackground: ['#ddd', '#333'],
|
||||
overlayOpaqueBackgroundColor: ['#eee', '#011'],
|
||||
overlayBackgroundColor: ['rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)'],
|
||||
popupColor: ['black', 'white'],
|
||||
popupBackgroundColor: ['white', 'rgb(49, 50, 51)'],
|
||||
popupBorderColor: ['#ccc', '#555'],
|
||||
highlightBackground: ['gold', '#a70167'],
|
||||
highlightBorderColor: ['#8c7600', 'rgb(253, 31, 167)'],
|
||||
highlightBackgroundHover: ['#ffbd21', 'rgb(113, 4, 71)'],
|
||||
mailboxActiveBackground: ['linear-gradient(135deg, #ffc7ab 0%, #ffdeab 100%)', 'linear-gradient(135deg, rgb(182, 61, 0) 0%, rgb(140, 90, 13) 100%)'],
|
||||
mailboxHoverBackgroundColor: ['#eee', 'rgb(66, 31, 21)'],
|
||||
msgItemActiveBackground: ['linear-gradient(135deg, #8bc8ff 0%, #8ee5ff 100%)', 'linear-gradient(135deg, rgb(4, 92, 172) 0%, rgb(2, 123, 160) 100%)'],
|
||||
msgItemHoverBackgroundColor: ['#eee', 'rgb(7, 51, 72)'],
|
||||
msgItemFocusBorderColor: ['#2685ff', '#2685ff'],
|
||||
buttonTristateOnBackground: ['#c4ffa9', 'rgb(39, 126, 0)'],
|
||||
buttonTristateOffBackground: ['#ffb192', 'rgb(191, 65, 15)'],
|
||||
warningBackgroundColor: ['#ffca91', 'rgb(168, 87, 0)'],
|
||||
successBackground: ['#d2f791', '#1fa204'],
|
||||
emphasisBackground: ['#666', '#aaa'],
|
||||
// For authentication/security results.
|
||||
underlineGreen: '#50c40f',
|
||||
underlineRed: '#e15d1c',
|
||||
underlineBlue: '#09f',
|
||||
underlineGrey: '#888',
|
||||
};
|
||||
const styleClasses = {
|
||||
// For quoted text, with multiple levels of indentations.
|
||||
quoted: [
|
||||
css('quoted1', { color: ['#03828f', '#71f2ff'] }),
|
||||
css('quoted2', { color: ['#c7445c', 'rgb(236, 76, 76)'] }),
|
||||
css('quoted3', { color: ['#417c10', 'rgb(115, 230, 20)'] }), // blue
|
||||
],
|
||||
// When text switches between unicode scripts.
|
||||
scriptswitch: css('scriptswitch', { textDecoration: 'underline 2px', textDecorationColor: ['#dca053', 'rgb(232, 143, 30)'] }),
|
||||
textMild: css('textMild', { color: styles.colorMild }),
|
||||
// For keywords (also known as flags/labels/tags) on messages.
|
||||
keyword: css('keyword', { padding: '0 .15em', borderRadius: '.15em', fontWeight: 'normal', fontSize: '.9em', margin: '0 .15em', whiteSpace: 'nowrap', background: styles.highlightBackground, color: styles.color, border: '1px solid', borderColor: styles.highlightBorderColor }),
|
||||
msgHeaders: css('msgHeaders', { marginBottom: '1ex', width: '100%' }),
|
||||
};
|
||||
ensureCSS('.msgHeaders td', { wordBreak: 'break-word' }); // Prevent horizontal scroll bar for long header values.
|
||||
ensureCSS('.keyword.keywordCollapsed', { opacity: .75 }),
|
||||
// Generic styling.
|
||||
ensureCSS('*', { fontSize: 'inherit', fontFamily: "'ubuntu', 'lato', sans-serif", margin: 0, padding: 0, boxSizing: 'border-box' });
|
||||
ensureCSS('.mono, .mono *', { fontFamily: "'ubuntu mono', monospace" });
|
||||
ensureCSS('table td, table th', { padding: '.15em .25em' });
|
||||
ensureCSS('.pad', { padding: '.5em' });
|
||||
ensureCSS('iframe', { border: 0 });
|
||||
ensureCSS('img, embed, video, iframe', { backgroundColor: 'white', color: 'black' });
|
||||
ensureCSS(':root', { backgroundColor: styles.backgroundColor, color: styles.color });
|
||||
ensureCSS('a', { color: ['rgb(9, 107, 194)', 'rgb(99, 182, 255)'] });
|
||||
ensureCSS('a:visited', { color: ['rgb(7, 4, 193)', 'rgb(199, 99, 255)'] });
|
||||
// For message view with multiple inline elements (often a single text and multiple messages).
|
||||
ensureCSS('.textmulti > *:nth-child(even)', { backgroundColor: ['#f4f4f4', '#141414'] });
|
||||
ensureCSS('.textmulti > *', { padding: '2ex .5em', margin: '-.5em' /* compensate pad */ });
|
||||
ensureCSS('.textmulti > *:first-child', { padding: '.5em' });
|
||||
// join elements in l with the results of calls to efn. efn can return
|
||||
// HTMLElements, which cannot be inserted into the dom multiple times, hence the
|
||||
// function.
|
||||
|
|
@ -1127,8 +1255,7 @@ const renderText = (text) => {
|
|||
if (q == 0) {
|
||||
return [addLinks(line), '\n'];
|
||||
}
|
||||
q = (q - 1) % 3 + 1;
|
||||
return dom.div(dom._class('quoted' + q), addLinks(line));
|
||||
return dom.div(styleClasses.quoted[q % styleClasses.quoted.length], addLinks(line));
|
||||
}));
|
||||
};
|
||||
const displayName = (s) => {
|
||||
|
|
@ -1172,37 +1299,44 @@ const formatAddressValidated = (a, m, use) => {
|
|||
// historic messages were from a mailing list. We could add a heuristic based on
|
||||
// List-Id headers, but it would be unreliable...
|
||||
// todo: add field to Message with the exact results.
|
||||
let name = '';
|
||||
let color = '';
|
||||
let title = '';
|
||||
switch (m.MsgFromValidation) {
|
||||
case api.Validation.ValidationStrict:
|
||||
color = underlineGreen;
|
||||
name = 'Strict';
|
||||
color = styles.underlineGreen;
|
||||
title = 'Message would have matched a strict DMARC policy.';
|
||||
break;
|
||||
case api.Validation.ValidationDMARC:
|
||||
color = underlineGreen;
|
||||
name = 'DMARC';
|
||||
color = styles.underlineGreen;
|
||||
title = 'Message matched DMARC policy of domain.';
|
||||
break;
|
||||
case api.Validation.ValidationRelaxed:
|
||||
color = underlineGreen;
|
||||
name = 'Relaxed';
|
||||
color = styles.underlineGreen;
|
||||
title = 'Domain did not have a DMARC policy, but message would match a relaxed policy if it had existed.';
|
||||
break;
|
||||
case api.Validation.ValidationNone:
|
||||
if (m.IsForward || m.IsMailingList) {
|
||||
color = underlineBlue;
|
||||
name = 'Forwardlist';
|
||||
color = styles.underlineBlue;
|
||||
title = 'Message would not pass DMARC policy, but came in through a configured mailing list or forwarding address.';
|
||||
}
|
||||
else {
|
||||
color = underlineRed;
|
||||
name = 'Bad';
|
||||
color = styles.underlineRed;
|
||||
title = 'Either domain did not have a DMARC policy, or message did not adhere to it.';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
// Also for zero value, when unknown. E.g. for sent messages added with IMAP.
|
||||
name = 'Unknown';
|
||||
title = 'Unknown DMARC verification result.';
|
||||
return dom.span(attr.title(title + extra), domstr);
|
||||
}
|
||||
return dom.span(attr.title(title + extra), style({ borderBottom: '1.5px solid ' + color, textDecoration: 'none' }), domstr);
|
||||
return dom.span(attr.title(title + extra), css('addressValidation' + name, { borderBottom: '1.5px solid', borderBottomColor: color, textDecoration: 'none' }), domstr);
|
||||
};
|
||||
let l = [];
|
||||
if (a.Name) {
|
||||
|
|
@ -1246,20 +1380,22 @@ const loadMsgheaderView = (msgheaderelem, mi, moreHeaders, refineKeyword, allAdd
|
|||
const msgenv = mi.Envelope;
|
||||
const received = mi.Message.Received;
|
||||
const receivedlocal = new Date(received.getTime());
|
||||
const msgHeaderFieldStyle = css('msgHeaderField', { textAlign: 'right', color: styles.colorMild, whiteSpace: 'nowrap' });
|
||||
const msgAttrStyle = css('msgAttr', { padding: '0px 0.15em', fontSize: '.9em' });
|
||||
dom._kids(msgheaderelem,
|
||||
// todo: make addresses clickable, start search (keep current mailbox if any)
|
||||
dom.tr(dom.td('From:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(style({ width: '100%' }), dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(join((msgenv.From || []).map(a => formatAddressValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), dom.div(attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')), receivedlocal.toDateString() + ' ' + receivedlocal.toTimeString().split(' ')[0])))), (msgenv.ReplyTo || []).length === 0 ? [] : dom.tr(dom.td('Reply-To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressElem(a)), () => ', '))), dom.tr(dom.td('To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.To || []))), (msgenv.CC || []).length === 0 ? [] : dom.tr(dom.td('Cc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.CC || []))), (msgenv.BCC || []).length === 0 ? [] : dom.tr(dom.td('Bcc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.BCC || []))), dom.tr(dom.td('Subject:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(msgenv.Subject || ''), dom.div(mi.Message.IsForward ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.IsMailingList ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.ReceivedTLSVersion === 1 ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #e15d1c' }), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [], mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #50c40f' }), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [], mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '.1em .3em', fontSize: '.9em', backgroundColor: '#d2f791', border: '1px solid #ccc', borderRadius: '3px' }), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [], mi.IsSigned ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message has a signature') : [], mi.IsEncrypted ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message is encrypted') : [], refineKeyword ? (mi.Message.Keywords || []).map(kw => dom.clickbutton(dom._class('keyword'), kw, async function click() {
|
||||
dom.tr(dom.td('From:', msgHeaderFieldStyle), dom.td(style({ width: '100%' }), dom.div(css('msgFromReceivedSpread', { display: 'flex', justifyContent: 'space-between' }), dom.div(join((msgenv.From || []).map(a => formatAddressValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), dom.div(attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')), receivedlocal.toDateString() + ' ' + receivedlocal.toTimeString().split(' ')[0])))), (msgenv.ReplyTo || []).length === 0 ? [] : dom.tr(dom.td('Reply-To:', msgHeaderFieldStyle), dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressElem(a)), () => ', '))), dom.tr(dom.td('To:', msgHeaderFieldStyle), dom.td(addressList(allAddrs, msgenv.To || []))), (msgenv.CC || []).length === 0 ? [] : dom.tr(dom.td('Cc:', msgHeaderFieldStyle), dom.td(addressList(allAddrs, msgenv.CC || []))), (msgenv.BCC || []).length === 0 ? [] : dom.tr(dom.td('Bcc:', msgHeaderFieldStyle), dom.td(addressList(allAddrs, msgenv.BCC || []))), dom.tr(dom.td('Subject:', msgHeaderFieldStyle), dom.td(dom.div(css('msgSubjectAttrsSpread', { display: 'flex', justifyContent: 'space-between' }), dom.div(msgenv.Subject || ''), dom.div(mi.Message.IsForward ? dom.span(msgAttrStyle, 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.IsMailingList ? dom.span(msgAttrStyle, 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.ReceivedTLSVersion === 1 ? dom.span(msgAttrStyle, css('msgAttrNoTLS', { borderBottom: '1.5px solid', borderBottomColor: styles.underlineRed }), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [], mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(msgAttrStyle, css('msgAttrTLS', { borderBottom: '1.5px solid', borderBottomColor: styles.underlineGreen }), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [], mi.Message.ReceivedRequireTLS ? dom.span(css('msgAttrRequireTLS', { padding: '.1em .3em', fontSize: '.9em', backgroundColor: styles.successBackground, border: '1px solid', borderColor: styles.borderColor, borderRadius: '3px' }), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [], mi.IsSigned ? dom.span(msgAttrStyle, css('msgAttrSigned', { backgroundColor: styles.emphasisBackground, color: styles.color, borderRadius: '.15em' }), 'Message has a signature') : [], mi.IsEncrypted ? dom.span(msgAttrStyle, css('msgAttrEncrypted', { backgroundColor: styles.emphasisBackground, color: styles.color, borderRadius: '.15em' }), 'Message is encrypted') : [], refineKeyword ? (mi.Message.Keywords || []).map(kw => dom.clickbutton(styleClasses.keyword, dom._class('keywordButton'), kw, async function click() {
|
||||
await refineKeyword(kw);
|
||||
})) : [])))), moreHeaders.map(k => dom.tr(dom.td(k + ':', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td())));
|
||||
})) : [])))), moreHeaders.map(k => dom.tr(dom.td(k + ':', msgHeaderFieldStyle), dom.td())));
|
||||
};
|
||||
// Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
|
||||
const init = () => {
|
||||
const mi = api.parser.MessageItem(messageItem);
|
||||
let msgattachmentview = dom.div();
|
||||
if (mi.Attachments && mi.Attachments.length > 0) {
|
||||
dom._kids(msgattachmentview, dom.div(style({ borderTop: '1px solid #ccc' }), dom.div(dom._class('pad'), 'Attachments: ', join(mi.Attachments.map(a => a.Filename || '(unnamed)'), () => ', '))));
|
||||
dom._kids(msgattachmentview, dom.div(css('msgAttachments', { borderTop: '1px solid', borderTopColor: styles.borderColor }), dom.div(dom._class('pad'), 'Attachments: ', join(mi.Attachments.map(a => a.Filename || '(unnamed)'), () => ', '))));
|
||||
}
|
||||
const msgheaderview = dom.table(dom._class('msgheaders'), style({ marginBottom: '1ex', width: '100%' }));
|
||||
const msgheaderview = dom.table(styleClasses.msgHeaders);
|
||||
loadMsgheaderView(msgheaderview, mi, [], null, true);
|
||||
const l = window.location.pathname.split('/');
|
||||
const w = l[l.length - 1];
|
||||
|
|
@ -1280,7 +1416,7 @@ const init = () => {
|
|||
iframepath += '?sameorigin=true';
|
||||
let iframe;
|
||||
const page = document.getElementById('page');
|
||||
dom._kids(page, dom.div(style({ backgroundColor: '#f8f8f8', borderBottom: '1px solid #ccc' }), msgheaderview, msgattachmentview), iframe = dom.iframe(attr.title('Message body.'), attr.src(iframepath), style({ border: '0', width: '100%', height: '100%' }), function load() {
|
||||
dom._kids(page, dom.div(css('msgMeta', { backgroundColor: styles.backgroundColorMild, borderBottom: '1px solid', borderBottomColor: styles.borderColor }), msgheaderview, msgattachmentview), iframe = dom.iframe(attr.title('Message body.'), attr.src(iframepath), css('msgIframe', { width: '100%', height: '100%' }), function load() {
|
||||
// Note: we load the iframe content specifically in a way that fires the load event only when the content is fully rendered.
|
||||
iframe.style.height = iframe.contentDocument.documentElement.scrollHeight + 'px';
|
||||
if (window.location.hash === '#print') {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const init = () => {
|
|||
if (mi.Attachments && mi.Attachments.length > 0) {
|
||||
dom._kids(msgattachmentview,
|
||||
dom.div(
|
||||
style({borderTop: '1px solid #ccc'}),
|
||||
css('msgAttachments', {borderTop: '1px solid', borderTopColor: styles.borderColor}),
|
||||
dom.div(dom._class('pad'),
|
||||
'Attachments: ',
|
||||
join(mi.Attachments.map(a => a.Filename || '(unnamed)'), () => ', '),
|
||||
|
|
@ -19,7 +19,7 @@ const init = () => {
|
|||
)
|
||||
}
|
||||
|
||||
const msgheaderview = dom.table(dom._class('msgheaders'), style({marginBottom: '1ex', width: '100%'}))
|
||||
const msgheaderview = dom.table(styleClasses.msgHeaders)
|
||||
loadMsgheaderView(msgheaderview, mi, [], null, true)
|
||||
|
||||
const l = window.location.pathname.split('/')
|
||||
|
|
@ -41,14 +41,14 @@ const init = () => {
|
|||
const page = document.getElementById('page')!
|
||||
dom._kids(page,
|
||||
dom.div(
|
||||
style({backgroundColor: '#f8f8f8', borderBottom: '1px solid #ccc'}),
|
||||
css('msgMeta', {backgroundColor: styles.backgroundColorMild, borderBottom: '1px solid', borderBottomColor: styles.borderColor}),
|
||||
msgheaderview,
|
||||
msgattachmentview,
|
||||
),
|
||||
iframe=dom.iframe(
|
||||
attr.title('Message body.'),
|
||||
attr.src(iframepath),
|
||||
style({border: '0', width: '100%', height: '100%'}),
|
||||
css('msgIframe', {width: '100%', height: '100%'}),
|
||||
function load() {
|
||||
// Note: we load the iframe content specifically in a way that fires the load event only when the content is fully rendered.
|
||||
iframe.style.height = iframe.contentDocument!.documentElement.scrollHeight+'px'
|
||||
|
|
|
|||
|
|
@ -4,18 +4,6 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="noNeedlessFaviconRequestsPlease:" />
|
||||
<style>
|
||||
* { font-size: inherit; font-family: 'ubuntu', 'lato', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
|
||||
.mono, .mono * { font-family: 'ubuntu mono', monospace; }
|
||||
.scriptswitch { text-decoration: underline #dca053 2px; }
|
||||
.quoted1 { color: #03828f; }
|
||||
.quoted2 { color: #c7445c; }
|
||||
.quoted3 { color: #417c10; }
|
||||
.textmulti > *:nth-child(even) { background-color: #f4f4f4; }
|
||||
.textmulti > * { padding: 2ex .5em; margin: -.5em; /* compensate pad */ }
|
||||
.textmulti > *:first-child { padding: .5em; }
|
||||
.pad { padding: .5em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page" style="opacity: .1">Loading...</div>
|
||||
|
|
|
|||
172
webmail/text.js
172
webmail/text.js
|
|
@ -1047,12 +1047,140 @@ var api;
|
|||
};
|
||||
})(api || (api = {}));
|
||||
// Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
|
||||
// For authentication/security results.
|
||||
const underlineGreen = '#50c40f';
|
||||
const underlineRed = '#e15d1c';
|
||||
const underlineBlue = '#09f';
|
||||
const underlineGrey = '#aaa';
|
||||
const underlineYellow = 'yellow';
|
||||
// We build CSS rules in JS. For several reasons:
|
||||
// - To keep the style definitions closer to their use.
|
||||
// - To make it easier to provide both light/regular and dark mode colors.
|
||||
// - To use class names for styling, instead of the the many inline styles.
|
||||
// Makes it easier to look through a DOM, and easier to change the style of all
|
||||
// instances of a class.
|
||||
// We keep the default/regular styles and dark-mode styles in separate stylesheets.
|
||||
const cssStyle = dom.style(attr.type('text/css'));
|
||||
document.head.appendChild(cssStyle);
|
||||
const styleSheet = cssStyle.sheet;
|
||||
const cssStyleDark = dom.style(attr.type('text/css'));
|
||||
document.head.appendChild(cssStyleDark);
|
||||
const styleSheetDark = cssStyleDark.sheet;
|
||||
styleSheetDark.insertRule('@media (prefers-color-scheme: dark) {}');
|
||||
const darkModeRule = styleSheetDark.cssRules[0];
|
||||
let cssRules = {}; // For ensuring a selector has a single definition.
|
||||
// Ensure a selector has the given style properties. If a style value is an array,
|
||||
// it must have 2 elements. The first is the default value, the second used for a
|
||||
// rule for dark mode.
|
||||
const ensureCSS = (selector, styles, important) => {
|
||||
// Check that a selector isn't added again with different styling. Only during development.
|
||||
const checkConsistency = location.hostname === 'localhost';
|
||||
if (cssRules[selector]) {
|
||||
if (checkConsistency) {
|
||||
const exp = JSON.stringify(styles);
|
||||
if (cssRules[selector] !== exp) {
|
||||
throw new Error('duplicate css rule for selector ' + selector + ', had ' + cssRules[selector] + ', next ' + exp);
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
cssRules[selector] = checkConsistency ? JSON.stringify(styles) : 'x';
|
||||
const index = styleSheet.cssRules.length;
|
||||
styleSheet.insertRule(selector + ' {}', index);
|
||||
const st = styleSheet.cssRules[index].style;
|
||||
let darkst;
|
||||
for (let [k, v] of Object.entries(styles)) {
|
||||
// We've kept the camel-case in our code which we had from when we did "st[prop] =
|
||||
// value". It is more convenient as object keys. So convert to kebab-case.
|
||||
k = k.replace(/[A-Z]/g, s => '-' + s.toLowerCase());
|
||||
if (Array.isArray(v)) {
|
||||
if (v.length !== 2) {
|
||||
throw new Error('2 elements required for light/dark mode style, got ' + v.length);
|
||||
}
|
||||
if (!darkst) {
|
||||
const darkIndex = darkModeRule.cssRules.length;
|
||||
darkModeRule.insertRule(selector + ' {}', darkIndex);
|
||||
darkst = darkModeRule.cssRules[darkIndex].style;
|
||||
}
|
||||
st.setProperty(k, '' + v[0], important ? 'important' : '');
|
||||
darkst.setProperty(k, '' + v[1], important ? 'important' : '');
|
||||
}
|
||||
else {
|
||||
st.setProperty(k, '' + v, important ? 'important' : '');
|
||||
}
|
||||
}
|
||||
};
|
||||
// Ensure CSS styling exists for a class, returning the same kind of object
|
||||
// returned by dom._class, for use with dom.*-building functions.
|
||||
const css = (className, styles, important) => {
|
||||
ensureCSS('.' + className, styles, important);
|
||||
return dom._class(className);
|
||||
};
|
||||
// todo: reduce number of colors. hopefully we can derive some colors from a few base colors (making them brighter/darker, or shifting hue, etc). then make them configurable through settings.
|
||||
// todo: add the standard padding and border-radius, perhaps more.
|
||||
// todo: could make some of these {prop: value} objects and pass them directly to css()
|
||||
const styles = {
|
||||
color: ['black', '#ddd'],
|
||||
colorMild: ['#555', '#bbb'],
|
||||
colorMilder: ['#666', '#aaa'],
|
||||
backgroundColor: ['white', '#222'],
|
||||
backgroundColorMild: ['#f8f8f8', '#080808'],
|
||||
backgroundColorMilder: ['#999', '#777'],
|
||||
borderColor: ['#ccc', '#333'],
|
||||
mailboxesTopBackgroundColor: ['#fdfdf1', 'rgb(26, 18, 0)'],
|
||||
msglistBackgroundColor: ['#f5ffff', 'rgb(4, 19, 13)'],
|
||||
boxShadow: ['0 0 20px rgba(0, 0, 0, 0.1)', '0px 0px 20px #000'],
|
||||
buttonBackground: ['#eee', '#222'],
|
||||
buttonBorderColor: ['#888', '#666'],
|
||||
buttonHoverBackground: ['#ddd', '#333'],
|
||||
overlayOpaqueBackgroundColor: ['#eee', '#011'],
|
||||
overlayBackgroundColor: ['rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)'],
|
||||
popupColor: ['black', 'white'],
|
||||
popupBackgroundColor: ['white', 'rgb(49, 50, 51)'],
|
||||
popupBorderColor: ['#ccc', '#555'],
|
||||
highlightBackground: ['gold', '#a70167'],
|
||||
highlightBorderColor: ['#8c7600', 'rgb(253, 31, 167)'],
|
||||
highlightBackgroundHover: ['#ffbd21', 'rgb(113, 4, 71)'],
|
||||
mailboxActiveBackground: ['linear-gradient(135deg, #ffc7ab 0%, #ffdeab 100%)', 'linear-gradient(135deg, rgb(182, 61, 0) 0%, rgb(140, 90, 13) 100%)'],
|
||||
mailboxHoverBackgroundColor: ['#eee', 'rgb(66, 31, 21)'],
|
||||
msgItemActiveBackground: ['linear-gradient(135deg, #8bc8ff 0%, #8ee5ff 100%)', 'linear-gradient(135deg, rgb(4, 92, 172) 0%, rgb(2, 123, 160) 100%)'],
|
||||
msgItemHoverBackgroundColor: ['#eee', 'rgb(7, 51, 72)'],
|
||||
msgItemFocusBorderColor: ['#2685ff', '#2685ff'],
|
||||
buttonTristateOnBackground: ['#c4ffa9', 'rgb(39, 126, 0)'],
|
||||
buttonTristateOffBackground: ['#ffb192', 'rgb(191, 65, 15)'],
|
||||
warningBackgroundColor: ['#ffca91', 'rgb(168, 87, 0)'],
|
||||
successBackground: ['#d2f791', '#1fa204'],
|
||||
emphasisBackground: ['#666', '#aaa'],
|
||||
// For authentication/security results.
|
||||
underlineGreen: '#50c40f',
|
||||
underlineRed: '#e15d1c',
|
||||
underlineBlue: '#09f',
|
||||
underlineGrey: '#888',
|
||||
};
|
||||
const styleClasses = {
|
||||
// For quoted text, with multiple levels of indentations.
|
||||
quoted: [
|
||||
css('quoted1', { color: ['#03828f', '#71f2ff'] }),
|
||||
css('quoted2', { color: ['#c7445c', 'rgb(236, 76, 76)'] }),
|
||||
css('quoted3', { color: ['#417c10', 'rgb(115, 230, 20)'] }), // blue
|
||||
],
|
||||
// When text switches between unicode scripts.
|
||||
scriptswitch: css('scriptswitch', { textDecoration: 'underline 2px', textDecorationColor: ['#dca053', 'rgb(232, 143, 30)'] }),
|
||||
textMild: css('textMild', { color: styles.colorMild }),
|
||||
// For keywords (also known as flags/labels/tags) on messages.
|
||||
keyword: css('keyword', { padding: '0 .15em', borderRadius: '.15em', fontWeight: 'normal', fontSize: '.9em', margin: '0 .15em', whiteSpace: 'nowrap', background: styles.highlightBackground, color: styles.color, border: '1px solid', borderColor: styles.highlightBorderColor }),
|
||||
msgHeaders: css('msgHeaders', { marginBottom: '1ex', width: '100%' }),
|
||||
};
|
||||
ensureCSS('.msgHeaders td', { wordBreak: 'break-word' }); // Prevent horizontal scroll bar for long header values.
|
||||
ensureCSS('.keyword.keywordCollapsed', { opacity: .75 }),
|
||||
// Generic styling.
|
||||
ensureCSS('*', { fontSize: 'inherit', fontFamily: "'ubuntu', 'lato', sans-serif", margin: 0, padding: 0, boxSizing: 'border-box' });
|
||||
ensureCSS('.mono, .mono *', { fontFamily: "'ubuntu mono', monospace" });
|
||||
ensureCSS('table td, table th', { padding: '.15em .25em' });
|
||||
ensureCSS('.pad', { padding: '.5em' });
|
||||
ensureCSS('iframe', { border: 0 });
|
||||
ensureCSS('img, embed, video, iframe', { backgroundColor: 'white', color: 'black' });
|
||||
ensureCSS(':root', { backgroundColor: styles.backgroundColor, color: styles.color });
|
||||
ensureCSS('a', { color: ['rgb(9, 107, 194)', 'rgb(99, 182, 255)'] });
|
||||
ensureCSS('a:visited', { color: ['rgb(7, 4, 193)', 'rgb(199, 99, 255)'] });
|
||||
// For message view with multiple inline elements (often a single text and multiple messages).
|
||||
ensureCSS('.textmulti > *:nth-child(even)', { backgroundColor: ['#f4f4f4', '#141414'] });
|
||||
ensureCSS('.textmulti > *', { padding: '2ex .5em', margin: '-.5em' /* compensate pad */ });
|
||||
ensureCSS('.textmulti > *:first-child', { padding: '.5em' });
|
||||
// join elements in l with the results of calls to efn. efn can return
|
||||
// HTMLElements, which cannot be inserted into the dom multiple times, hence the
|
||||
// function.
|
||||
|
|
@ -1127,8 +1255,7 @@ const renderText = (text) => {
|
|||
if (q == 0) {
|
||||
return [addLinks(line), '\n'];
|
||||
}
|
||||
q = (q - 1) % 3 + 1;
|
||||
return dom.div(dom._class('quoted' + q), addLinks(line));
|
||||
return dom.div(styleClasses.quoted[q % styleClasses.quoted.length], addLinks(line));
|
||||
}));
|
||||
};
|
||||
const displayName = (s) => {
|
||||
|
|
@ -1172,37 +1299,44 @@ const formatAddressValidated = (a, m, use) => {
|
|||
// historic messages were from a mailing list. We could add a heuristic based on
|
||||
// List-Id headers, but it would be unreliable...
|
||||
// todo: add field to Message with the exact results.
|
||||
let name = '';
|
||||
let color = '';
|
||||
let title = '';
|
||||
switch (m.MsgFromValidation) {
|
||||
case api.Validation.ValidationStrict:
|
||||
color = underlineGreen;
|
||||
name = 'Strict';
|
||||
color = styles.underlineGreen;
|
||||
title = 'Message would have matched a strict DMARC policy.';
|
||||
break;
|
||||
case api.Validation.ValidationDMARC:
|
||||
color = underlineGreen;
|
||||
name = 'DMARC';
|
||||
color = styles.underlineGreen;
|
||||
title = 'Message matched DMARC policy of domain.';
|
||||
break;
|
||||
case api.Validation.ValidationRelaxed:
|
||||
color = underlineGreen;
|
||||
name = 'Relaxed';
|
||||
color = styles.underlineGreen;
|
||||
title = 'Domain did not have a DMARC policy, but message would match a relaxed policy if it had existed.';
|
||||
break;
|
||||
case api.Validation.ValidationNone:
|
||||
if (m.IsForward || m.IsMailingList) {
|
||||
color = underlineBlue;
|
||||
name = 'Forwardlist';
|
||||
color = styles.underlineBlue;
|
||||
title = 'Message would not pass DMARC policy, but came in through a configured mailing list or forwarding address.';
|
||||
}
|
||||
else {
|
||||
color = underlineRed;
|
||||
name = 'Bad';
|
||||
color = styles.underlineRed;
|
||||
title = 'Either domain did not have a DMARC policy, or message did not adhere to it.';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
// Also for zero value, when unknown. E.g. for sent messages added with IMAP.
|
||||
name = 'Unknown';
|
||||
title = 'Unknown DMARC verification result.';
|
||||
return dom.span(attr.title(title + extra), domstr);
|
||||
}
|
||||
return dom.span(attr.title(title + extra), style({ borderBottom: '1.5px solid ' + color, textDecoration: 'none' }), domstr);
|
||||
return dom.span(attr.title(title + extra), css('addressValidation' + name, { borderBottom: '1.5px solid', borderBottomColor: color, textDecoration: 'none' }), domstr);
|
||||
};
|
||||
let l = [];
|
||||
if (a.Name) {
|
||||
|
|
@ -1246,19 +1380,21 @@ const loadMsgheaderView = (msgheaderelem, mi, moreHeaders, refineKeyword, allAdd
|
|||
const msgenv = mi.Envelope;
|
||||
const received = mi.Message.Received;
|
||||
const receivedlocal = new Date(received.getTime());
|
||||
const msgHeaderFieldStyle = css('msgHeaderField', { textAlign: 'right', color: styles.colorMild, whiteSpace: 'nowrap' });
|
||||
const msgAttrStyle = css('msgAttr', { padding: '0px 0.15em', fontSize: '.9em' });
|
||||
dom._kids(msgheaderelem,
|
||||
// todo: make addresses clickable, start search (keep current mailbox if any)
|
||||
dom.tr(dom.td('From:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(style({ width: '100%' }), dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(join((msgenv.From || []).map(a => formatAddressValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), dom.div(attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')), receivedlocal.toDateString() + ' ' + receivedlocal.toTimeString().split(' ')[0])))), (msgenv.ReplyTo || []).length === 0 ? [] : dom.tr(dom.td('Reply-To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressElem(a)), () => ', '))), dom.tr(dom.td('To:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.To || []))), (msgenv.CC || []).length === 0 ? [] : dom.tr(dom.td('Cc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.CC || []))), (msgenv.BCC || []).length === 0 ? [] : dom.tr(dom.td('Bcc:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(addressList(allAddrs, msgenv.BCC || []))), dom.tr(dom.td('Subject:', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td(dom.div(style({ display: 'flex', justifyContent: 'space-between' }), dom.div(msgenv.Subject || ''), dom.div(mi.Message.IsForward ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.IsMailingList ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em' }), 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.ReceivedTLSVersion === 1 ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #e15d1c' }), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [], mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '0px 0.15em', fontSize: '.9em', borderBottom: '1.5px solid #50c40f' }), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [], mi.Message.ReceivedRequireTLS ? dom.span(style({ padding: '.1em .3em', fontSize: '.9em', backgroundColor: '#d2f791', border: '1px solid #ccc', borderRadius: '3px' }), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [], mi.IsSigned ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message has a signature') : [], mi.IsEncrypted ? dom.span(style({ backgroundColor: '#666', padding: '0px 0.15em', fontSize: '.9em', color: 'white', borderRadius: '.15em' }), 'Message is encrypted') : [], refineKeyword ? (mi.Message.Keywords || []).map(kw => dom.clickbutton(dom._class('keyword'), kw, async function click() {
|
||||
dom.tr(dom.td('From:', msgHeaderFieldStyle), dom.td(style({ width: '100%' }), dom.div(css('msgFromReceivedSpread', { display: 'flex', justifyContent: 'space-between' }), dom.div(join((msgenv.From || []).map(a => formatAddressValidated(a, mi.Message, !!msgenv.From && msgenv.From.length === 1)), () => ', ')), dom.div(attr.title('Received: ' + received.toString() + ';\nDate header in message: ' + (msgenv.Date ? msgenv.Date.toString() : '(missing/invalid)')), receivedlocal.toDateString() + ' ' + receivedlocal.toTimeString().split(' ')[0])))), (msgenv.ReplyTo || []).length === 0 ? [] : dom.tr(dom.td('Reply-To:', msgHeaderFieldStyle), dom.td(join((msgenv.ReplyTo || []).map(a => formatAddressElem(a)), () => ', '))), dom.tr(dom.td('To:', msgHeaderFieldStyle), dom.td(addressList(allAddrs, msgenv.To || []))), (msgenv.CC || []).length === 0 ? [] : dom.tr(dom.td('Cc:', msgHeaderFieldStyle), dom.td(addressList(allAddrs, msgenv.CC || []))), (msgenv.BCC || []).length === 0 ? [] : dom.tr(dom.td('Bcc:', msgHeaderFieldStyle), dom.td(addressList(allAddrs, msgenv.BCC || []))), dom.tr(dom.td('Subject:', msgHeaderFieldStyle), dom.td(dom.div(css('msgSubjectAttrsSpread', { display: 'flex', justifyContent: 'space-between' }), dom.div(msgenv.Subject || ''), dom.div(mi.Message.IsForward ? dom.span(msgAttrStyle, 'Forwarded', attr.title('Message came in from a forwarded address. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.IsMailingList ? dom.span(msgAttrStyle, 'Mailing list', attr.title('Message was received from a mailing list. Some message authentication policies, like DMARC, were not evaluated.')) : [], mi.Message.ReceivedTLSVersion === 1 ? dom.span(msgAttrStyle, css('msgAttrNoTLS', { borderBottom: '1.5px solid', borderBottomColor: styles.underlineRed }), 'Without TLS', attr.title('Message received (last hop) without TLS.')) : [], mi.Message.ReceivedTLSVersion > 1 && !mi.Message.ReceivedRequireTLS ? dom.span(msgAttrStyle, css('msgAttrTLS', { borderBottom: '1.5px solid', borderBottomColor: styles.underlineGreen }), 'With TLS', attr.title('Message received (last hop) with TLS.')) : [], mi.Message.ReceivedRequireTLS ? dom.span(css('msgAttrRequireTLS', { padding: '.1em .3em', fontSize: '.9em', backgroundColor: styles.successBackground, border: '1px solid', borderColor: styles.borderColor, borderRadius: '3px' }), 'With RequireTLS', attr.title('Transported with RequireTLS, ensuring TLS along the entire delivery path from sender to recipient, with TLS certificate verification through MTA-STS and/or DANE.')) : [], mi.IsSigned ? dom.span(msgAttrStyle, css('msgAttrSigned', { backgroundColor: styles.emphasisBackground, color: styles.color, borderRadius: '.15em' }), 'Message has a signature') : [], mi.IsEncrypted ? dom.span(msgAttrStyle, css('msgAttrEncrypted', { backgroundColor: styles.emphasisBackground, color: styles.color, borderRadius: '.15em' }), 'Message is encrypted') : [], refineKeyword ? (mi.Message.Keywords || []).map(kw => dom.clickbutton(styleClasses.keyword, dom._class('keywordButton'), kw, async function click() {
|
||||
await refineKeyword(kw);
|
||||
})) : [])))), moreHeaders.map(k => dom.tr(dom.td(k + ':', style({ textAlign: 'right', color: '#555', whiteSpace: 'nowrap' })), dom.td())));
|
||||
})) : [])))), moreHeaders.map(k => dom.tr(dom.td(k + ':', msgHeaderFieldStyle), dom.td())));
|
||||
};
|
||||
// Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
|
||||
const init = async () => {
|
||||
const pm = api.parser.ParsedMessage(parsedMessage);
|
||||
const mi = api.parser.MessageItem(messageItem);
|
||||
dom._kids(document.body, dom.div(dom._class('pad', 'mono', 'textmulti'), style({ whiteSpace: 'pre-wrap' }), (pm.Texts || []).map(t => renderText(t.replace(/\r\n/g, '\n'))), (mi.Attachments || []).filter(f => isImage(f)).map(f => {
|
||||
dom._kids(document.body, dom.div(dom._class('pad', 'mono', 'textmulti'), css('msgTextPreformatted', { whiteSpace: 'pre-wrap' }), (pm.Texts || []).map(t => renderText(t.replace(/\r\n/g, '\n'))), (mi.Attachments || []).filter(f => isImage(f)).map(f => {
|
||||
const pathStr = [0].concat(f.Path || []).join('.');
|
||||
return dom.div(dom.div(style({ flexGrow: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', maxHeight: 'calc(100% - 50px)' }), dom.img(attr.src('view/' + pathStr), attr.title(f.Filename), style({ backgroundColor: 'white', maxWidth: '100%', maxHeight: '100%', boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)' }))));
|
||||
return dom.div(dom.div(css('msgAttachment', { flexGrow: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', maxHeight: 'calc(100% - 50px)' }), dom.img(attr.src('view/' + pathStr), attr.title(f.Filename), css('msgAttachmentImage', { maxWidth: '100%', maxHeight: '100%', boxShadow: styles.boxShadow }))));
|
||||
})));
|
||||
};
|
||||
init()
|
||||
|
|
|
|||
|
|
@ -9,17 +9,17 @@ const init = async () => {
|
|||
const mi = api.parser.MessageItem(messageItem)
|
||||
dom._kids(document.body,
|
||||
dom.div(dom._class('pad', 'mono', 'textmulti'),
|
||||
style({whiteSpace: 'pre-wrap'}),
|
||||
css('msgTextPreformatted', {whiteSpace: 'pre-wrap'}),
|
||||
(pm.Texts || []).map(t => renderText(t.replace(/\r\n/g, '\n'))),
|
||||
(mi.Attachments || []).filter(f => isImage(f)).map(f => {
|
||||
const pathStr = [0].concat(f.Path || []).join('.')
|
||||
return dom.div(
|
||||
dom.div(
|
||||
style({flexGrow: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', maxHeight: 'calc(100% - 50px)'}),
|
||||
css('msgAttachment', {flexGrow: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', maxHeight: 'calc(100% - 50px)'}),
|
||||
dom.img(
|
||||
attr.src('view/'+pathStr),
|
||||
attr.title(f.Filename),
|
||||
style({backgroundColor: 'white', maxWidth: '100%', maxHeight: '100%', boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)'})
|
||||
css('msgAttachmentImage', {maxWidth: '100%', maxHeight: '100%', boxShadow: styles.boxShadow})
|
||||
),
|
||||
)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,79 +6,15 @@
|
|||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
|
||||
<link rel="icon" href="noNeedlessFaviconRequestsPlease:" />
|
||||
<style>
|
||||
* { font-size: inherit; font-family: 'ubuntu', 'lato', sans-serif; margin: 0; padding: 0; box-sizing: border-box; }
|
||||
.mono, .mono * { font-family: 'ubuntu mono', monospace; }
|
||||
h1, h2 { margin-bottom: 1ex; }
|
||||
h1 { font-size: 1.1rem; }
|
||||
table td, table th { padding: .15em .25em; }
|
||||
[title] { text-decoration: underline; text-decoration-style: dotted; }
|
||||
[title]:hover { text-decoration: underline; text-decoration-style: dotted; }
|
||||
.silenttitle { text-decoration: none; }
|
||||
fieldset { border: 0; }
|
||||
.loading { opacity: 0.1; animation: fadeout 1s ease-out; }
|
||||
@keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } }
|
||||
@keyframes fadeout { 0% { opacity: 1 } 100% { opacity: 0.1 } }
|
||||
.button { display: inline-block; }
|
||||
button, .button, select { border-radius: .15em; background-color: #eee; border: 1px solid #888; padding: 0 .15em; color: inherit; /* for ipad, which shows blue or white text */ }
|
||||
button.active, .button.active, button.active:hover, .button.active:hover { background-color: gold; }
|
||||
button:hover, .button:hover, select:hover { background-color: #ddd; }
|
||||
button.keyword:hover { background-color: #ffbd21; }
|
||||
button.keyword { cursor: pointer; }
|
||||
.btngroup button, .btngroup .button { border-radius: 0; border-right-width: 0; }
|
||||
.btngroup button:first-child, .btngroup .button:first-child { border-radius: .15em 0 0 .15em; }
|
||||
.btngroup button:last-child, .btngroup .button:last-child { border-radius: 0 .15em .15em 0; border-right-width: 1px; }
|
||||
iframe { border: 0; }
|
||||
.invert { filter: invert(100%); }
|
||||
.scriptswitch { text-decoration: underline #dca053 2px; }
|
||||
.textmulti > *:nth-child(even) { background-color: #f4f4f4; }
|
||||
.textmulti > * { padding: 2ex .5em; margin: -.5em; /* compensate pad */ }
|
||||
.textmulti > *:first-child { padding: .5em; }
|
||||
.pad { padding: .5em; }
|
||||
|
||||
.msgitem { display: flex; user-select: none; }
|
||||
.msgitemcell { padding: 2px 4px; }
|
||||
/* note: we assign widths to .msgitemflags, .msgitemfrom, .msgitemsubject, .msgitemage, and offsets through a stylesheet created in js */
|
||||
.msgitemage { text-align: right; }
|
||||
.msgitemfrom { position: relative; }
|
||||
.msgitemfromtext { white-space: nowrap; overflow: hidden; }
|
||||
.msgitemfromthreadbar { position: absolute; border-right: 2px solid #666; right: 0; top: 0; bottom: 0; /* top or bottom set with inline style for first & last */ }
|
||||
.msgitemsubjecttext { white-space: nowrap; overflow: hidden; }
|
||||
.msgitemsubjectsnippet { font-weight: normal; color: #666; }
|
||||
.msgitemmailbox { background: #999; color: white; border: 1px solid #777; padding: 0 .15em; margin-left: .15em; border-radius: .15em; font-weight: normal; font-size: .9em; white-space: nowrap; }
|
||||
.msgitemmailbox.msgitemmailboxcollapsed { background: #eee; color: #333; }
|
||||
.msgitemidentity { background-color: #999; color: white; border: 1px solid #777; padding: 0 .15em; margin-left: .15em; border-radius: .15em; font-weight: normal; font-size: .9em; white-space: nowrap; }
|
||||
|
||||
.topbar, .mailboxesbar { background-color: #fdfdf1; }
|
||||
.msglist { background-color: #f5ffff; }
|
||||
table.search td { padding: .25em; }
|
||||
.keyword { background-color: gold; color: black; border: 1px solid #8c7600; padding: 0 .15em; border-radius: .15em; font-weight: normal; font-size: .9em; margin: 0 .15em; white-space: nowrap; }
|
||||
.keyword.keywordcollapsed { background-color: #ffeb7e; color: #333; }
|
||||
.mailbox { padding: .15em .25em; }
|
||||
.mailboxitem { cursor: pointer; border-radius: .15em; user-select: none; }
|
||||
.mailboxitem.dropping { background: gold !important; }
|
||||
.mailboxitem:hover { background: #eee; }
|
||||
.mailboxitem.active { background: linear-gradient(135deg, #ffc7ab 0%, #ffdeab 100%); }
|
||||
.mailboxhoveronly { visibility: hidden; }
|
||||
.mailboxitem:hover .mailboxhoveronly, .mailboxitem:focus .mailboxhoveronly { visibility: visible; }
|
||||
.mailboxcollapse { visibility: hidden; }
|
||||
.mailboxitem:hover .mailboxcollapse, .mailboxitem:focus .mailboxcollapse { visibility: visible; }
|
||||
.msgitem { cursor: pointer; border-radius: .15em; border: 1px solid transparent; }
|
||||
.msgitem.focus { border: 1px solid #2685ff; }
|
||||
.msgitem:hover { background-color: #eee; }
|
||||
.msgitem.active { background: linear-gradient(135deg, #8bc8ff 0%, #8ee5ff 100%); }
|
||||
.msgitemsubject { position: relative; }
|
||||
.msgitemflag { margin-right: 1px; font-weight: normal; font-size: .9em; }
|
||||
.msgitemflag.msgitemflagcollapsed { color: #666; }
|
||||
.msgheaders td { word-break: break-word; /* prevent horizontal scroll bar for long header values */ }
|
||||
.quoted1 { color: #03828f; }
|
||||
.quoted2 { color: #c7445c; }
|
||||
.quoted3 { color: #417c10; }
|
||||
.autosize { display: inline-grid; max-width: 90vw; }
|
||||
.autosize.input { grid-area: 1 / 2; }
|
||||
.autosize::after { content: attr(data-value); margin-right: 1em; line-height: 0; visibility: hidden; white-space: pre-wrap; overflow-x: hidden; }
|
||||
|
||||
.scrollparent { position: relative; }
|
||||
.yscroll { overflow-y: scroll; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
|
||||
.yscrollauto { overflow-y: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue