Skip to content

Commit

Permalink
webmail: change many inline styles to using css classes, and add dark…
Browse files Browse the repository at this point in the history 
… 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.
  • Loading branch information
@mjl-
mjl- committed May 6, 2024
1 parent 195c57f commit a16c086
Show file tree
Hide file tree
Showing 10 changed files with 1,130 additions and 487 deletions.
217 changes: 186 additions & 31 deletions webmail/lib.ts
View file

Large diffs are not rendered by default.

8 changes: 0 additions & 8 deletions webmail/msg.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
174 changes: 155 additions & 19 deletions webmail/msg.js
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions webmail/msg.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)'), () => ', '),
Expand All @@ -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('/')
Expand All @@ -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'
Expand Down
12 changes: 0 additions & 12 deletions webmail/text.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
172 changes: 154 additions & 18 deletions webmail/text.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions webmail/text.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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})
),
)
)
Expand Down
66 changes: 1 addition & 65 deletions webmail/webmail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit a16c086

Please sign in to comment.