@@ -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"}} |
@@ -131,8 +131,8 @@ main { flex: 1 100%; display: flex; flex-direction: column; padding: 0.5rem 1rem | |||||
aside a.active, | aside a.active, | ||||
main { background-color: #f6f6f6; } | 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 { background-color: #f6fff6; } | ||||
main.compose { flex: 1 auto; padding: 1rem; } | main.compose { flex: 1 auto; padding: 1rem; } | ||||
main.compose form { flex: 1 auto; display: flex; flex-direction: column; } | 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; | border-right: 1px solid #f2f2f2; | ||||
} | } | ||||
aside .compose-mail { | |||||
aside .new { | |||||
color: #008d47; | color: #008d47; | ||||
font-weight: bold; | font-weight: bold; | ||||
/*background-color: #f5fcf2;*/ | /*background-color: #f5fcf2;*/ | ||||
@@ -252,7 +252,8 @@ main table tfoot { | |||||
background-color: white; | background-color: white; | ||||
} | } | ||||
.message-list { | |||||
.message-list, | |||||
.contact-list { | |||||
display: flex; | display: flex; | ||||
} | } | ||||
@@ -267,11 +268,13 @@ main table tfoot { | |||||
padding: 0.3rem; | padding: 0.3rem; | ||||
} | } | ||||
.message-list .actions:first-child { | |||||
.message-list .actions:first-child, | |||||
.contact-list .actions:first-child { | |||||
border-bottom: 1px solid #e0e0e0; | 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; | border-top: 1px solid #e0e0e0; | ||||
} | } | ||||
@@ -287,12 +290,17 @@ main table tfoot { | |||||
border-bottom-left-radius: 0; | border-bottom-left-radius: 0; | ||||
} | } | ||||
.message-list .actions-wrap { | |||||
.actions-wrap { | |||||
display: flex; | |||||
flex-grow: 1; | 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 { | .actions-pagination { | ||||
margin-left: 1rem; | margin-left: 1rem; | ||||
@@ -316,19 +324,21 @@ main table tfoot { | |||||
flex-grow: 1; | flex-grow: 1; | ||||
} | } | ||||
.actions-message { | |||||
.actions-message, | |||||
.actions-contacts { | |||||
display: flex; | display: flex; | ||||
flex-direction: row; | flex-direction: row; | ||||
flex-grow: 1; | flex-grow: 1; | ||||
align-items: center; | align-items: center; | ||||
} | } | ||||
.message-list-checkbox { | |||||
display: none; | |||||
.message-list-checkbox, | |||||
.contact-list-checkbox { | |||||
align-self: center; | align-self: center; | ||||
} | } | ||||
.message-list .messages { | |||||
.message-list .messages, | |||||
.contact-list .contacts { | |||||
flex-grow: 1; | flex-grow: 1; | ||||
} | } | ||||
@@ -338,7 +348,14 @@ main table tfoot { | |||||
grid-template-rows: auto; | 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; | white-space: nowrap; | ||||
padding: 0.3rem; | padding: 0.3rem; | ||||
overflow: hidden; | overflow: hidden; | ||||
@@ -4,7 +4,7 @@ | |||||
<div class="page-wrap"> | <div class="page-wrap"> | ||||
<aside> | <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 --> | <!-- TODO: use mailbox list from template data --> | ||||
<a href="/mailbox/INBOX">Inbox</a> | <a href="/mailbox/INBOX">Inbox</a> | ||||
<a href="/mailbox/Drafts">Drafts</a> | <a href="/mailbox/Drafts">Drafts</a> | ||||
@@ -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> |
@@ -4,7 +4,7 @@ | |||||
<div class="page-wrap"> | <div class="page-wrap"> | ||||
<aside> | <aside> | ||||
<!-- the logo image, dimensions 200x32 may be present or not --> | <!-- 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}} | {{$current := .Mailbox}} | ||||
{{range .Mailboxes}} | {{range .Mailboxes}} | ||||
<a href="{{.URL}}" | <a href="{{.URL}}" | ||||
@@ -31,7 +31,7 @@ | |||||
{{$current := .Mailbox}} | {{$current := .Mailbox}} | ||||
<aside> | <aside> | ||||
<!-- the logo image, dimensions 200x32 may be present or not --> | <!-- 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}} | {{$current := .Mailbox}} | ||||
{{range .Mailboxes}} | {{range .Mailboxes}} | ||||
<a href="{{.URL}}" | <a href="{{.URL}}" | ||||
@@ -1,8 +1,23 @@ | |||||
<header> | <header> | ||||
<nav> | <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> | <div> | ||||
<span>{{ .GlobalData.Username }}</span> | <span>{{ .GlobalData.Username }}</span> | ||||
<a href="/settings">Settings</a> | <a href="/settings">Settings</a> | ||||