From 864a7f8028369143fbd05b1fbf726bed1c7b18c2 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 14 Aug 2015 02:31:27 -0400
Subject: [PATCH] (html) Improve Preferences module

---
 .../PreferencesUI/UIxFilterEditor.wox         |  159 ++-
 UI/Templates/PreferencesUI/UIxPreferences.wox | 1242 +++++++++--------
 2 files changed, 725 insertions(+), 676 deletions(-)

diff --git a/UI/Templates/PreferencesUI/UIxFilterEditor.wox b/UI/Templates/PreferencesUI/UIxFilterEditor.wox
index 9a0cd5de7..e11d3cc4b 100644
--- a/UI/Templates/PreferencesUI/UIxFilterEditor.wox
+++ b/UI/Templates/PreferencesUI/UIxFilterEditor.wox
@@ -7,23 +7,27 @@
     xmlns:label="OGo:label"
     xmlns:rsrc="OGo:url"
     xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
-  <md-dialog flex="50">
+<md-dialog flex="50">
+  <form id="mainForm" var:href="ownPath">
     <md-dialog-content>
       <script type="text/javascript">
         var filterId = '<var:string value="filterId"/>';
         var sieveFolderEncoding = '<var:string value="sieveFolderEncoding"/>';
         var mailTags = <var:string value="labels" const:escapeHTML="NO"/>;
       </script>
-      <form id="mainForm" var:href="ownPath">
-        <div id="filterNameContainer" class="container">
-          <md-input-container>
-            <label><var:string label:value="Filter name:"/></label>
-            <input const:name="filterName" type="text" ng-model="filter.name"/>
-          </md-input-container>
-        </div>
-        <div id="filterMatchContainer" class="container">
-          <var:string label:value="For incoming messages that"/>
-          <md-select const:name="matchType" const:id="matchType" ng-model="filter.match">
+      <div id="filterNameContainer" class="container">
+        <md-input-container>
+          <label><var:string label:value="Filter name:"/></label>
+          <input const:name="filterName" type="text" ng-model="filter.name" required="required"/>
+        </md-input-container>
+      </div>
+
+      <div class="sg-padded"><var:entity const:name="nbsp"/></div>
+
+      <div layout="row" layout-align="start center">
+        <div><var:string label:value="For incoming messages that"/></div>
+        <md-input-container class="md-flex">
+          <md-select ng-model="filter.match" required="required">
             <md-option const:value="all">
               <var:string label:value="match all of the following rules:"/>
             </md-option>
@@ -34,107 +38,130 @@
               <var:string label:value="match all messages"/>
             </md-option>
           </md-select>
-        </div>
+        </md-input-container>
+      </div>
 
-        <!-- CONDITIONS -->
-        <div id="filterRulesContainer" class="container">
-          <div id="filterRules"><!-- empty -->
-            <md-list>
-              <md-list-item ng-repeat="rule in filter.rules">
+      <!-- CONDITIONS -->
+      <div layout="column">
+        <div id="filterRules"><!-- empty -->
+          <md-list>
+            <md-list-item ng-repeat="rule in filter.rules">
+              <md-input-container flex="25">
                 <md-select ng-model="rule.field">
                   <md-option ng-value="key" ng-repeat="(key, value) in fieldLabels">{{ value }}</md-option>
                 </md-select>
+              </md-input-container>
 
-                <input type="text" ng-show="rule.field ==
-                                            'header'" ng-model="rule.custom_header"/>
+              <md-input-container flex="25" ng-show="rule.field == 'header'">
+                <input type="text" ng-model="rule.custom_header"/>
+              </md-input-container>
 
-                <md-select ng-show="rule.field =='size'" ng-model="rule.operator">
+              <md-input-container flex="25" ng-show="rule.field == 'size'">
+                <md-select ng-model="rule.operator">
                   <md-option ng-value="key" ng-repeat="(key, value) in numberOperatorLabels">
                     {{ value }}
                   </md-option>
                 </md-select>
+              </md-input-container>
 
-                <md-select ng-show="rule.field !='size'" ng-model="rule.operator">
+              <md-input-container flex="25" ng-show="rule.field != 'size'">
+                <md-select ng-model="rule.operator">
                   <md-option ng-value="key" ng-repeat="(key, value) in textOperatorLabels">
                     {{ value }}
                   </md-option>
                 </md-select>
+              </md-input-container>
 
+              <md-input-container class="md-flex">
                 <input type="text" ng-model="rule.value"/>
+              </md-input-container>
 
-                <md-button class="sg-icon-button" type="button"
-                           ng-click="removeMailFilterRule($index)">
-                  <md-icon>remove</md-icon>
-                </md-button>
+              <md-button class="sg-icon-button" type="button"
+                         ng-click="removeMailFilterRule($index)">
+                <md-icon>remove_circle</md-icon>
+              </md-button>
 
-              </md-list-item>
-            </md-list>
-          </div>
-
-          <md-button class="sg-icon-button" type="button"
-                     ng-click="addMailFilterRule($event)">
-            <md-icon>add</md-icon>
-          </md-button>
+            </md-list-item>
+          </md-list>
         </div>
 
-        <!-- ACTIONS -->
-        <div id="filterActionsContainer" class="container">
-          <var:string label:value="Perform these actions:"/><br/>
-          <div id="filterActions"><!-- empty --></div>
+        <div layout="row" layout-align="end center">
+          <md-button class="sg-icon-button" type="button"
+                     ng-click="addMailFilterRule($event)">
+            <md-icon>add_circle</md-icon>
+          </md-button>
+        </div>
+      </div>
 
-          <md-list>
-            <md-list-item ng-repeat="action in filter.actions">
+      <!-- ACTIONS -->
+      <div layout="column">
+        <var:string label:value="Perform these actions:"/>
+        <div id="filterActions"><!-- empty --></div>
+
+        <md-list>
+          <md-list-item layout="row" layout-align="space-between center"
+                        ng-repeat="action in filter.actions">
+            <md-input-container>
               <md-select ng-model="action.method">
                 <md-option ng-value="key" ng-repeat="(key, value) in methodLabels">{{ value }}</md-option>
               </md-select>
+            </md-input-container>
 
-              <!-- FORWARD MESSAGE TO -->
-              <input type="text" ng-show="action.method == 'redirect'" ng-model="action.argument"/>
+            <!-- FORWARD MESSAGE TO -->
+            <md-input-container ng-show="action.method == 'redirect'" >
+              <input type="text" ng-model="action.argument"/>
+            </md-input-container>
 
-              <!-- DISCARD -->
-              <!-- nada -->
+            <!-- DISCARD -->
+            <!-- nada -->
 
-              <!-- KEEP -->
-              <!-- nada -->
+            <!-- KEEP -->
+            <!-- nada -->
 
-              <!-- SEND REJECT MESSAGE -->
-              <input type="text" ng-show="action.method == 'reject'" ng-model="action.argument"/>
+            <!-- SEND REJECT MESSAGE -->
+            <md-input-container ng-show="action.method == 'reject'">
+              <input type="text" ng-model="action.argument"/>
+            </md-input-container>
 
-              <!-- FILE INTO -->
-              <md-select ng-show="action.method == 'fileinto'" ng-model="action.argument">
+            <!-- FILE INTO -->
+            <md-input-container ng-show="action.method == 'fileinto'" >
+              <md-select ng-model="action.argument">
                 <md-option ng-value="item.path" ng-repeat="item in mailboxes">
                   {{ item.name }}
                 </md-option>
               </md-select>
+            </md-input-container>
 
-              <!-- FLAG WITH -->
-              <md-select ng-show="action.method == 'addflag'" ng-model="action.argument" >
+            <!-- FLAG WITH -->
+            <md-input-container ng-show="action.method == 'addflag'" >
+              <md-select ng-model="action.argument" >
                 <md-option ng-value="key" ng-repeat="(key, value) in labels">{{ value[0] }}</md-option>
               </md-select>
+            </md-input-container>
 
