alps: theme contact list page

themes/alps/address-book.html

@@ -0,0 +1,47 @@
+{{template "head.html" .}}
+{{template "nav.html" .}}
+
+<div class="page-wrap">
+  <aside>
+    <a href="/contacts/create" class="new">New contact</a>
+    <!-- TODO: fetch list of address books -->
+    <a href="#" class="active">{{.AddressBook.Name}}</a>
+    <a href="#">Personal</a>
+  </aside>
+
+  <div class="container">
+    <form id="address-book-form" method="post"></form>
+    <main class="contact-list">
+      <section class="actions">
+        {{ template "contacts-header.html" . }}
+      </section>
+
+      <section class="contacts">
+        <div class="contact-grid">
+          {{range .AddressObjects}}
+          <div class="contact-list-checkbox">
+            <input type="checkbox" name="paths" value="{{.Path}}" form="address-book-form">
+          </div>
+          <div class="contact-list-name">
+            <a href="{{.URL}}">
+              {{.Card.Value "FN"}}
+            </a>
+          </div>
+          <div class="contact-list-email">
+            {{$email := .Card.PreferredValue "EMAIL"}}
+            {{if $email}}
+              <a href="/compose?to={{$email}}">{{$email}}</a>
+            {{end}}
+          </div>
+          {{end}}
+        </div>
+      </section>
+
+      <section class="actions">
+        {{ template "contacts-header.html" . }}
+      </section>
+    </main>
+  </div>
+</div>
+
+{{template "foot.html"}}

themes/alps/assets/style.css

