UIxMailEditor.wox

<?xml version="1.0" standalone="yes"?>
<container
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:var="http://www.skyrix.com/od/binding"
    xmlns:const="http://www.skyrix.com/od/constant"
    xmlns:label="OGo:label">

  <md-dialog id="mailEditor" class="sg-mail-editor"
             flex="{{ editor.isFullscreen?    100 : 60 }}"
             flex-sm="{{ editor.isFullscreen? 100 : 90 }}"
             flex-xs="100"
             nv-file-drop="nv-file-drop"
             nv-file-over="nv-file-over"
             over-class="sg-over-dropzone"
             uploader="editor.uploader"
             var:sg-labels="framework">
    <form name="messageForm">
      <md-toolbar>
        <div class="md-toolbar-tools">
          <!-- expand dialog -->
          <md-button ng-click="editor.toggleFullscreen($event)"
                     class="md-icon-button hide show-gt-xs"
                     aria-hidden="true"
                     ng-if="!isPopup">
            <md-icon>{{ editor.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
          </md-button>
          <!-- from -->
          <sg-avatar-image class="hide-xs"
                           sg-email="editor.message.editable.from"
                           size="32">person</sg-avatar-image>
          <md-input-container class="sg-no-wrap">
            <label><var:string label:value="From"/></label>
            <md-select name="from"
                       ng-model="editor.message.editable.from">
              <md-option ng-value="identity" ng-repeat="identity in editor.identities track by $index">{{identity}}</md-option>
            </md-select>
          </md-input-container>
          <div flex="flex"><!-- spacer --></div>
          <md-button class="sg-icon-button" ng-click="editor.send()"
                     ng-disabled="!(editor.message.editable.to.length > 0 || editor.message.editable.cc.length > 0 || editor.message.editable.bcc.length > 0) || editor.uploader.isUploading || messageForm.$invalid || messageForm.$submitted"
                     sg-ripple-click="mailEditor">
            <md-icon>send</md-icon>
          </md-button>
          <md-button class="sg-icon-button" ng-click="editor.save()">
            <md-icon>save</md-icon>
          </md-button>
          <md-button class="sg-icon-button" ng-click="editor.cancel()">
            <md-icon>close</md-icon>
          </md-button>
        </div>
      </md-toolbar>

      <div class="sg-dropzone">
        <div layout="column" layout-align="center center" layout-fill="layout-fill">
          <md-icon>file_upload</md-icon>
        </div>
      </div>

      <md-dialog-content>
        <header class="sg-padded">
          <div class="msg-header-content">

            <!-- to -->
            <div class="pseudo-input-container">
              <label class="pseudo-input-label">
                <var:string label:value="To"/>
              </label>
              <md-chips ng-model="editor.message.editable.to"
                        md-separator-keys="editor.recipientSeparatorKeys"
                        md-transform-chip="editor.addRecipient($chip, 'to')"
                        md-add-on-blur="true"
                        md-autofocus="editor.isNew()"
                        md-autocomplete-snap="width">
                <md-autocomplete
                    md-menu-class="md-2-line"
                    md-search-text="editor.autocomplete.to.searchText"
                    md-selected-item="editor.autocomplete.to.selected"
                    md-items="user in editor.contactFilter(editor.autocomplete.to.searchText)"
                    var:md-min-length="minimumSearchLength"
                    md-delay="150"
                    md-no-cache="true"
                    label:placeholder="Add a recipient">
                  <md-item-template>
                    <div class="sg-tile-content">
                      <div class="sg-md-subhead">
                        <div md-highlight-text="editor.autocomplete.to.searchText"
                             md-highlight-flags="gi">{{ user.$shortFormat(editor.autocomplete.to.searchText) }}</div>
                      </div>
                      <div class="sg-md-body"
                           md-colors="::{color: 'default-background-500'}">{{ user.containername }}</div>
                    </div>
                  </md-item-template>
                </md-autocomplete>
                <md-chip-template>
                  <div class="sg-tile-content">
                    {{$chip}}
                    <md-button class="sg-tile-btn" md-colors="::{ color: 'accent-600'}" ng-if="$chip.isExpandable" ng-click="editor.expandGroup($chip, 'to')">
                      <md-icon md-colors="::{ color: 'accent-600'}">add_box</md-icon><span ng-bind="$chip.members.length"></span>
                    </md-button>
                  </div>
                </md-chip-template>
              </md-chips>
            </div>

            <!-- cc -->
            <div class="pseudo-input-container ng-hide" ng-hide="editor.hideCc">
              <label class="pseudo-input-label">
                <var:string label:value="Cc"/>
              </label>
              <md-chips ng-model="editor.message.editable.cc"
                        md-separator-keys="editor.recipientSeparatorKeys"
                        md-transform-chip="editor.addRecipient($chip, 'cc')"
                        md-add-on-blur="true"
                        md-autocomplete-snap="width">
                <md-autocomplete
                    md-menu-class="md-2-line"
                    md-search-text="editor.autocomplete.cc.searchText"
                    md-selected-item="editor.autocomplete.cc.selected"
                    md-items="user in editor.contactFilter(editor.autocomplete.cc.searchText)"
                    var:md-min-length="minimumSearchLength"
                    md-delay="150"
                    md-no-cache="true"
                    label:placeholder="Add a recipient">
                  <md-item-template>
                    <div class="sg-tile-content">
                      <div class="sg-md-subhead">
                        <div md-highlight-text="editor.autocomplete.cc.searchText"
                             md-highlight-flags="gi">{{ user.$shortFormat(editor.autocomplete.cc.searchText) }}</div>
                      </div>
                      <div class="sg-md-body"
                           md-colors="::{color: 'default-background-500'}">{{ user.containername }}</div>
                    </div>
                  </md-item-template>
                </md-autocomplete>
                <md-chip-template>
                  <div class="sg-tile-content">
                    {{$chip}}
                    <md-button class="sg-tile-btn" md-colors="::{ color: 'accent-600'}" ng-if="$chip.isExpandable" ng-click="editor.expandGroup($chip, 'cc')">
                      <md-icon md-colors="::{ color: 'accent-600'}">add_box</md-icon><span ng-bind="$chip.members.length"></span>
                    </md-button>
                  </div>
                </md-chip-template>
              </md-chips>
            </div>

            <!-- bcc -->
            <div class="pseudo-input-container ng-hide" ng-hide="editor.hideBcc">
              <label class="pseudo-input-label">
                <var:string label:value="Bcc"/>
              </label>
              <md-chips ng-model="editor.message.editable.bcc"
                        md-separator-keys="editor.recipientSeparatorKeys"
                        md-transform-chip="editor.addRecipient($chip, 'bcc')"
                        md-add-on-blur="true"
                        md-autocomplete-snap="width">
                <md-autocomplete
                    md-menu-class="md-2-line"
                    md-selected-item="editor.autocomplete.bcc.selected"
                    md-search-text="editor.autocomplete.bcc.searchText"
                    md-items="user in editor.contactFilter(editor.autocomplete.bcc.searchText)"
                    var:md-min-length="minimumSearchLength"
                    md-delay="150"
                    md-no-cache="true"
                    label:placeholder="Add a recipient">
                  <md-item-template>
                    <div class="sg-tile-content">
                      <div class="sg-md-subhead">
                        <div md-highlight-text="editor.autocomplete.bcc.searchText"
                             md-highlight-flags="gi">{{ user.$shortFormat(editor.autocomplete.bcc.searchText) }}</div>
                      </div>
                      <div class="sg-md-body"
                           md-colors="::{color: 'default-background-500'}">{{ user.containername }}</div>
                    </div>
                  </md-item-template>
                </md-autocomplete>
                <md-chip-template>
                  <div class="sg-tile-content">
                    {{$chip}}
                    <md-button class="sg-tile-btn" md-colors="::{ color: 'accent-600'}" ng-if="$chip.isExpandable" ng-click="editor.expandGroup($chip, 'bcc')">
                      <md-icon md-colors="::{ color: 'accent-600'}">add_box</md-icon><span ng-bind="$chip.members.length"></span>
                    </md-button>
                  </div>
                </md-chip-template>
              </md-chips>
            </div>

            <!-- subject -->
            <md-input-container>
              <label>
                <var:string label:value="Subject"/>
              </label>
              <input type="text" name="subject" ng-model="editor.message.editable.subject" ng-required="true"/>
              <div ng-messages="messageForm.subject.$error">
                <div ng-message="required"><var:string label:value="Please specify a subject."/></div>
              </div>
            </md-input-container>
          </div>

          <!-- toolbar to show cc/bcc/attachment fields -->
          <div class="msg-header-buttons" layout="column" layout-align="start end">
            <md-button class="sg-icon-button " ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
            <md-button class="sg-icon-button " ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
            <md-menu>
              <md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdMenu.open($event)">
                <md-icon>more_vert</md-icon>
              </md-button>
              <md-menu-content width="4">
                <md-menu-item>
                  <sg-checkmark ng-model="editor.message.editable.receipt">
                    <var:string label:value="Return Receipt"/>
                  </sg-checkmark>
                </md-menu-item>
                <md-menu-item>
                  <md-button class="md-primary" ng-disabled="true" ng-bind="::'Security' | loc"><!-- Security --></md-button>
                </md-menu-item>
                <md-menu-item>
                  <sg-checkmark ng-model="editor.message.editable.sign">
                    <var:string label:value="Sign"/>
                  </sg-checkmark>
                </md-menu-item>
                <md-menu-item>
                  <sg-checkmark ng-model="editor.message.editable.encrypt">
                    <var:string label:value="Encrypt"/>
                  </sg-checkmark>
                </md-menu-item>
                <md-menu-item>
                  <md-button class="md-primary" ng-disabled="true"><var:string label:value="Priority"/></md-button>
                </md-menu-item>
                <md-menu-item>
                  <md-button ng-click="editor.message.editable.priority = 1">
                    <md-icon>{{ editor.message.editable.priority == 1 ? 'check' : null }}</md-icon>
                    <var:string label:value="highest"/>
                  </md-button>
                </md-menu-item>
                <md-menu-item>
                  <md-button ng-click="editor.message.editable.priority = 2">
                    <md-icon>{{ editor.message.editable.priority == 2 ? 'check' : null }}</md-icon>
                    <var:string label:value="high"/>
                  </md-button>
                </md-menu-item>
                <md-menu-item>
                  <md-button ng-click="editor.message.editable.priority = 3">
                    <md-icon>{{ (!editor.message.editable.priority || editor.message.editable.priority == 3) ? 'check' : null }}</md-icon>
                    <var:string label:value="normal"/>
                  </md-button>
                </md-menu-item>
                <md-menu-item>
                  <md-button ng-click="editor.message.editable.priority = 4">
                    <md-icon>{{ editor.message.editable.priority == 4 ? 'check' : null }}</md-icon>
                    <var:string label:value="low"/>
                  </md-button>
                </md-menu-item>
                <md-menu-item>
                  <md-button ng-click="editor.message.editable.priority = 5">
                    <md-icon>{{ editor.message.editable.priority == 5 ? 'check' : null }}</md-icon>
                    <var:string label:value="lowest"/>
                  </md-button>
                </md-menu-item>
              </md-menu-content>
            </md-menu>

          </div>
        </header>

        <!-- MESSAGE CONTENT -->
        <md-input-container class="md-block sg-mail-editor-content">
          <textarea name="content" var:class="editorClass"
                    rows="9"
                    ck-locale="editor.localeCode"
                    ck-margin="16px"
                    ck-focus="editor.onHTMLFocus($event)"
                    ng-model="editor.message.editable.text"
                    ng-focus="editor.onTextFocus($event)"
                    md-autofocus="::!editor.isNew()"
                    md-no-resize="md-no-resize"
                    md-no-autogrow="md-no-autogrow"
                    sg-autogrow="!isPopup"
                    md-detect-hidden="md-detect-hidden" />
        </md-input-container>
      </md-dialog-content>

      <!-- ATTACHMENTS -->
      <md-dialog-actions class="sg-mail-editor-attachments"
                         layout="row" layout-align="space-between start">
        <!-- Attachments -->
        <md-chips ng-model="editor.uploader.queue"
                  class="md-flex sg-readonly" readonly="true">
          <md-chip-template>
            <span class="sg-chip-progress" ng-show="$chip.isUploading">
              <span class="md-default-theme md-warn md-bg"
                    ng-style="{ width: $chip.progress + '%'}"><!-- progress --></span>
            </span>
            <a ng-href="{{$chip.inlineUrl}}" target="_new">{{$chip.file.name}}</a>
            <button class="md-icon-button md-chip-remove"
                    ng-click="editor.removeAttachment($chip, 'fileInput')">
              <md-icon ng-class="{ 'md-warn': $chip.isUploading }">close</md-icon>
            </button>
          </md-chip-template>
        </md-chips>
        <div class="msg-header-buttons">
          <label class="md-button md-icon-button" for="fileInput">
            <md-icon>attach_file</md-icon>
            <!-- <span><var:string label:value="Attach"/></span> -->
          </label>
          <input id="fileInput" class="ng-hide" name="fileInput" type="file" multiple="multiple"
                 nv-file-select="nv-file-select"
                 uploader="editor.uploader"/>
          <!--
              Disable multiple until this issue is resolved:
              https://github.com/nervgh/angular-file-upload/issues/525
          -->
          <!-- multiple="multiple" -->
        </div>
      </md-dialog-actions>
    </form>

    <sg-ripple class="md-default-theme md-accent md-bg"
               ng-class="{ 'md-warn': editor.sendState == 'error' }"><!-- ripple background --></sg-ripple>
    <sg-ripple-content class="md-default-theme md-accent md-hue-1 md-fg md-flex ng-hide"
                       layout="column" layout-align="center center" layout-fill="layout-fill"
                       ng-switch="editor.sendState">

      <!-- Sending -->
      <div layout="column" layout-align="center center"
           ng-switch-when="sending">
        <md-progress-circular class="md-hue-1"
                              md-mode="indeterminate"
                              md-diameter="48"><!-- mailbox loading progress --></md-progress-circular>
        <div class="md-padding">
          <var:string label:value="Sending"/>
        </div>
      </div>

      <!-- Sent -->
      <div layout="column" layout-align="center center"
           ng-switch-when="sent">
        <md-icon class="md-accent md-hue-1 sg-icon--large">done</md-icon>
        <div class="md-default-theme md-accent md-hue-1 md-fg md-padding">
          <var:string label:value="Sent"/>
        </div>
      </div>

      <!-- Error -->
      <div layout="column" layout-align="center center"
           ng-switch-when="error">
        <md-icon class="md-accent md-hue-1 sg-icon--large">error</md-icon>
        <div class="md-padding">
          {{editor.errorMessage}}
        </div>
        <md-button sg-ripple-click="mailEditor"><var:string label:value="Close"/></md-button>
      </div>

    </sg-ripple-content>

  </md-dialog>
</container>