-              <!-- STOP -->
-              <!-- nada -->
+            <!-- STOP -->
+            <!-- nada -->
 
-
-              <md-button class="sg-icon-button" type="button"
-                         ng-click="removeMailFilterAction($index)">
-                <md-icon>remove</md-icon>
-              </md-button>
+            <md-button class="sg-icon-button" type="button"
+                       ng-click="removeMailFilterAction($index)">
+              <md-icon>remove_circle</md-icon>
+            </md-button>
 
           </md-list-item>
-          </md-list>
+        </md-list>
 
+        <div layout="row" layout-align="end center">
           <md-button class="sg-icon-button" type="button"
                      ng-click="addMailFilterAction($event)">
-            <md-icon>add</md-icon>
+            <md-icon>add_circle</md-icon>
           </md-button>
         </div>
-
-        <div class="md-actions" layout="row">
-          <md-button type="button" ng-click="cancel()">Cancel</md-button>
-          <md-button type="button" class="md-primary" ng-click="save()">Save</md-button>
       </div>
-    </form>
-  </md-dialog-content>
+    </md-dialog-content>
+    <div class="md-actions">
+      <md-button type="button" ng-click="cancel()"><var:string label:value="Cancel"/></md-button>
+      <md-button type="button" ng-click="save()"><var:string label:value="Save"/></md-button>
+    </div>
+  </form>
 </md-dialog>
 </container>
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index bb9fc3044..dc20fc9f6 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -28,21 +28,25 @@
                         ui-sref-active="sg-active">
             <p class="sg-item-name"><var:string label:value="General"/></p>
           </md-list-item>
-          <md-list-item ng-click="app.go('calendars')"
-                        ui-sref="preferences.calendars"
-                        ui-sref-active="sg-active">
-            <p class="sg-item-name"><var:string label:value="Calendar"/></p>
-          </md-list-item>
+          <var:if condition="userHasCalendarAccess">
+            <md-list-item ng-click="app.go('calendars')"
+                          ui-sref="preferences.calendars"
+                          ui-sref-active="sg-active">
+              <p class="sg-item-name"><var:string label:value="Calendar"/></p>
+            </md-list-item>
+          </var:if>
           <md-list-item ng-click="app.go('addressbooks')"
                         ui-sref="preferences.addressbooks"
                         ui-sref-active="sg-active">
             <p class="sg-item-name"><var:string label:value="Contacts"/></p>
           </md-list-item>
-          <md-list-item ng-click="app.go('mailer')"
-                        ui-sref="preferences.mailer"
-                        ui-sref-active="sg-active">
-            <p class="sg-item-name"><var:string label:value="Mail"/></p>
-          </md-list-item>
+          <var:if condition="userHasMailAccess">
+            <md-list-item ng-click="app.go('mailer')"
+                          ui-sref="preferences.mailer"
+                          ui-sref-active="sg-active">
+              <p class="sg-item-name"><var:string label:value="Mail"/></p>
+            </md-list-item>
+          </var:if>
         </md-list>
       </md-content>
     </md-sidenav>
@@ -54,165 +58,177 @@
         <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
           <var:component className="UIxTopnavToolbarTemplate" />
         </div>
+        <md-button type="button" class="md-fab md-fab-bottom-right md-fab-overlap-bottom"
+                   ng-click="app.save()">
+          <md-icon>save</md-icon>
+        </md-button>
       </md-toolbar>
 
       <md-content>
-        <form name="preferencesForm"
-              ng-submit="app.save()">
-          <div ui-view="module"><!-- view --></div>
-          <div class="md-actions">
-            <md-button type="submit">
-              <var:string label:value="Save" />
-            </md-button>
-          </div>
-        </form>
+        <div ui-view="module"><!-- view --></div>
       </md-content>
-
     </section>
 
   </script>
 
-    <!--
-        GENERAL PREFERENCE PANEL
-    -->
-    <script type="text/ng-template" id="generalPreferences.html">
+  <!--
+      GENERAL PREFERENCE PANEL
+  -->
+  <script type="text/ng-template" id="generalPreferences.html">
 
-        <md-tabs class="md-flex" md-dynamic-height="true">
+    <md-tabs class="md-flex" md-border-bottom="md-border-bottom" md-dynamic-height="true">
 
-          <!-- GENERAL OPTIONS -->
-          <md-tab id="generalOptionsView" aria-controls="generalOptionsView-content" label:label="General">
-            <div layout="column" layout-align="space-around start" layout-padding="layout-padding" aria-labelledby="generalOptionsView" id="generalOptionsView-content">
-              <md-input-container>
-                <label><var:string label:value="SOGo Version"/></label>
-                <input type="text" ng-readonly="true" var:value="sogoVersion"/>
-              </md-input-container>
+      <!-- GENERAL OPTIONS -->
+      <md-tab id="generalOptionsView" aria-controls="generalOptionsView-content" label:label="General">
+        <md-content layout="row"
+                    aria-labelledby="generalOptionsView"
+                    id="generalOptionsView-content" class="sg-padded">
+          <div layout="column" flex="100">
+            <md-input-container>
+              <label><var:string label:value="SOGo Version"/></label>
+              <input type="text" ng-readonly="true" var:value="sogoVersion"/>
+            </md-input-container>
 
-              <md-input-container>
-                <label><var:string label:value="Language"/></label>
-                <md-select ng-model="app.preferences.defaults.SOGoLanguage">
-                  <var:foreach list="languages" item="item">
-                    <md-option var:value="item">
-                      <var:string value="languageText"/>
-                    </md-option>
-                  </var:foreach>
-                </md-select>
-              </md-input-container>
+            <div layout="row">
+              <div flex="50">
+                <md-input-container>
+                  <label><var:string label:value="Language"/></label>
+                  <md-select ng-model="app.preferences.defaults.SOGoLanguage">
+                    <var:foreach list="languages" item="item">
+                      <md-option var:value="item">
+                        <var:string value="languageText"/>
+                      </md-option>
+                    </var:foreach>
+                  </md-select>
+                </md-input-container>
+              </div>
+              <div flex="50">
+                <md-autocomplete
+                    style="padding-bottom: 0"
+                    md-search-text="app.timeZonesSearchText"
+                    md-selected-item="app.preferences.defaults.SOGoTimeZone"
+                    md-items="timezone in app.timeZonesListFilter(app.timeZonesSearchText)"
+                    md-item-text="timezone"
+                    md-min-length="3"
+                    md-select-on-match="true"
+                    label:md-floating-label="Current Time Zone">
+                  <span md-highlight-text="app.timeZonesSearchText">{{timezone}}</span>
+                </md-autocomplete>
+              </div>
+            </div>
 
