aboutsummaryrefslogtreecommitdiff
path: root/themes
diff options
context:
space:
mode:
authorDrew DeVault <sir@cmpwn.com>2020-05-13 14:47:56 -0400
committerSimon Ser <contact@emersion.fr>2020-05-13 20:52:06 +0200
commit7456c9574cfe5cffb26aa2c8abe72682308d5fd5 (patch)
treeabe68459e0bda13d8eb8bef2210a659afddb80de /themes
parentdfb381058bca883561af4053074db560d34822d8 (diff)
downloadalps-7456c9574cfe5cffb26aa2c8abe72682308d5fd5.tar.gz
alps-7456c9574cfe5cffb26aa2c8abe72682308d5fd5.zip
alps: theme contact list page
Diffstat (limited to 'themes')
-rw-r--r--themes/alps/address-book.html47
-rw-r--r--themes/alps/assets/style.css45
-rw-r--r--themes/alps/compose.html2
-rw-r--r--themes/alps/contacts-header.html33
-rw-r--r--themes/alps/mailbox.html2
-rw-r--r--themes/alps/message.html2
-rw-r--r--themes/alps/nav.html21
7 files changed, 132 insertions, 20 deletions
diff --git a/themes/alps/address-book.html b/themes/alps/address-book.html
new file mode 100644
index 0000000..60292bf
--- /dev/null
+++ b/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"}}
diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 5f3a59b..c0867c1 100644
--- a/themes/alps/assets/style.css
+++ b/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;
diff --git a/themes/alps/compose.html b/themes/alps/compose.html
index fe951e2..0975aad 100644
--- a/themes/alps/compose.html
+++ b/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>
diff --git a/themes/alps/contacts-header.html b/themes/alps/contacts-header.html
new file mode 100644
index 0000000..577aa31
--- /dev/null
+++ b/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>
diff --git a/themes/alps/mailbox.html b/themes/alps/mailbox.html
index ab09318..0225482 100644
--- a/themes/alps/mailbox.html
+++ b/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}}"
diff --git a/themes/alps/message.html b/themes/alps/message.html
index 7fbbd41..cdfba33 100644
--- a/themes/alps/message.html
+++ b/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}}"
diff --git a/themes/alps/nav.html b/themes/alps/nav.html
index 820b2e3..3c26166 100644
--- a/themes/alps/nav.html
+++ b/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>