From 7a2bc51e77336f60f8073a0a7dd2be6c53edb8a9 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 9 Jan 2015 15:58:11 -0500
Subject: [PATCH] Initial integration of ngMaterial in Webmail

---
 .../MailerUI/UIxMailFolderTemplate.wox        | 38 ++++----
 UI/Templates/MailerUI/UIxMailMainFrame.wox    | 90 ++++++++++++-------
 UI/Templates/UIxPageFrame.wox                 | 28 +++---
 UI/WebServerResources/Gruntfile.js            | 28 +++---
 UI/WebServerResources/bower.json              |  5 +-
 UI/WebServerResources/js/Common/ui-desktop.js | 18 ++--
 UI/WebServerResources/js/Common/ui.js         | 48 ++++++++++
 UI/WebServerResources/js/MailerUI.js          | 10 ++-
 8 files changed, 179 insertions(+), 86 deletions(-)
 create mode 100644 UI/WebServerResources/js/Common/ui.js

diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 8963ef2f1..f5c594ebb 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -6,23 +6,23 @@
    xmlns:rsrc="OGo:url"
    xmlns:label="OGo:label"
    xmlns:uix="OGo:uix">
-  <div id="messagesList">
-    <ul data-vs-repeat="56"
-        data-vs-scroll-parent="#messagesList">
-      <li ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
-          data-ng-class="{unread: !currentMessage.isread}">
-        <a data-ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
-           data-ui-sref-active="_selected">
-          <div class="name">
-            {{currentMessage.$shortAddress('from')}}
-            <span class="right" data-ng-bind-html="currentMessage.relativedate"><!-- date --></span>
-          </div>
-          <div class="subject">{{currentMessage.subject}}</div>
-          <i class="icon-ion-refresh"
-             data-ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
-        </a>
-      </li>
-    </ul>
-  </div>
-  <div id="messageView" data-ui-view="message"><!-- message view --></div>
+    <md-content md-scroll-y="md-scroll-y" style="width: 250px" id="messagesList">
+      <md-list data-n0-vs-repeat="56"
+               data-n0-vs-scroll-parent="#messagesList">
+        <md-item ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
+                 data-ng-class="{unread: !currentMessage.isread}">
+          <a data-ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
+             data-ui-sref-active="_selected">
+            <div class="name">
+              {{currentMessage.$shortAddress('from')}}
+              <span class="right" data-ng-bind-html="currentMessage.relativedate"><!-- date --></span>
+            </div>
+            <div class="subject">{{currentMessage.subject}}</div>
+            <i class="icon-ion-refresh"
+               data-ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
+          </a>
+        </md-item>
+      </md-list>
+    </md-content>
+    <md-content flex="flex" data-ui-view="message"><!-- message view --></md-content>
 </container>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index a831c673d..995efb350 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -30,6 +30,7 @@
   </var:foreach>
   </style>
 
+  <!--
   <div id="signatureFlagMessage" style="display: none" class="dialog right">
   </div>
 
@@ -49,12 +50,12 @@
       <li><var:string label:value="Open in New Mail Window" /></li>
       <li><var:string label:value="Copy Folder Location" /></li>
       <li><var:string label:value="Subscribe..." /></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Mark Folder Read" /></li>
       <li><var:string label:value="New Folder..." /></li>
       <li><var:string label:value="Compact This Folder" /></li>
       <li><var:string label:value="Export This Folder" /></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Search Messages..." /></li>
       <li><var:string label:value="Sharing..." /></li>
     </ul>
@@ -65,13 +66,13 @@
       <li><var:string label:value="Open in New Mail Window" /></li>
       <li><var:string label:value="Copy Folder Location" /></li>
       <li><var:string label:value="Subscribe..." /></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Mark Folder Read" /></li>
       <li><var:string label:value="New Subfolder..." /></li>
       <li><var:string label:value="Compact This Folder" /></li>
       <li><var:string label:value="Archive This Folder" /></li>
       <li><var:string label:value="Empty Trash" /></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Search Messages..." /></li>
       <li><var:string label:value="Sharing..." /></li>
     </ul>