-              <md-autocomplete
-                  md-search-text="app.timeZonesSearchText"
-                  md-selected-item="app.preferences.defaults.SOGoTimeZone"
-                  md-items="timezone in app.timeZonesListFilter(app.timeZonesSearchText)"
-                  md-item-text="timezone"
-                  md-min-length="3"
-                  md-no-cache="true"
-                  label:md-floating-label="Current Time Zone">
-                <span md-highlight-text="app.timeZonesSearchText">{{timezone}}</span>
-              </md-autocomplete>
-              
-              <md-input-container>
-                <label><var:string label:value="Short Date Format"/></label>
-                <md-select ng-model="app.preferences.defaults.SOGoShortDateFormat">
-                  <var:foreach list="shortDateFormatsList" item="item">
-                    <md-option var:value="item">
-                      <var:string value="itemShortDateFormatText"/>
-                    </md-option>
-                  </var:foreach>
-                </md-select>
-              </md-input-container>
-
-              <md-input-container>
-                <label><var:string label:value="Long Date Format"/></label>
-                <md-select ng-model="app.preferences.defaults.SOGoLongDateFormat">
-                  <var:foreach list="longDateFormatsList" item="item">
-                    <md-option var:value="item">
-                      <var:string value="itemLongDateFormatText"/>
-                    </md-option>
-                  </var:foreach>
-                </md-select>
-              </md-input-container>
-
-              <md-input-container>
-                <label><var:string label:value="Time Format"/></label>
-                <md-select ng-model="app.preferences.defaults.SOGoTimeFormat">
-                  <var:foreach list="timeFormatsList" item="item">
+            <div layout="row">
+              <div flex="30">
+                <md-input-container>
+                  <label><var:string label:value="Short Date Format"/></label>
+                  <md-select ng-model="app.preferences.defaults.SOGoShortDateFormat">
+                    <var:foreach list="shortDateFormatsList" item="item">
+                      <md-option var:value="item">
+                        <var:string value="itemShortDateFormatText"/>
+                      </md-option>
+                    </var:foreach>
+                  </md-select>
+                </md-input-container>
+              </div>
+              <div flex="40">
+                <md-input-container>
+                  <label><var:string label:value="Long Date Format"/></label>
+                  <md-select ng-model="app.preferences.defaults.SOGoLongDateFormat">
+                    <var:foreach list="longDateFormatsList" item="item">
+                      <md-option var:value="item">
+                        <var:string value="itemLongDateFormatText"/>
+                      </md-option>
+                    </var:foreach>
+                  </md-select>
+                </md-input-container>
+              </div>
+              <div flex="30">
+                <md-input-container>
+                  <label><var:string label:value="Time Format"/></label>
+                  <md-select ng-model="app.preferences.defaults.SOGoTimeFormat">
+                    <var:foreach list="timeFormatsList" item="item">
                       <md-option var:value="item">
                         <var:string value="itemTimeFormatText"/>
                       </md-option>
-                  </var:foreach>
-                </md-select>
+                    </var:foreach>
+                  </md-select>
+                </md-input-container>
+              </div>
+            </div>
+
+            <md-input-container>
+              <label><var:string label:value="Default Module"/></label>
+              <md-select ng-model="app.preferences.defaults.SOGoLoginModule">
+                <var:foreach list="availableModules" item="item">
+                  <md-option var:value="item">
+                    <var:string value="itemModuleText"/>
+                  </md-option>
+                </var:foreach>
+              </md-select>
+            </md-input-container>
+
+            <md-input-container>
+              <label><var:string label:value="Refresh View"/></label>
+              <md-select ng-model="app.preferences.defaults.SOGoRefreshViewCheck">
+                <var:foreach list="refreshViewList" item="item">
+                  <md-option var:value="item">
+                    <var:string value="itemRefreshViewCheckText"/>
+                  </md-option>
+                </var:foreach>
+              </md-select>
+            </md-input-container>
+          </div>
+        </md-content>
+      </md-tab>
+
+      <!-- PASSWORD OPTIONS -->
+      <var:if condition="shouldDisplayPasswordChange">
+        <md-tab id="generalPasswordView"
+                aria-controls="generalPasswordView-content"
+                label:label="Password">
+          <md-content id="passwordView" class="sg-padded">
+            <div layout="row">
+              <md-input-container>
+                <label><var:string label:value="New password"/>
+                </label>
+	        <input type="password" ng-model="app.passwords.newPassword"/>
               </md-input-container>
 
               <md-input-container>
-                <label><var:string label:value="Default Module"/></label>
-                <md-select ng-model="app.preferences.defaults.SOGoLoginModule">
-                  <var:foreach list="availableModules" item="item">
-                    <md-option var:value="item">
-                      <var:string value="itemModuleText"/>
-                    </md-option>
-                  </var:foreach>
-                </md-select>
-              </md-input-container>
-
-              <md-input-container>
-                <label><var:string label:value="Refresh View"/></label>
-                <md-select ng-model="app.preferences.defaults.SOGoRefreshViewCheck">
-                  <var:foreach list="refreshViewList" item="item">
-                    <md-option var:value="item">
-                      <var:string value="itemRefreshViewCheckText"/>
-                    </md-option>
-                  </var:foreach>
-                </md-select>
+                <label><var:string label:value="Confirmation"/>
+                </label>
+	        <input type="password" ng-model="app.passwords.newPasswordConfirmation"/>
               </md-input-container>
             </div>
-            </md-tab>
+            <div layout="row" layout-align="end center">
+              <md-button ng-click="app.changePassword()" type="button" ng-disabled="!app.canChangePassword()">
+                <var:string label:value="Change"/>
+              </md-button>
+            </div>
+          </md-content>
+        </md-tab>
+      </var:if>
 
-          <!-- PASSWORD OPTIONS -->
-          <var:if condition="shouldDisplayPasswordChange">
-            <md-tab id="generalPasswordView"
-                    aria-controls="generalPasswordView-content"
-                    label:label="Password">
-              <div layout="column" layout-padding="layout-padding"
-                   layout-align="space-around start" id="passwordView">
-                <md-input-container>
-                  <label><var:string label:value="New password"/>
-                  </label>
-	          <input type="password" ng-model="app.passwords.newPassword"/>
-                </md-input-container>
+    </md-tabs>
+  </script>
 
-                <md-input-container>
-                  <label><var:string label:value="Confirmation"/>
-                  </label>
-	          <input type="password" ng-model="app.passwords.newPasswordConfirmation"/>
-                </md-input-container>
-
-                <md-button ng-click="app.changePassword()" type="button" ng-disabled="!app.canChangePassword()">
-                  <var:string label:value="Change"/>
-                </md-button>
-
-              </div>
-            </md-tab>
-          </var:if>
-
-        </md-tabs>
-    </script>
-
-    <!--
-        CALENDAR PREFERENCE PANEL
-    -->
-    <script type="text/ng-template" id="calendarsPreferences.html">
-        <md-tabs class="md-flex" md-dynamic-height="true">
-
-          <!-- CALENDAR - GENERAL -->
-          <md-tab id="calendarOptionsView"
-                  aria-controls="calendarOptionsView-content"
-                  label:label="General">
-            <!-- <script type="text/ng-template" id="calendarsPreferences.html"> -->
-            <var:if condition="userHasCalendarAccess">
-              <div layout="column" layout-align="space-around start"
-                   layout-padding="layout-padding"
-                   aria-labelledby="calendarOptionsView"
-                   id="calendarOptionsView-content">
+  <!--
+      CALENDAR PREFERENCE PANEL
+  -->
+  <script type="text/ng-template" id="calendarsPreferences.html">
+    <var:if condition="userHasCalendarAccess">
+      <md-tabs md-border-bottom="md-border-bottom" md-dynamic-height="true">
 
+        <!-- CALENDAR - GENERAL -->
+        <md-tab id="calendarOptionsView"
+                aria-controls="calendarOptionsView-content"
+                label:label="General">
+          <md-content layout="row" layout-align="center center"
+                      aria-labelledby="calendarOptionsView"
+                      class="sg-padded"
+                      id="calendarOptionsView-content">
+            <div layout="column" flex="100">
+              <div layout="row">
                 <md-input-container>
                   <label><var:string label:value="Week begins on" /></label>
                   <md-select ng-model="app.preferences.defaults.SOGoFirstDayOfWeek">
@@ -245,37 +261,39 @@
                     </var:foreach>
                   </md-select>
                 </md-input-container>
+              </div>
 
-                <md-checkbox
-                    ng-model="app.preferences.defaults.SOGoBusyOffHours"
-                    ng-true-value="1"
-                    ng-false-value="0">
-                  <var:string label:value="Show time as busy outside working hours"/>
-                </md-checkbox>
-                
-                <md-input-container>
-                  <label><var:string label:value="First week of year"/></label>
-                  <md-select label:aria-label="First week of year"
-                             ng-model="app.preferences.defaults.SOGoFirstWeekOfYear">
-                    <var:foreach list="firstWeekList" item="item">
-                      <md-option var:value="item">
-                        <var:string value="itemFirstWeekText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
+              <md-checkbox
+                  ng-model="app.preferences.defaults.SOGoBusyOffHours"
+                  ng-true-value="1"
+                  ng-false-value="0">
+                <var:string label:value="Show time as busy outside working hours"/>
+              </md-checkbox>
 
