From 2720aebf0459ec7f070d3d015632fb8f4d5d89f9 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 4 Sep 2015 17:31:16 -0400
Subject: [PATCH] Initial popup view for messages

---
 UI/Common/UIxPageFrame.m                      |   9 +-
 UI/MailerUI/product.plist                     |   4 +
 UI/Templates/MailerUI/UIxMailPopupView.wox    |  45 ++--
 UI/Templates/MailerUI/UIxMailViewTemplate.wox |  26 ++-
 UI/WebServerResources/Gruntfile.js            |   5 +-
 UI/WebServerResources/js/Common/Common.app.js |   3 +-
 .../js/Common/navController.js                |   1 +
 .../js/Mailer/Mailer.popup.js                 | 215 ++++++++++++++++++
 .../js/Mailer/MessageController.js            |  35 ++-
 UI/WebServerResources/scss/views/_view.scss   |  14 ++
 10 files changed, 316 insertions(+), 41 deletions(-)
 create mode 100644 UI/WebServerResources/js/Mailer/Mailer.popup.js

diff --git a/UI/Common/UIxPageFrame.m b/UI/Common/UIxPageFrame.m
index 1867b88c6..0f8a8cb0c 100644
--- a/UI/Common/UIxPageFrame.m
+++ b/UI/Common/UIxPageFrame.m
@@ -249,14 +249,7 @@
 
 - (NSString *) commonLocalizableStrings
 {
-  NSString *rc;
-
-  if (isPopup)
-    rc = @"";
-  else
-    rc = [NSString stringWithFormat: @"var clabels = %@;", [self _stringsForFramework: nil]];
-
-  return rc;
+  return [NSString stringWithFormat: @"var clabels = %@;", [self _stringsForFramework: nil]];
 }
 
 - (NSString *) productLocalizableStrings
diff --git a/UI/MailerUI/product.plist b/UI/MailerUI/product.plist
index d6c9fb8eb..412850d6b 100644
--- a/UI/MailerUI/product.plist
+++ b/UI/MailerUI/product.plist
@@ -351,6 +351,10 @@
         //   protectedBy = "View";
         //   pageName    = "UIxMailViewTemplate";
         // };
