mail/src/tpl/mail-list.html

76 lines
3.8 KiB
HTML

<div class="mail-list" ng-controller="MailListCtrl">
<header wo-touch="state.nav.toggle(true); $event.stopPropagation()">
<div>
<button class="btn-navicon">
<svg><use xlink:href="#icon-navicon" /><title>Toggle Navigation</title></svg>
</button>
<h2 ng-show="state.nav.currentFolder.wellknown">{{state.nav.currentFolder.type === 'Flagged' ? 'Starred' : state.nav.currentFolder.type}}</h2>
<h2 ng-show="!state.nav.currentFolder.wellknown">{{state.nav.currentFolder.name}}</h2>
</div>
<button class="btn-icon-light" title="New mail" wo-touch="state.writer.write(); $event.stopPropagation()">
<svg><use xlink:href="#icon-write" /><title>New mail</title></svg>
</button>
</header>
<div class="mail-list__search">
<div class="search">
<svg><use xlink:href="#icon-search" /><title>Search</title></svg>
<input class="input-text" type="text" ng-model="searchText"
ng-change="displaySearchResults(searchText)"
placeholder="Search" wo-focus-me="state.mailList.searching">
</div>
</div>
<div class="mail-list__scroll-canvas" list-scroll="displayMessages">
<ul class="mail-list__entries" infinite-scroll="displayMore()"
infinite-scroll-distance="1" infinite-scroll-parent="true">
<li class="mail-list-entry"
ng-class="{'mail-list-entry--active': email === state.mailList.selected, 'mail-list-entry--unread': email.unread, 'mail-list-entry--attachment': email.attachments !== undefined && email.attachments.length > 0}"
wo-touch="select(email)"
ng-repeat="email in displayMessages">
<ul class="mail-list-entry__flags">
<li class="mail-list-entry__flags-unread"></li>
<li class="mail-list-entry__flags-checked" wo-touch="$event.stopPropagation()">
<label class="checkbox">
<input type="checkbox" ng-model="email.checked">
<span><svg role="presentation"><use xlink:href="#icon-check" /></svg></span>
</label>
</li>
<li class="mail-list-entry__flags-flagged" wo-touch="flag(email, !email.flagged); $event.stopPropagation()">
<svg ng-show="email.flagged"><use xlink:href="#icon-star_filled" /><title>Starred</title></svg>
<svg ng-show="!email.flagged"><use xlink:href="#icon-star" /><title>Not Starred</title></svg>
</li>
<li class="mail-list-entry__flags-encrypted">
<svg ng-show="email.encrypted"><use xlink:href="#icon-encrypted" /><title>Encrypted</title></svg>
</li>
<li class="mail-list-entry__flags-answered" ng-show="!email.unread && email.answered">
<svg><use xlink:href="#icon-reply" /><title>Answered</title></svg>
</li>
<li class="mail-list-entry__flags-attachment">
<svg><use xlink:href="#icon-attachment" /><title>Attachments</title></svg>
</li>
</ul>
<h3 class="mail-list-entry__name">{{email.from[0].name || email.from[0].address}}</h3>
<div class="mail-list-entry__subject">
<strong>{{email.subject || 'No subject'}}</strong>
<span>
{{email.body ? email.body.substr(0, 200) : ''}}
</span>
</div>
<div class="mail-list-entry__attachment">
<svg><use xlink:href="#icon-attachment" /><title>Attachments</title></svg>
</div>
<time class="mail-list-entry__time">{{ formatDate(email.sentDate) }}</time>
<div class="mail-list-entry__excerpt">{{email.body ? email.body.substr(0, 200) : ''}}</div>
<div class="mail-list-entry__encrypted">
<svg ng-show="email.encrypted"><use xlink:href="#icon-encrypted" /><title>Encrypted</title></svg>
</div>
</li>
</ul>
</div>
<footer ng-include="'tpl/status-display.html'"></footer>
</div>