-                <md-input-container>
-                  <label><var:string label:value="Default calendar" /></label>
-                  <md-select ng-model="app.preferences.defaults.SOGoDefaultCalendar">
-                    <var:foreach list="defaultCalendarList" item="item">
-                      <md-option var:value="item">
-                        <var:string value="itemCalendarText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
+              <md-input-container>
+                <label><var:string label:value="First week of year"/></label>
+                <md-select label:aria-label="First week of year"
+                           ng-model="app.preferences.defaults.SOGoFirstWeekOfYear">
+                  <var:foreach list="firstWeekList" item="item">
+                    <md-option var:value="item">
+                      <var:string value="itemFirstWeekText"/>
+                    </md-option>
+                  </var:foreach>
+                </md-select>
+              </md-input-container>
 
+              <md-input-container>
+                <label><var:string label:value="Default calendar" /></label>
+                <md-select ng-model="app.preferences.defaults.SOGoDefaultCalendar">
+                  <var:foreach list="defaultCalendarList" item="item">
+                    <md-option var:value="item">
+                      <var:string value="itemCalendarText"/>
+                    </md-option>
+                  </var:foreach>
+                </md-select>
+              </md-input-container>
+
+              <div layout="row">
                 <md-input-container>
                   <label><var:string label:value="Default events classification" /></label>
                   <md-select ng-model="app.preferences.defaults.SOGoCalendarEventsDefaultClassification">
@@ -297,114 +315,113 @@
                     </var:foreach>
                   </md-select>
                 </md-input-container>
-
-                <md-input-container>
-                  <label><var:string label:value="Default reminder"/></label>
-                  <md-select ng-model="app.preferences.defaults.SOGoCalendarDefaultReminder">
-                    <var:foreach list="reminderValues" item="item">
-                      <md-option var:value="item">
-                        <var:string value="itemReminderText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
-                
               </div>
-            </var:if>
-          </md-tab>
 
-          <!-- CALENDAR - CATEGORIES -->
-          <md-tab id="calendarCategories"
-                  aria-controls="calendarCategories-content"
-                  label:label="Categories">
+              <md-input-container>
+                <label><var:string label:value="Default reminder"/></label>
+                <md-select ng-model="app.preferences.defaults.SOGoCalendarDefaultReminder">
+                  <var:foreach list="reminderValues" item="item">
+                    <md-option var:value="item">
+                      <var:string value="itemReminderText"/>
+                    </md-option>
+                  </var:foreach>
+                </md-select>
+              </md-input-container>
+            </div>
+          </md-content>
+        </md-tab>
 
-            <md-list>
-              <md-list-item ng-repeat="item in
-                                       app.preferences.defaults.SOGoCalendarCategories
-                                       track by $index">
-                <i class="md-avatar" ng-style="{'background-color': app.preferences.defaults.SOGoCalendarCategoriesColors[item]}">
-                  <sg-color-picker sg-on-select="app.preferences.defaults.SOGoCalendarCategoriesColors[item] = color"><!-- color picker--></sg-color-picker>
-                </i>
-                <md-input-container>
-	          <input type="text" label:aria-label="Calendar Category" ng-model="app.preferences.defaults.SOGoCalendarCategories[$index]"/>
-                </md-input-container>
-                <md-button class="sg-icon-button" type="button"
-                           layout="row" layout-align="end center"
-                           label:aria-label="Remove Calendar Category"
-                           ng-click="app.removeCalendarCategory($index)">
-                  <md-icon>remove</md-icon>
+        <!-- CALENDAR - CATEGORIES -->
+        <md-tab id="calendarCategories"
+                aria-controls="calendarCategories-content"
+                label:label="Categories">
+          <md-content>
+            <div layout="column" flex="100">
+              <md-list layout="row" layout-wrap="layout-wrap">
+                <md-list-item flex="50" flex-sm="100"
+                              ng-repeat="item in
+                                         app.preferences.defaults.SOGoCalendarCategories
+                                         track by $index">
+                  <i class="md-avatar" ng-style="{'background-color': app.preferences.defaults.SOGoCalendarCategoriesColors[item]}">
+                    <sg-color-picker sg-on-select="app.preferences.defaults.SOGoCalendarCategoriesColors[item] = color"><!-- color picker--></sg-color-picker>
+                  </i>
+                  <md-input-container>
+	            <input type="text" label:aria-label="Calendar Category" ng-model="app.preferences.defaults.SOGoCalendarCategories[$index]"/>
+                  </md-input-container>
+                  <md-button class="sg-icon-button" type="button"
+                             layout="row" layout-align="end center"
+                             label:aria-label="Remove Calendar Category"
+                             ng-click="app.removeCalendarCategory($index)">
+                    <md-icon>remove_circle</md-icon>
+                  </md-button>
+                </md-list-item>
+              </md-list>
+
+              <div layout="row" layout-align="end center">
+                <md-button type="button"
+                           label:aria-label="Add Calendar Category"
+                           ng-click="app.addCalendarCategory()">
+                  <var:string label:value="Add Calendar Category"/>
                 </md-button>
-              </md-list-item>
-            </md-list>
-
-            <div class="bottomToolbar">
-              <md-button class="sg-icon-button" type="button"
-                         label:aria-label="Add Calendar Category"
-                         ng-click="app.addCalendarCategory()">
-                <md-icon>add</md-icon>
-              </md-button>
-            </div>
-
-          </md-tab>
-
-          <!-- CALENDAR - INVITATIONS -->
-          <md-tab id="calendarInvitationsTab"
-                  aria-controls="calendarInvitationsTab-content"
-                  label:label="Invitations">
-            <div layout="column" layout-align="space-around start"
-                 layout-padding="layout-padding"
-                 aria-labelledby="calendarInvitationsTab"
-                 id="calendarInvitationsTab-content">
-
-              <md-checkbox
-                  ng-model="app.preferences.settings.Calendar.PreventInvitations"
-                  ng-true-value="1"
-                  ng-false-value="0">
-                <var:string label:value="Prevent from being invited to appointments"/>
-              </md-checkbox>
-
-              <div ng-show="app.preferences.settings.Calendar.PreventInvitations == 1">
-                <label>
-                  <var:string label:value="White list for appointment invitations"/>
-                </label>
-                <md-contact-chips
-                    ng-model="app.preferences.settings.Calendar.PreventInvitationsWhitelist"
-                    md-contacts="app.userFilter($query, app.preferences.settings.Calendar.PreventInvitationsWhitelist)"
-                    md-contact-name="cn"
-                    md-contact-image="$$image"
-                    md-contact-email="c_email"
-                    md-require-match="md-require-match"
-                    filter-selected="false"
-                    label:placeholder="Add"><!-- users --></md-contact-chips>
               </div>
-
             </div>
-          </md-tab>
+          </md-content>
 
-        </md-tabs>
-    </script>
+        </md-tab>
 
-    <!--
-        CONTACTS PREFERENCE PANEL
-    -->
-    <script type="text/ng-template" id="addressbooksPreferences.html">
-      <md-content layout="row" class="md-flex">
-        <md-tabs class="md-flex" md-dynamic-height="true">
+        <!-- CALENDAR - INVITATIONS -->
+        <md-tab id="calendarInvitationsTab"
+                aria-controls="calendarInvitationsTab-content"
+                label:label="Invitations">
+          <div layout="column" layout-align="space-around start"
+               layout-padding="layout-padding"
+               aria-labelledby="calendarInvitationsTab"
+               id="calendarInvitationsTab-content">
 
-          <!-- CONTACT > GENERAL -->
-          <!-- <md-tab id="contactsGeneralTab"
-                  aria-controls="contactsGeneralTab-content" label:label="General">
-            GENERAL
-          </md-tab> -->
-           <!-- END OF CONTACT > GENERAL -->
+            <md-checkbox
+                ng-model="app.preferences.settings.Calendar.PreventInvitations"
+                ng-true-value="1"
+                ng-false-value="0">
+              <var:string label:value="Prevent from being invited to appointments"/>
+            </md-checkbox>
 
