Design work for mailbox subscriptions

themes/alps/assets/style.css

@@ -127,10 +127,60 @@ footer { text-align: right; }
 
 
 aside { flex: 0 0 180px; }
-aside a,
-aside .noselect { width: 100%; display: block; padding: 0.4rem 0 0.4rem 0.5rem; }
-aside a.active { font-weight: bold; color: black; text-decoration: none; }
+
 aside img { display: block; }
+
+aside ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+aside li {
+  width: 100%;
+  display: flex;
+  padding: 0.4rem 0 0.4rem 0.5rem;
+}
+
+aside li a {
+  flex-grow: 1;
+}
+
+aside .active {
+  font-weight: bold;
+  color: black;
+  text-decoration: none;
+}
+
+aside .active,
+aside .new.active {
+  background-color: #f6f6f6;
+}
+
+aside .new.active {
+  color: #008d47;
+}
+
+aside button {
+  margin: 0;
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+  display: inline-block;
+  padding: 0 0.3rem;
+  margin-right: 0.3rem;
+  border: none;
+  background: transparent;
+}
+
+aside .active button:hover {
+  background: white;
+}
+
+aside button:hover {
+  background: #f6f6f6;
+}
+
 main {
   flex: 1 100%;
   display: flex;
@@ -151,15 +201,6 @@ main.login > section {
   padding: 1rem;
 }
 
-aside a.active,
-aside a.new.active {
-  background-color: #f6f6f6;
-}
-
-aside a.new.active {
-  color: #008d47;
-}
-
 aside a.new.active,
 main.create-update {
   background-color: #f6fff6;
@@ -455,6 +496,11 @@ main.create-update .event-date input {
   border: none;
   color: #BFA300;
   font-size: 13pt;
+  background: transparent;
+}
+
+.message-list-unread.message-list-flags .flag-button:hover {
+  background: #f8f8f8;
 }
 
 .message-list-subject a { color: #77c; }

themes/alps/mailbox.html

@@ -5,7 +5,7 @@
 <div class="page-wrap">
   {{ template "aside" . }}
   <div class="container">
-    <form id="messages-form" method="post"></form>
+    <form id="messages-form" method="POST"></form>
     <main class="message-list">
       <section class="actions">
         {{ template "messages-header.html" . }}

themes/alps/util.html

@@ -1,6 +1,7 @@
 {{ define "mbox-link" }}
 {{ if not (.HasAttr "\\Noselect") }}
-<a href="{{.URL}}" {{ if .Active }}class="active"{{ end }}>
+<li {{ if .Active }}class="active"{{ end }}>
+  <a href="{{.URL}}">
     {{- if eq .Name "INBOX" -}}
       Inbox
     {{- else -}}
@@ -8,19 +9,42 @@
     {{- end -}}
     {{- if .HasAttr "\\HasChildren" }}/{{ end }}
   </a>
+  <!-- TODO: Rig up this form -->
+  <button
+    type="submit"
+    name="subscribe"
+    value="{{.Name}}"
+    form="subscribe-form"
+    {{ if eq .Name "INBOX" }}
+    title="Unsubscribe"
     {{ else }}
-<span class="noselect">
+    title="Subscribe"
+    {{ end }}
+  >
+  {{ if eq .Name "INBOX" }}
+  ◉
+  {{ else }}
+  ○
+  {{ end }}
+  </button>
+</li>
+{{ else }}
+<li class="noselect">
   {{.Name}}{{- if .HasAttr "\\HasChildren" }}/{{ end }}
-</span>
+</li>
 {{ end }}
 {{ end }}
 
 {{ define "aside" }}
+<form id="subscribe-form" method="POST"></form>
 <aside>
+  <ul>
     <!-- the logo image, dimensions 200x32 may be present or not -->
+    <li>
       <a href="/compose" class="new
         {{ if eq $.GlobalData.URL.Path "/compose" }}active{{ end }}
       ">Compose&nbsp;mail</a>
+    </li>
     {{ with .CategorizedMailboxes }}
     {{ with .Common.Inbox }}{{ template "mbox-link" . }}{{ end }}
     {{ with .Common.Drafts }}{{ template "mbox-link" . }}{{ end }}
@@ -35,8 +59,11 @@
     {{ end }}
     {{ end }}
     {{ end }}
+    <li>
       <a href="/new-mailbox" class="new
         {{ if eq $.GlobalData.URL.Path "/new-mailbox" }}active{{ end }}
       ">Create&nbsp;new&nbsp;folder</a>
+    </li>
+  </ul>
 </aside>
 {{ end }}