@@ -82,7 +83,7 @@
       <li><var:string label:value="Open in New Mail Window" /></li>
       <li><var:string label:value="Copy Folder Location" /></li>
       <li><var:string label:value="Subscribe..." /></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Mark Folder Read" /></li>
       <li><var:string label:value="New Subfolder..." /></li>
       <li><var:string label:value="Rename Folder..." /></li>
@@ -90,7 +91,7 @@
       <li><var:string label:value="Archive This Folder" /></li>
       <li><var:string label:value="Delete Folder" /></li>
       <li><var:string label:value="Use This Folder For" /></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Search Messages..." /></li>
       <li><var:string label:value="Sharing..." /></li>
     </ul>
@@ -123,17 +124,17 @@
   <div class="f-dropdown" id="messageListMenu">
     <ul>
       <li><var:string label:value="Open Message In New Window"/></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Reply to Sender Only"/></li>
       <li><var:string label:value="Reply to All"/></li>
       <li><var:string label:value="Forward"/></li>
       <li><var:string label:value="Edit As New..."/></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Move To"/></li>
       <li><var:string label:value="Copy To"/></li>
       <li><var:string label:value="Label"/></li>
       <li><var:string label:value="Mark"/></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Save As..."/></li>
       <li><var:string label:value="View Message Source"/></li>
       <li><var:string label:value="Print Preview"/></li>
@@ -145,12 +146,12 @@
   <div class="f-dropdown" id="messagesListMenu">
     <ul>
       <li><var:string label:value="Forward"/></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Move To"/></li>
       <li><var:string label:value="Copy To"/></li>
       <li><var:string label:value="Label"/></li>
       <li><var:string label:value="Mark"/></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Save As..."/></li>
       <li><var:string label:value="Print Preview"/></li>
       <li><var:string label:value="Print..."/></li>
@@ -166,10 +167,10 @@
       <li><var:string label:value="Edit As New..."/></li>
       <li><var:string label:value="Move To"/></li>
       <li><var:string label:value="Copy To"/></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Label"/></li>
       <li><var:string label:value="Mark"/></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Save As..."/></li>
       <li><var:string label:value="View Message Source"/></li>
       <li><var:string label:value="Print Preview"/></li>
@@ -181,7 +182,7 @@
   <div class="f-dropdown" id="label-menu">
     <ul id="" class="choiceMenu">
       <li><var:string label:value="None" /></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <var:foreach list="availableLabels" item="currentLabel">
         <li var:class="currentLabel.name.asCSSIdentifier" var:data-name="currentLabel.name">  <var:string value="currentLabel.label"/></li>
       </var:foreach>
@@ -194,7 +195,7 @@
       <li><var:string label:value="Thread As Read" /></li>
       <li><var:string label:value="As Read By Date..." /></li>
       <li><var:string label:value="All Read" /></li>
-      <li><!-- separator --></li>
+      <li> separator </li>
       <li><var:string label:value="Flag" /></li>
     </ul>
   </div>
@@ -211,8 +212,9 @@
       <li id="save_image"><var:string label:value="Save Image"/></li>
     </ul>
   </div>
+  -->
 
-  <div data-ui-view="mailboxes"><!-- mailboxes list --></div>
+  <div ui-view="mailboxes" layout="row" layout-fill="layout-fill"><!-- mailboxes list --></div>
 
   <script type="text/ng-template" id="mailboxes.html">
 
@@ -237,25 +239,51 @@
       </ul>
     </div>
 