-          <!-- CONTACT > CATEGORIES -->
-          <md-tab id="contactsCategoriesTab" aria-controls="contactsCategoriesTab-content" label:label="Categories">
+            <div ng-show="app.preferences.settings.Calendar.PreventInvitations == 1">
+              <label>
+                <var:string label:value="White list for appointment invitations"/>
+              </label>
+              <md-contact-chips
+                  ng-model="app.preferences.settings.Calendar.PreventInvitationsWhitelist"
+                  md-contacts="app.userFilter($query, app.preferences.settings.Calendar.PreventInvitationsWhitelist)"
+                  md-contact-name="cn"
+                  md-contact-image="$$image"
+                  md-contact-email="c_email"
+                  md-require-match="md-require-match"
+                  filter-selected="false"
+                  label:placeholder="Add"><!-- users --></md-contact-chips>
+            </div>
 
-            <div role="tabpanel" aria-labelledby="contactsCategoriesView"  id="contactsCategoriesView-content">
-              <!-- <label><var:string label:value="Categories"/></label> -->
-              <md-list>
-                <md-list-item ng-repeat="item in
+          </div>
+        </md-tab>
+
+      </md-tabs>
+    </var:if>
+  </script>
+
+  <!--
+      CONTACTS PREFERENCE PANEL
+  -->
+  <script type="text/ng-template" id="addressbooksPreferences.html">
+    <md-content layout="row" class="md-flex">
+      <md-tabs class="md-flex" md-dynamic-height="true">
+
+        <!-- CONTACT > CATEGORIES -->
+        <md-tab id="contactsCategoriesTab" aria-controls="contactsCategoriesTab-content" label:label="Categories">
+
+          <md-content role="tabpanel" aria-labelledby="contactsCategoriesView"  id="contactsCategoriesView-content">
+            <div layout="column" flex="100">
+              <md-list layout="row" layout-wrap="layout-wrap">
+                <md-list-item flex="50" flex-sm="100"
+                              ng-repeat="item in
                                          app.preferences.defaults.SOGoContactsCategories
                                          track by $index">
                   <md-input-container>
@@ -415,398 +432,403 @@
                   <md-button type="button" class="sg-icon-button"
                              label:aria-label="Remove Contact Category"
                              ng-click="app.removeContactCategory($index)">
-                    <md-icon>remove</md-icon>
+                    <md-icon>remove_circle</md-icon>
                   </md-button>
                 </md-list-item>
               </md-list>
 
-              <div class="bottomToolbar">
-                <md-button class="sg-icon-button" type="button"
+              <div layout="row" layout-align="end center">
+                <md-button type="button"
                            label:aria-label="Add Contact Category"
                            ng-click="app.addContactCategory()">
-                  <md-icon>add</md-icon>
+                  <var:string label:value="Add Contact Category"/>
                 </md-button>
               </div>
-
             </div>
-          </md-tab>
-          <!-- END OF CONTACT > CATEGORIES -->
+          </md-content>
 
-        </md-tabs>
-      </md-content>
-    </script>
+        </md-tab>
+        <!-- END OF CONTACT > CATEGORIES -->
 
-    <!--
-        MAIL PREFERENCE PANEL
-    -->
-    <script type="text/ng-template" id="mailerPreferences.html">
-      <var:if condition="userHasMailAccess">
-          <md-tabs class="md-flex" md-dynamic-height="true">
+      </md-tabs>
+    </md-content>
+  </script>
 
-            <!-- MAIL > GENERAL -->
-            <md-tab id="mailGeneralTab" aria-controls="mailGeneralTab-content" label:label="General">
-              <div layout="column" layout-align="space-around start" layout-padding="layout-padding" role="tabpanel" aria-labelledby="mailGeneralView"  id="mailGeneralView-content">
+  <!--
+      MAIL PREFERENCE PANEL
+  -->
+  <script type="text/ng-template" id="mailerPreferences.html">
+    <var:if condition="userHasMailAccess">
+      <md-tabs md-dynamic-height="true">
 
-                <md-checkbox
-                    ng-model="app.preferences.defaults.SOGoMailShowSubscribedFoldersOnly"
-                    ng-true-value="1"
-                    ng-false-value="0"
-                    label:aria-label="Show subscribed mailboxes only">
-                  <var:string label:value="Show subscribed mailboxes only"/>
-                </md-checkbox>
+        <!-- MAIL > GENERAL -->
+        <md-tab id="mailGeneralTab" aria-controls="mailGeneralTab-content" label:label="General">
+          <md-content role="tabpanel" aria-labelledby="mailGeneralView"
+                      id="mailGeneralView-content" class="sg-padded">
 
-                <md-checkbox
-                    ng-model="app.preferences.defaults.SOGoMailSortByThreads"
-                    ng-true-value="1"
-                    ng-false-value="0"
-                    label:aria-label="Sort messages by threads">
-                  <var:string label:value="Sort messages by threads"/>
-                </md-checkbox>
+            <md-checkbox
+                ng-model="app.preferences.defaults.SOGoMailShowSubscribedFoldersOnly"
+                ng-true-value="1"
+                ng-false-value="0"
+                label:aria-label="Show subscribed mailboxes only">
+              <var:string label:value="Show subscribed mailboxes only"/>
+            </md-checkbox>
 
-                <div layout="row" layout-align="space-around start">
-                  <md-checkbox
-                      class="md-align-top-left" ng-model="app.preferences.defaults.SOGoMailAddOutgoingAddresses"
-                      ng-true-value="1"
-                      ng-false-value="0"
-                      label:arial-label="When sending mail, add unknown recipients to my">
-                    <var:string label:value="When sending mail, add unknown recipients to my"/>
-                  </md-checkbox>
+            <md-checkbox
+                ng-model="app.preferences.defaults.SOGoMailSortByThreads"
+                ng-true-value="1"
+                ng-false-value="0"
+                label:aria-label="Sort messages by threads">
+              <var:string label:value="Sort messages by threads"/>
+            </md-checkbox>
 
-                  <md-input-container>
-                    <label><var:string label:aria-label="Address Book"/></label>
-                    <md-select
-                        ng-disabled="app.preferences.defaults.SOGoMailAddOutgoingAddresses == 0"
-                        ng-model="app.preferences.defaults.SOGoSelectedAddressBook">
-                      <var:foreach list="addressBookList" item="item">
-                        <md-option var:value="item.id">
-                          <var:string value="item.name"/>
-                        </md-option>
-                      </var:foreach>
-                    </md-select>
-                  </md-input-container>
-                </div>
+            <div layout="row" layout-align="space-around end">
+              <md-checkbox
+                  class="md-align-top-left" ng-model="app.preferences.defaults.SOGoMailAddOutgoingAddresses"
+                  ng-true-value="1"
+                  ng-false-value="0"
+                  label:arial-label="When sending mail, add unknown recipients to my">
+                <var:string label:value="When sending mail, add unknown recipients to my"/>
+              </md-checkbox>
 
-                <md-input-container>
-                  <label><var:string label:value="Forward messages"/></label>
-                  <md-select ng-model="app.preferences.defaults.SOGoMailMessageForwarding">
-                    <var:foreach list="messageForwardingList" item="item">
-                      <md-option var:value="item">
-                        <var:string value="itemMessageForwardingText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
+              <md-input-container>
+                <label><var:string label:aria-label="Address Book"/></label>
+                <md-select
+                    ng-disabled="app.preferences.defaults.SOGoMailAddOutgoingAddresses == 0"
+                    ng-model="app.preferences.defaults.SOGoSelectedAddressBook">
+                  <var:foreach list="addressBookList" item="item">
+                    <md-option var:value="item.id">
+                      <var:string value="item.name"/>
+                    </md-option>
+                  </var:foreach>
+                </md-select>
+              </md-input-container>
+            </div>
 
