@timshel_npm/maildev/dist/app/views/item.html

SMTP Server with async API and Web Interface for viewing and testing emails during development

<ul class="email-toolbar">



    <li class="dropdown-container">
      <a href="" class="dropdown-trigger"
        ng-click="toggleDropdown($event, 'display')"
        ng-class="{ open: dropdownOpen == 'display' }"
      >
        <span ng-if="!panelVisibility || panelVisibility === 'html'"><i class="fas fa-file-code"></i> HTML</span>
        <span ng-if="panelVisibility === 'plain'"><i class="fas fa-file-alt"></i> Text</span>
        <span ng-if="panelVisibility === 'attachments'"><i class="fas fa-paperclip"></i> Attachments</span>
        <span ng-if="panelVisibility === 'headers'"><i class="fas fa-th-list"></i> Headers</span>
        <span ng-if="panelVisibility === 'source'"><i class="fas fa-code"></i> Source</span>
      </a>
      <ul class="dropdown-menu">
        <li>
            <a href="" class=""
              ng-click="show('html')"
              ng-class="{ active: panelVisibility == 'html', disabled: !item.html }">
                <span>
                  <i class="fas fa-file-code"></i>
                  HTML
                </span>
            </a>
        </li>
        <li>
            <a href="" class=""
              ng-click="show('plain')"
              ng-class="{ active: panelVisibility == 'plain', disabled: !item.text  }">
                <span>
                  <i class="fas fa-file-alt"></i>
                  Text
                </span>
            </a>
        </li>
        <li>
            <a href="" class=""
              ng-click="show('attachments')"
              ng-class="{ active: panelVisibility == 'attachments', disabled: !item.attachments }">
                <span>
                  <i class="fas fa-paperclip"></i>
                  Attachments
                </span>
            </a>
        </li>
        <li>
            <a href="" class=""
              ng-click="show('headers')"
              ng-class="{ active: panelVisibility == 'headers' }">
                <span>
                  <i class="fas fa-th-list"></i>
                  Headers
                </span>
            </a>
        </li>
        <li>
            <a href="" class=""
              ng-click="show('source')"
              ng-class="{ active: panelVisibility == 'source' }">
                <span>
                  <i class="fas fa-code"></i>
                  Source ({{item.sizeHuman}})
                </span>
            </a>
        </li>
      </ul>
    </li>



    <li class="dropdown-container">
      <a href="" class="dropdown-trigger"
        ng-click="toggleDropdown($event, 'viewport')"
        ng-class="{ open: dropdownOpen == 'viewport', disabled: panelVisibility != 'html' }">
        <!--
        <span ng-if="iframeSize == null"><i class="fas fa-ruler-combined"></i> 100%</span> -->
        <span ng-if="iframeSize == null"><i class="fas fa-desktop"></i> 100%</span>
        <span ng-if="iframeSize == '1440px'"><i class="fas fa-desktop"></i> 1440px</span>
        <span ng-if="iframeSize == '1024px'"><i class="fas fa-tablet-alt"></i> 1024px</span>
        <span ng-if="iframeSize == '768px'"><i class="fas fa-tablet-alt"></i> 768px</span>
        <span ng-if="iframeSize == '425px'"><i class="fas fa-mobile-alt"></i> 425px</span>
        <span ng-if="iframeSize == '375px'"><i class="fas fa-mobile-alt"></i> 375px</span>
        <span ng-if="iframeSize == '320px'"><i class="fas fa-mobile-alt"></i> 320px</span>

      </a>
      <ul class="dropdown-menu">

        <li>
            <a href="" class=""
              ng-click="resize()"
              ng-class="{ active: iframeSize == null }">
                <span>
                  <i class="fas fa-desktop"></i>
                  100%
                </span>
            </a>
        </li>
        <li>
            <a href="" class=""
              ng-click="resize('1440px')"
              ng-class="{ active: iframeSize == '1440px' }">
                <span>
                  <i class="fas fa-desktop"></i>
                  1440px
                </span>
            </a>
        </li>
        <li>
            <a href="" class=""
              ng-click="resize('1024px')"
              ng-class="{ active: iframeSize == '1024px' }">
                <span>
                  <i class="fas fa-tablet-alt"></i>
                  1024px
                </span>
            </a>
        </li>
        <li>
            <a href="" class=""
              ng-click="resize('768px')"
              ng-class="{ active: iframeSize == '768px' }">
                <span>
                  <i class="fas fa-tablet-alt"></i>
                  768px
                </span>
            </a>
        </li>
        <li>
            <a href="" class=""
              ng-click="resize('425px')"
              ng-class="{ active: iframeSize == '425px' }">
                <span>
                  <i class="fas fa-mobile-alt"></i>
                  425px
                </span>
            </a>
        </li>
        <li>
            <a href="" class=""
              ng-click="resize('375px')"
              ng-class="{ active: iframeSize == '375px' }">
                <span>
                  <i class="fas fa-mobile-alt"></i>
                  375px
                </span>
            </a>
        </li>
        <li>
            <a href="" class=""
              ng-click="resize('320px')"
              ng-class="{ active: iframeSize == '320px' }">
                <span>
                  <i class="fas fa-mobile-alt"></i>
                  320px
                </span>
            </a>
        </li>
      </ul>
    </li>


    <li>
        <a href="email/{{item.id}}/download" class="">
          <span>
            <i class="fas fa-cloud-download-alt"></i>
            Download
          </span>
        </a>
    </li>




    <li class="dropdown-container">
      <a href="" class="dropdown-trigger"
        ng-click="toggleDropdown($event, 'relay')"
        ng-class="{ open: dropdownOpen == 'relay', disabled: !config.isOutgoingEnabled }"
      >
        <span>
          <i class="fas fa-paper-plane"></i>
          Relay
        </span>
      </a>
      <ul class="dropdown-menu">
        <li>
          <a href="" class=""
            ng-click="relay(item)"
            ng-class="{ disabled: !config.isOutgoingEnabled }">
              <span>
                <i class="fas fa-paper-plane"></i>
                Relay
              </span>
          </a>
        </li>
        <li>
          <a href="" class=""
            ng-click="relayTo(item)"
            ng-class="{ disabled: !config.isOutgoingEnabled }">
              <span>
                <i class="fas fa-paper-plane"></i>
                Relay to...
              </span>
          </a>
        </li>
      </ul>
    </li>



    <li>
      <a href="" class=""
        ng-click="delete(item)"
      >
        <span>
          <i class="fas fa-trash-alt"></i>
          Delete
        </span>
      </a>
    </li>


