mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-05-22 11:55:24 +00:00
(js,css) Improve handling of attachments in editor
This commit is contained in:
Francis Lachapelle
@@ -44,7 +44,7 @@
|
||||
<var:string label:value="To"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.to"
|
||||
md-on-append="editor.addRecipient($chip)">
|
||||
md-transform-chip="editor.addRecipient($chip)">
|
||||
<md-autocomplete
|
||||
class="sg-chips-autocomplete"
|
||||
md-autofocus="true"
|
||||
@@ -76,7 +76,7 @@
|
||||
<var:string label:value="Cc"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.cc"
|
||||
md-on-append="editor.addRecipient($chip)">
|
||||
md-transform-chip="editor.addRecipient($chip)">
|
||||
<md-autocomplete
|
||||
class="sg-chips-autocomplete"
|
||||
md-search-text="editor.autocomplete.cc.searchText"
|
||||
@@ -107,7 +107,7 @@
|
||||
<var:string label:value="Bcc"/>
|
||||
</label>
|
||||
<md-chips ng-model="editor.message.editable.bcc"
|
||||
md-on-append="editor.addRecipient($chip)">
|
||||
md-transform-chip="editor.addRecipient($chip)">
|
||||
<md-autocomplete
|
||||
class="sg-chips-autocomplete"
|
||||
md-selected-item="editor.autocomplete.bcc.selected"
|
||||
@@ -207,7 +207,7 @@
|
||||
<!-- TOOLBAR BUTTONS -->
|
||||
<md-dialog-actions>
|
||||
<div layout="row" layout-align="space-between center" layout-fill="layout-fill">
|
||||
<div>
|
||||
<div class="md-flex">
|
||||
<!-- md-icon does not play well with Firefox - makes the
|
||||
file input never appear. This should eventually be
|
||||
fixed in Angular Material -->
|
||||
@@ -220,31 +220,29 @@
|
||||
uploader="editor.uploader"
|
||||
ng-show="false"/>
|
||||
</div>
|
||||
<div>
|
||||
<!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
|
||||
MAIL WITH ATTACHMENTS -->
|
||||
<!-- Files already uploaded, for example when we forward a
|
||||
mail with attachments or open a draft -->
|
||||
<md-chips ng-model="editor.message.editable.attachmentAttrs"
|
||||
class="sg-readonly" readonly="true">
|
||||
readonly="true" class="ng-hide">
|
||||
<md-chip-template>
|
||||
<span>{{$chip.filename}}</span>
|
||||
<md-icon ng-click="editor.message.$deleteAttachment($chip.filename);">close</md-icon>
|
||||
<md-icon class="sg-chip-remove"
|
||||
ng-click="editor.message.$deleteAttachment($chip.filename)">close</md-icon>
|
||||
</md-chip-template>
|
||||
</md-chips>
|
||||
<!-- FILE BEING ATTACHED TO A MAIL -->
|
||||
<!-- File being attached to a mail -->
|
||||
<md-chips ng-model="editor.uploader.queue"
|
||||
class="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>
|
||||
<span>{{$chip.file.name}}</span>
|
||||
<md-icon ng-show="!$chip.isUploading"
|
||||
ng-click="editor.message.$deleteAttachment($chip.file.name);
|
||||
$chip.remove();">close</md-icon>
|
||||
<md-icon ng-show="$chip.isUploading"
|
||||
ng-click="editor.uploader.cancelItem($chip)"
|
||||
ng-style="{ 'color': '#F00' }">cancel</md-icon>
|
||||
<span ng-show="$chip.isUploading">{{$chip.progress}} %</span>
|
||||
<md-icon ng-class="{ 'md-warn': $chip.isUploading }"
|
||||
ng-click="editor.removeAttachment($chip)">close</md-icon>
|
||||
</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
</div>
|
||||
</md-dialog-actions>
|
||||
</md-dialog>
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
/**
|
||||
* @ngInject
|
||||
*/
|
||||
MessageEditorController.$inject = ['$stateParams', '$mdDialog', '$mdToast', 'FileUploader', 'stateAccounts', 'stateMessage', 'stateRecipients', '$timeout', 'sgFocus', 'Dialog', 'AddressBook', 'Preferences'];
|
||||
function MessageEditorController($stateParams, $mdDialog, $mdToast, FileUploader, stateAccounts, stateMessage, stateRecipients, $timeout, focus, Dialog, AddressBook, Preferences) {
|
||||
MessageEditorController.$inject = ['$stateParams', '$mdDialog', '$mdToast', 'FileUploader', 'stateAccounts', 'stateMessage', 'stateRecipients', '$timeout', 'Dialog', 'AddressBook', 'Preferences'];
|
||||
function MessageEditorController($stateParams, $mdDialog, $mdToast, FileUploader, stateAccounts, stateMessage, stateRecipients, $timeout, Dialog, AddressBook, Preferences) {
|
||||
var vm = this;
|
||||
|
||||
vm.addRecipient = addRecipient;
|
||||
@@ -18,29 +18,30 @@
|
||||
vm.hideBcc = true;
|
||||
vm.cancel = cancel;
|
||||
vm.send = send;
|
||||
vm.removeAttachment = removeAttachment;
|
||||
vm.contactFilter = contactFilter;
|
||||
vm.identities = _.pluck(_.flatten(_.pluck(stateAccounts, 'identities')), 'full');
|
||||
vm.uploader = new FileUploader({
|
||||
url: stateMessage.$absolutePath({asDraft: true}) + '/save',
|
||||
autoUpload: true,
|
||||
alias: 'attachments',
|
||||
onProgressItem: function(item, progress) {
|
||||
console.debug(item); console.debug(progress);
|
||||
},
|
||||
removeAfterUpload: false,
|
||||
// onProgressItem: function(item, progress) {
|
||||
// console.debug(item); console.debug(progress);
|
||||
// },
|
||||
onSuccessItem: function(item, response, status, headers) {
|
||||
stateMessage.$setUID(response.uid);
|
||||
stateMessage.$reload();
|
||||
console.debug(item); console.debug('success = ' + JSON.stringify(response, undefined, 2));
|
||||
stateMessage.$reload({asDraft: false});
|
||||
//console.debug(item); console.debug('success = ' + JSON.stringify(response, undefined, 2));
|
||||
},
|
||||
onCancelItem: function(item, response, status, headers) {
|
||||
console.debug(item); console.debug('cancel = ' + JSON.stringify(response, undefined, 2));
|
||||
|
||||
//console.debug(item); console.debug('cancel = ' + JSON.stringify(response, undefined, 2));
|
||||
// We remove the attachment
|
||||
stateMessage.$deleteAttachment(item.file.name);
|
||||
this.removeFromQueue(item);
|
||||
},
|
||||
onErrorItem: function(item, response, status, headers) {
|
||||
console.debug(item); console.debug('error = ' + JSON.stringify(response, undefined, 2));
|
||||
//console.debug(item); console.debug('error = ' + JSON.stringify(response, undefined, 2));
|
||||
}
|
||||
});
|
||||
|
||||
@@ -61,16 +62,45 @@
|
||||
else if ($stateParams.actionName == 'forward') {
|
||||
stateMessage.$forward().then(function(msgObject) {
|
||||
vm.message = msgObject;
|
||||
addAttachments();
|
||||
});
|
||||
}
|
||||
else if (angular.isDefined(stateMessage)) {
|
||||
vm.message = stateMessage;
|
||||
addAttachments();
|
||||
}
|
||||
|
||||
if (angular.isDefined(stateRecipients)) {
|
||||
vm.message.editable.to = _.union(vm.message.editable.to, _.pluck(stateRecipients, 'full'));
|
||||
}
|
||||
|
||||
function addAttachments() {
|
||||
// Add existing attached files to uploader
|
||||
var i, data, fileItem;
|
||||
if (vm.message.attachmentAttrs)
|
||||
for (i = 0; i < vm.message.attachmentAttrs.length; i++) {
|
||||
data = {
|
||||
name: vm.message.attachmentAttrs[i].filename,
|
||||
type: vm.message.attachmentAttrs[i].mimetype,
|
||||
size: parseInt(vm.message.attachmentAttrs[i].size)
|
||||
};
|
||||
fileItem = new FileUploader.FileItem(vm.uploader, data);
|
||||
fileItem.progress = 100;
|
||||
fileItem.isUploaded = true;
|
||||
fileItem.isSuccess = true;
|
||||
vm.uploader.queue.push(fileItem);
|
||||
}
|
||||
}
|
||||
|
||||
function removeAttachment(item) {
|
||||
if (item.isUploading)
|
||||
vm.uploader.cancelItem(item);
|
||||
else {
|
||||
vm.message.$deleteAttachment(item.file.name);
|
||||
item.remove();
|
||||
}
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
// TODO: delete draft?
|
||||
if (vm.autosave)
|
||||
@@ -126,10 +156,12 @@
|
||||
vm.autosave = $timeout(vm.autosaveDrafts, Preferences.defaults.SOGoMailAutoSave*1000*60);
|
||||
}
|
||||
|
||||
// Select list based on user's settings
|
||||
// Read user's defaults
|
||||
Preferences.ready().then(function() {
|
||||
if (Preferences.defaults.SOGoMailAutoSave)
|
||||
// Enable auto-save of draft
|
||||
vm.autosave = $timeout(vm.autosaveDrafts, Preferences.defaults.SOGoMailAutoSave*1000*60);
|
||||
// Set the locale of CKEditor
|
||||
vm.localeCode = Preferences.defaults.LocaleCode;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -23,6 +23,28 @@ md-chips {
|
||||
}
|
||||
}
|
||||
}
|
||||
.sg-chip-progress {
|
||||
border-radius: $chip-height / 2;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: $swift-ease-in-out;
|
||||
&.ng-hide {
|
||||
background-color: #fff;
|
||||
}
|
||||
span {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: $swift-ease-in-out;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Enlarge the default autocompletion menu
|
||||
|
||||
Reference in New Issue
Block a user