Initial integration of ngMaterial in Webmail

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']);

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",

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) {

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");
+                            });
+      };
+    });
+
+})();
+

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);