mail/src/tpl/mail-list.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"><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">{{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"><use xlink:href="#icon-encrypted" /><title>Encrypted</title></svg>
        </div>
      </li>
    </ul>
  </div>

  <footer ng-include="'tpl/status-display.html'"></footer>
</div>