@@ -131,8 +131,8 @@ main { flex: 1 100%; display: flex; flex-direction: column; padding: 0.5rem 1rem
 
 aside a.active,
 main { background-color: #f6f6f6; }
-aside a.compose-mail.active { color: #008d47; }
-aside a.compose-mail.active,
+aside a.new.active { color: #008d47; }
+aside a.new.active,
 main.compose { background-color: #f6fff6; }
 main.compose { flex: 1 auto; padding: 1rem; }
 main.compose form { flex: 1 auto; display: flex; flex-direction: column; }
@@ -231,7 +231,7 @@ main.compose .actions > *:not(:last-child) {
   border-right: 1px solid #f2f2f2;
 }
 
-aside .compose-mail {
+aside .new {
   color: #008d47;
   font-weight: bold;
   /*background-color: #f5fcf2;*/
@@ -252,7 +252,8 @@ main table tfoot {
   background-color: white;
 }
 
-.message-list {
+.message-list,
+.contact-list {
   display: flex;
 }
 
@@ -267,11 +268,13 @@ main table tfoot {
   padding: 0.3rem;
 }
 
-.message-list .actions:first-child {
+.message-list .actions:first-child,
+.contact-list .actions:first-child {
   border-bottom: 1px solid #e0e0e0;
 }
 
-.message-list .actions:last-child {
+.message-list .actions:last-child,
+.contact-list .actions:last-child {
   border-top: 1px solid #e0e0e0;
 }
 
@@ -287,12 +290,17 @@ main table tfoot {
   border-bottom-left-radius: 0;
 }
 
-.message-list .actions-wrap {
+.actions-wrap {
+  display: flex;
   flex-grow: 1;
+  flex-direction: row;
 }
 
-.actions-wrap { display: flex; flex-direction: row; }
-.actions-search { display: flex; flex-direction: row; flex-grow: 1; }
+.actions-search {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
 
 .actions-pagination {
   margin-left: 1rem;
@@ -316,19 +324,21 @@ main table tfoot {
   flex-grow: 1;
 }
 
-.actions-message {
+.actions-message,
+.actions-contacts {
   display: flex;
   flex-direction: row;
   flex-grow: 1;
   align-items: center;
 }
 
-.message-list-checkbox {
-  display: none;
+.message-list-checkbox,
+.contact-list-checkbox {
   align-self: center;
 }
 
-.message-list .messages {
+.message-list .messages,
+.contact-list .contacts {
   flex-grow: 1;
 }
 
@@ -338,7 +348,14 @@ main table tfoot {
   grid-template-rows: auto;
 }
 
-.message-list .messages .message-grid > * {
+.contact-grid {
+  display: grid;
+  grid-template-columns: auto 1fr 3fr;
+  grid-template-rows: auto;
+}
+
+.message-list .messages .message-grid > *,
+.contact-list .contacts .contact-grid > * {
   white-space: nowrap;
   padding: 0.3rem;
   overflow: hidden;

themes/alps/compose.html

@@ -4,7 +4,7 @@
 
 <div class="page-wrap">
   <aside>
-    <a href="/compose" class="compose-mail active">Compose&nbsp;Mail</a>
+    <a href="/compose" class="new active">Compose&nbsp;Mail</a>
     <!-- TODO: use mailbox list from template data -->
     <a href="/mailbox/INBOX">Inbox</a>
     <a href="/mailbox/Drafts">Drafts</a>

themes/alps/contacts-header.html

@@ -0,0 +1,33 @@
+<div class="message-list-checkbox">
+  <input type="checkbox" id="action-checkbox-all"/>
+</div>
+<div class="actions-wrap">
+  <div class="actions-contacts">
+    <div class="action-group">
+      <button form="address-book-form" formaction="TODO">Delete</button>
+    </div>
+  </div>
+
+  <form method="get" class="actions-search action-group">
+    <input
+      type="text"
+      name="query"
+      value="{{.Query}}"
+      placeholder="Search {{.AddressBook.Name}} contacts...">
+    <button>Search</button>
+  </form>
+
+  {{/*
+  {{if or (ge .PrevPage 0) (ge .NextPage 0) }}
+  <div class="actions-pagination">
+    {{if ge .PrevPage 0}}
+      {{if ge .PrevPage 1}}<a href="?page=0" class="button-link">«</a>{{ end }}
+      <a href="?page={{.PrevPage}}" class="button-link">«</a>
+    {{end}}
+    {{if ge .NextPage 0}}
+      <a href="?page={{.NextPage}}" class="button-link">»</a>
+    {{end}}
+  </div>
+  {{ end }}
+  */}}
+</div>

themes/alps/mailbox.html

@@ -4,7 +4,7 @@
 <div class="page-wrap">
   <aside>
     <!-- the logo image, dimensions 200x32 may be present or not -->
-    <a href="/compose" class="compose-mail">Compose&nbsp;Mail</a>
+    <a href="/compose" class="new">Compose&nbsp;Mail</a>
     {{$current := .Mailbox}}
     {{range .Mailboxes}}
       <a href="{{.URL}}"

themes/alps/message.html

@@ -31,7 +31,7 @@
   {{$current := .Mailbox}}
   <aside>
     <!-- the logo image, dimensions 200x32 may be present or not -->
-    <a href="/compose" class="compose-mail">Compose&nbsp;Mail</a>
+    <a href="/compose" class="new">Compose&nbsp;Mail</a>
     {{$current := .Mailbox}}
     {{range .Mailboxes}}
       <a href="{{.URL}}"

themes/alps/nav.html

@@ -1,8 +1,23 @@
 <header>
   <nav>
-    <a href="/" class="active">Email</a>
-    <a href="/calendar">Calendar</a>
-    <a href="/contacts">Contacts</a>
+    {{$page := (index .GlobalData.Path 0)}}
+    <a href="/"
+      {{ if or (eq $page "mailbox") (eq $page "message") }}
+      class="active"
+      {{ end }}
+    >Email</a>
+    <a
+      href="/calendar"
+      {{ if eq $page "calendar" }}
+      class="active"
+      {{ end }}
+    >Calendar</a>
+    <a
+      href="/contacts"
+      {{ if eq $page "contacts" }}
+      class="active"
+      {{ end }}
+    >Contacts</a>
     <div>
       <span>{{ .GlobalData.Username }}</span>
       <a href="/settings">Settings</a>