382 lines
18 KiB
XML
382 lines
18 KiB
XML
<?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-autocomplete
|
|
class="md-margin md-default-theme md-bg md-hue-1" flex="flex"
|
|
required="required"
|
|
md-input-name="from"
|
|
md-require-match="true"
|
|
md-selected-item="editor.fromIdentity"
|
|
md-search-text="editor.identitySearchText"
|
|
md-selected-item-change="editor.setFromIdentity(identity)"
|
|
md-items="identity in editor.identitySearch(editor.identitySearchText)"
|
|
md-item-text="identity.full"
|
|
md-min-length="0"
|
|
md-escape-options="clear"
|
|
label:placeholder="Choose which identity to send this message from"
|
|
md-menu-class="md-2-line">
|
|
<md-item-template>
|
|
<div class="sg-tile-content">
|
|
<div class="sg-md-subhead">
|
|
<span md-highlight-text="editor.identitySearchText"
|
|
md-highlight-flags="gi">{{ identity.full }}</span>
|
|
</div>
|
|
<div class="sg-md-body">
|
|
<i ng-bind-html="editor.account.getTextSignature(identity)"><!-- signature --></i>
|
|
</div>
|
|
</div>
|
|
</md-item-template>
|
|
<div ng-messages="messageForm.from.$error">
|
|
<div ng-message="required">This field is required</div>
|
|
</div>
|
|
</md-autocomplete>
|
|
<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 ng-show="editor.account.$hasCertificate()">
|
|
<md-button class="md-primary" ng-disabled="true" ng-bind="::'Security' | loc"><!-- Security --></md-button>
|
|
</md-menu-item>
|
|
<md-menu-item ng-show="::editor.account.$hasCertificate()">
|
|
<sg-checkmark ng-model="editor.message.editable.sign">
|
|
<var:string label:value="Sign"/>
|
|
</sg-checkmark>
|
|
</md-menu-item>
|
|
<md-menu-item ng-show="::editor.account.$hasCertificate()">
|
|
<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" class="plain-text"
|
|
ng-if="::(editor.composeType == 'text')"
|
|
rows="9"
|
|
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="true"
|
|
md-detect-hidden="md-detect-hidden"><!-- plain text editor --></textarea>
|
|
<sg-ckeditor id="message-content"
|
|
ng-if="::(editor.composeType == 'html')"
|
|
config="editor.ckConfig"
|
|
on-instance-ready="editor.onHTMLReady($editor)"
|
|
on-focus="editor.onHTMLFocus($editor)"
|
|
ng-model="editor.message.editable.text"><!-- HTML editor --></sg-ckeditor>
|
|
</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>
|