mail/src/tpl/mail-list.html

78 lines
4.0 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>{{state.nav.currentFolder.wellknown ? state.nav.currentFolder.type : 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-favorite">
<svg ng-show="false"><use xlink:href="#icon-star_filled" /><title>Favorited</title></svg>
<svg><use xlink:href="#icon-star" /><title>Favorite</title></svg>
</li>
<li class="mail-list-entry__flags-encrypted">
<svg ng-show="email.encrypted && !email.decrypted"><use xlink:href="#icon-encrypted" /><title>Encrypted</title></svg>
<svg ng-show="email.encrypted && email.decrypted"><use xlink:href="#icon-decrypted" /><title>Decrypted</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">{{email.subject || 'No subject'}}</div>
<div class="mail-list-entry__attachment">
<svg><use xlink:href="#icon-attachment" /><title>Attachments</title></svg>
</div>
<time class="mail-list-entry__time">{{email.sentDate | date:'mediumDate'}}</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 && !email.decrypted"><use xlink:href="#icon-encrypted" /><title>Encrypted</title></svg>
<svg ng-show="email.encrypted && email.decrypted"><use xlink:href="#icon-decrypted" /><title>Decrypted</title></svg>
</div>
</li>
</ul>
</div>
<footer>
<span class="spinner" ng-show="account.loggingIn || account.busy || state.mailList.searching"></span>
<span class="text" ng-switch="account.online">
<span ng-switch-when="false">
<svg><use xlink:href="#icon-offline" /></svg>
</span>
{{state.mailList.lastUpdateLbl}} {{state.mailList.lastUpdate | date:'shortTime'}}
</span>
</footer>
</div>