+        UIxMailPopupView = {
+          protectedBy = "View";
+          pageName    = "UIxMailPopupView";
+        };
         UIxMailEditor = {
           protectedBy = "View";
           pageName    = "UIxMailEditor";
diff --git a/UI/Templates/MailerUI/UIxMailPopupView.wox b/UI/Templates/MailerUI/UIxMailPopupView.wox
index f3d17c577..a2c10b94b 100644
--- a/UI/Templates/MailerUI/UIxMailPopupView.wox
+++ b/UI/Templates/MailerUI/UIxMailPopupView.wox
@@ -1,29 +1,32 @@
 <?xml version="1.0" standalone="yes"?>
-  <var:component xmlns="http://www.w3.org/1999/xhtml"
+<!DOCTYPE var:component>
+<var:component
+    xmlns="http://www.w3.org/1999/xhtml"
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:uix="OGo:uix"
     xmlns:label="OGo:label"
     className="UIxPageFrame"
     title="title"
-    const:jsFiles="SOGoAutoCompletion.js"
-    const:userDefaultsKeys="SOGoMailDisplayRemoteInlineImages"
-    const:popup="YES">
-    <script type="text/javascript">
-      var messageName = '<var:string value="clientObject.relativeImap4Name"/>';
-      var mailboxName = '/<var:string value="clientObject.container.container.nameInContainer"/>/<var:string value="clientObject.container.nameInContainer"/>';
-    </script>
-    <var:component className="UIxMailView" />
-    <div class="menu" id="addressMenu">
-      <ul>
-        <li id="add_to_addressbook"><var:string label:value="Add to Address Book..."/></li>
-        <li id="compose_mailto"><var:string label:value="Compose Mail To"/></li>
-        <li id="create_filter"><var:string label:value="Create Filter From Message..."/></li>
-      </ul>
+    const:popup="YES"
+    const:jsFiles="Common.js, Contacts.services.js, Preferences.services.js, Mailer.app.popup.js, Mailer.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js">
+
+  <main class="layout-fill" ng-controller="navController">
+    <div id="detailView" class="view-detail" layout="column" layout-align="start center"
+         ui-view="message">
+      <div class="sg-progress-circular-floating">
+        <md-progress-circular class="md-accent ng-cloak"
+                              md-mode="indeterminate"
+                              md-diameter="32"><!-- progress --></md-progress-circular>
+      </div>
     </div>
-    <div class="menu" id="imageMenu">
-      <ul>
-        <li id="save_image"><var:string label:value="Save Image"/></li>
-      </ul>
-    </div>
-  </var:component>
+  </main>
+
+  <script type="text/ng-template" id="UIxMailViewTemplate">
+    <var:component className="UIxMailViewTemplate" />
+  </script>
+
+  <script type="text/ng-template" id="UIxMailEditor">
+    <var:component className="UIxMailEditor" />
+  </script>
+</var:component>
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index 83c8b8e3f..e81ba896a 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -10,11 +10,24 @@
   <div layout="column" class="layout-fill">
     <md-toolbar>
       <div class="md-toolbar-tools">
+        <md-button class="sg-icon-button"
+                   ng-if="isPopup"
+                   label:aria-label="Close"
+                   ng-click="viewer.closePopup()">
+          <md-icon>close</md-icon>
+        </md-button>
+        <md-button class="sg-icon-button hide show-sm"
+                   ng-hide="isPopup"
+                   label:aria-label="Close"
+                   ng-click="viewer.close()">
+          <md-icon>arrow_back</md-icon>
+        </md-button>
+        <div class="md-flex hide show-sm"><!-- spacer --></div>
         <md-button class="sg-icon-button" label:aria-label="flagged" ng-click="viewer.message.toggleFlag()">
           <md-icon ng-class="{'icon-star': viewer.message.isflagged,
                              'icon-star-border': !viewer.message.isflagged}"><!-- flag --></md-icon>
         </md-button>
-        <div class="md-flex"><!-- spacer --></div>
+        <div class="md-flex hide-sm"><!-- spacer --></div>
         <md-button class="sg-icon-button"
                    ng-hide="viewer.message.isDraft"
                    ng-click="viewer.reply($event)"
@@ -38,6 +51,12 @@
           <md-tooltip md-direction="bottom"><var:string label:value="Delete selected message or folder"/></md-tooltip>
           <md-icon>delete</md-icon>
         </md-button>
+        <md-button class="sg-icon-button" label:aria-label="Delete"
+                   ng-hide="isPopup"
+                   ng-click="viewer.openPopup()">
+          <md-tooltip md-direction="bottom"><var:string label:value="Open in New Mail Window"/></md-tooltip>
+          <md-icon>open_in_new</md-icon>
+        </md-button>
         <md-menu>
           <md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
             <md-icon>more_vert</md-icon>
@@ -63,11 +82,6 @@
             </md-menu-item>
           </md-menu-content>
         </md-menu>
-        <md-button class="sg-icon-button hide show-sm"
-                   label:aria-label="Close"
-                   ng-click="viewer.close()">
-          <md-icon>close</md-icon>
-        </md-button>
       </div>
     </md-toolbar>
     <md-content class="md-flex md-static">
