(js) Compose new message in a popup window

NEWS

@@ -5,6 +5,7 @@ Enhancements
  - [web] show locale codes beside language names in Preferences module
  - [web] fixed visual glitches in Month view with Firefox
  - [web] mail editor can now be expanded horizontally and automatically expands vertically
+ - [web] compose a new message inline or in a popup window
 
 Bug fixes
  - [core] remove all alarms before sending IMIP replies (#3925)

UI/MailerUI/English.lproj/Localizable.strings

@@ -53,7 +53,13 @@
 /* Mail account main windows */
 "Welcome to the SOGo Mailer. Use the folder tree on the left to browse your mail accounts!" = "Welcome to the SOGo Mailer. Use the folder tree on the left to browse your mail accounts!";
 "Read messages"       = "Read messages";
+
+/* Tooltip for fab button */
 "Write a new message" = "Write a new message";
+
+/* Tooltip for fab button */
+"Write a message in new window" = "Write a message in new window";
+
 "Share" = "Share";
 "Account" = "Account";
 "Shared Account" = "Shared Account";

UI/Templates/MailerUI/UIxMailEditor.wox

@@ -12,7 +12,8 @@
              nv-file-drop="nv-file-drop"
              nv-file-over="nv-file-over"
              over-class="sg-over-dropzone"
-             uploader="editor.uploader">
+             uploader="editor.uploader"
+             ng-controller="navController">
     <form name="messageForm">
       <md-toolbar>
         <div class="md-toolbar-tools">
@@ -231,7 +232,7 @@
         <md-input-container class="md-block sg-mail-editor-content">
           <textarea name="content" var:class="editorClass"
                     ck-locale="editor.localeCode"
-                    rows="10"
+                    rows="9"
                     ng-model="editor.message.editable.text"
                     md-no-resize="md-no-resize"
                     md-detect-hidden="md-detect-hidden" />

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -336,6 +336,28 @@
                  ng-click="mailbox.newMessage($event)">
         <md-icon>edit</md-icon>
       </md-button>
+      <md-fab-speed-dial
+        class="md-scale md-fab-bottom-right"
+        ng-cloak="ng-cloak"
+        md-direction="up">
+        <md-fab-trigger>
+          <md-button class="md-fab md-accent" label:aria-label="Write a new message">
+            <md-icon>edit</md-icon>
+          </md-button>
+        </md-fab-trigger>
+        <md-fab-actions>
+          <md-button class="md-fab md-raised md-mini" var:aria-label="Write a new message"
+                     ng-click="mailbox.newMessage($event)">
+            <md-tooltip md-direction="left"><var:string label:value="Write a new message"/></md-tooltip>
+            <md-icon>open_in_browser</md-icon>
+          </md-button>
+          <md-button class="md-fab md-raised md-mini" var:aria-label="Write a message in new window"
+                     ng-click="mailbox.newMessage($event, true)">
+            <md-tooltip md-direction="left"><var:string label:value="Write a message in new window"/></md-tooltip>
+            <md-icon>open_in_new</md-icon>
+          </md-button>
+        </md-fab-actions>
+      </md-fab-speed-dial>
     </md-content>
   </div>
 

UI/WebServerResources/js/Mailer/MailboxController.js

@@ -6,8 +6,8 @@
   /**
    * @ngInject
    */
-  MailboxController.$inject = ['$window', '$scope', '$timeout', '$q', '$state', '$mdDialog', '$mdToast', 'stateAccounts', 'stateAccount', 'stateMailbox', 'sgHotkeys', 'encodeUriFilter', 'sgFocus', 'Dialog', 'Account', 'Mailbox'];
+  MailboxController.$inject = ['$window', '$scope', '$timeout', '$q', '$state', '$mdDialog', '$mdToast', 'stateAccounts', 'stateAccount', 'stateMailbox', 'sgHotkeys', 'encodeUriFilter', 'sgSettings', 'sgFocus', 'Dialog', 'Account', 'Mailbox'];
-  function MailboxController($window, $scope, $timeout, $q, $state, $mdDialog, $mdToast, stateAccounts, stateAccount, stateMailbox, sgHotkeys, encodeUriFilter, focus, Dialog, Account, Mailbox) {
+  function MailboxController($window, $scope, $timeout, $q, $state, $mdDialog, $mdToast, stateAccounts, stateAccount, stateMailbox, sgHotkeys, encodeUriFilter, sgSettings, focus, Dialog, Account, Mailbox) {
     var vm = this,
         defaultWindowTitle = angular.element($window.document).find('title').attr('sg-default') || "SOGo",
         hotkeys = [];
@@ -156,32 +156,59 @@
       });
     }
 