-                <md-input-container>
-                  <label><var:string label:value="When replying to a message"/></label>
-                  <md-select ng-model="app.preferences.defaults.SOGoMailReplyPlacement">
-                    <var:foreach list="replyPlacementList" item="item">
-                      <md-option var:value="item">
-                        <var:string value="itemReplyPlacementText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
+            <md-input-container>
+              <label><var:string label:value="Forward messages"/></label>
+              <md-select ng-model="app.preferences.defaults.SOGoMailMessageForwarding">
+                <var:foreach list="messageForwardingList" item="item">
+                  <md-option var:value="item">
+                    <var:string value="itemMessageForwardingText"/>
+                  </md-option>
+                </var:foreach>
+              </md-select>
+            </md-input-container>
 
-                <md-input-container>
-                  <label><var:string label:value="And place my signature"/></label>
-                  <md-select ng-model="app.preferences.defaults.SOGoMailSignaturePlacement">
-                    <var:foreach list="signaturePlacementList" item="item">
-                      <md-option var:value="item">
-                        <var:string value="itemSignaturePlacementText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
-                
-                <md-input-container>
-                  <label><var:string label:value="Compose messages in"/></label>
-                  <md-select ng-model="app.preferences.defaults.SOGoMailComposeMessageType">
-                    <var:foreach list="composeMessagesType" item="item">
-                      <md-option var:value="item">
-                        <var:string value="itemComposeMessagesText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
+            <div layout="row">
+              <md-input-container>
+                <label><var:string label:value="When replying to a message"/></label>
+                <md-select ng-model="app.preferences.defaults.SOGoMailReplyPlacement">
+                  <var:foreach list="replyPlacementList" item="item">
+                    <md-option var:value="item">
+                      <var:string value="itemReplyPlacementText"/>
+                    </md-option>
+                  </var:foreach>
+                </md-select>
+              </md-input-container>
 
-                <md-input-container>
-                  <label><var:string label:value="Display remote inline images"/></label>
-                  <md-select ng-model="app.preferences.defaults.SOGoMailDisplayRemoteInlineImages">
-                    <var:foreach list="displayRemoteInlineImages" item="item">
-                      <md-option var:value="item">
-                        <var:string value="itemDisplayRemoteInlineImagesText"/>
-                      </md-option>
-                    </var:foreach>
-                  </md-select>
-                </md-input-container>
+              <md-input-container>
+                <label><var:string label:value="And place my signature"/></label>
+                <md-select ng-model="app.preferences.defaults.SOGoMailSignaturePlacement">
+                  <var:foreach list="signaturePlacementList" item="item">
+                    <md-option var:value="item">
+                      <var:string value="itemSignaturePlacementText"/>
+                    </md-option>
+                  </var:foreach>
+                </md-select>
+              </md-input-container>
+            </div>
 
-                <div layout="row" layout-align="space-around left">
-                  <div><var:string label:value="Auto save every"/></div>
-                  <md-input-container class="md-input-number">
-                    <input type="number" min="0" label:aria-label="minutes" ng-model="preferences.defaults.SOGoMailAutoSave"/>
-                  </md-input-container>
-                  <var:string label:value="minutes"/>
-                </div>
-                
-              </div>
-            </md-tab>
-            <!-- END OF MAIL > GENERAL -->
+            <md-input-container>
+              <label><var:string label:value="Compose messages in"/></label>
+              <md-select ng-model="app.preferences.defaults.SOGoMailComposeMessageType">
+                <var:foreach list="composeMessagesType" item="item">
+                  <md-option var:value="item">
+                    <var:string value="itemComposeMessagesText"/>
+                  </md-option>
+                </var:foreach>
+              </md-select>
+            </md-input-container>
+
+            <md-input-container>
+              <label><var:string label:value="Display remote inline images"/></label>
+              <md-select ng-model="app.preferences.defaults.SOGoMailDisplayRemoteInlineImages">
+                <var:foreach list="displayRemoteInlineImages" item="item">
+                  <md-option var:value="item">
+                    <var:string value="itemDisplayRemoteInlineImagesText"/>
+                  </md-option>
+                </var:foreach>
+              </md-select>
+            </md-input-container>
+
+            <div layout="row" layout-align="start center">
+              <var:string label:value="Auto save every"/>
+              <md-input-container class="md-input-number">
+                <input type="number" min="0" label:aria-label="minutes" ng-model="preferences.defaults.SOGoMailAutoSave"/>
+              </md-input-container>
+              <var:string label:value="minutes"/>
+            </div>
+
+          </md-content>
+        </md-tab>
+        <!-- END OF MAIL > GENERAL -->
 
 
-            <!-- MAIL > FILTERS -->
-            <var:if condition="isSieveScriptsEnabled">
-              <md-tab id="mailFiltersTab"
-                      aria-controls="mailFiltersTab-content"
-                      label:label="Filters">
-                <div role="tabpanel" aria-labelledby="mailFiltersView"
-                     id="mailFiltersView-content">
-
-                  <md-list>
-                    <md-list-item ng-repeat="item in
-                                             app.preferences.defaults.SOGoSieveFilters
-                                             track by $index">
-                      <md-checkbox
-                          ng-model="app.preferences.defaults.SOGoSieveFilters[$index].active"
-                          ng-true-value="1"
-                          ng-false-value="0">
-                        <!-- active or not-->
-                      </md-checkbox>
-                      <md-input-container>
-	                <input type="text" ng-model="app.preferences.defaults.SOGoSieveFilters[$index].name"/>
-                      </md-input-container>
-                      <md-button class="sg-icon-button" type="button"
-                                 ng-click="app.editMailFilter($index)"
-                                 layout="row" layout-align="end center"
-                                 label:aria-label="Edit Filter">
-                        <md-icon>edit</md-icon>
-                      </md-button>
-                      <md-button class="sg-icon-button" type="button"
-                                 ng-click="app.removeMailFilter($index)"
-                                 layout="row" layout-align="end center"
-                                 label:aria-label="Delete Filter">
-                        <md-icon>remove</md-icon>
-                      </md-button>
-                    </md-list-item>
-                  </md-list>
-
-                  <!-- FIXME: move up/down to be replaced by DnD? -->
-                  <div class="bottomToolbar">
-                    <md-button class="sg-icon-button" type="button"
-                               ng-click="app.addMailFilter($event)"
-                               label:aria-label="Create Filter">
-                      <md-icon>add</md-icon>
-                    </md-button>
-                  </div>
-                </div>
-              </md-tab>
-            </var:if>
-            <!-- END OF MAIL > FILTERS -->
-
-            <!-- MAIL > LABELS -->
-            <md-tab id="mailLabelsTab"
-                    aria-controls="mailLabelsTab-content" label:label="Labels">
-
-                <div role="tabpanel" aria-labelledby="mailLabelsView"  id="mailLabelsView-content">
-                  <md-list>
-                    <md-list-item ng-repeat="(key, value) in
-                                             app.preferences.defaults.SOGoMailLabelsColors">
-                      <i class="md-avatar" ng-style="{'background-color': value[1]}">
-                        <sg-color-picker sg-on-select="value[1] = color"><!-- color picker--></sg-color-picker>
-                      </i>
-                      <md-input-container>
-	                <input type="text"
-                               label:aria-label="Label"
-                               ng-model="value[0]"/>
-                      </md-input-container>
-                      <md-button class="sg-icon-button" type="button"
-                                 layout="row" layout-align="end center"
-                                 label:aria-label="Delete Label"
-                                 ng-click="app.removeMailLabel(key)">
-                        <md-icon>remove</md-icon>
-                      </md-button>
-                    </md-list-item>
-                  </md-list>
-
-                  <div class="bottomToolbar">
-                    <md-button class="sg-icon-button" type="button"
-                               label:aria-label="Create Label"
-                               ng-click="app.addMailLabel()">
-                      <md-icon>add</md-icon>
-                    </md-button>
-                  </div>
-                </div>
-              </md-tab>
-            <!-- END OF MAIL > LABELS -->
-
-            <!-- MAIL > ACCOUNTS -->
-            <md-tab id="mailAccountsTab"
-                    aria-controls="mailAccountsTab-content"
-                    label:label="Accounts">
+        <!-- MAIL > FILTERS -->
+        <var:if condition="isSieveScriptsEnabled">
+          <md-tab id="mailFiltersTab"
+                  aria-controls="mailFiltersTab-content"
+                  label:label="Filters">
+            <div role="tabpanel" aria-labelledby="mailFiltersView"
+                 id="mailFiltersView-content">
 
               <md-list>
                 <md-list-item ng-repeat="item in