</ul>


<div class="email-meta">
  <div class="subject">{{item.subject}}</div>
  <div class="row from">
    <div class="description">From:</div>
    <div class="description-value">
      <app-address ng-repeat="a in item.from" address="a"></app-address>
    </div>
  </div>
  <div class="row to">
    <div class="description">To:</div>
    <div class="description-value">
      <app-address ng-repeat="a in item.to" address="a"></app-address>
    </div>
  </div>
  <div ng-if="item.cc.length" class="row cc">
    <div class="description">Cc:</div>
    <div class="description-value">
      <app-address ng-repeat="a in item.cc" address="a"></app-address>
    </div>
  </div>
  <div ng-if="item.calculatedBcc.length" class="row calculated-bcc">
    <div class="description">Bcc:</div>
    <div class="description-value">
      <app-address ng-repeat="a in item.calculatedBcc" address="a"></app-address>
    </div>
  </div>
</div>









<div class="email-content">

    <div class="email-content-view email-content-view-html" ng-hide="panelVisibility != 'html'">
      <iframe ng-src="{{ item.iframeUrl }}" class="preview-iframe panel-html"></iframe>
    </div>

    <div class="email-content-view email-content-view-plain" ng-hide="panelVisibility != 'plain'">
      <div class="plain-text panel-plain" ng-bind-html=" item.text|escapeHTML"></div>
    </div>

    <div class="email-content-view email-content-view-attachments" ng-hide="panelVisibility != 'attachments'">
      <div class="panel-attachments" >
          <span ng-repeat="attachment in item.attachments">
              <a target="_blank" ng-href="email/{{item.id}}/attachment/{{attachment.generatedFileName | encodeURIComponent}}">
                  <strong>{{attachment.generatedFileName}}</strong>
              </a>
              <br>
          </span>
      </div>
    </div>

    <div class="email-content-view email-content-view-headers" ng-hide="panelVisibility != 'headers'">
      <div class="panel-headers" >
          <table class="table">
              <!--
              <thead>
                  <tr>
                      <th>Key</th>
                      <th>Value</th>
                  </tr>
              </thead>
              -->
              <tr ng-repeat="(headerKey, headerValue) in item.headers">
                  <td class="span3">
                      <strong>{{headerKey}}</strong>
                  </td>
                  <td>
                      {{headerValue}}
                  </td>
              </tr>
          </table>
      </div>
    </div>

    <div class="email-content-view email-content-view-source" ng-hide="panelVisibility != 'source'">
      <iframe ng-src="{{ rawEmail }}" class="preview-iframe panel-source" ></iframe>
    </div>

</div>