(js) Allow mail filters to be sortable

Added dependency to https://github.com/RubaXa/Sortable

NEWS

@@ -5,6 +5,7 @@ Enhancements
  - [web] added Junk handling feature from v2
  - [web] updated Material Icons font to version 2.1.3
  - [web] don't offer forward/vacation options in filters if not enabled
+ - [web] mail filters are now sortable
 
 Bug fixes
  - [web] handle birthday dates before 1970

UI/Templates/PreferencesUI/UIxPreferences.wox

@@ -8,7 +8,7 @@
     xmlns:label="OGo:label"
     className="UIxPageFrame"
     title="title"
-    const:jsFiles="Common.js, Preferences.js, Preferences.services.js, Mailer.services.js, Contacts.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js">
+    const:jsFiles="Common.js, vendor/ng-sortable.js, Preferences.js, Preferences.services.js, Mailer.services.js, Contacts.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js">
 
   <main class="view layout-fill" ui-view="preferences" layout="row"
         ng-controller="navController"><!-- preferences --> </main>
@@ -612,11 +612,12 @@
             <div role="tabpanel" aria-labelledby="mailFiltersView"
                  id="mailFiltersView-content">
 
-              <div class="md-padding">
+              <div class="md-padding" ng-sortable="{ animation: 150, draggable: '.layout-row', handle: '.sg-sortable-grip', ghostClass: 'sg-sortable-ghost', chosenClass: 'sg-sortable-chosen' }">
                 <div layout="row" layout-align="start center"
-                     ng-repeat="item in
-                                app.preferences.defaults.SOGoSieveFilters
-                                track by $index">
+                     ng-repeat="item in app.preferences.defaults.SOGoSieveFilters track by $index">
+                  <md-button class="md-icon-button" md-no-ink="md-no-ink">
+                    <md-icon class="sg-sortable-grip">drag_handle</md-icon>
+                  </md-button>
                   <md-checkbox
                       style="margin-bottom: 0;"
                       ng-model="app.preferences.defaults.SOGoSieveFilters[$index].active"

UI/WebServerResources/Gruntfile.js

@@ -15,6 +15,9 @@ module.exports = function(grunt) {
     'js/Administration.js': ['js/Administration/Administration.app.js', 'js/Administration/*Controller.js']
 
   };
+  var sortable_files = {
+    'js/vendor/ng-sortable.js': ['bower_components/Sortable/Sortable.js', 'bower_components/Sortable/ng-sortable.js']
+  };
 
   require('time-grunt')(grunt);
 
@@ -87,6 +90,12 @@ module.exports = function(grunt) {
           mangle: false,
         },
         files: js_files
+      },
+      sortable: {
+        options: {
+          compress: true
+        },
+        files: sortable_files,
       }
     },
     watch: {
@@ -170,7 +179,7 @@ module.exports = function(grunt) {
     }
     */
   });
-  grunt.task.registerTask('build', ['static', 'uglify:dist', 'sass:dist', 'postcss:dist']);
+  grunt.task.registerTask('build', ['static', 'uglify:dist', 'uglify:sortable', 'sass:dist', 'postcss:dist']);
   // Tasks for developers
   grunt.task.registerTask('default', ['watch']);
   grunt.task.registerTask('css', ['sass:dev', 'postcss:dev']);

UI/WebServerResources/bower.json

@@ -9,6 +9,7 @@
     "angular-file-upload": "latest",
     "angular-material": "v1.0.5",
     "lodash": "latest",
+    "Sortable": "latest",
     "breakpoint-sass": ">=2.4.2"
   },
   "resolutions": {

UI/WebServerResources/js/Preferences/Preferences.app.js

@@ -4,7 +4,7 @@
 (function() {
   'use strict';
 
-  angular.module('SOGo.PreferencesUI', ['ui.router', 'ck', 'SOGo.Common', 'SOGo.MailerUI', 'SOGo.ContactsUI', 'SOGo.Authentication'])
+  angular.module('SOGo.PreferencesUI', ['ui.router', 'ck', 'SOGo.Common', 'SOGo.MailerUI', 'SOGo.ContactsUI', 'SOGo.Authentication', 'ng-sortable'])
     .config(configure)
     .run(runBlock);
 

UI/WebServerResources/scss/components/list/list.scss

@@ -202,6 +202,21 @@ div.md-tile-left {
       margin: 1px 2px;
     }
   }
+
+  /* Classes for ng-sortable */
+  &-sortable-grip {
+    &:hover {
+      cursor: move;
+    }
+  }
+
+  &-sortable-ghost {
+    opacity: 0.5;
+  }
+
+  &-sortable-chosen {
+    background-color: white;
+  }
 }
 
 .card-picture {