-    <div id="mailboxesList" class="folders-list">
-      <div class="newItemsToolbar">
-        <a class="button tiny radius split" data-ui-sref="mail.newMessage()"><var:string label:value="Compose"/><span data-dropdown-toggle="#draftsDrop"></span></a><br/>
-      </div>
-      <div class="scrollView">
-        <ul data-ng-repeat="account in accounts track by account.id">
-          <li>
-            <label>{{account.name}}
-            <button class="icon" label:title="New Folder..."
-               data-ng-click="newFolder(account)"><i class="icon-plus"><!-- new --></i></button></label>
-          </li>
+    <md-sidenav class="md-sidenav-left md-whiteframe-z1" md-component-id="left" md-is-locked-open="$media('gt-md')" layout="column">
+      <div style="text-align: center; position: absolute; top: 0; width: 100%; z-index: 100;">[ZONE DE NAVIGATION]</div>
+      <md-toolbar class="md-tall" layout-align="end start">
+        <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
+          <span class="md-flex">user@domain</span>
+        </h2>
+      </md-toolbar>
+      <md-content md-scroll-y="md-scroll-y" class="md-padding" ng-controller="LeftCtrl">
+        <md-button ng-click="close()" class="md-primary" hide-gt-md="hide-gt-md">Close</md-button>
+        <md-list ng-repeat="account in accounts track by account.id">
+          <md-item>
+            <md-item-content>
+              <div class="md-tile-content">
+                <md-button><h3>{{account.name}}</h3></md-button>
+              </div>
+            </md-item-content>
+          </md-item>
           <sg-folder-tree data-ng-repeat="folder in account.$mailboxes track by folder.id"
                           data-sg-root="account"
                           data-sg-folder="folder"
                           data-sg-select-folder="setCurrentFolder"><!-- tree --></sg-folder-tree>
-        </ul>
-      </div>
-    </div>
-    <div data-ui-view="mailbox"><!-- messages list --></div>
+        </md-list>
+      </md-content>
+    </md-sidenav>
+
+    <!--<div class="newItemsToolbar">
+        <a class="button tiny radius split" data-ui-sref="mail.newMessage()"><var:string label:value="Compose"/><span data-dropdown-toggle="#draftsDrop"></span></a><br/>
+        </div>-->
+
+    <main layout="column" layout-fill="layout-fill">
+      <md-toolbar layout="row" layout-align="space-between start" class="md-tall md-warn">
+        <div class="md-toolbar-tools">
+          <span flex="flex">
+            <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md="hide-gt-md"><span class="icon-ic_menu_24px"></span></md-button>
+            <div class="display-1" style="font-size: 2em; font-weight: 300">
+              [[Calendar]]
+            </div>
+          </span>
+          <span class="sd-toolbar">
+            <span>search</span>
+          </span>
+        </div>
+      </md-toolbar>
+      <md-content layout="row" layout-md="column" layout-sm="column" layout-fill="layout-fill" flex="flex" class="md-padding" ui-view="mailbox"><!-- messages list --></md-content>
+    </main>
   </script>
 
   <script type="text/ng-template" id="mailbox.html">
diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox
index 77ad289b7..c25be339d 100644
--- a/UI/Templates/UIxPageFrame.wox
+++ b/UI/Templates/UIxPageFrame.wox
@@ -20,13 +20,11 @@
 	<meta name="author" content="SKYRIX Software AG/Inverse inc." />
 	<meta name="robots" content="stop" />
 	<meta name="build" var:content="buildDate" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
 	<link href="mailto:support@inverse.ca" rev="made" />
 	<link rel="shortcut icon" var:href="siteFavicon" type="image/x-icon" />
-	<link type="text/css" rel="stylesheet" rsrc:href="css/app.css" />
 	<link type="text/css" rel="stylesheet" rsrc:href="css/icons.css"/>
-	<var:if condition="hasProductSpecificCSS"
-	  ><link type="text/css" rel="stylesheet" var:href="productCSSURL"
-	    /></var:if>
+	<link type="text/css" rel="stylesheet" rsrc:href="css/angular-material.css"/>
 	<var:if condition="hasPageSpecificCSS"
 	  ><link type="text/css" rel="stylesheet" var:href="pageCSSURL"
 	    /></var:if>
@@ -40,7 +38,7 @@
            </var:if-ie>
       </head>
 
-      <body var:data-ng-app="angularModule" var:class="bodyClasses"
+      <body style="overflow: hidden" var:data-ng-app="angularModule" var:class="bodyClasses"
 	><var:if condition="isCompatibleBrowser"
 	  ><var:if condition="singleWindowModeEnabled"
           ><div id="popupFrame" style="display: none;"><iframe width="100%" height="100%" src="/SOGo/loading"><!-- space --></iframe></div></var:if
@@ -57,8 +55,8 @@
               ></var:if
             ><var:if condition="isPopup" const:negate="YES"
 	    ><var:if condition="isUIxDebugEnabled"