-                                         app.preferences.defaults.AuxiliaryMailAccounts
+                                         app.preferences.defaults.SOGoSieveFilters
                                          track by $index">
+                  <md-checkbox
+                      ng-model="app.preferences.defaults.SOGoSieveFilters[$index].active"
+                      ng-true-value="1"
+                      ng-false-value="0">
+                    <!-- active or not-->
+                  </md-checkbox>
                   <md-input-container>
-	            <input type="text"
-                           label:aria-label="Mail Account"
-                           ng-model="app.preferences.defaults.AuxiliaryMailAccounts[$index].name"
-                           ng-readonly="$index == 0"/>
+	            <input type="text" ng-model="app.preferences.defaults.SOGoSieveFilters[$index].name"/>
                   </md-input-container>
                   <md-button class="sg-icon-button" type="button"
-                             ng-click="app.editMailAccount($event, $index)"
-                             layout="row"
-                             layout-align="end center"
-                             label:aria-label="Edit Account">
+                             ng-click="app.editMailFilter($index)"
+                             layout="row" layout-align="end center"
+                             label:aria-label="Edit Filter">
                     <md-icon>edit</md-icon>
                   </md-button>
                   <md-button class="sg-icon-button" type="button"
-                             ng-click="app.removeMailAccount($index)"
-                             ng-show="$index > 0"
-                             layout="row"
-                             layout-align="end center"
-                             label:aria-label="Delete Account">
-                    <md-icon>remove</md-icon>
+                             ng-click="app.removeMailFilter($index)"
+                             layout="row" layout-align="end center"
+                             label:aria-label="Delete Filter">
+                    <md-icon>remove_circle</md-icon>
                   </md-button>
                 </md-list-item>
               </md-list>
 
-              <var:if condition="mailAuxiliaryUserAccountsEnabled">
-                <div class="bottomToolbar">
-                  <md-button class="sg-icon-button" type="button"
-                             ng-click="app.addMailAccount()"
-                             label:aria-label="Create Account">
-                    <md-icon>add</md-icon>
+              <!-- FIXME: move up/down to be replaced by DnD? -->
+              <div layout="row" layout-align="end center">
+                <md-button type="button"
+                           ng-click="app.addMailFilter($event)"
+                           label:aria-label="Create Filter">
+                  <var:string label:value="Create Filter"/>
+                </md-button>
+              </div>
+            </div>
+          </md-tab>
+        </var:if>
+        <!-- END OF MAIL > FILTERS -->
+
+        <!-- MAIL > LABELS -->
+        <md-tab id="mailLabelsTab"
+                aria-controls="mailLabelsTab-content" label:label="Labels">
+
+          <md-content role="tabpanel" aria-labelledby="mailLabelsView"
+                      id="mailLabelsView-content" class="sg-padded">
+            <md-list layout="row" layout-wrap="layout-wrap">
+              <md-list-item flex="50"
+                            ng-repeat="(key, value) in
+                                       app.preferences.defaults.SOGoMailLabelsColors">
+                <i class="md-avatar" ng-style="{'background-color': value[1]}">
+                  <sg-color-picker sg-on-select="value[1] = color"><!-- color picker--></sg-color-picker>
+                </i>
+                <md-input-container>
+	          <input type="text"
+                         label:aria-label="Label"
+                         ng-model="value[0]"/>
+                </md-input-container>
+                <md-button class="sg-icon-button" type="button"
+                           layout="row" layout-align="end center"
+                           label:aria-label="Delete Label"
+                           ng-click="app.removeMailLabel(key)">
+                  <md-icon>remove_circle</md-icon>
+                </md-button>
+              </md-list-item>
+            </md-list>
+
+            <div layout="row" layout-align="end center">
+              <md-button type="button"
+                         label:aria-label="Create Label"
+                         ng-click="app.addMailLabel()">
+                <var:string label:value="Create Label"/>
+              </md-button>
+            </div>
+          </md-content>
+        </md-tab>
+        <!-- END OF MAIL > LABELS -->
+
+        <!-- MAIL > ACCOUNTS -->
+        <md-tab id="mailAccountsTab"
+                aria-controls="mailAccountsTab-content"
+                label:label="Accounts">
+
+          <md-list class="sg-padded">
+            <md-list-item ng-repeat="item in
+                                     app.preferences.defaults.AuxiliaryMailAccounts
+                                     track by $index">
+              <md-input-container>
+	        <input type="text"
+                       label:aria-label="Mail Account"
+                       ng-model="app.preferences.defaults.AuxiliaryMailAccounts[$index].name"
+                       ng-readonly="$index == 0"/>
+              </md-input-container>
+              <md-button class="sg-icon-button" type="button"
+                         ng-click="app.editMailAccount($event, $index)"
+                         layout="row"
+                         layout-align="end center"
+                         label:aria-label="Edit Account">
+                <md-icon>edit</md-icon>
+              </md-button>
+              <md-button class="sg-icon-button" type="button"
+                         ng-click="app.removeMailAccount($index)"
+                         ng-show="$index > 0"
+                         layout="row"
+                         layout-align="end center"
+                         label:aria-label="Delete Account">
+                <md-icon>remove_circle</md-icon>
+              </md-button>
+            </md-list-item>
+          </md-list>
+
+          <var:if condition="mailAuxiliaryUserAccountsEnabled">
+            <div layout="row" layout-align="end center">
+              <md-button type="button"
+                         ng-click="app.addMailAccount()"
+                         label:aria-label="Create Account">
+                <var:string label:value="New Mail Account"/>
+              </md-button>
+            </div>
+          </var:if>
+
+        </md-tab>
+        <!-- END OF MAIL > ACCOUNTS -->
+
+
+        <!-- MAIL > VACATION -->
+        <var:if condition="isVacationEnabled">
+          <md-tab id="mailVacationTab" aria-controls="mailVacationTab-content" label:label="Vacation">
+            <div role="tabpanel" aria-labelledby="mailVacationView"
+                 id="mailVacationView-content" class="sg-padded">
+
+              <md-checkbox
+                  ng-model="app.preferences.defaults.Vacation.enabled"
+                  ng-true-value="1"
+                  ng-false-value="0"
+                  label:aria-label="Enable vacation auto reply">
+                <var:string label:value="Enable vacation auto reply"/>
+              </md-checkbox>
+
+              <div ng-show="app.preferences.defaults.Vacation.enabled == 1">
+                <md-input-container>
+                  <label><var:string label:value="Auto reply message"/></label>
+                  <textarea const:name="autoReplyText"
+                            const:id="autoReplyText"
+                            ng-model="app.preferences.defaults.Vacation.autoReplyText"/>
+                </md-input-container>
+
+                <md-input-container>
+                  <!-- <script>
+                       var defaultEmailAddresses = <var:string value="defaultEmailAddresses" const:escapeHTML="NO"/>;
+                       </script> -->
+                  <label><var:string label:value="Email addresses (separated by commas)"/></label>
+                  <textarea const:name="autoReplyEmailAddresses"
+                            const:id="autoReplyEmailAddresses"
+                            ng-model="app.preferences.defaults.Vacation.autoReplyEmailAddresses"/>
+                </md-input-container>
+                <div layout="row" layout-align="end center">
+                  <md-button>
+                    <var:string label:value="Add default email addresses" type="button"/>
                   </md-button>
                 </div>
-              </var:if>
 
