message view: add part switcher

This also makes the appearance of HTML emails more consistent with
plaintext ones.

2 files changed, 97 insertions, 36 deletions

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 4ef8661..9b885ad 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -152,11 +152,41 @@ main table td a { text-decoration: none; }
 
 main table td a:hover { text-decoration: underline; }
 
-main.message pre { flex: 1 auto; padding: 1rem; white-space: pre-wrap; word-break: break-all; background-color: white; border: 1px solid #eee; max-width: 100% }
 main.message table { background-color: white; }
 main.message th { width: 5%;}
 main.message h1 { font-size: 1.2rem; padding: 0.5rem;}
 
+main.message pre,
+main.message iframe {
+  flex: 1 auto;
+  padding: 1rem;
+  margin: 1rem 0;
+  background-color: white;
+  border: 1px solid #eee;
+  max-width: 100%;
+}
+
+main.message pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+main.message .message-header {
+  display: flex;
+  flex-direction: row;
+}
+
+main.message .message-header .parts {
+  margin-left: 0.3rem;
+  padding: 0.3rem 1rem;
+  background: white;
+  border-top: 1px solid #f2f2f2;
+}
+
+main.message .message-header .parts ul {
+  margin-left: 1rem;
+}
+
 main.compose .actions {
   display: flex;
   flex-direction: row;
diff --git a/themes/alps/message.html b/themes/alps/message.html
index da4cb9e..7fbbd41 100644
--- a/themes/alps/message.html
+++ b/themes/alps/message.html
@@ -1,6 +1,32 @@
 {{template "head.html" .}}
 {{template "nav.html" .}}
 
+{{define "message-part-tree"}}
+	{{/* nested templates can't access the parent's context */}}
+	{{$ = index . 0}}
+	{{with index . 1}}
+		<a
+      class="nav-link"
+			{{if .IsText}}
+				href="{{$.Message.URL}}?part={{.PathString}}"
+			{{else}}
+				href="{{$.Message.URL}}/raw?part={{.PathString}}"
+			{{end}}
+		>
+			{{if eq $.Part.PathString .PathString}}<strong>{{end}}
+			{{.String}}
+			{{if eq $.Part.PathString .PathString}}</strong>{{end}}
+		</a>
+		{{if gt (len .Children) 0}}
+		<ul class="nav flex-column">
+			{{range .Children}}
+				<li class="nav-item">{{template "message-part-tree" (tuple $ .)}}</li>
+			{{end}}
+		</ul>
+		{{end}}
+	{{end}}
+{{end}}
+
 <div class="page-wrap">
   {{$current := .Mailbox}}
   <aside>
@@ -107,41 +133,46 @@
         </div>
       </section>
 
-      <table>
-        <tr>
-          <th colspan="2">
-            <h1>
-             {{if .Message.Envelope.Subject}}
-                {{.Message.Envelope.Subject}}
-              {{else}}
-                (No subject)
-              {{end}}
-            </h1>
-          </th>
-        </tr>
-        <tr>
-          <th>From:</th>
-          <td>{{template "addr-list" .Message.Envelope.From}}</td>
-        </tr>
-        <tr>
-          <th>Date:</th>
-          <td>{{.Message.Envelope.Date | formatdate}}</td>
-        </tr>
-        <tr>
-          <th>To:</th><td>{{template "addr-list" .Message.Envelope.To}}</td>
-        </tr>
-        {{if .Message.Envelope.Cc}}
-        <tr>
-          <th>Cc:</th><td>{{template "addr-list" .Message.Envelope.Cc}}</td>
-        </tr>
-        {{end}}
-        {{if .Message.Envelope.Bcc}}
-        <tr>
-          <th>Bcc:</th>
-          <td>{{template "addr-list" .Message.Envelope.Bcc}}</td>
-        </tr>
-        {{ end }}
-      </table>
+      <div class="message-header">
+        <table>
+          <tr>
+            <th colspan="2">
+              <h1>
+               {{if .Message.Envelope.Subject}}
+                  {{.Message.Envelope.Subject}}
+                {{else}}
+                  (No subject)
+                {{end}}
+              </h1>
+            </th>
+          </tr>
+          <tr>
+            <th>From:</th>
+            <td>{{template "addr-list" .Message.Envelope.From}}</td>
+          </tr>
+          <tr>
+            <th>Date:</th>
+            <td>{{.Message.Envelope.Date | formatdate}}</td>
+          </tr>
+          <tr>
+            <th>To:</th><td>{{template "addr-list" .Message.Envelope.To}}</td>
+          </tr>
+          {{if .Message.Envelope.Cc}}
+          <tr>
+            <th>Cc:</th><td>{{template "addr-list" .Message.Envelope.Cc}}</td>
+          </tr>
+          {{end}}
+          {{if .Message.Envelope.Bcc}}
+          <tr>
+            <th>Bcc:</th>
+            <td>{{template "addr-list" .Message.Envelope.Bcc}}</td>
+          </tr>
+          {{ end }}
+        </table>
+        <section class="parts">
+          {{template "message-part-tree" (tuple $ .Message.PartTree)}}
+        </section>
+      </div>
 
       {{define "addr-list"}}
         {{range $i, $addr := .}}