-	      ><div id="logConsole"><!-- space --></div></var:if>
-              <nav class="top-bar">
+	      ><!-- space --></var:if>
+              <!-- <nav class="top-bar">
                 <section class="top-bar-section">
               <var:if condition="canLogoff">
                 <ul class="right">
@@ -70,7 +68,7 @@
                       <li><a href="?theme=mobile"><var:string label:value="Mobile Version"/></a></li>
                     </ul>
                   </li>
-                  <li class="divider hide-for-small"><!-- divider --></li>
+                  <li class="divider hide-for-small"> divider </li>
                   <li>
                     <a id="logoff" var:href="logoffPath"><var:string label:value="Disconnect"/></a>
                   </li>
@@ -113,11 +111,15 @@
               </var:if>
             </ul>
           </section>
-	    </nav>
+	    </nav>-->
 	  </var:if>
-          <!-- <var:component className="UIxToolbar" var:toolbar="toolbar"/>-->
 
-	  <div id="pageContent"><var:component-content/></div>
+          <div class="container" layout="row" layout-fill="layout-fill">
+            <var:component-content/>
+          </div>
+          <md-toolbar class="" layout-align="center center" style="background-color:#212121; position: fixed; bottom: 0px; left: 0px; width: 100%; z-index: 100">
+            <span>[BOTTOM BAR]</span>
+          </md-toolbar>
 
 	  <script type="text/javascript">
 	    var ApplicationBaseURL = '<var:string value="modulePath"/>';
@@ -145,14 +147,18 @@
 	    <var:string value="productLocalizableStrings" const:escapeHTML="NO"/>
 	  </script>
 	  <script type="text/javascript" rsrc:src="js/vendor/underscore-min.js"><!-- space --></script>
+	  <script type="text/javascript" rsrc:src="js/vendor/hammer.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="js/vendor/angular.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="js/vendor/angular-animate.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="js/vendor/angular-sanitize.js"><!-- space --></script>
+	  <script type="text/javascript" rsrc:src="js/vendor/angular-aria.js"><!-- space --></script>
+	  <script type="text/javascript" rsrc:src="js/vendor/angular-material.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="js/vendor/angular-ui-router.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="js/vendor/mm-foundation-tpls.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="js/vendor/angular-recursion.js"><!-- space --></script>
 	  <script type="text/javascript" rsrc:src="js/vendor/angular-vs-repeat.js"><!-- space --></script>
           <script type="text/javascript" rsrc:src="js/Common/utils.js"><!-- space --></script>
+          <script type="text/javascript" rsrc:src="js/Common/ui.js"><!-- space --></script>
           <script type="text/javascript" rsrc:src="js/Common/ui-common.js"><!-- space --></script>
           <script type="text/javascript" rsrc:src="js/Common/ui-desktop.js"><!-- space --></script>
           <var:if condition="hasProductSpecificJavaScript"><script type="text/javascript"
