From ec1420c19b3748345a1edda617988ed6d06ecbb6 Mon Sep 17 00:00:00 2001
From: Ludovic Marcotte <lmarcotte@inverse.ca>
Date: Sun, 2 Aug 2015 13:25:38 -0400
Subject: [PATCH] (feat) now use mdDialog for message composition

---
 UI/Templates/MailerUI/UIxMailEditor.wox       | 111 ++++++++----------
 .../MailerUI/UIxMailFolderTemplate.wox        |   2 +-
 UI/Templates/MailerUI/UIxMailViewTemplate.wox |  10 +-
 UI/WebServerResources/js/Mailer.app.js        |  88 +++++++-------
 .../js/Mailer/MailboxController.js            |  20 +++-
 .../js/Mailer/MessageController.js            |  45 ++++++-
 .../js/Mailer/MessageEditorController.js      |  11 +-
 7 files changed, 167 insertions(+), 120 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index 4ccc8dd48..443b5e9cb 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -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>
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index af4cabe82..0e83fb99f 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -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>
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index 304014abe..943baabfc 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -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"
diff --git a/UI/WebServerResources/js/Mailer.app.js b/UI/WebServerResources/js/Mailer.app.js
index dcfab44a7..3df880861 100644
--- a/UI/WebServerResources/js/Mailer.app.js
+++ b/UI/WebServerResources/js/Mailer.app.js
@@ -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
diff --git a/UI/WebServerResources/js/Mailer/MailboxController.js b/UI/WebServerResources/js/Mailer/MailboxController.js
index 6b04fa54f..39625ffae 100644
--- a/UI/WebServerResources/js/Mailer/MailboxController.js
+++ b/UI/WebServerResources/js/Mailer/MailboxController.js
@@ -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
diff --git a/UI/WebServerResources/js/Mailer/MessageController.js b/UI/WebServerResources/js/Mailer/MessageController.js
index c72e45db2..b887a9c06 100644
--- a/UI/WebServerResources/js/Mailer/MessageController.js
+++ b/UI/WebServerResources/js/Mailer/MessageController.js
@@ -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
diff --git a/UI/WebServerResources/js/Mailer/MessageEditorController.js b/UI/WebServerResources/js/Mailer/MessageEditorController.js
index 7b1a9de9b..95ee4343c 100644
--- a/UI/WebServerResources/js/Mailer/MessageEditorController.js
+++ b/UI/WebServerResources/js/Mailer/MessageEditorController.js
@@ -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));
       });