-    function newMessage($event) {
+    function newMessage($event, inPopup) {
       var message;
 
       if (vm.messageDialog === null) {
-        message = vm.account.$newMessage();
+        if (inPopup)
-        vm.messageDialog = $mdDialog
+          _newMessageInPopup();
-          .show({
+        else {
-            parent: angular.element(document.body),
+          message = vm.account.$newMessage();
-            targetEvent: $event,
+          vm.messageDialog = $mdDialog
-            clickOutsideToClose: false,
+            .show({
-            escapeToClose: false,
+              parent: angular.element(document.body),
-            templateUrl: 'UIxMailEditor',
+              targetEvent: $event,
-            controller: 'MessageEditorController',
+              clickOutsideToClose: false,
-            controllerAs: 'editor',
+              escapeToClose: false,
-            locals: {
+              templateUrl: 'UIxMailEditor',
-              stateAccount: vm.account,
+              controller: 'MessageEditorController',
-              stateMessage: message,
+              controllerAs: 'editor',
-              stateRecipients: []
+              locals: {
-            }
+                stateAccount: vm.account,
-          })
+                stateMessage: message
-          .finally(function() {
+              }
-            vm.messageDialog = null;
+            })
-          });
+            .finally(function() {
+              vm.messageDialog = null;
+            });
+        }
       }
     }
 
+    function _newMessageInPopup() {
+      var url = [sgSettings.baseURL(),
+                 'UIxMailPopupView#!/Mail',
+                 vm.account.id,
+                 // The double-encoding is necessary
+                 encodeUriFilter(encodeUriFilter(vm.selectedFolder.path)),
+                 'new']
+          .join('/'),
+          wId = vm.selectedFolder.$id() + '/' + Math.random(0, 1000);
+      console.debug(url);
+      $window.open(url, wId,
+                   ["width=680",
+                    "height=520",
+                    "resizable=1",
+                    "scrollbars=1",
+                    "toolbar=0",
+                    "location=0",
+                    "directories=0",
+                    "status=0",
+                    "menubar=0",
+                    "copyhistory=0"]
+                   .join(','));
+    }
+
     /**
      * User has pressed up arrow key
      */

UI/WebServerResources/js/Mailer/Mailer.popup.js

@@ -215,8 +215,8 @@
   /**
    * @ngInject
    */
-  MessageEditorControllerPopup.$inject = ['$window', '$mdDialog', 'stateAccounts', 'stateMessage'];
+  MessageEditorControllerPopup.$inject = ['$window', '$mdDialog', 'stateAccount', 'stateMessage'];
-  function MessageEditorControllerPopup($window, $mdDialog, stateAccounts, stateMessage) {
+  function MessageEditorControllerPopup($window, $mdDialog, stateAccount, stateMessage) {
     $mdDialog
       .show({
         hasBackdrop: false,
@@ -227,9 +227,8 @@
         controller: 'MessageEditorController',
         controllerAs: 'editor',
         locals: {
-          stateAccounts: stateAccounts,
+          stateAccount: stateAccount,
-          stateMessage: stateMessage,
+          stateMessage: stateMessage
-          stateRecipients: []
         }
       })
       .finally(function() {

UI/WebServerResources/js/Mailer/MessageController.js

@@ -284,22 +284,22 @@
         _messageDialog(
           $mdDialog
             .show({
-            parent: angular.element(document.body),
+              parent: angular.element(document.body),
-            targetEvent: $event,
+              targetEvent: $event,
-            clickOutsideToClose: false,
+              clickOutsideToClose: false,
-            escapeToClose: false,
+              escapeToClose: false,
-            templateUrl: 'UIxMailEditor',
+              templateUrl: 'UIxMailEditor',
-            controller: 'MessageEditorController',
+              controller: 'MessageEditorController',
-            controllerAs: 'editor',
+              controllerAs: 'editor',
-            locals: {
+              locals: {
-              stateAccount: vm.account,
+                stateAccount: vm.account,
-              stateMessage: message
+                stateMessage: message
-            }
+              }
-          })
+            })
-          .finally(function() {
+            .finally(function() {
-            _messageDialog(null);
+              _messageDialog(null);
-            closePopup();
+              closePopup();
-          })
+            })
         );
       }
     }