diff --git a/UI/WebServerResources/Gruntfile.js b/UI/WebServerResources/Gruntfile.js
index 1483036ff..e07d1aed6 100644
--- a/UI/WebServerResources/Gruntfile.js
+++ b/UI/WebServerResources/Gruntfile.js
@@ -47,10 +47,13 @@ module.exports = function(grunt) {
             '<%= src %>/angular/angular{,.min}.js{,.map}',
             '<%= src %>/angular-animate/angular-animate{,.min}.js{,.map}',
             '<%= src %>/angular-sanitize/angular-sanitize{,.min}.js{,.map}',
+            '<%= src %>/angular-aria/angular-aria{,.min}.js{,.map}',
+            '<%= src %>/angular-material/angular-material{,.min}.js{,.map}',
             '<%= src %>/angular-ui-router/release/angular-ui-router{,.min}.js',
             '<%= src %>/angular-recursion/angular-recursion{,.min}.js',
             '<%= src %>/angular-vs-repeat/src/angular-vs-repeat{,.min}.js',
             '<%= src %>/angular-file-upload/angular-file-upload{,.min}.js{,map}',
+            '<%= src %>/hammerjs/hammer{,.min}.js{,.map}',
             '<%= src %>/ng-tags-input/ng-tags-input{,.min}.js',
             '<%= src %>/angular-foundation/mm-foundation-tpls{,.min}.js',
             '<%= src %>/foundation/js/foundation{,.min}.js',
@@ -80,17 +83,20 @@ module.exports = function(grunt) {
             grunt.log.ok("copy " + src + " => " + dest);
         }
         grunt.log.subhead('Copying CSS files');
-        var css = grunt.file.expand(
-            grunt.template.process('<%= src %>/ng-tags-input/ng-tags-input*.css',
-                                   {data: options})
-        );
-        for (var i = 0; i < css.length; i++) {
-            var src = css[i];
-            var paths = src.split('/');
-            var dest = options.css_dest + paths[paths.length-1];
-            grunt.file.copy(src, dest);
-            grunt.log.ok("copy " + src + " => " + dest);
-        }
+        var css = [
+            '<%= src %>/ng-tags-input/ng-tags-input*.css',
+            '<%= src %>/angular-material/angular-material*.css'
+        ];
+        for (var j = 0; j < css.length; j++) {
+            var files = grunt.file.expand(grunt.template.process(css[j], {data: options}))
+              for (var i = 0; i < files.length; i++) {
+                  var src = files[i];
+                  var paths = src.split('/');
+                  var dest = options.css_dest + paths[paths.length-1];
+                  grunt.file.copy(src, dest);
+                  grunt.log.ok("copy " + src + " => " + dest);
+              }
+          }
     });
     grunt.task.registerTask('build', ['static', 'sass']);
     grunt.task.registerTask('default', ['build','watch']);
diff --git a/UI/WebServerResources/bower.json b/UI/WebServerResources/bower.json
index 62416ace6..3f71f5ccc 100644
--- a/UI/WebServerResources/bower.json
+++ b/UI/WebServerResources/bower.json
@@ -2,13 +2,14 @@
   "name": "sogo-web",
   "private": true,
   "devDependencies": {
-    "angular": "~1.3",
-    "angular-animate": "~1.3",
+    "angular": "1.3.x",
+    "angular-animate": "1.3.x",
     "angular-ui-router": "~0.2",
     "angular-foundation": ">0.3",
     "angular-recursion": "~1",
     "angular-vs-repeat": "~1",
     "angular-file-upload": "~1",
+    "angular-material": "~0.7.0",
     "ng-tags-input": "~2",
     "foundation": ">5.3",
     "ionic": "1.0.0-beta.14",
diff --git a/UI/WebServerResources/js/Common/ui-desktop.js b/UI/WebServerResources/js/Common/ui-desktop.js
index 271e917ed..529611c3c 100644
--- a/UI/WebServerResources/js/Common/ui-desktop.js
+++ b/UI/WebServerResources/js/Common/ui-desktop.js
@@ -191,7 +191,7 @@
           selectFolder: '=sgSelectFolder'
         },
         template:
-          '<li>' +
+          '<md-item>' +
           '  <span class="folder-container">' +
           '    <span class="folder-content">' +
           '      <i class="icon icon-ion-folder"></i>' +
@@ -209,7 +209,7 @@
           '      </span>' +
           '    </span>' +
           '  </span>' +
-          '</li>' +
+          '</md-item>' +
           '<sg-folder-tree ng-repeat="child in folder.children track by child.path"' +
           '                data-sg-root="root"' +
           '                data-sg-folder="child"' +
