(html) Allow sorting the actions of a Sieve filter

NEWS

@@ -11,6 +11,7 @@ Enhancements
  - [web] restored indicator in the top banner when a vacation message (auto-reply) is active
  - [web] removed animation when dragging an event to speed up rendering
  - [web] expunge drafts mailbox when a draft is sent and deleted
+ - [web] actions of Sieve filters are now sortable
 
 Bug fixes
  - [web] fixed refresh of addressbook when deleting one or many cards

UI/Templates/PreferencesUI/UIxFilterEditor.wox

@@ -108,8 +108,16 @@
         <div layout="column">
           <p><var:string label:value="Perform these actions"/></p>
           <div id="filterActions"><!-- empty --></div>
+          <div class="sg-list-sortable"
+               ng-model="filterEditor.filter.actions"
+               as-sortable="{ containment: '.sg-list-sortable', containerPositioning: 'relative' }">
           <div layout="row" layout-align="start center"
-               ng-repeat="action in filterEditor.filter.actions">
+               ng-repeat="action in filterEditor.filter.actions"
+               as-sortable-item="as-sortable-item">
+            <md-button class="md-icon-button" md-no-ink="md-no-ink"
+                       as-sortable-item-handle="as-sortable-item-handle">
+              <md-icon class="sg-sortable-grip">drag_handle</md-icon>
+            </md-button>
 
             <md-input-container class="md-block md-flex">
               <md-select ng-model="action.method">
@@ -170,6 +178,7 @@
             </md-button>
 
           </div>
+          </div>
 
           <div layout="row" layout-align="end center">
             <label class="button-label button-label--right"><var:string label:value="Add an action"/></label>

UI/Templates/PreferencesUI/UIxPreferences.wox

@@ -674,11 +674,10 @@
           <md-tab id="mailFiltersTab"
                   aria-controls="mailFiltersTab-content"
                   label:label="Filters">
-            <md-content role="tabpanel" aria-labelledby="mailFiltersView"
-                 id="mailFiltersView-content">
+            <md-content role="tabpanel" aria-labelledby="mailFiltersView">
               <div class="sg-list-sortable"
                    ng-model="app.preferences.defaults.SOGoSieveFilters"
-                   as-sortable="{ scrollableContainer: '#mailFiltersView-content', containment: '.sg-list-sortable', containerPositioning: 'relative', orderChanged: preferencesForm.$setDirty }">
+                   as-sortable="{ scrollableContainer: '.sg-list-sortable', containment: '.sg-list-sortable', containerPositioning: 'relative', orderChanged: preferencesForm.$setDirty }">
                 <div layout="row" layout-align="start center"
                      ng-repeat="item in app.preferences.defaults.SOGoSieveFilters"
                      as-sortable-item="as-sortable-item">

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

@@ -239,7 +239,8 @@ div.md-tile-left {
  * 1. We hide sortable handles when not inside a .sg-list-sortable;
  * 2. Elements wih the class .sg-list-sortable-hide are hidden when the list is
  *    currently sortable;
- * 3. Dragged element is highligh with a whiteframe.
+ * 3. Dragged element is highligh with a whiteframe. We constraint the movement
+ *    vertically; it also eliminates a flicker when dragging starts.
  *
  * See https://github.com/a5hik/ng-sortable
  */
@@ -261,6 +262,7 @@ div.md-tile-left {
 }
 
 .sg-list-sortable {
+  position: relative;
   .as-sortable-item-handle {
     cursor: move;
     display: block; /* [1] */
@@ -272,6 +274,7 @@ div.md-tile-left {
 
 .as-sortable-drag { /* [3] */
   @extend .md-whiteframe-1dp;
+  left: 0 !important;
   background-color: rgba(255,255,255,0.4);
   position: absolute;
   pointer-events: none;