diff --git a/UI/WebServerResources/Gruntfile.js b/UI/WebServerResources/Gruntfile.js
index bee2efb39..3cf6af608 100644
--- a/UI/WebServerResources/Gruntfile.js
+++ b/UI/WebServerResources/Gruntfile.js
@@ -6,8 +6,9 @@ module.exports = function(grunt) {
     'js/Scheduler.js': ['js/Scheduler/Scheduler.app.js', 'js/Scheduler/*Controller.js', 'js/Scheduler/*.directive.js'],
     'js/Contacts.services.js': ['js/Contacts/*.service.js'],
     'js/Contacts.js': ['js/Contacts/Contacts.app.js', 'js/Contacts/*Controller.js', 'js/Contacts/*.directive.js'],
-    'js/Mailer.services.js': ['js/Mailer/*.service.js', 'js/Mailer/*Controller.js'],
-    'js/Mailer.js': ['js/Mailer/Mailer.app.js', 'js/Mailer/*.directive.js'],
+    'js/Mailer.services.js': ['js/Mailer/*.service.js', 'js/Mailer/*Controller.js', 'js/Mailer/*.directive.js'],
+    'js/Mailer.js': ['js/Mailer/Mailer.app.js'],
+    'js/Mailer.app.popup.js': ['js/Mailer/Mailer.popup.js'],
     'js/Preferences.services.js': ['js/Preferences/*.service.js'],
     'js/Preferences.js': ['js/Preferences/Preferences.app.js', 'js/Preferences/*Controller.js']
   };