@@ -240,15 +240,15 @@
               var list, items;
               if (!scope.mode.selected) {
                 list = iElement.parent();
-                while (list[0].tagName != 'UL') {
+                while (list[0].tagName != 'MD-LIST') {
                   list = list.parent();
                 }
-                items = list.find('li');
+                items = list.find('md-item');
 
                 // Highlight element as "loading"
                 items.removeClass('_selected');
                 items.removeClass('_loading');
-                angular.element(iElement.find('li')[0]).addClass('_loading');
+                angular.element(iElement.find('md-item')[0]).addClass('_loading');
 
                 // Call external function
                 scope.selectFolder(scope.root, scope.folder);
@@ -269,14 +269,14 @@
                     items;
 
                 scope.mode.selected = true;
-                while (list[0].tagName != 'UL') {
+                while (list[0].tagName != 'MD-LIST') {
                   list = list.parent();
                 }
-                items = list.find('li');
+                items = list.find('md-item');
 
                 // Hightlight element as "selected"
-                angular.element(iElement.find('li')[0]).removeClass('_loading');
-                angular.element(iElement.find('li')[0]).addClass('_selected');
+                angular.element(iElement.find('md-item')[0]).removeClass('_loading');
+                angular.element(iElement.find('md-item')[0]).addClass('_selected');
 
                 // Show options button
                 angular.forEach(items, function(element) {
diff --git a/UI/WebServerResources/js/Common/ui.js b/UI/WebServerResources/js/Common/ui.js
new file mode 100644
index 000000000..f6834c3c4
--- /dev/null
+++ b/UI/WebServerResources/js/Common/ui.js
@@ -0,0 +1,48 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* Angular JavaScript for common UI services */
+// TODO: Normalize the namespace and prefixes
+
+
+/**
+ * The common SOGo UI, app module
+ *
+ * @type {angular.Module}
+ */
+(function() {
+  'use strict';
+  angular.module('SOGo.UI', ['ngMaterial' ])
+  .controller('toggleCtrl', ['$scope', '$timeout', '$mdSidenav', '$log', function($scope, $timeout, $mdSidenav, $log) {
+      $scope.toggleLeft = function() {
+        $mdSidenav('left').toggle()
+                          .then(function(){
+                              $log.debug("toggle left is done");
+                          });
+      };
+      $scope.toggleRight = function() {
+        $mdSidenav('right').toggle()
+                            .then(function(){
+                              $log.debug("toggle RIGHT is done");
+                            });
+      };
+    }])
+
+    .controller('LeftCtrl', function($scope, $timeout, $mdSidenav, $log) {
+      $scope.close = function() {
+        $mdSidenav('left').close()
+                          .then(function(){
+                            $log.debug("close LEFT is done");
+                          });
+      };
+    })
+
+    .controller('RightCtrl', function($scope, $timeout, $mdSidenav, $log) {
+      $scope.close = function() {
+        $mdSidenav('right').close()
+                            .then(function(){
+                              $log.debug("close RIGHT is done");
+                            });
+      };
+    });
+
+})();
+
diff --git a/UI/WebServerResources/js/MailerUI.js b/UI/WebServerResources/js/MailerUI.js
index 207753274..67f8483ec 100644
--- a/UI/WebServerResources/js/MailerUI.js
+++ b/UI/WebServerResources/js/MailerUI.js
@@ -7,7 +7,7 @@
   angular.module('SOGo.Common', []);
   angular.module('SOGo.ContactsUI', []);
 
-  angular.module('SOGo.MailerUI', ['ngSanitize', 'ui.router', 'mm.foundation', 'vs-repeat', 'ck', 'ngTagsInput', 'angularFileUpload', 'SOGo.Common', 'SOGo.UICommon', 'SOGo.UIDesktop', 'SOGo.ContactsUI'])
+  angular.module('SOGo.MailerUI', ['ngSanitize', 'ui.router', 'mm.foundation', 'vs-repeat', 'ck', 'ngTagsInput', 'angularFileUpload', 'SOGo.Common', 'SOGo.UI', 'SOGo.UICommon', 'SOGo.UIDesktop', 'SOGo.ContactsUI'])
 
     .constant('sgSettings', {
       baseURL: ApplicationBaseURL,
@@ -62,8 +62,12 @@
         })
         .state('mail.account.mailbox', {
           url: '/:mailboxId',
-          templateUrl: 'mailbox.html',
-          controller: 'MailboxCtrl',
+          views: {
+            'mailbox@mail': {
+              templateUrl: 'mailbox.html',
+              controller: 'MailboxCtrl'
+            }
+          },
           resolve: {
             stateMailbox: ['$stateParams', 'stateAccount', 'decodeUriFilter', function($stateParams, stateAccount, decodeUriFilter) {
               var mailboxId = decodeUriFilter($stateParams.mailboxId);