mirror of
https://git.notmuchmail.org/git/notmuch
synced 2024-12-22 17:34:54 +01:00
nmbug-status: Color threads in HTML output
Add tbody sections so we don't have to color every row. Multiple tbody sections are allowed [1]. Use CSS 3's nth-child to handle even/odd coloring (skipping the spacer rows) [2], which is supported on the major browsers [3]. border-spacing is from CCS 2.1 [4,5]. I'm using it to avoid whitespace between td cells. border-radius is from CCS 3 [6,7]. I'm using it to make the colored sections a bit less harsh. I tried adding rounded borders to the tbody itself doesn't work, but I couldn't get that to work without setting the tbody's display to 'block'. That rounded the corners, but collapsed the cell spacing (e.g. columns were no longer aligned). This commit's by-corner-td approach is not particularly elegant, but it works. The td padding entries just ensure that the cell body is suitably far from the edges that it doesn't fall outside of the rounded corners. The doubled-braces are escapes from Python's str.format. [1]: http://www.w3.org/TR/html5/tabular-data.html#the-table-element [2]: http://www.w3.org/TR/css3-selectors/#nth-child-pseudo [3]: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#Browser_compatibility [4]: http://www.w3.org/TR/CSS2/tables.html#propdef-border-spacing [5]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing#Browser_compatibility [6]: http://www.w3.org/TR/css3-background/#the-border-radius [7]: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius#Browser_compatibility
This commit is contained in:
parent
b1fa95721b
commit
1aa56c2ac5
1 changed files with 43 additions and 12 deletions
|
@ -205,6 +205,7 @@ class HtmlPage (Page):
|
||||||
return
|
return
|
||||||
stream.write('<table>\n')
|
stream.write('<table>\n')
|
||||||
for thread in threads:
|
for thread in threads:
|
||||||
|
stream.write(' <tbody>\n')
|
||||||
for message_display_data in thread:
|
for message_display_data in thread:
|
||||||
stream.write((
|
stream.write((
|
||||||
' <tr>\n'
|
' <tr>\n'
|
||||||
|
@ -216,8 +217,10 @@ class HtmlPage (Page):
|
||||||
' <td>{subject}</td>\n'
|
' <td>{subject}</td>\n'
|
||||||
' </tr>\n'
|
' </tr>\n'
|
||||||
).format(**message_display_data))
|
).format(**message_display_data))
|
||||||
|
stream.write(' </tbody>\n')
|
||||||
if thread != threads[-1]:
|
if thread != threads[-1]:
|
||||||
stream.write('<tr><td colspan="2"><br /></td></tr>\n')
|
stream.write(
|
||||||
|
' <tbody><tr><td colspan="2"><br /></td></tr></tbody>\n')
|
||||||
stream.write('</table>\n')
|
stream.write('</table>\n')
|
||||||
|
|
||||||
def _message_display_data(self, *args, **kwargs):
|
def _message_display_data(self, *args, **kwargs):
|
||||||
|
@ -248,6 +251,33 @@ _PAGES['html'] = HtmlPage(
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<title>Notmuch Patches</title>
|
<title>Notmuch Patches</title>
|
||||||
|
<style media="screen" type="text/css">
|
||||||
|
table {{
|
||||||
|
border-spacing: 0;
|
||||||
|
}}
|
||||||
|
td {{
|
||||||
|
padding-left: {border_radius};
|
||||||
|
padding-right: {border_radius};
|
||||||
|
}}
|
||||||
|
tr:first-child td:first-child {{
|
||||||
|
border-top-left-radius: {border_radius};
|
||||||
|
}}
|
||||||
|
tr:first-child td:last-child {{
|
||||||
|
border-top-right-radius: {border_radius};
|
||||||
|
}}
|
||||||
|
tr:last-child td:first-child {{
|
||||||
|
border-bottom-left-radius: {border_radius};
|
||||||
|
}}
|
||||||
|
tr:last-child td:last-child {{
|
||||||
|
border-bottom-right-radius: {border_radius};
|
||||||
|
}}
|
||||||
|
tbody:nth-child(4n+1) tr td {{
|
||||||
|
background-color: #ffd96e;
|
||||||
|
}}
|
||||||
|
tbody:nth-child(4n+3) tr td {{
|
||||||
|
background-color: #bce;
|
||||||
|
}}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h2>Notmuch Patches</h2>
|
<h2>Notmuch Patches</h2>
|
||||||
|
@ -256,7 +286,8 @@ Generated: {date}<br />
|
||||||
For more infomation see <a href="http://notmuchmail.org/nmbug">nmbug</a>
|
For more infomation see <a href="http://notmuchmail.org/nmbug">nmbug</a>
|
||||||
</p>
|
</p>
|
||||||
<h3>Views</h3>
|
<h3>Views</h3>
|
||||||
'''.format(date=datetime.datetime.utcnow().date()),
|
'''.format(date=datetime.datetime.utcnow().date(),
|
||||||
|
border_radius='0.5em'),
|
||||||
footer='</body>\n</html>\n',
|
footer='</body>\n</html>\n',
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue