diff options
| -rw-r--r-- | themes/alps/address-book.html | 47 | ||||
| -rw-r--r-- | themes/alps/assets/style.css | 45 | ||||
| -rw-r--r-- | themes/alps/compose.html | 2 | ||||
| -rw-r--r-- | themes/alps/contacts-header.html | 33 | ||||
| -rw-r--r-- | themes/alps/mailbox.html | 2 | ||||
| -rw-r--r-- | themes/alps/message.html | 2 | ||||
| -rw-r--r-- | themes/alps/nav.html | 21 |
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 Mail</a> + <a href="/compose" class="new active">Compose 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 Mail</a> + <a href="/compose" class="new">Compose 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 Mail</a> + <a href="/compose" class="new">Compose 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> |