amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-03-12 02:11:23 +00:00
Code Issues Projects Releases Wiki Activity

(feat) now use mdDialog for message composition

Browse Source
This commit is contained in:
Ludovic Marcotte
2015-08-02 13:25:38 -04:00
parent f44af10cdd
commit ec1420c19b
7 changed files with 167 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
UI/Templates/MailerUI/UIxMailEditor.wox
View File

@@ -5,17 +5,59 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:label="OGo:label">
<md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
<div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
<div class="sg-toolbar-group-last">
<md-button class="sg-icon-button" label:aria-label="More">
<md-icon>more_vert</md-icon>
</md-button>
</div>
<md-dialog flex="80" flex-sm="100">
<md-toolbar class="md-padding">
<!-- TOOLBAR TO SHOW CC/BCC/ATTACHMENT FIELDS -->
<div class="md-toolbar-tools">
<md-button ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
<md-button ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
<md-button>
<label for="file-input">
Add files
</label>
</md-button>
<input id="file-input" type="file"
nv-file-select="nv-file-select"
multiple="multiple"
uploader="editor.uploader"
ng-show="false"/>
<md-menu>
<md-button label:aria-label="More mail options" class="iconBtton" ng-click="$mdOpenMenu($event)">
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
<md-checkbox ng-model="editor.message.editable.receipt">
<var:string label:value="Receipt"/>
</md-checkbox>
</md-button>
</md-menu-item>
<md-menu-item>
<div layout="row" layout-align="center center">
<span>
<var:string label:value="Priority"/>
</span>
<md-slider flex="flex"
md-discrete="md-discrete"
ng-model="editor.message.editable.priority"
step="1"
min="1"
max="5"
label:aria-label="Priority">
</md-slider>
</div>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</md-toolbar>
<md-content class="md-padding bg-sogoPaper-50">
<md-dialog-content>
<form>
<header>
@@ -121,56 +163,6 @@
</md-list>
</div>
<!-- </div> -->
<!-- TOOLBAR TO SHOW CC/BCC/ATTACHMENT FIELDS -->
<div layout="column" layout-align="start end">
<md-button ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
<md-button ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
<md-button>
<label for="file-input">
Add files
</label>
</md-button>
<input id="file-input" type="file"
nv-file-select="nv-file-select"
multiple="multiple"
uploader="editor.uploader"
ng-show="false"/>
<md-menu>
<md-button label:aria-label="More mail options" class="iconBtton" ng-click="$mdOpenMenu($event)">
<md-icon>more_vert</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
<md-checkbox ng-model="editor.message.editable.receipt">
<var:string label:value="Receipt"/>
</md-checkbox>
</md-button>
</md-menu-item>
<md-menu-item>
<div layout="row" layout-align="center center">
<span>
<var:string label:value="Priority"/>
</span>
<md-slider flex="flex"
md-discrete="md-discrete"
ng-model="editor.message.editable.priority"
step="1"
min="1"
max="5"
label:aria-label="Priority">
</md-slider>
</div>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</header>
<!-- MESSAGE CONTENT -->
@@ -187,5 +179,6 @@
</div>
</div>
</form>
</md-content>
</md-dialog-content>
</md-dialog>
</container>

2
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
View File

@@ -48,7 +48,7 @@
</md-virtual-repeat-container>
<md-button class="md-fab md-fab-bottom-right md-accent"
label:aria-label="Write a new message"
ui-sref="mail.account.mailbox.newMessage({accountId: mailbox.account.id, mailboxId: (mailbox.selectedFolder.path | encodeUri)})">
ng-click="mailbox.newMessage($event)">
<md-icon>add</md-icon>
</md-button>
</md-content>

10
UI/Templates/MailerUI/UIxMailViewTemplate.wox
View File

@@ -63,24 +63,24 @@
<!-- todo: Replace md-tooltip values by localizable string variable -->
<md-button class="sg-icon-button"
ng-hide="viewer.message.isDraft"
ui-sref="mail.account.mailbox.message.action({accountId: viewer.account.id, mailboxId: (viewer.mailbox.path | encodeUri), messageId: viewer.message.uid, actionName: 'reply'})"
ng-click="viewer.reply($event)"
aria-label="reply">
<md-tooltip md-direction="left"><var:string label:value="Reply to Sender Only"/></md-tooltip>
<md-icon>reply</md-icon>
</md-button>
<md-button class="sg-icon-button" aria-label="Reply All"
ng-hide="message.isDraft"
ui-sref="mail.account.mailbox.message.action({accountId: viewer.account.id, mailboxId: (viewer.mailbox.path | encodeUri), messageId: viewer.message.uid, actionName: 'replyall'})">
ng-hide="viewer.message.isDraft"
ng-click="viewer.replyAll($event)">
<md-icon>reply_all</md-icon>
</md-button>
<md-button class="sg-icon-button" aria-label="Forward"
ng-hide="viewer.message.isDraft"
ui-sref="mail.account.mailbox.message.action({accountId: viewer.account.id, mailboxId: (viewer.mailbox.path | encodeUri), messageId: viewer.message.uid, actionName: 'forward'})">
ng-click="viewer.forward($event)">
<md-icon>forward</md-icon>
</md-button>
<md-button class="sg-icon-button" aria-label="Edit"
ng-show="viewer.message.isDraft"
ui-sref="mail.account.mailbox.message.edit({accountId: viewer.account.id, mailboxId: (viewer.mailbox.path | encodeUri), messageId: viewer.message.uid})">
ng-click="viewer.edit($event)">
<md-icon>create</md-icon>
</md-button>
<md-button class="sg-icon-button" aria-label="Delete"

