Design work for mailbox subscriptions

3 files changed, 117 insertions, 44 deletions

diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 830506f..27d8463 100644
--- a/themes/alps/assets/style.css
+++ b/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; }
diff --git a/themes/alps/mailbox.html b/themes/alps/mailbox.html
index ac09a7d..9a4c9ce 100644
--- a/themes/alps/mailbox.html
+++ b/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" . }}
diff --git a/themes/alps/util.html b/themes/alps/util.html
index 93b8454..81c7061 100644
--- a/themes/alps/util.html
+++ b/themes/alps/util.html
@@ -1,42 +1,69 @@
 {{ define "mbox-link" }}
 {{ if not (.HasAttr "\\Noselect") }}
-<a href="{{.URL}}" {{ if .Active }}class="active"{{ end }}>
-  {{- if eq .Name "INBOX" -}}
-    Inbox
-  {{- else -}}
-    {{ .Name }}
-  {{- end -}}
-  {{- if .HasAttr "\\HasChildren" }}/{{ end }}
-</a>
+<li {{ if .Active }}class="active"{{ end }}>
+  <a href="{{.URL}}">
+    {{- if eq .Name "INBOX" -}}
+      Inbox
+    {{- else -}}
+      {{ .Name }}
+    {{- 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 }}
+    title="Subscribe"
+    {{ end }}
+  >
+  {{ if eq .Name "INBOX" }}
+  ◉
+  {{ else }}
+  ○
+  {{ end }}
+  </button>
+</li>
 {{ else }}
-<span class="noselect">
+<li class="noselect">
   {{.Name}}{{- if .HasAttr "\\HasChildren" }}/{{ end }}
-</span>
+</li>
 {{ end }}
 {{ end }}
 
 {{ define "aside" }}
+<form id="subscribe-form" method="POST"></form>
 <aside>
-  <!-- the logo image, dimensions 200x32 may be present or not -->
-  <a href="/compose" class="new
-    {{ if eq $.GlobalData.URL.Path "/compose" }}active{{ end }}
-  ">Compose&nbsp;mail</a>
-  {{ with .CategorizedMailboxes }}
-  {{ with .Common.Inbox }}{{ template "mbox-link" . }}{{ end }}
-  {{ with .Common.Drafts }}{{ template "mbox-link" . }}{{ end }}
-  {{ with .Common.Sent }}{{ template "mbox-link" . }}{{ end }}
-  {{ with .Common.Junk }}{{ template "mbox-link" . }}{{ end }}
-  {{ with .Common.Trash }}{{ template "mbox-link" . }}{{ end }}
-  {{ with .Common.Archive }}{{ template "mbox-link" . }}{{ end }}
-  {{ if .Additional }}
-  <hr />
-  {{ range .Additional }}
-  {{ template "mbox-link" . }}
-  {{ end }}
-  {{ end }}
-  {{ end }}
-  <a href="/new-mailbox" class="new
-    {{ if eq $.GlobalData.URL.Path "/new-mailbox" }}active{{ end }}
-  ">Create&nbsp;new&nbsp;folder</a>
+  <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 }}
+    {{ with .Common.Sent }}{{ template "mbox-link" . }}{{ end }}
+    {{ with .Common.Junk }}{{ template "mbox-link" . }}{{ end }}
+    {{ with .Common.Trash }}{{ template "mbox-link" . }}{{ end }}
+    {{ with .Common.Archive }}{{ template "mbox-link" . }}{{ end }}
+    {{ if .Additional }}
+    <hr />
+    {{ range .Additional }}
+    {{ template "mbox-link" . }}
+    {{ 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 }}