diff --git a/UI/WebServerResources/js/Common/Common.app.js b/UI/WebServerResources/js/Common/Common.app.js
index 0fae33594..4b344c392 100644
--- a/UI/WebServerResources/js/Common/Common.app.js
+++ b/UI/WebServerResources/js/Common/Common.app.js
@@ -3,8 +3,9 @@
 (function() {
   'use strict';
 
-  angular.module('SOGo.Common', ['ngMaterial'])
+  angular.module('SOGo.Common', ['ngAnimate', 'ngMaterial'])
     .value('sgSettings', {
+      isPopup: document.body.classList.contains('popup'),
       baseURL: function() {
         return ApplicationBaseURL || null;
       },
diff --git a/UI/WebServerResources/js/Common/navController.js b/UI/WebServerResources/js/Common/navController.js
index c9d13ad5c..b13f8fdef 100644
--- a/UI/WebServerResources/js/Common/navController.js
+++ b/UI/WebServerResources/js/Common/navController.js
@@ -12,6 +12,7 @@
   navController.$inject =  ['$scope', '$timeout', '$interval', '$http', '$mdSidenav', '$mdBottomSheet', '$mdMedia', '$log', 'sgConstant', 'sgSettings', 'Alarm'];
   function navController($scope, $timeout, $interval, $http, $mdSidenav, $mdBottomSheet, $mdMedia, $log, sgConstant, sgSettings, Alarm) {
 
+    $scope.isPopup = sgSettings.isPopup;
     $scope.activeUser = sgSettings.activeUser();
     $scope.baseURL = sgSettings.baseURL();
 
diff --git a/UI/WebServerResources/js/Mailer/Mailer.popup.js b/UI/WebServerResources/js/Mailer/Mailer.popup.js
new file mode 100644
index 000000000..1d469c781
--- /dev/null
+++ b/UI/WebServerResources/js/Mailer/Mailer.popup.js
@@ -0,0 +1,215 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* JavaScript for SOGo.MailerUI module */
+
+(function() {
+  'use strict';
+
+  angular.module('SOGo.MailerUI', ['ngSanitize', 'ui.router', 'ck', 'angularFileUpload', 'SOGo.Common', 'SOGo.ContactsUI', 'ngAnimate', 'SOGo.PreferencesUI'])
+    .config(configure)
+    .run(runBlock)
+    .controller('MessageEditorControllerPopup', MessageEditorControllerPopup);
+
+  /**
+   * @ngInject
+   */
+  configure.$inject = ['$stateProvider', '$urlRouterProvider'];
+  function configure($stateProvider, $urlRouterProvider) {
+    $stateProvider
+      .state('mail', {
+        url: '/Mail',
+        abstract: true,
+        views: {
+          message: {
+            template: '<ui-view/>'
+          }
+        },
+        resolve: {
+          stateAccounts: stateAccounts
+        }
+      })
+      .state('mail.account', {
+        url: '/:accountId',
+        abstract: true,
+        template: '<ui-view id="account"/>',
+        resolve: {
+          stateAccount: stateAccount
+        }
+      })
+      .state('mail.account.mailbox', {
+        url: '/:mailboxId',
+        abstract: true,
+        template: '<ui-view id="mailbox"/>',
+        resolve: {
+          stateMailbox: stateMailbox
+        }
+      })
+      .state('mail.account.mailbox.newMessage', {
+        url: '/new',
+        views: {
+          'message@': {
+            template: '<ui-view/>',
+            controller: 'MessageEditorControllerPopup'
+          }
+        },
+        resolve: {
+          stateMessage: stateNewMessage
+        }
+      })
+      .state('mail.account.mailbox.message', {
+        url: '/:messageId',
+        views: {
+          'message@': {
+            templateUrl: 'UIxMailViewTemplate', // UI/Templates/MailerUI/UIxMailViewTemplate.wox
+            controller: 'MessageController',
+            controllerAs: 'viewer'
+          }
+        },
+        resolve: {
+          stateMessage: stateMessage
+        }
+      })
+      .state('mail.account.mailbox.message.edit', {
+        url: '/edit',
+        views: {
+          'message@': {
+            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: {
+          message: {
+            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/0/folderINBOX/new');
+  }
+
+  /**
+   * @ngInject
+   */
+  stateAccounts.$inject = ['$q', 'Account'];
+  function stateAccounts($q, Account) {
+    var promise = Account.$findAll();
+    // Fetch list of mailboxes for each account
+    return promise.then(function(accounts) {
+      var promises = [];
+      angular.forEach(accounts, function(account, i) {
+        var mailboxes = account.$getMailboxes();
+        promises.push(mailboxes.then(function(objects) {
+          return account;
+        }));
+      });
+      return $q.all(promises);
+    });
+  }
+
+  /**
+   * @ngInject
+   */
+  stateAccount.$inject = ['$stateParams', 'stateAccounts'];
+  function stateAccount($stateParams, stateAccounts) {
+    return _.find(stateAccounts, function(account) {
+      return account.id == $stateParams.accountId;
+    });
+  }
+
+  /**
+   * @ngInject
+   */
+  stateMailbox.$inject = ['$stateParams', 'stateAccount', 'decodeUriFilter'];
+  function stateMailbox($stateParams, stateAccount, decodeUriFilter) {
+    var mailboxId = decodeUriFilter($stateParams.mailboxId),
+        _find;
+    // Recursive find function
+    _find = function(mailboxes) {
+      var mailbox = _.find(mailboxes, function(o) {
+        return o.path == mailboxId;
+      });
+      if (!mailbox) {
+        angular.forEach(mailboxes, function(o) {
+          if (!mailbox && o.children && o.children.length > 0) {
+            mailbox = _find(o.children);
+          }
+        });
+      }
+      return mailbox;
+    };
+    return _find(stateAccount.$mailboxes);
+  }
+
+  /**
+   * @ngInject
+   */
+  stateNewMessage.$inject = ['stateAccount'];
+  function stateNewMessage(stateAccount) {
+    return stateAccount.$newMessage();
+  }
+
+  /**
+   * @ngInject
+   */
+  stateMessage.$inject = ['encodeUriFilter', '$stateParams', '$state', 'stateMailbox', 'Message'];
+  function stateMessage(encodeUriFilter, $stateParams, $state, stateMailbox, Message) {
+    var data = { uid: $stateParams.messageId.toString() },
+        message = new Message(stateMailbox.$account.id, stateMailbox, data);
+
+    return message.$reload();
+  }
+
+  /**
+   * @ngInject
+   */
+  stateContent.$inject = ['stateMessage'];
+  function stateContent(stateMessage) {
+    return stateMessage.$editableContent();
+  }
+
+  /**
+   * @ngInject
+   */
+  runBlock.$inject = ['$rootScope'];
+  function runBlock($rootScope) {
+    $rootScope.$on('$routeChangeError', function(event, current, previous, rejection) {
+      console.error(event, current, previous, rejection);
+    });
+  }
+
+  /**
+   * @ngInject
+   */
+  MessageEditorControllerPopup.$inject = ['$window', '$mdDialog', 'stateAccounts', 'stateMessage'];
+  function MessageEditorControllerPopup($window, $mdDialog, stateAccounts, stateMessage) {
+    $mdDialog
+      .show({
+        hasBackdrop: false,
+        disableParentScroll: false,
+        clickOutsideToClose: false,
+        escapeToClose: false,
+        templateUrl: 'UIxMailEditor',
+        controller: 'MessageEditorController',
+        controllerAs: 'editor',
+        locals: {
+          stateAccounts: stateAccounts,
+          stateMessage: stateMessage,
+          stateRecipients: []
+        }
+      })
+      .finally(function() {
+        if ($window.opener)
+          $window.close();
+      });
+  }
+  
+})();
diff --git a/UI/WebServerResources/js/Mailer/MessageController.js b/UI/WebServerResources/js/Mailer/MessageController.js
index a2b8ea8ca..127d3aa01 100644
--- a/UI/WebServerResources/js/Mailer/MessageController.js
+++ b/UI/WebServerResources/js/Mailer/MessageController.js
@@ -6,9 +6,9 @@
   /**
    * @ngInject
    */
-  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, messageDialog = null;
+  MessageController.$inject = ['$window', '$scope', '$state', '$mdDialog', 'stateAccounts', 'stateAccount', 'stateMailbox', 'stateMessage', 'encodeUriFilter', 'sgSettings', 'sgFocus', 'Dialog', 'Account', 'Mailbox', 'Message'];
+  function MessageController($window, $scope, $state, $mdDialog, stateAccounts, stateAccount, stateMailbox, stateMessage, encodeUriFilter, sgSettings, focus, Dialog, Account, Mailbox, Message) {
+    var vm = this, messageDialog = null, popupWindow = null;
 
     vm.accounts = stateAccounts;
     vm.account = stateAccount;
@@ -22,6 +22,8 @@
     vm.replyAll = replyAll;
     vm.forward = forward;
     vm.edit = edit;
+    vm.openPopup = openPopup;
+    vm.closePopup = closePopup;
     vm.newMessage = newMessage;
     vm.saveMessage = saveMessage;
     vm.viewRawSource = viewRawSource;
@@ -103,6 +105,33 @@
       });
     }
 
+    function openPopup() {
+      var url = [sgSettings.baseURL(),
+                 'UIxMailPopupView#/Mail',
+                 vm.message.accountId,
+                 // The double-encoding is necessary
+                 encodeUriFilter(encodeUriFilter(vm.message.$mailbox.path)),
+                 vm.message.uid]
+          .join('/'),
+          wId = vm.message.$absolutePath();
+      popupWindow = $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(','));
+    }
+
+    function closePopup() {
+      $window.close();
+    }
+
     function newMessage($event, recipient) {
       var message = vm.account.$newMessage();
       showMailEditor($event, message, [recipient]);
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index 549c62b37..783b6b9af 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -11,6 +11,20 @@
   max-height: 100%;
 }
 
+body.popup {
+  .viewer {
+    width: 100%;
+  }
+  .view-detail {
+    max-width: 100%;
+  }
+  @include from(md) {
+    [class|="view"] {
+      position: static;
+    }
+  }
+}
+
 // We make intensive use of the list/detail view pattern, here are some base
 // definitions for this
 // ----------------------------------------------------------------------------