-            </md-tab>
-            <!-- END OF MAIL > ACCOUNTS -->
+                <md-input-container>
+                  <label><var:string label:value="Days between responses"/></label>
+                  <md-select label:aria-label="Days between responses"
+                             ng-model="app.preferences.defaults.Vacation.daysBetweenResponse">
+                    <var:foreach list="daysBetweenResponsesList" item="item">
+                      <md-option var:value="item">
+                        <var:string value="item"/>
+                      </md-option>
+                    </var:foreach>
+                  </md-select>
+                </md-input-container>
 
+                <md-checkbox
+                    ng-model="app.preferences.defaults.Vacation.ignoreLists"
+                    ng-true-value="1"
+                    ng-false-value="0">
+                  <var:string label:value="Do not send responses to mailing lists" />
+                </md-checkbox>
 
-            <!-- MAIL > VACATION -->
-            <var:if condition="isVacationEnabled">
-              <md-tab id="mailVacationTab" aria-controls="mailVacationTab-content" label:label="Vacation">
-                <div role="tabpanel" aria-labelledby="mailVacationView" id="mailVacationView-content">
-
+                <div layout="row" layout-align="end center">
                   <md-checkbox
-                      ng-model="app.preferences.defaults.Vacation.enabled"
+                      ng-model="app.preferences.defaults.Vacation.endDateEnabled"
                       ng-true-value="1"
-                      ng-false-value="0"
-                      label:aria-label="Enable vacation auto reply">
-                    <var:string label:value="Enable vacation auto reply"/>
+                      ng-false-value="0">
+                    <var:string label:value="Disable auto reply on" />
                   </md-checkbox>
-
-                  <div ng-show="app.preferences.defaults.Vacation.enabled == 1">
-                    <div>
-                      <label><var:string label:value="Auto reply message"/>
-                      <textarea const:name="autoReplyText"
-                                const:id="autoReplyText"
-                                ng-model="app.preferences.defaults.Vacation.autoReplyText"/>
-                      </label>
-                    </div>
-
-                    <div>
-                      <!-- <script>
-                           var defaultEmailAddresses = <var:string value="defaultEmailAddresses" const:escapeHTML="NO"/>;
-                           </script> -->
-                      <label><var:string label:value="Email addresses (separated by commas)"/></label><br/>
-                      <textarea const:name="autoReplyEmailAddresses"
-                                const:id="autoReplyEmailAddresses"
-                                ng-model="app.preferences.defaults.Vacation.autoReplyEmailAddresses"/><br/>
-                      <md-button>
-                        <var:string label:value="Add default email addresses" type="button"/>
-                      </md-button>
-                    </div>
-
-                    <md-input-container>
-                      <label><var:string label:value="Days between responses"/></label>
-                      <md-select label:aria-label="Days between responses"
-                                 ng-model="app.preferences.defaults.Vacation.daysBetweenResponse">
-                        <var:foreach list="daysBetweenResponsesList" item="item">
-                          <md-option var:value="item">
-                            <var:string value="item"/>
-                          </md-option>
-                        </var:foreach>
-                      </md-select>
-                    </md-input-container>
-
-                    <md-checkbox
-                        ng-model="app.preferences.defaults.Vacation.ignoreLists"
-                        ng-true-value="1"
-                        ng-false-value="0">
-                      <var:string label:value="Do not send responses to mailing lists" />
-                    </md-checkbox>
-
-                    <div layout="row" layout-align="space-around start">
-                      <md-checkbox
-                          ng-model="app.preferences.defaults.Vacation.endDateEnabled"
-                          ng-true-value="1"
-                          ng-false-value="0">
-                        <var:string label:value="Disable auto reply on" />
-                      </md-checkbox>
-
-                        <md-datepicker
-                            ng-disabled="app.preferences.defaults.Vacation.endDateEnabled == 0"
-                            ng-model="app.preferences.defaults.Vacation.endDate"><!-- datepicker --></md-datepicker>
-
-                    </div>
-
-                    <md-checkbox
-                        ng-model="app.preferences.defaults.Vacation.alwaysSend"
-                        ng-true-value="1"
-                        ng-false-value="0">
-                      <var:string label:value="Always send vacation message response"/>
-                    </md-checkbox>
-                  </div>
+                  <md-datepicker
+                      ng-disabled="app.preferences.defaults.Vacation.endDateEnabled == 0"
+                      ng-model="app.preferences.defaults.Vacation.endDate"><!-- datepicker --></md-datepicker>
                 </div>
-              </md-tab>
-            </var:if>
-            <!-- END OF MAIL > VACATION -->
 
-            <!-- MAIL > FORWARD -->
-            <var:if condition="isForwardEnabled">
-              <md-tab id="mailForwardTab" aria-controls="mailForwardTab-content" label:label="Forward">
-                <div role="tabpanel" aria-labelledby="mailForwardView"  id="mailForwardView-content">
-                  <div id="forwardView" class="tab">
-                    <md-checkbox
-                        ng-model="app.preferences.defaults.Forward.enabled"
-                        ng-true-value="1"
-                        ng-false-value="0">
-                      <var:string label:value="Forward incoming messages"/>
-                    </md-checkbox>
+                <md-checkbox
+                    ng-model="app.preferences.defaults.Vacation.alwaysSend"
+                    ng-true-value="1"
+                    ng-false-value="0">
+                  <var:string label:value="Always send vacation message response"/>
+                </md-checkbox>
+              </div>
+            </div>
+          </md-tab>
+        </var:if>
+        <!-- END OF MAIL > VACATION -->
 
-                    <div ng-show="app.preferences.defaults.Forward.enabled == 1">
-                      <label><var:string label:value="Email addresses (separated by commas)"/><br/>
-                      <textarea const:name="forwardAddress"
-                                const:id="forwardAddress"
-                                ng-model="app.preferences.defaults.Forward.forwardAddress" />
-                      </label><br/>
+        <!-- MAIL > FORWARD -->
+        <var:if condition="isForwardEnabled">
+          <md-tab id="mailForwardTab" aria-controls="mailForwardTab-content" label:label="Forward">
+            <div role="tabpanel" aria-labelledby="mailForwardView"
+                 id="mailForwardView-content" class="sg-padded">
+              <md-checkbox
+                  ng-model="app.preferences.defaults.Forward.enabled"
+                  ng-true-value="1"
+                  ng-false-value="0">
+                <var:string label:value="Forward incoming messages"/>
+              </md-checkbox>
 
-                      <md-checkbox
-                          ng-model="app.preferences.defaults.Forward.keepCopy"
-                          ng-true-value="1"
-                          ng-false-value="0">
-                        <var:string label:value="Keep a copy" />
-                      </md-checkbox>
+              <div ng-show="app.preferences.defaults.Forward.enabled == 1">
+                <md-input-container>
+                  <label><var:string label:value="Email addresses (separated by commas)"/></label>
+                  <textarea const:name="forwardAddress"
+                            const:id="forwardAddress"
+                            ng-model="app.preferences.defaults.Forward.forwardAddress" />
+                </md-input-container>
 
-                    </div>
+                <md-checkbox
+                    ng-model="app.preferences.defaults.Forward.keepCopy"
+                    ng-true-value="1"
+                    ng-false-value="0">
+                  <var:string label:value="Keep a copy" />
+                </md-checkbox>
 
-                    <script type="text/javascript">
-                      var forwardConstraints = <var:string value="forwardConstraints" const:escapeHTML="NO"/>;
-                    </script>
+              </div>
 
-                  </div>
-                </div>
-              </md-tab>
-            </var:if>
-            <!-- END OF MAIL > FORWARD -->
+              <script type="text/javascript">
+                var forwardConstraints = <var:string value="forwardConstraints" const:escapeHTML="NO"/>;
+              </script>
 
+            </div>
+          </md-tab>
+        </var:if>
+        <!-- END OF MAIL > FORWARD -->
 
-          </md-tabs>
-      </var:if>
-    </script>
+      </md-tabs>
+    </var:if>
+  </script>
 
 </var:component>