88
UI/WebServerResources/js/Mailer.app.js
View File

@@ -53,19 +53,19 @@
stateMessages: stateMessages
}
})
.state('mail.account.mailbox.newMessage', {
url: '/new',
views: {
'mailbox@mail': {
templateUrl: 'UIxMailEditor', // UI/Templates/MailerUI/UIxMailEditor.wox
controller: 'MessageEditorController',
controllerAs: 'editor'
}
},
resolve: {
stateMessage: stateNewMessage
}
})
// .state('mail.account.mailbox.newMessage', {
// url: '/new',
// views: {
// 'mailbox@mail': {
// templateUrl: 'UIxMailEditor', // UI/Templates/MailerUI/UIxMailEditor.wox
// controller: 'MessageEditorController',
// controllerAs: 'editor'
// }
// },
// resolve: {
// stateMessage: stateNewMessage
// }
// })
.state('mail.account.mailbox.message', {
url: '/:messageId',
views: {
@@ -78,30 +78,30 @@
resolve: {
stateMessage: stateMessage
}
})
.state('mail.account.mailbox.message.edit', {
url: '/edit',
views: {
'mailbox@mail': {
templateUrl: 'UIxMailEditor', // UI/Templates/MailerUI/UIxMailEditor.wox
controller: 'MessageEditorController',
controllerAs: 'editor'
}
},
resolve: {
stateContent: stateContent
}
})
.state('mail.account.mailbox.message.action', {
url: '/{actionName:(?:reply|replyall|forward)}',
views: {
'mailbox@mail': {
templateUrl: 'UIxMailEditor', // UI/Templates/MailerUI/UIxMailEditor.wox
controller: 'MessageEditorController',
controllerAs: 'editor'
}
}
});
// .state('mail.account.mailbox.message.edit', {
// url: '/edit',
// views: {
// 'mailbox@mail': {
// templateUrl: 'UIxMailEditor', // UI/Templates/MailerUI/UIxMailEditor.wox
// controller: 'MessageEditorController',
// controllerAs: 'editor'
// }
// },
// resolve: {
// stateContent: stateContent
// }
// })
// .state('mail.account.mailbox.message.action', {
// url: '/{actionName:(?:reply|replyall|forward)}',
// views: {
// 'mailbox@mail': {
// templateUrl: 'UIxMailEditor', // UI/Templates/MailerUI/UIxMailEditor.wox
// controller: 'MessageEditorController',
// controllerAs: 'editor'
// }
// }
// });
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/Mail');
@@ -176,10 +176,10 @@
/**
* @ngInject
*/
stateNewMessage.$inject = ['stateAccount'];
function stateNewMessage(stateAccount) {
return stateAccount.$newMessage();
}
// stateNewMessage.$inject = ['stateAccount'];
// function stateNewMessage(stateAccount) {
// return stateAccount.$newMessage();
// }
/**
* @ngInject
@@ -203,10 +203,10 @@
/**
* @ngInject
*/
stateContent.$inject = ['stateMessage'];
function stateContent(stateMessage) {
return stateMessage.$editableContent();
}
// stateContent.$inject = ['stateMessage'];
// function stateContent(stateMessage) {
// return stateMessage.$editableContent();
// }
/**
* @ngInject

20
UI/WebServerResources/js/Mailer/MailboxController.js
View File

@@ -6,8 +6,8 @@
/**
* @ngInject
*/
MailboxController.$inject = ['$state', '$timeout', 'stateAccounts', 'stateAccount', 'stateMailbox', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox'];
function MailboxController($state, $timeout, stateAccounts, stateAccount, stateMailbox, encodeUriFilter, focus, Dialog, Account, Mailbox) {
MailboxController.$inject = ['$state', '$timeout', '$mdDialog', 'stateAccounts', 'stateAccount', 'stateMailbox', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox'];
function MailboxController($state, $timeout, $mdDialog, stateAccounts, stateAccount, stateMailbox, encodeUriFilter, focus, Dialog, Account, Mailbox) {
var vm = this;
Mailbox.selectedFolder = stateMailbox;
@@ -25,6 +25,7 @@
vm.sort = sort;
vm.sortedBy = sortedBy;
vm.cancelSearch = cancelSearch;
vm.newMessage = newMessage;
vm.mode = { search: false };
function selectMessage(message) {
@@ -88,6 +89,21 @@
vm.selectedFolder.$filter();
}
function newMessage($event) {
$mdDialog.show({
parent: angular.element(document.body),
targetEvent: $event,
clickOutsideToClose: true,
escapeToClose: true,
templateUrl: 'UIxMailEditor',
controller: 'MessageEditorController',
controllerAs: 'editor',
locals: {
stateAccounts: vm.accounts,
stateMessage: vm.account.$newMessage()
}
});
}
}
angular

45
UI/WebServerResources/js/Mailer/MessageController.js
View File

@@ -6,16 +6,21 @@
/**
* @ngInject
*/
MessageController.$inject = ['$scope', '$state', 'stateAccount', 'stateMailbox', 'stateMessage', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox', 'Message'];
function MessageController($scope, $state, stateAccount, stateMailbox, stateMessage, encodeUriFilter, focus, Dialog, Account, Mailbox, Message) {
MessageController.$inject = ['$scope', '$state', '$mdDialog', 'stateAccounts', 'stateAccount', 'stateMailbox', 'stateMessage', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox', 'Message'];
function MessageController($scope, $state, $mdDialog, stateAccounts, stateAccount, stateMailbox, stateMessage, encodeUriFilter, focus, Dialog, Account, Mailbox, Message) {
var vm = this;
vm.accounts = stateAccounts;
vm.account = stateAccount;
vm.mailbox = stateMailbox;
vm.message = stateMessage;
vm.service = Message;
vm.tags = { searchText: '', selected: '' };
vm.doDelete = doDelete;
vm.reply = reply;
vm.replyAll = replyAll;
vm.forward = forward;
vm.edit = edit;
// Watch the message model "flags" attribute to remove on-the-fly a tag from the IMAP message
// when removed from the message viewer.
@@ -39,6 +44,42 @@
$state.go('mail.account.mailbox', { accountId: stateAccount.id, mailboxId: encodeUriFilter(stateMailbox.path) });
});
}
function showMailEditor($event, message) {
$mdDialog.show({
parent: angular.element(document.body),
targetEvent: $event,
clickOutsideToClose: true,
escapeToClose: true,
templateUrl: 'UIxMailEditor',
controller: 'MessageEditorController',
controllerAs: 'editor',
locals: {
stateAccounts: vm.accounts,
stateMessage: message
}
});
}
function reply($event) {
var message = vm.message.$reply();
showMailEditor($event, message);
}
function replyAll($event) {
var message = vm.message.$replyAll();
showMailEditor($event, message);
}
function forward($event) {
var message = vm.message.$forward();
showMailEditor($event, message);
}
function edit($event) {
var message = vm.message.$editableContent();
showMailEditor($event, message);
}
}
angular

11
UI/WebServerResources/js/Mailer/MessageEditorController.js
View File

@@ -6,8 +6,8 @@
/**
* @ngInject
*/
MessageEditorController.$inject = ['$stateParams', '$state', '$q', 'FileUploader', 'stateAccounts', 'stateMessage', '$timeout', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox', 'AddressBook', 'Preferences'];
function MessageEditorController($stateParams, $state, $q, FileUploader, stateAccounts, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox, AddressBook, Preferences) {
MessageEditorController.$inject = ['$stateParams', '$state', '$q', '$mdDialog', 'FileUploader', 'stateAccounts', 'stateMessage', '$timeout', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox', 'AddressBook', 'Preferences'];
function MessageEditorController($stateParams, $state, $q, $mdDialog, FileUploader, stateAccounts, stateMessage, $timeout, encodeUriFilter, focus, Dialog, Account, Mailbox, AddressBook, Preferences) {
var vm = this;
vm.autocomplete = {to: {}, cc: {}, bcc: {}};
@@ -71,10 +71,7 @@
if (vm.autosave)
$timeout.cancel(vm.autosave);
if ($state.params.mailboxId)
$state.go('mail.account.mailbox', { accountId: $state.params.accountId, mailboxId: $state.params.mailboxId });
else
$state.go('mail');
$mdDialog.cancel();
}
function send() {
@@ -82,7 +79,7 @@
$timeout.cancel(vm.autosave);
vm.message.$send().then(function(data) {
$state.go('mail');
$mdDialog.hide();
}, function(data) {
Dialog.alert(l(data.status), l(data.message));
});