From d72188e2da3f6c8f8e341e9114d1d73c474e2f88 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 3 Sep 2015 16:10:05 -0400
Subject: [PATCH] Improve toolbars on small screens

- normalized toolbars in message viewer, contact viewer and contact
  editor;
- lower width of sidenav on medium screens;
- reworked display of message headers
---
 .../ContactsUI/UIxContactEditorTemplate.wox   |  59 ++-
 .../ContactsUI/UIxContactFoldersView.wox      | 227 ++++++-----
 .../ContactsUI/UIxContactViewTemplate.wox     | 277 +++++++-------
 UI/Templates/MailerUI/UIxMailEditor.wox       | 362 +++++++++---------
 .../MailerUI/UIxMailFolderTemplate.wox        | 154 +++++++-
 UI/Templates/MailerUI/UIxMailMainFrame.wox    | 158 +-------
 UI/Templates/MailerUI/UIxMailViewTemplate.wox | 252 ++++++------
 .../UIxAppointmentViewTemplate.wox            |   2 +-
 .../SchedulerUI/UIxTaskEditorTemplate.wox     |   2 +-
 .../SchedulerUI/UIxTaskViewTemplate.wox       |   2 +-
 UI/Templates/UIxSidenavToolbarTemplate.wox    |   6 +-
 UI/Templates/UIxTopnavToolbarTemplate.wox     |  12 +-
 .../scss/components/button/button.scss        |   2 +-
 .../scss/components/icon/icon.scss            |  16 +-
 .../scss/components/list/list.scss            |   5 +-
 .../scss/components/toolbar/toolbar.scss      |  35 +-
 .../scss/views/MailerUI.scss                  |   4 +-
 UI/WebServerResources/scss/views/_view.scss   |  21 +-
 18 files changed, 812 insertions(+), 784 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index 5854f23d1..b6ce13767 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -5,8 +5,29 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
 
-    <md-content md-scroll-y="md-scroll-y" class="viewer md-padding md-whiteframe-z1 bg-sogoPaper-50">
-      <!-- <div class="editor md-padding">-->
+  <div layout="column" class="layout-fill">
+    <md-toolbar>
+      <div class="md-toolbar-tools">
+        <md-button class="sg-icon-button"
+                   label:aria-label="Cancel"
+                   ng-click="editor.cancel()">
+          <md-icon>close</md-icon>
+        </md-button>
+        <div class="md-flex"><!-- spacer --></div>
+        <md-button class="sg-icon-button"
+                   label:aria-label="Reset"
+                   ng-click="editor.reset()">
+          <md-icon>undo</md-icon>
+        </md-button>
+        <md-button class="sg-icon-button"
+                   label:aria-label="Save"
+                   ng-click="editor.save(editor.card.$isCard()?cardForm:listForm)">
+          <md-icon>save</md-icon>
+        </md-button>
+      </div>
+    </md-toolbar>
+    <md-content class="md-flex md-static">
+      <div layout="column" class="viewer md-padding">
         <hgroup class="header">
           <h1 class="sg-md-display-2--light" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
           <h6 class="sg-md-display-2-subheader">{{editor.card.$description()}}</h6>
@@ -21,7 +42,7 @@
             </label>
             <input type="text" ng-maxlength="30" ng-model="editor.card.c_cn"/>
           </md-input-container>
-          <!-- todo: look for better reset/normalization. Semanticaly this should be a fieldset, but content doesn't flex properly du to browser styles-->
+          <!-- todo: look for better reset/normalization. Semanticaly this should be a fieldset, but content doesn't flex properly du to browser styles -->
           <div id="contact-identification" class="sg-fieldset" layout="row" layout-sm="column">
             <md-input-container flex="40">
               <label>
@@ -298,22 +319,10 @@
             </label>
             <textarea ng-model="editor.card.note"><!-- note --></textarea>
           </md-input-container>
-
-          <div class="fieldset md-layout-margin" layout="row" layout-align="end center">
-            <md-button type="button" ng-click="editor.cancel()">
-              <var:string label:value="Cancel"/>
-            </md-button>
-            <md-button type="button" ng-click="editor.reset()">
-              <var:string label:value="Reset"/>
-            </md-button>
-            <md-button class="md-primary md-hue-3" type="submit">
-              <var:string label:value="Save"/>
-            </md-button>
-          </div>
         </form>
 
         <!-- list editor -->
-        <form name="listForm" ng-if="editor.card.$isList()" ng-submit="editor.save(listForm)">
+        <form name="listForm" ng-show="editor.card.$isList()" ng-submit="editor.save(listForm)">
           <md-input-container>
             <label>
               <var:string label:value="Display"/>
@@ -350,22 +359,8 @@
                 filter-selected="false"
                 label:placeholder="Add Member"><!-- members --></md-contact-chips>
           </div>
-          
-          <div class="fieldset md-layout-margin" layout="row" layout-align="end center">
-            <md-button type="button" ng-click="editor.cancel()">
-              <var:string label:value="Cancel"/>
-            </md-button>
-            <md-button type="button" ng-click="editor.reset()">
-              <var:string label:value="Reset"/>
-            </md-button>
-            <var:if condition="canCreateOrModify">
-              <md-button class="md-primary md-hue-3" type="submit">
-                <var:string label:value="Save"/>
-              </md-button>
-            </var:if>
-          </div>
         </form>
-      <!-- </div> -->
+      </div>
     </md-content>
-
+  </div>
 </container>
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index b301a7e9a..28d35af6d 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -176,21 +176,23 @@
   </script>
 
   <script type="text/ng-template" id="addressbook">
-    <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
-      <div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
-        <var:component className="UIxTopnavToolbarTemplate" />
-      </div>
-      <div class="md-toolbar-tools" layout="row" layout-align="space-between center"
-           ng-show="addressbook.selectedFolder.$selectedCount() == 0">
-        <div class="view-list" layout="row" layout-align="space-between center"
-             ng-hide="addressbook.mode.search">
-          <div class="sg-toolbar-group">
+    <md-toolbar layout="row" layout-align="space-between center" class="toolbar-main">
+      <var:component className="UIxTopnavToolbarTemplate" />
+    </md-toolbar>
+
+    <div layout="row" class="md-flex">
+
+      <div class="view-list" layout="column">
+
+        <!-- single-selection toolbar -->
+        <md-toolbar ng-show="addressbook.selectedFolder.$selectedCount() == 0">
+          <!-- sort mode -->
+          <div class="md-toolbar-tools" ng-hide="addressbook.mode.search">
             <md-button class="sg-icon-button" label:aria-label="Search"
                        ng-click="addressbook.mode.search = true">
               <md-icon>search</md-icon>
             </md-button>
-          </div>
-          <div class="sg-toolbar-group-last">
+            <div class="md-flex"><!-- spacer --></div>
             <md-menu>
               <md-button class="sg-icon-button" label:aria-label="Sort"
                          ng-click="$mdOpenMenu()">
@@ -246,94 +248,89 @@
               <md-icon>refresh</md-icon>
             </md-button>
           </div>
-        </div>
-        <!-- search mode -->
-        <div class="view-list sg-padded--right sg-toolbar-search" layout="row" layout-align="space-between center"
-             ng-show="addressbook.mode.search"
-             sg-search="addressbook.selectedFolder.$filter(searchText, { search: searchField })">
-          <md-button class="sg-icon-button"
-                     sg-search-cancel="addressbook.cancelSearch()"
-                     label:aria-label="Back">
-            <md-icon>arrow_back</md-icon>
-          </md-button>
-          <md-input-container>
-            <input name="folderSearch" type="search" />
-          </md-input-container>
-          <md-input-container>
-            <md-select>
-              <md-option value="name_or_address" selected="selected"><var:string label:value="Name or Email"/></md-option>
-              <md-option value="category"><var:string label:value="Category"/></md-option>
-              <md-option value="organization"><var:string label:value="Organization"/></md-option>
-            </md-select>
-          </md-input-container>
-        </div>
-      </div>
-      <!-- multiple selection mode -->
-      <div class="md-toolbar-tools" layout="row" layout-align="space-between center"
-           ng-show="addressbook.selectedFolder.$selectedCount() > 0">
-        <div class="view-list" layout="row" layout-align="space-between center">
-          <div class="sg-toolbar-group">
+          <!-- search mode -->
+          <div class="md-toolbar-tools sg-toolbar-secondary"
+               ng-show="addressbook.mode.search"
+               sg-search="addressbook.selectedFolder.$filter(searchText, { search: searchField })">
+            <md-button class="sg-icon-button"
+                       sg-search-cancel="addressbook.cancelSearch()"
+                       label:aria-label="Back">
+              <md-icon>arrow_back</md-icon>
+            </md-button>
+            <md-input-container>
+              <input name="folderSearch" type="search" />
+            </md-input-container>
+            <md-input-container>
+              <md-select>
+                <md-option value="name_or_address" selected="selected"><var:string label:value="Name or Email"/></md-option>
+                <md-option value="category"><var:string label:value="Category"/></md-option>
+                <md-option value="organization"><var:string label:value="Organization"/></md-option>
+              </md-select>
+            </md-input-container>
+          </div>
+        </md-toolbar>
+
+        <!-- multiple selection mode -->
+        <md-toolbar class="md-hue-1 sg-toolbar-secondary"
+                    ng-show="addressbook.selectedFolder.$selectedCount() > 0">
+          <div class="md-toolbar-tools">
             <md-button class="sg-icon-button" ng-click="addressbook.unselectCards()">
               <md-icon>arrow_back</md-icon>
             </md-button>
             <label>{{addressbook.selectedFolder.$selectedCount()}} <var:string label:value="selected"/></label>
+            <div class="md-flex"><!-- spacer --></div>
+            <md-button class="sg-icon-button" ng-click="addressbook.selectAll()">
+              <md-tooltip md-direction="left"><var:string label:value="Select All"/></md-tooltip>
+              <md-icon>select_all</md-icon>
+            </md-button>
+            <md-button class="sg-icon-button"
+                       ng-show="addressbook.selectedFolder.acls.objectEraser"
+                       ng-click="addressbook.confirmDeleteSelectedCards()">
+              <md-icon>delete</md-icon>
+            </md-button>
+            <md-menu>
+              <md-button class="sg-icon-button" label:aria-label="Copy contacts" ng-click="$mdOpenMenu()">
+                <md-tooltip md-direction="left"><var:string label:value="Copy To"/></md-tooltip>
+                <md-icon>content_copy</md-icon>
+              </md-button>
+              <md-menu-content width="4">
+                <md-menu-item>
+                  <md-button class="md-primary" ng-disabled="true"><var:string label:value="Address Books"/></md-button>
+                </md-menu-item>
+                <md-menu-divider><!-- divider --></md-menu-divider>
+                <md-menu-item ng-repeat="folder in app.service.$addressbooks track by folder.id"
+                              ng-hide="addressbook.selectedFolder.id == folder.id">
+                  <md-button ng-click="addressbook.copySelectedCards(folder.id)">
+                    <span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
+                  </md-button>
+                </md-menu-item>
+              </md-menu-content>
+            </md-menu>
+            <md-menu>
+              <md-button class="sg-icon-button" label:aria-label="More messages options" ng-click="$mdOpenMenu()">
+                <md-icon>more_vert</md-icon>
+              </md-button>
+              <md-menu-content width="2">
+                <md-menu-item>
+                  <md-button ng-click="addressbook.newMessageWithSelectedCards($event)">
+                    <var:string label:value="Write"/>
+                  </md-button>
+                </md-menu-item>
+                <md-menu-item>
+                  <md-button ng-click="addressbook.saveSelectedCards()">
+                    <var:string label:value="Export"/>
+                  </md-button>
+                </md-menu-item>
+              </md-menu-content>
+            </md-menu>
           </div>
-          <div class="sg-toolbar-group-last">
-        <md-button class="sg-icon-button" ng-click="addressbook.selectAll()">
-          <md-tooltip md-direction="left"><var:string label:value="Select All"/></md-tooltip>
-          <md-icon>select_all</md-icon>
-        </md-button>
-        <md-button class="sg-icon-button"
-                   ng-show="addressbook.selectedFolder.acls.objectEraser"
-                   ng-click="addressbook.confirmDeleteSelectedCards()">
-          <md-icon>delete</md-icon>
-        </md-button>
-        <md-menu>
-          <md-button class="sg-icon-button" label:aria-label="Copy contacts" ng-click="$mdOpenMenu()">
-            <md-tooltip md-direction="left"><var:string label:value="Copy To"/></md-tooltip>
-            <md-icon>content_copy</md-icon>
-          </md-button>
-          <md-menu-content width="4">
-            <md-menu-item>
-              <md-button class="md-primary" ng-disabled="true"><var:string label:value="Address Books"/></md-button>
-            </md-menu-item>
-            <md-menu-divider><!-- divider --></md-menu-divider>
-            <md-menu-item ng-repeat="folder in app.service.$addressbooks track by folder.id"
-                          ng-hide="addressbook.selectedFolder.id == folder.id">
-              <md-button ng-click="addressbook.copySelectedCards(folder.id)">
-                <span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
-              </md-button>
-            </md-menu-item>
-          </md-menu-content>
-        </md-menu>
-        <md-menu>
-          <md-button class="sg-icon-button" label:aria-label="More messages options" ng-click="$mdOpenMenu()">
-            <md-icon>more_vert</md-icon>
-          </md-button>
-          <md-menu-content width="2">
-            <md-menu-item>
-              <md-button ng-click="addressbook.newMessageWithSelectedCards($event)">
-                <var:string label:value="Write"/>
-              </md-button>
-            </md-menu-item>
-            <md-menu-item>
-              <md-button ng-click="addressbook.saveSelectedCards()">
-                <var:string label:value="Export"/>
-              </md-button>
-            </md-menu-item>
-          </md-menu-content>
-        </md-menu>
-          </div>
-      </div>
-    </div>
-    </md-toolbar>
-    <div layout="row" class="md-flex">
-      <div class="view-list" layout="column">
+        </md-toolbar>
+
         <md-content id="contactsList" layout="column" class="md-flex">
           <header class="sg-md-subheader sg-md-subheader--fixed">
-            <h2 class="md-default-theme sg-md-subhead-solo fg-sogoBlue-700">
-              <span ng-show="addressbook.selectedFolder.cards.length > 0">{{addressbook.selectedFolder.cards.length}} <var:string label:value="contacts"/></span>
-              <span ng-show="addressbook.selectedFolder.cards.length == 0"><var:string label:value="No contact"/></span>
+            <h2 ng-switch="addressbook.selectedFolder.cards.length">
+              <span ng-switch-when="0"><var:string label:value="No contact"/></span>
+              <span ng-switch-default="true">{{addressbook.selectedFolder.cards.length}} <var:string label:value="contacts"/></span>
             </h2>
           </header>
           <md-virtual-repeat-container class="md-flex">
@@ -343,22 +340,22 @@
                     ng-class="{'sg-active': currentCard.id == addressbook.selectedFolder.selectedCard}"
                     ng-click="addressbook.selectCard(currentCard)"
                     ui-sref="app.addressbook.card.view({addressbookId: addressbook.selectedFolder.id, cardId: currentCard.id})">
-                    <div class="sg-selected-avatar" ng-show="currentCard.selected"
-                         ng-click="currentCard.selected = !currentCard.selected">
-                      <!-- selected avatar -->
-                    </div>
-                    <sg-avatar-image class="md-tile-left"
-                                     ng-show="addressbook.notSelectedComponent(currentCard, 'vcard')"
-                                     ng-click="currentCard.selected = !currentCard.selected"
-                                     sg-email="currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)"
-                                     size="40">
-                      <!-- contact avatar -->
-                    </sg-avatar-image>
-                    <div class="sg-list-avatar"
-                         ng-show="addressbook.notSelectedComponent(currentCard, 'vlist')"
-                         ng-click="currentCard.selected = !currentCard.selected">
-                      <!-- list avatar -->
-                    </div>
+                  <div class="sg-selected-avatar" ng-show="currentCard.selected"
+                       ng-click="currentCard.selected = !currentCard.selected">
+                    <!-- selected avatar -->
+                  </div>
+                  <sg-avatar-image class="md-tile-left"
+                                   ng-show="addressbook.notSelectedComponent(currentCard, 'vcard')"
+                                   ng-click="currentCard.selected = !currentCard.selected"
+                                   sg-email="currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)"
+                                   size="40">
+                    <!-- contact avatar -->
+                  </sg-avatar-image>
+                  <div class="sg-list-avatar"
+                       ng-show="addressbook.notSelectedComponent(currentCard, 'vlist')"
+                       ng-click="currentCard.selected = !currentCard.selected">
+                    <!-- list avatar -->
+                  </div>
                   <div class="sg-tile-content">
                     <div class="sg-md-subhead-multi" ng-bind-html="currentCard.$fullname()"><!-- cn --></div>
                     <div class="sg-md-body-multi">{{currentCard.$preferredEmail(addressbook.selectedFolder.constructor.$query)}}</div>
@@ -382,14 +379,16 @@
         </md-content>
       </div>
 
-      <md-content id="detailView" class="view-detail md-hue-1" layout="column" layout-align="center center"
+      <div id="detailView" class="view-detail" layout="column" layout-align="start center"
            ng-class="{ 'sg-close': !addressbook.selectedFolder.selectedCard }"
            ui-view="card">
-        <md-input-container class="hide-sm md-hue-1" style="flex-grow: 0">
-          <label class="sg-md-title"><var:string label:value="No contact selected"/></label>
-        </md-input-container>
-      </md-content>
-
+        <md-toolbar class="hide-sm"><!-- empty toolbar --></md-toolbar>
+        <md-content class="hide-sm md-flex layout-fill md-hue-1" layout="column">
+          <md-input-container layout-align="center center">
+            <label class="sg-md-title"><var:string label:value="No contact selected"/></label>
+          </md-input-container>
+        </md-content>
+      </div>
     </div>
   </script>
 
diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index 7bc8a95dd..fbb66e50a 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -3,51 +3,31 @@
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
-    xmlns:label="OGo:label"
-    >
-  <md-card class="viewer flex-sm">
-    <md-card-content>
-      <header class="msg-header">
-        <div ng-show="editor.card.tag == 'vcard'">
-          <sg-avatar-image class="md-tile-left"
-                           sg-email="editor.card.$preferredEmail()"
-                           sg-src="editor.card.photoURL"
-                           size="48"><!-- avatar --></sg-avatar-image>
-        </div>
-        <div class="sg-list-avatar" ng-show="editor.card.tag == 'vlist'">
-          <!--list avatar-->
-        </div>
-        <div class="msg-header-content">
-          <h1 class="sg-md-display-2--light" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
-          <h6 class="sg-md-display-2-subheader">{{editor.card.$description()}}</h6>
-          <md-chips ng-model="editor.card.categories"
-                    class="sg-readonly" readonly="true">
-            <md-chip-template>
-              {{$chip.value}}
-            </md-chip-template>
-          </md-chips>
-        </div>
-        <div class="sg-icon-bar--vertical">
-          <md-button class="sg-icon-button show-sm"
-                     label:aria-label="Close"
-                     ng-click="editor.close()">
-            <md-icon>close</md-icon>
-          </md-button>
-          <md-button class="sg-icon-button"
-                     label:aria-label="Edit"
-                     ng-show="editor.currentFolder.acls.objectEditor"
-                     ui-sref="app.addressbook.card.editor({addressbookId: editor.currentFolder.id, cardId: editor.card.id})">
-            <md-tooltip md-direction="left"><var:string label:value="Edit"/></md-tooltip>
-            <md-icon>mode_edit</md-icon>
-          </md-button>
-          <md-button class="sg-icon-button"
-                     label:aria-label="Delete"
-                     ng-show="editor.currentFolder.acls.objectEraser"
-                     ng-click="editor.confirmDelete(editor.card)">
-            <md-tooltip md-direction="left"><var:string label:value="Delete"/></md-tooltip>
-            <md-icon>delete</md-icon>
-          </md-button>
+    xmlns:label="OGo:label">
 
+  <div layout="column" class="layout-fill">
+    <md-toolbar>
+      <div class="md-toolbar-tools">
+        <md-button class="sg-icon-button hide show-sm"
+                   label:aria-label="Close"
+                   ng-click="editor.close()">
+          <md-icon>close</md-icon>
+        </md-button>
+        <div class="md-flex"><!-- spacer --></div>
+        <md-button class="sg-icon-button"
+                   label:aria-label="Edit"
+                   ng-show="editor.currentFolder.acls.objectEditor"
+                   ui-sref="app.addressbook.card.editor({addressbookId: editor.currentFolder.id, cardId: editor.card.id})">
+          <md-tooltip md-direction="left"><var:string label:value="Edit"/></md-tooltip>
+          <md-icon>mode_edit</md-icon>
+        </md-button>
+        <md-button class="sg-icon-button"
+                   label:aria-label="Delete"
+                   ng-show="editor.currentFolder.acls.objectEraser"
+                   ng-click="editor.confirmDelete(editor.card)">
+          <md-tooltip md-direction="left"><var:string label:value="Delete"/></md-tooltip>
+          <md-icon>delete</md-icon>
+        </md-button>
         <md-menu>
           <md-button label:aria-label="More contact options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
             <md-icon>more_vert</md-icon>
@@ -67,110 +47,133 @@
             </md-menu-item>
           </md-menu-content>
         </md-menu>
-
-        </div>
-      </header>
-      <section class="msg-body">
-
-        <div class="pseudo-input-container" ng-show="editor.card.$birthday().length">
-          <div class="key">
-            <label class="pseudo-input-label">
-              <var:string label:value="Birthday"/>
-            </label>
+      </div>
+    </md-toolbar>
+    <md-content class="md-flex md-static">
+      <div layout="column" class="viewer md-padding">
+        <header class="msg-header">
+          <div ng-show="editor.card.c_component == 'vcard'">
+            <sg-avatar-image class="md-tile-left"
+                             sg-email="editor.card.$preferredEmail()"
+                             sg-src="editor.card.photoURL"
+                             size="48"><!-- avatar --></sg-avatar-image>
           </div>
-          <div class="pseudo-input-field">
-            <span>{{editor.card.$birthday()}}</span>
+          <div class="sg-list-avatar" ng-show="editor.card.c_component == 'vlist'">
+            <!--list avatar-->
           </div>
-        </div>
+          <div class="msg-header-content">
+            <h1 class="sg-md-display-2--light" ng-bind-html="editor.card.$fullname()"><!-- fullname --></h1>
+            <h6 class="sg-md-display-2-subheader">{{editor.card.$description()}}</h6>
+            <md-chips ng-model="editor.card.categories"
+                      class="sg-readonly" readonly="true">
+              <md-chip-template>
+                {{$chip.value}}
+              </md-chip-template>
+            </md-chips>
+          </div>
+        </header>
+        <section class="msg-body">
 
-        <!-- list members -->
-        <div class="section" ng-show="editor.card.refs.length > 0">
-          <label class="pseudo-input-label">
-            <var:string label:value="Members"/>
-          </label>
-          <md-list>
-            <md-list-item class="md-3-line" ng-repeat="ref in editor.card.refs track by ref.reference">
-              <sg-avatar-image class="md-tile-left"
-                               sg-email="ref.$preferredEmail()"
-                               size="48">
-                <!-- contact avatar -->
-              </sg-avatar-image>
-              <div class="md-list-item-text">
-                <h3>
-                  <a ui-sref="app.addressbook.card.view({addressbookId: editor.currentFolder.id, cardId: ref.reference})">
-                    {{ ref.$fullname() }}
-                  </a>
-                </h3>
-                <h4 ng-show="ref.email">
-                  <a ui-sref="mailto:{{ref.email}}" ng-class="ng-scope">
-                    {{ ref.email }}
-                  </a>
-                </h4>
-              </div>
-            </md-list-item>
-          </md-list>
-        </div>
-        
-        <div class="section" ng-show="editor.card.emails.length > 0">
-          <div class="pseudo-input-container" ng-repeat="email in editor.card.emails">
+          <div class="pseudo-input-container" ng-show="editor.card.$birthday().length">
             <div class="key">
-              <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
-            </div>
-            
-            <div class="pseudo-input-field">
-              <a href="#" ng-bind="email.value"
-                 ng-click="addressbook.newMessageWithRecipient($event, email.value, editor.card.$fullname())"><!-- recipient --></a>
-            </div>
-            
-          </div>
-        </div>
-        
-        <div class="section" ng-show="editor.card.phones.length > 0">
-          <div class="pseudo-input-container" ng-repeat="phone in editor.card.phones">
-            <div class="key">
-              <label class="pseudo-input-label">{{phone.type}}</label>
-            </div>
-
-            <div class="pseudo-input-field">
-              <a href="tel:{{phone.value}}">{{phone.value}}</a>
-            </div>
-
-          </div>
-        </div>
-        <div class="section" ng-show="editor.card.urls">
-          <div class="pseudo-input-container" ng-repeat="url in editor.card.urls">
-            <div class="key">
-              <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
+              <label class="pseudo-input-label">
+                <var:string label:value="Birthday"/>
               </label>
             </div>
-
             <div class="pseudo-input-field">
-              <a href="#" ng-href="{{url.value}}">{{url.value}}</a>
-            </div>
-
-          </div>
-        </div>
-        <div class="section" ng-show="editor.card.addresses">
-          <div class="pseudo-input-container" ng-repeat="address in editor.card.addresses">
-            <div class="key">
-              <label class="pseudo-input-label">{{address.type}}</label>
-            </div>
-            <div class="pseudo-input-field">
-              <div sg-address="address"><!-- address --></div>
+              <span>{{editor.card.$birthday()}}</span>
             </div>
           </div>
-        </div>
-        <div class="pseudo-input-container" ng-show="editor.card.note">
-          <div class="key">
+
+          <!-- list members -->
+          <div class="section" ng-show="editor.card.refs.length > 0">
             <label class="pseudo-input-label">
-              <var:string label:value="Note"/>
+              <var:string label:value="Members"/>
             </label>
+            <md-list>
+              <md-list-item class="md-3-line" ng-repeat="ref in editor.card.refs track by ref.reference">
+                <sg-avatar-image class="md-tile-left"
+                                 sg-email="ref.$preferredEmail()"
+                                 size="48">
+                  <!-- contact avatar -->
+                </sg-avatar-image>
+                <div class="md-list-item-text">
+                  <h3>
+                    <a ui-sref="app.addressbook.card.view({addressbookId: editor.currentFolder.id, cardId: ref.reference})">
+                      {{ ref.$fullname() }}
+                    </a>
+                  </h3>
+                  <h4 ng-show="ref.email">
+                    <a ui-sref="mailto:{{ref.email}}" ng-class="ng-scope">
+                      {{ ref.email }}
+                    </a>
+                  </h4>
+                </div>
+              </md-list-item>
+            </md-list>
           </div>
-          <div class="pseudo-input-field">
-            <div ng-bind-html="editor.card.note"><!-- note --></div>
+
+          <div class="section" ng-show="editor.card.emails.length > 0">
+            <div class="pseudo-input-container" ng-repeat="email in editor.card.emails">
+              <div class="key">
+                <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{email.type}}</label>
+              </div>
+
+              <div class="pseudo-input-field">
+                <a href="#" ng-bind="email.value"
+                   ng-click="addressbook.newMessageWithRecipient($event, email.value, editor.card.$fullname())"><!-- recipient --></a>
+              </div>
+
+            </div>
           </div>
-        </div>
-      </section>
-    </md-card-content>
-  </md-card>
+
+          <div class="section" ng-show="editor.card.phones.length > 0">
+            <div class="pseudo-input-container" ng-repeat="phone in editor.card.phones">
+              <div class="key">
+                <label class="pseudo-input-label">{{phone.type}}</label>
+              </div>
+
+              <div class="pseudo-input-field">
+                <a href="tel:{{phone.value}}">{{phone.value}}</a>
+              </div>
+
+            </div>
+          </div>
+          <div class="section" ng-show="editor.card.urls">
+            <div class="pseudo-input-container" ng-repeat="url in editor.card.urls">
+              <div class="key">
+                <label class="pseudo-input-label"><var:entity const:name="nbsp"/>{{url.type}}
+                </label>
+              </div>
+
+              <div class="pseudo-input-field">
+                <a href="#" ng-href="{{url.value}}">{{url.value}}</a>
+              </div>
+
+            </div>
+          </div>
+          <div class="section" ng-show="editor.card.addresses">
+            <div class="pseudo-input-container" ng-repeat="address in editor.card.addresses">
+              <div class="key">
+                <label class="pseudo-input-label">{{address.type}}</label>
+              </div>
+              <div class="pseudo-input-field">
+                <div sg-address="address"><!-- address --></div>
+              </div>
+            </div>
+          </div>
+          <div class="pseudo-input-container" ng-show="editor.card.note">
+            <div class="key">
+              <label class="pseudo-input-label">
+                <var:string label:value="Note"/>
+              </label>
+            </div>
+            <div class="pseudo-input-field">
+              <div ng-bind-html="editor.card.note"><!-- note --></div>
+            </div>
+          </div>
+        </section>
+      </div>
+    </md-content>
+  </div>
 </container>
diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index f8f0fabb3..0596911cd 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -6,7 +6,7 @@
     xmlns:label="OGo:label">
 
   <md-dialog flex="80" flex-sm="100">
-    <md-toolbar class="sg-padded--right">
+    <md-toolbar>
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">edit</md-icon>
         <!-- from -->
@@ -34,166 +34,166 @@
     </md-toolbar>
 
     <md-dialog-content>
-        <header>
-          <div class="msg-header-content">
+      <header>
+        <div class="msg-header-content">
 
-            <!-- to -->
-            <div class="pseudo-input-container">
-              <label class="pseudo-input-label">
-                <var:string label:value="To"/>
-              </label>
-              <md-chips ng-model="editor.message.editable.to"
-                        md-on-append="editor.addRecipient($chip)">
-                <md-autocomplete
-                    class="sg-chips-autocomplete"
-                    md-search-text="editor.autocomplete.to.searchText"
-                    md-selected-item="editor.autocomplete.to.selected"
-                    md-items="user in editor.contactFilter(editor.autocomplete.to.searchText)"
-                    md-min-length="3"
-                    md-delay="300"
-                    md-no-cache="true"
-                    label:placeholder="Add a recipient">
-                  <md-item-template>
-                    <span class="md-contact-suggestion">
-                      <span class="md-contact-name"
-                            md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$fullname}}</span>
-                      <span class="md-contact-email"
-                            md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$email}}</span>
-                    </span>
-                  </md-item-template>
-                </md-autocomplete>
-                <md-chip-template>{{$chip}}</md-chip-template>
-              </md-chips>
-            </div>
-
-            <!-- cc -->
-            <div class="pseudo-input-container" ng-hide="editor.hideCc">
-              <label class="pseudo-input-label">
-                <var:string label:value="Cc"/>
-              </label>
-              <md-chips ng-model="editor.message.editable.cc"
-                        md-on-append="editor.addRecipient($chip)">
-                <md-autocomplete
-                    class="sg-chips-autocomplete"
-                    md-search-text="editor.autocomplete.cc.searchText"
-                    md-selected-item="editor.autocomplete.cc.selected"
-                    md-items="user in editor.contactFilter(editor.autocomplete.cc.searchText)"
-                    label:placeholder="Add a recipient">
-                   <md-item-template>
-                    <span class="md-contact-suggestion">
-                      <span class="md-contact-name"
-                            md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$fullname}}</span>
-                      <span class="md-contact-email"
-                            md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$email}}</span>
-                    </span>
-                  </md-item-template>
-                </md-autocomplete>
-                <md-chip-template>{{$chip}}</md-chip-template>
-              </md-chips>
-            </div>
-
-            <!-- bcc -->
-            <div class="pseudo-input-container" ng-hide="editor.hideBcc">
-              <label class="pseudo-input-label">
-                <var:string label:value="Bcc"/>
-              </label>
-              <md-chips ng-model="editor.message.editable.bcc"
-                        md-on-append="editor.addRecipient($chip)">
-                <md-autocomplete
-                    class="sg-chips-autocomplete"
-                    md-selected-item="editor.autocomplete.bcc.selected"
-                    md-search-text="editor.autocomplete.bcc.searchText"
-                    md-items="user in editor.contactFilter(editor.autocomplete.bcc.searchText)"
-                    label:placeholder="Add a recipient">
-                  <md-item-template>
-                    <span class="md-contact-suggestion">
-                      <span class="md-contact-name"
-                            md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$fullname}}</span>
-                      <span class="md-contact-email"
-                            md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$email}}</span>
-                    </span>
-                  </md-item-template>
-                </md-autocomplete>
-                <md-chip-template>{{$chip}}</md-chip-template>
-              </md-chips>
-            </div>
-
-            <!-- subject -->
-            <md-input-container>
-              <label>
-                <var:string label:value="Subject"/>
-              </label>
-              <input type="text" name="subject" ng-model="editor.message.editable.subject"/>
-            </md-input-container>
+          <!-- to -->
+          <div class="pseudo-input-container">
+            <label class="pseudo-input-label">
+              <var:string label:value="To"/>
+            </label>
+            <md-chips ng-model="editor.message.editable.to"
+                      md-on-append="editor.addRecipient($chip)">
+              <md-autocomplete
+                  class="sg-chips-autocomplete"
+                  md-search-text="editor.autocomplete.to.searchText"
+                  md-selected-item="editor.autocomplete.to.selected"
+                  md-items="user in editor.contactFilter(editor.autocomplete.to.searchText)"
+                  md-min-length="3"
+                  md-delay="300"
+                  md-no-cache="true"
+                  label:placeholder="Add a recipient">
+                <md-item-template>
+                  <span class="md-contact-suggestion">
+                    <span class="md-contact-name"
+                          md-highlight-text="editor.autocomplete.to.searchText"
+                          md-highlight-flags="^i">{{user.$$fullname}}</span>
+                    <span class="md-contact-email"
+                          md-highlight-text="editor.autocomplete.to.searchText"
+                          md-highlight-flags="^i">{{user.$$email}}</span>
+                  </span>
+                </md-item-template>
+              </md-autocomplete>
+              <md-chip-template>{{$chip}}</md-chip-template>
+            </md-chips>
           </div>
 
-          <!-- toolbar to show cc/bcc/attachment fields -->
-          <div layout="column" layout-align="start end">
-            <md-button class="sg-icon-button " ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
-            <md-button class="sg-icon-button " ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
-            <md-menu>
-              <md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
-                <md-icon>more_vert</md-icon>
-              </md-button>
-              <md-menu-content width="4">
-                <md-menu-item>
-                  <md-button ng-href="#">
-                    <md-checkbox ng-model="editor.message.editable.receipt">
-                      <var:string label:value="Return Receipt"/>
-                    </md-checkbox>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button class="md-primary" ng-disabled="true"><var:string label:value="Priority"/></md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="editor.message.editable.priority = 1">
-                    <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 1}"><!-- highest --></md-icon>
-                    <var:string label:value="highest"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="editor.message.editable.priority = 2">
-                    <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 2}"><!-- high --></md-icon>
-                    <var:string label:value="high"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="editor.message.editable.priority = 3">
-                    <md-icon ng-class="{ 'icon-check':
-                                       !editor.message.editable.priority
-                                       || editor.message.editable.priority == 3}"><!-- normal --></md-icon>
-                    <var:string label:value="normal"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="editor.message.editable.priority = 4">
-                    <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 4}"><!-- low --></md-icon>
-                    <var:string label:value="low"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="editor.message.editable.priority = 5">
-                    <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 5}"><!-- lowest --></md-icon>
-                    <var:string label:value="lowest"/>
-                  </md-button>
-                </md-menu-item>
-              </md-menu-content>
-            </md-menu>
-
+          <!-- cc -->
+          <div class="pseudo-input-container" ng-hide="editor.hideCc">
+            <label class="pseudo-input-label">
+              <var:string label:value="Cc"/>
+            </label>
+            <md-chips ng-model="editor.message.editable.cc"
+                      md-on-append="editor.addRecipient($chip)">
+              <md-autocomplete
+                  class="sg-chips-autocomplete"
+                  md-search-text="editor.autocomplete.cc.searchText"
+                  md-selected-item="editor.autocomplete.cc.selected"
+                  md-items="user in editor.contactFilter(editor.autocomplete.cc.searchText)"
+                  label:placeholder="Add a recipient">
+                <md-item-template>
+                  <span class="md-contact-suggestion">
+                    <span class="md-contact-name"
+                          md-highlight-text="editor.autocomplete.to.searchText"
+                          md-highlight-flags="^i">{{user.$$fullname}}</span>
+                    <span class="md-contact-email"
+                          md-highlight-text="editor.autocomplete.to.searchText"
+                          md-highlight-flags="^i">{{user.$$email}}</span>
+                  </span>
+                </md-item-template>
+              </md-autocomplete>
+              <md-chip-template>{{$chip}}</md-chip-template>
+            </md-chips>
           </div>
-        </header>
 
-        <!-- MESSAGE CONTENT -->
-        <textarea name="content" var:class="editorClass"
-                  ck-locale="editor.localeCode"
-                  ng-model="editor.message.editable.text"/>
+          <!-- bcc -->
+          <div class="pseudo-input-container" ng-hide="editor.hideBcc">
+            <label class="pseudo-input-label">
+              <var:string label:value="Bcc"/>
+            </label>
+            <md-chips ng-model="editor.message.editable.bcc"
+                      md-on-append="editor.addRecipient($chip)">
+              <md-autocomplete
+                  class="sg-chips-autocomplete"
+                  md-selected-item="editor.autocomplete.bcc.selected"
+                  md-search-text="editor.autocomplete.bcc.searchText"
+                  md-items="user in editor.contactFilter(editor.autocomplete.bcc.searchText)"
+                  label:placeholder="Add a recipient">
+                <md-item-template>
+                  <span class="md-contact-suggestion">
+                    <span class="md-contact-name"
+                          md-highlight-text="editor.autocomplete.to.searchText"
+                          md-highlight-flags="^i">{{user.$$fullname}}</span>
+                    <span class="md-contact-email"
+                          md-highlight-text="editor.autocomplete.to.searchText"
+                          md-highlight-flags="^i">{{user.$$email}}</span>
+                  </span>
+                </md-item-template>
+              </md-autocomplete>
+              <md-chip-template>{{$chip}}</md-chip-template>
+            </md-chips>
+          </div>
+
+          <!-- subject -->
+          <md-input-container>
+            <label>
+              <var:string label:value="Subject"/>
+            </label>
+            <input type="text" name="subject" ng-model="editor.message.editable.subject"/>
+          </md-input-container>
+        </div>
+
+        <!-- toolbar to show cc/bcc/attachment fields -->
+        <div layout="column" layout-align="end end">
+          <md-button class="sg-icon-button " ng-show="editor.hideCc" ng-click="editor.hideCc = false">Cc</md-button>
+          <md-button class="sg-icon-button " ng-show="editor.hideBcc" ng-click="editor.hideBcc = false">Bcc</md-button>
+          <md-menu>
+            <md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+            <md-menu-content width="4">
+              <md-menu-item>
+                <md-button ng-href="#">
+                  <md-checkbox ng-model="editor.message.editable.receipt">
+                    <var:string label:value="Return Receipt"/>
+                  </md-checkbox>
+                </md-button>
+              </md-menu-item>
+              <md-menu-item>
+                <md-button class="md-primary" ng-disabled="true"><var:string label:value="Priority"/></md-button>
+              </md-menu-item>
+              <md-menu-item>
+                <md-button ng-click="editor.message.editable.priority = 1">
+                  <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 1}"><!-- highest --></md-icon>
+                  <var:string label:value="highest"/>
+                </md-button>
+              </md-menu-item>
+              <md-menu-item>
+                <md-button ng-click="editor.message.editable.priority = 2">
+                  <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 2}"><!-- high --></md-icon>
+                  <var:string label:value="high"/>
+                </md-button>
+              </md-menu-item>
+              <md-menu-item>
+                <md-button ng-click="editor.message.editable.priority = 3">
+                  <md-icon ng-class="{ 'icon-check':
+                                     !editor.message.editable.priority
+                                     || editor.message.editable.priority == 3}"><!-- normal --></md-icon>
+                  <var:string label:value="normal"/>
+                </md-button>
+              </md-menu-item>
+              <md-menu-item>
+                <md-button ng-click="editor.message.editable.priority = 4">
+                  <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 4}"><!-- low --></md-icon>
+                  <var:string label:value="low"/>
+                </md-button>
+              </md-menu-item>
+              <md-menu-item>
+                <md-button ng-click="editor.message.editable.priority = 5">
+                  <md-icon ng-class="{ 'icon-check': editor.message.editable.priority == 5}"><!-- lowest --></md-icon>
+                  <var:string label:value="lowest"/>
+                </md-button>
+              </md-menu-item>
+            </md-menu-content>
+          </md-menu>
+
+        </div>
+      </header>
+
+      <!-- MESSAGE CONTENT -->
+      <textarea name="content" var:class="editorClass"
+                ck-locale="editor.localeCode"
+                ng-model="editor.message.editable.text"/>
     </md-dialog-content>
 
     <!-- TOOLBAR BUTTONS -->
@@ -212,32 +212,32 @@
                  uploader="editor.uploader"
                  ng-show="false"/>
         </div>
-      <div>
-        <!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
-             MAIL WITH ATTACHMENTS -->
-        <md-chips ng-model="editor.message.editable.attachmentAttrs"
-                  class="sg-readonly" readonly="true">
-          <md-chip-template>
-            <span>{{$chip.filename}}</span>
+        <div>
+          <!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
+               MAIL WITH ATTACHMENTS -->
+          <md-chips ng-model="editor.message.editable.attachmentAttrs"
+                    class="sg-readonly" readonly="true">
+            <md-chip-template>
+              <span>{{$chip.filename}}</span>
               <md-icon ng-click="editor.message.$deleteAttachment($chip.filename);">close</md-icon>
-          </md-chip-template>
-        </md-chips>
-        <!-- FILE BEING ATTACHED TO A MAIL -->
-        <md-chips ng-model="editor.uploader.queue"
-                  class="sg-readonly" readonly="true">
-          <md-chip-template>
-            <span>{{$chip.file.name}}</span>
-            <md-icon ng-show="!$chip.isUploading"
-                     ng-click="editor.message.$deleteAttachment($chip.file.name);
-                               $chip.remove();">close</md-icon>
-            <md-icon ng-show="$chip.isUploading"
-                     ng-click="editor.uploader.cancelItem($chip)"
-                     ng-style="{ 'color': '#F00' }">cancel</md-icon>
-            <span ng-show="$chip.isUploading">{{$chip.progress}} %</span>
-          </md-chip-template>
-        </md-chips>
-      </div>
+            </md-chip-template>
+          </md-chips>
+          <!-- FILE BEING ATTACHED TO A MAIL -->
+          <md-chips ng-model="editor.uploader.queue"
+                    class="sg-readonly" readonly="true">
+            <md-chip-template>
+              <span>{{$chip.file.name}}</span>
+              <md-icon ng-show="!$chip.isUploading"
+                       ng-click="editor.message.$deleteAttachment($chip.file.name);
+                                 $chip.remove();">close</md-icon>
+              <md-icon ng-show="$chip.isUploading"
+                       ng-click="editor.uploader.cancelItem($chip)"
+                       ng-style="{ 'color': '#F00' }">cancel</md-icon>
+              <span ng-show="$chip.isUploading">{{$chip.progress}} %</span>
+            </md-chip-template>
+          </md-chips>
+        </div>
       </div>
     </div>
-</md-dialog>
+  </md-dialog>
 </container>
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index dc462a16c..c75b6a3ff 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -4,6 +4,147 @@
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:label="OGo:label">
   <div class="view-list" layout="column">
+
+    <!-- single-selection toolbars -->
+    <md-toolbar ng-show="mailbox.selectedFolder.$selectedCount() == 0">
+      <!-- sort mode -->
+      <div class="md-toolbar-tools" ng-hide="mailbox.mode.search">
+        <md-button class="sg-icon-button" label:aria-label="Search"
+                   ng-click="mailbox.mode.search = true">
+          <md-icon>search</md-icon>
+        </md-button>
+        <div class="md-flex"><!-- spacer --></div>
+        <md-menu>
+          <md-button class="sg-icon-button" label:aria-label="Sort"
+                     ng-click="$mdOpenMenu()">
+            <md-icon>sort</md-icon>
+          </md-button>
+          <md-menu-content>
+            <md-menu-item>
+              <md-button ng-click="mailbox.sort('subject')">
+                <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('subject') }">
+                  <!-- subject --></md-icon> <var:string label:value="Subject"/>
+              </md-button>
+            </md-menu-item>
+            <md-menu-item>
+              <md-button ng-click="mailbox.sort('from')">
+                <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('from') }">
+                  <!-- from --></md-icon> <var:string label:value="From"/>
+              </md-button>
+            </md-menu-item>
+            <md-menu-item>
+              <md-button ng-click="mailbox.sort('date')">
+                <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('date') }">
+                  <!-- date --></md-icon> <var:string label:value="Date"/>
+              </md-button>
+            </md-menu-item>
+            <md-menu-item>
+              <md-button ng-click="mailbox.sort('size')">
+                <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('size') }">
+                  <!-- size --></md-icon> <var:string label:value="Size"/>
+              </md-button>
+            </md-menu-item>
+            <md-menu-divider> <!-- divider --></md-menu-divider>
+            <md-menu-item>
+              <md-button ng-click="mailbox.selectedFolder.$filter()">
+                <md-checkbox
+                    ng-model="mailbox.service.$query.asc"
+                    ng-true-value="0"
+                    ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
+              </md-button>
+            </md-menu-item>
+          </md-menu-content>
+        </md-menu>
+        <md-button class="sg-icon-button" aria-label="Refresh" ng-click="mailbox.selectedFolder.$filter()" >
+          <md-icon>refresh</md-icon>
+        </md-button>
+      </div>
+      <!-- search mode -->
+      <div class="md-toolbar-tools sg-toolbar-secondary"
+           ng-show="mailbox.mode.search"
+           sg-search="mailbox.selectedFolder.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])">
+        <md-button class="sg-icon-button"
+                   sg-search-cancel="mailbox.cancelSearch()"
+                   label:aria-label="Back">
+          <md-icon>arrow_back</md-icon>
+        </md-button>
+        <md-input-container>
+          <input name="folderSearch" type="search" />
+        </md-input-container>
+        <md-input-container>
+          <md-select>
+            <md-option value="subject" selected="selected"><var:string label:value="Subject"/></md-option>
+            <md-option value="from"><var:string label:value="Sender"/></md-option>
+            <md-option value="subject_or_from"><var:string label:value="Subject or Sender"/></md-option>
+            <md-option value="to_or_cc"><var:string label:value="To or Cc"/></md-option>
+            <md-option value="body"><var:string label:value="Entire Message"/></md-option>
+          </md-select>
+        </md-input-container>
+      </div>
+    </md-toolbar>
+
+    <!-- multiple-selection mode -->
+    <md-toolbar class="md-hue-1 sg-toolbar-secondary" ng-show="mailbox.selectedFolder.$selectedCount() > 0">
+      <div class="md-toolbar-tools">
+        <md-button class="sg-icon-button" ng-click="mailbox.unselectMessages()">
+          <md-icon>arrow_back</md-icon>
+        </md-button>
+        <label>{{mailbox.selectedFolder.$selectedCount()}} <var:string label:value="selected"/></label>
+        <div class="md-flex"><!-- spacer --></div>
+        <md-button class="sg-icon-button" ng-click="mailbox.selectAll()">
+          <md-tooltip md-direction="bottom"><var:string label:value="Select All"/></md-tooltip>
+          <md-icon>select_all</md-icon>
+        </md-button>
+        <md-button class="sg-icon-button" ng-click="mailbox.confirmDeleteSelectedMessages()">
+          <md-icon>delete</md-icon>
+        </md-button>
+        <md-menu>
+          <md-button class="sg-icon-button" label:aria-label="Copy messages" ng-click="$mdOpenMenu()">
+            <md-tooltip md-direction="bottom"><var:string label:value="Copy To"/></md-tooltip>
+            <md-icon>content_copy</md-icon>
+          </md-button>
+          <md-menu-content width="4">
+            <div ng-repeat="account in mailbox.accounts track by account.id">
+              <md-menu-item>
+                <md-button class="md-primary" ng-disabled="true">{{account.name}}</md-button>
+              </md-menu-item>
+              <md-menu-divider><!-- divider --></md-menu-divider>
+              <md-menu-item ng-repeat="folder in
+                                       account.$flattenMailboxes()
+                                       track by folder.path"
+                            ng-hide="mailbox.id == folder.id">
+                <md-button ng-click="mailbox.copySelectedMessages(folder.id)">
+                  <span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
+                </md-button>
+              </md-menu-item>
+            </div>
+          </md-menu-content>
+        </md-menu>
+        <md-menu>
+          <md-button class="sg-icon-button" label:aria-label="More messages options" ng-click="$mdOpenMenu()">
+            <md-icon>more_vert</md-icon>
+          </md-button>
+          <md-menu-content width="2">
+            <md-menu-item>
+              <md-button ng-click="mailbox.markSelectedMessagesAsFlagged()">
+                <var:string label:value="Flag"/>
+              </md-button>
+            </md-menu-item>
+            <md-menu-item>
+              <md-button ng-click="mailbox.markSelectedMessagesAsUnread()">
+                <var:string label:value="Mark as Unread"/>
+              </md-button>
+            </md-menu-item>
+            <md-menu-item>
+              <md-button ng-click="mailbox.saveSelectedMessages()">
+                <var:string label:value="Save As..."/>
+              </md-button>
+            </md-menu-item>
+          </md-menu-content>
+        </md-menu>
+      </div>
+    </md-toolbar>
+
     <md-content id="messagesList" layout="column" class="md-flex">
       <header class="sg-md-subheader sg-md-subheader--fixed">
         <h2 class="md-default-theme sg-md-subhead-solo fg-sogoBlue-700">
@@ -58,12 +199,15 @@
     </md-content>
   </div>
 
-  <md-content id="detailView" class="view-detail md-hue-1" layout="column" layout-align="center center"
+  <div id="detailView" class="view-detail" layout="column" layout-align="start center"
        ng-class="{ 'sg-close': !mailbox.selectedFolder.selectedMessage }"
        ui-view="message">
-    <md-input-container class="hide-sm md-hue-1" style="flex-grow: 0">
-      <label class="sg-md-title"><var:string label:value="No message selected"/></label>
-    </md-input-container>
-  </md-content>
+    <md-toolbar class="hide-sm"><!-- empty toolbar --></md-toolbar>
+    <md-content class="hide-sm md-flex layout-fill md-hue-1" layout="column">
+      <md-input-container layout-align="center center">
+        <label class="sg-md-title"><var:string label:value="No message selected"/></label>
+      </md-input-container>
+    </md-content>
+  </div>
 
 </container>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 889031760..e2f3a65bc 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -8,11 +8,11 @@
     xmlns:label="OGo:label"
     className="UIxPageFrame"
     title="title"
-    const:jsFiles="Common.js, Contacts.services.js, Mailer.services.js, Preferences.services.js, Mailer.js, Mailer.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js">
+    const:jsFiles="Common.js, Contacts.services.js, Preferences.services.js, Mailer.js, Mailer.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js">
   <script type="text/javascript">
-    var mailAccounts =<var:string value="mailAccounts" const:escapeHTML="NO" />;
-    var userNames =<var:string value="userNames" const:escapeHTML="NO" />;
-    var unseenCountFolders =<var:string value="unseenCountFolders" const:escapeHTML="NO" />;
+    var mailAccounts = <var:string value="mailAccounts" const:escapeHTML="NO" />;
+    var userNames = <var:string value="userNames" const:escapeHTML="NO" />;
+    var unseenCountFolders = <var:string value="unseenCountFolders" const:escapeHTML="NO" />;
   </script>
   <style type="text/css">
     <var:foreach list="availableLabels" item="currentLabel">
@@ -229,7 +229,7 @@
     <!-- Sidenav -->
     <md-sidenav id="left-sidenav" class="md-sidenav-left md-whiteframe-z1 layout-fill" md-component-id="left" md-is-locked-open="isGtMedium" layout="column">
       <var:component className="UIxSidenavToolbarTemplate" />
-      <md-content md-scroll-y="md-scroll-y" class="md-flex">
+      <md-content md-scroll-y="md-scroll-y" class="md-flex md-hue-2">
         <section ng-repeat="account in app.accounts track by account.id">
           <md-subheader class="sg-md-subheader">
             <div layout="row" layout-align="space-between center">
@@ -346,152 +346,10 @@
   </script>
 
   <script type="text/ng-template" id="UIxMailFolderTemplate">
-    <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main" >
-      <div class="md-toolbar-tools md-toolbar-tools-top"
-           layout="row" layout-align="space-between start">
-        <var:component className="UIxTopnavToolbarTemplate" />
-      </div>
-      <div class="md-toolbar-tools" layout="row" layout-align="space-between center"
-           ng-show="mailbox.selectedFolder.$selectedCount() == 0">
-        <!-- sort mode -->
-        <div class="view-list" layout="row" layout-align="space-between center"
-             ng-hide="mailbox.mode.search">
-          <div class="sg-toolbar-group">
-            <md-button class="sg-icon-button" label:aria-label="Search"
-                       ng-click="mailbox.mode.search = true">
-              <md-icon>search</md-icon>
-            </md-button>
-          </div>
-          <div class="sg-toolbar-group-last">
-            <md-menu>
-              <md-button class="sg-icon-button" label:aria-label="Sort"
-                         ng-click="$mdOpenMenu()">
-                <md-icon>sort</md-icon>
-              </md-button>
-              <md-menu-content>
-                <md-menu-item>
-                  <md-button ng-click="mailbox.sort('subject')">
-                    <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('subject') }">
-                      <!-- subject --></md-icon> <var:string label:value="Subject"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="mailbox.sort('from')">
-                    <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('from') }">
-                      <!-- from --></md-icon> <var:string label:value="From"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="mailbox.sort('date')">
-                    <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('date') }">
-                      <!-- date --></md-icon> <var:string label:value="Date"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-item>
-                  <md-button ng-click="mailbox.sort('size')">
-                    <md-icon ng-class="{ 'icon-check': mailbox.sortedBy('size') }">
-                      <!-- size --></md-icon> <var:string label:value="Size"/>
-                  </md-button>
-                </md-menu-item>
-                <md-menu-divider> <!-- divider --></md-menu-divider>
-                <md-menu-item>
-                  <md-button ng-href="#">
-                    <md-checkbox
-                        ng-change="mailbox.selectedFolder.$filter()" 
-                        ng-model="mailbox.service.$query.asc"
-                        ng-true-value="0"
-                        ng-false-value="1"><var:string label:value="Descending Order"/></md-checkbox>
-                  </md-button>
-                </md-menu-item>
-              </md-menu-content>
-            </md-menu>
-            <md-button class="sg-icon-button" aria-label="Refresh" ng-click="mailbox.selectedFolder.$filter()" >
-              <md-icon>refresh</md-icon>
-            </md-button>
-          </div>
-        </div>
-        <!-- search mode -->
-        <div class="view-list sg-padded--right sg-toolbar-search" layout="row" layout-align="space-between center"
-             ng-show="mailbox.mode.search"
-             sg-search="mailbox.selectedFolder.$filter({ sort: 'date', asc: false }, [{ searchBy: searchField, searchInput: searchText }])">
-          <md-button class="sg-icon-button"
-                     sg-search-cancel="mailbox.cancelSearch()"
-                     label:aria-label="Back">
-            <md-icon>arrow_back</md-icon>
-          </md-button>
-          <md-input-container>
-            <input name="folderSearch" type="search" />
-          </md-input-container>
-          <md-input-container>
-            <md-select>
-              <md-option value="subject" selected="selected"><var:string label:value="Subject"/></md-option>
-              <md-option value="from"><var:string label:value="Sender"/></md-option>
-              <md-option value="subject_or_from"><var:string label:value="Subject or Sender"/></md-option>
-              <md-option value="to_or_cc"><var:string label:value="To or Cc"/></md-option>
-              <md-option value="body"><var:string label:value="Entire Message"/></md-option>
-          </md-select>
-          </md-input-container>
-        </div>
-      </div>
-     
-      <div layout="row" layout-align="start center" ng-show="mailbox.selectedFolder.$selectedCount() > 0">
-        <md-button class="sg-icon-button" ng-click="mailbox.unselectMessages()">
-          <md-icon>arrow_back</md-icon>
-        </md-button>
-        <label>{{mailbox.selectedFolder.$selectedCount()}} selected</label>
-        <md-button class="sg-icon-button" ng-click="mailbox.selectAll()">
-          <md-tooltip md-direction="left"><var:string label:value="Select All"/></md-tooltip>
-          <md-icon>select_all</md-icon>
-        </md-button>
-        <md-button class="sg-icon-button" ng-click="mailbox.confirmDeleteSelectedMessages()">
-          <md-icon>delete</md-icon>
-        </md-button>
-        <md-menu>
-          <md-button class="sg-icon-button" label:aria-label="Copy messages" ng-click="$mdOpenMenu()">
-            <md-tooltip md-direction="left"><var:string label:value="Copy To"/></md-tooltip>
-            <md-icon>content_copy</md-icon>
-          </md-button>
-          <md-menu-content width="4">
-            <div ng-repeat="account in mailbox.accounts track by account.id">
-              <md-menu-item>
-                <md-button class="md-primary" ng-disabled="true">{{account.name}}</md-button>
-              </md-menu-item>
-              <md-menu-divider><!-- divider --></md-menu-divider>
-              <md-menu-item ng-repeat="folder in
-                                       account.$flattenMailboxes()
-                                       track by folder.path"
-                            ng-hide="mailbox.id == folder.id">
-                <md-button ng-click="mailbox.copySelectedMessages(folder.id)">
-                  <span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
-                </md-button>
-              </md-menu-item>
-            </div>
-          </md-menu-content>
-        </md-menu>
-        <md-menu>
-          <md-button class="sg-icon-button" label:aria-label="More messages options" ng-click="$mdOpenMenu()">
-            <md-icon>more_vert</md-icon>
-          </md-button>
-          <md-menu-content width="2">
-            <md-menu-item>
-              <md-button ng-click="mailbox.markSelectedMessagesAsFlagged()">
-                <var:string label:value="Flag"/>
-              </md-button>
-            </md-menu-item>
-            <md-menu-item>
-              <md-button ng-click="mailbox.markSelectedMessagesAsUnread()">
-                <var:string label:value="Mark as Unread"/>
-              </md-button>
-            </md-menu-item>
-            <md-menu-item>
-              <md-button ng-click="mailbox.saveSelectedMessages()">
-                <var:string label:value="Save As..."/>
-              </md-button>
-            </md-menu-item>
-          </md-menu-content>
-        </md-menu>
-      </div>
+    <md-toolbar layout="row" layout-align="space-between center" class="toolbar-main" >
+      <var:component className="UIxTopnavToolbarTemplate" />
     </md-toolbar>
+
     <div layout="row" class="md-flex">
       <var:component className="UIxMailFolderTemplate" />
     </div>
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index decd95ca9..b81096f90 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -1,105 +1,31 @@
 <?xml version='1.0' standalone='yes'?>
 <container
-   xmlns="http://www.w3.org/1999/xhtml"
-   xmlns:var="http://www.skyrix.com/od/binding"
-   xmlns:const="http://www.skyrix.com/od/constant"
-   xmlns:rsrc="OGo:url"
-   xmlns:label="OGo:label"
-   xmlns:uix="OGo:uix">
+    xmlns="http://www.w3.org/1999/xhtml"
+    xmlns:var="http://www.skyrix.com/od/binding"
+    xmlns:const="http://www.skyrix.com/od/constant"
+    xmlns:rsrc="OGo:url"
+    xmlns:label="OGo:label"
+    xmlns:uix="OGo:uix">
 
-  <md-content md-scroll-y="md-scroll-y" class="viewer md-padding md-flex bg-sogoPaper-50 md-whiteframe-z1">
-    <header class="msg-header">
-      <div class="msg-header-content">
-        <div layout="row" layout-align="start center">
-          <md-button class="sg-icon-button sg-msg-flag" label:aria-label="flagged" ng-click="viewer.message.toggleFlag()">
-            <md-icon ng-class="{'flagged': viewer.message.isflagged}">star</md-icon>
-          </md-button>
-          <h3 class="sg-md-title-msg" ng-bind="viewer.message.subject"><!-- subject --></h3>
-        </div>
-        <div class="pseudo-input-container--compact">
-          <label class="pseudo-input-label">
-            <var:string label:value="From"/>
-          </label>
-          <div layout="row" layout-align="start center">
-            <sg-avatar-image class="md-tile-left"
-                             sg-email="viewer.message.from[0].email"
-                             size="48">
-              <!-- contact avatar -->
-            </sg-avatar-image>
-            <div class="md-list-item-text">
-              <span>{{ viewer.message.from[0].name }}</span><br/>
-              <a class="md-caption" href="#"
-                 ng-bind="viewer.message.from[0].email"
-                 ng-click="viewer.newMessage($event, viewer.message.from[0])"><!-- from --></a>
-            </div>
-          </div>
-        </div>
-
-        <div class="pseudo-input-container--compact">
-          <label class="pseudo-input-label">
-            <var:string label:value="To"/>
-          </label>
-          <div class="pseudo-input-field" ng-hide="viewer.message.$showDetailedRecipients">
-            <a href="#" ng-click="viewer.message.showDetailedRecipients()">{{viewer.message.$shortRecipients()}}</a>
-          </div>
-          <div class="pseudo-input-field" ng-show="viewer.message.$showDetailedRecipients">
-            <span ng-repeat="recipient in viewer.message.to">
-              <a href="#" ng-bind="recipient.full"
-                 ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
-            </span>
-          </div>
-        </div>
-
-        <div class="pseudo-input-container--compact" ng-show="viewer.message.$showDetailedRecipients">
-          <label class="pseudo-input-label" ng-show="viewer.message.cc.length > 0">
-            <var:string label:value="Cc"/>
-          </label>
-          <div class="pseudo-input-field">
-            <span ng-repeat="recipient in viewer.message.cc">
-              <a href="#" ng-bind="recipient.full"
-                 ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
-            </span>
-          </div>
-        </div>
-
-        <md-chips class="sg-readonly" ng-model="viewer.message.flags" ng-change="viewer.changeFlags()">
-          <md-chip-template>{{viewer.service.$tags[$chip][0]}}</md-chip-template>
-          <md-autocomplete
-              md-selected-item="viewer.tags.selected"
-              md-selected-item-change="viewer.message.addTag(viewer.tags.selected)"
-              md-search-text="viewer.tags.searchText"
-              md-items="tag in viewer.service.filterTags(viewer.tags.searchText)"
-              label:placeholder="Add a tag">
-            <span md-highlight-text="viewer.tags.searchText">{{viewer.service.$tags[tag][0]}}</span>
-          </md-autocomplete>
-        </md-chips>
-
-      </div>
-
-<!--      <p class="flags">
-        &lt;!&ndash; Todo: change the text for an icon (conditional ?) The read/unread flag doesn't make sense at his place&ndash;&gt;
-        <span class="pseudo-input-label" ng-repeat="flag in message.flags">{{flag}}</span>
-      </p>
--->
-
-      <div class="sg-icon-bar--vertical">
-        <md-button class="sg-icon-button show-sm"
-                   label:aria-label="Close"
-                   ng-click="viewer.close()">
-          <md-icon>close</md-icon>
+  <div layout="column" class="layout-fill">
+    <md-toolbar>
+      <div class="md-toolbar-tools">
+        <md-button class="sg-icon-button" label:aria-label="flagged" ng-click="viewer.message.toggleFlag()">
+          <md-icon ng-class="{'icon-star': viewer.message.isflagged,
+                             'icon-star-border': !viewer.message.isflagged}"><!-- flag --></md-icon>
         </md-button>
-        <!-- todo: Replace md-tooltip values by localizable string variable -->
+        <div class="md-flex"><!-- spacer --></div>
         <md-button class="sg-icon-button"
                    ng-hide="viewer.message.isDraft"
                    ng-click="viewer.reply($event)"
                    label:aria-label="reply">
-          <md-tooltip md-direction="left"><var:string label:value="Reply to Sender Only"/></md-tooltip>
+          <md-tooltip md-direction="bottom"><var:string label:value="Reply to Sender Only"/></md-tooltip>
           <md-icon>reply</md-icon>
         </md-button>
         <md-button class="sg-icon-button" label:aria-label="Forward"
                    ng-hide="viewer.message.isDraft"
                    ng-click="viewer.forward($event)">
-          <md-tooltip md-direction="left"><var:string label:value="Forward selected message"/></md-tooltip>
+          <md-tooltip md-direction="bottom"><var:string label:value="Forward selected message"/></md-tooltip>
           <md-icon>forward</md-icon>
         </md-button>
         <md-button class="sg-icon-button" label:aria-label="Edit"
@@ -109,10 +35,9 @@
         </md-button>
         <md-button class="sg-icon-button" label:aria-label="Delete"
                    ng-click="viewer.doDelete()">
-          <md-tooltip md-direction="left"><var:string label:value="Delete selected message or folder"/></md-tooltip>
+          <md-tooltip md-direction="bottom"><var:string label:value="Delete selected message or folder"/></md-tooltip>
           <md-icon>delete</md-icon>
         </md-button>
-
         <md-menu>
           <md-button label:aria-label="More mail options" class="sg-icon-button" ng-click="$mdOpenMenu($event)">
             <md-icon>more_vert</md-icon>
@@ -124,12 +49,6 @@
                 <var:string label:value="Reply All"/>
               </md-button>
             </md-menu-item>
-            <md-menu-item ng-show="viewer.message.$hasUnsafeContent">
-              <md-button label:aria-label="Load Images"
-                         ng-click="viewer.message.loadUnsafeContent()">
-                <var:string label:value="Load Images"/>
-              </md-button>
-            </md-menu-item>
             <md-menu-item>
               <md-button label:aria-label="Save As..."
                          ng-click="viewer.saveMessage()">
@@ -144,38 +63,117 @@
             </md-menu-item>
           </md-menu-content>
         </md-menu>
-
+        <md-button class="sg-icon-button hide show-sm"
+                   label:aria-label="Close"
+                   ng-click="viewer.close()">
+          <md-icon>close</md-icon>
+        </md-button>
       </div>
-    </header>
-    <md-divider><!-- divider --></md-divider>
+    </md-toolbar>
+    <md-content class="md-flex md-static">
+      <div class="viewer">
+        <md-toolbar class="sg-padded">
+          <h3 class="sg-md-title-msg">{{viewer.message.subject}}</h3>
+          <time class="msg-date" datetime="viewer.message.date" ng-bind="viewer.message.date"><!-- date --></time>
+        </md-toolbar>
+        <md-toolbar class="sg-padded">
 
-    <div ng-show="viewer.message.shouldAskReceipt == 1"
-         layout-padding="layout-padding">
-      <md-whiteframe class="md-whiteframe-z2" layout="column"
-                     layout-align="center start">
-        <md-icon>warning</md-icon>
-        <span><var:string label:value="The sender of this message has asked to be notified when you read this message. Do you with to notify the sender?"/></span>
-        <div class="md-actions" layout="row">
-          <md-button label:aria-label="Yes"
-                     type="button" class="md-primary"
-                     ng-click="viewer.message.$sendMDN()"><var:string label:value="Yes"/></md-button>
-          <md-button label:aria-label="No"
-                     type="button"
-                     ng-click="viewer.message.shouldAskReceipt = 0"><var:string label:value="No"/></md-button>
-        </div>
-      </md-whiteframe>
-    </div>
+          <div class="pseudo-input-container--compact">
+            <label class="pseudo-input-label">
+              <var:string label:value="From"/>
+            </label>
+            <div layout="row" layout-align="start center">
+              <sg-avatar-image class="md-tile-left"
+                               sg-email="viewer.message.from[0].email"
+                               size="48">
+                <!-- contact avatar -->
+              </sg-avatar-image>
+              <div class="md-list-item-text">
+                <span>{{ viewer.message.from[0].name }}</span><br/>
+                <a class="md-caption" href="#"
+                   ng-bind="viewer.message.from[0].email"
+                   ng-click="viewer.newMessage($event, viewer.message.from[0])"><!-- from --></a>
+              </div>
+            </div>
+          </div>
+          <div class="pseudo-input-container--compact">
+            <label class="pseudo-input-label">
+              <var:string label:value="To"/>
+            </label>
+            <div class="pseudo-input-field" ng-hide="viewer.message.$showDetailedRecipients">
+              <a href="#" ng-click="viewer.message.showDetailedRecipients()">{{viewer.message.$shortRecipients()}}</a>
+            </div>
+            <div class="pseudo-input-field" ng-show="viewer.message.$showDetailedRecipients">
+              <span ng-repeat="recipient in viewer.message.to">
+                <a href="#" ng-bind="recipient.full"
+                   ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
+              </span>
+            </div>
+          </div>
+          <div class="pseudo-input-container--compact" ng-show="viewer.message.$showDetailedRecipients">
+            <label class="pseudo-input-label" ng-show="viewer.message.cc.length > 0">
+              <var:string label:value="Cc"/>
+            </label>
+            <div class="pseudo-input-field">
+              <span ng-repeat="recipient in viewer.message.cc">
+                <a href="#" ng-bind="recipient.full"
+                   ng-click="viewer.newMessage($event, recipient)"><!-- recipient --></a>
+              </span>
+            </div>
+          </div>
+          <md-chips class="sg-readonly" ng-model="viewer.message.flags" ng-change="viewer.changeFlags()">
+            <md-chip-template>{{viewer.service.$tags[$chip][0]}}</md-chip-template>
+            <md-autocomplete
+                md-selected-item="viewer.tags.selected"
+                md-selected-item-change="viewer.message.addTag(viewer.tags.selected)"
+                md-search-text="viewer.tags.searchText"
+                md-items="tag in viewer.service.filterTags(viewer.tags.searchText)"
+                label:placeholder="Add a tag">
+              <span md-highlight-text="viewer.tags.searchText">{{viewer.service.$tags[tag][0]}}</span>
+            </md-autocomplete>
+          </md-chips>
+        </md-toolbar>
+        <md-content md-scroll-x="md-scroll-x" class="md-padding md-whiteframe-z1">
 
-    <div class="msg-body">
-      <div class="msg-date sg-md-body-multi">
-        <time datetime="viewer.message.date" ng-bind="viewer.message.date"><!-- date --></time>
+          <!-- Load external images -->
+          <md-whiteframe class="md-whiteframe-z2" layout="row" layout-align="space-between center"
+                         ng-show="viewer.message.$hasUnsafeContent">
+            <p class="sg-padded"><var:string label:value="This message contains external images."/></p>
+            <md-button label:aria-label="Load Images"
+                       ng-click="viewer.message.loadUnsafeContent()">
+              <var:string label:value="Load Images"/>
+            </md-button>
+          </md-whiteframe>
+
+          <!-- Send MDN -->
+          <md-whiteframe class="md-whiteframe-z2" layout="column" layout-align="center start"
+                         ng-show="viewer.message.shouldAskReceipt == 1">
+            <div layout="row" layout-align="start center">
+              <div class="md-tile-left">
+                <md-icon>message</md-icon>
+              </div>
+              <p class="sg-padded--right"><var:string label:value="The sender of this message has asked to be notified when you read this message. Do you with to notify the sender?"/></p>
+            </div>
+            <div class="layout-fill" layout="row" layout-align="end center">
+              <md-button label:aria-label="No"
+                         type="button"
+                         ng-click="viewer.message.shouldAskReceipt = 0"><var:string label:value="No"/></md-button>
+              <md-button label:aria-label="Yes"
+                         type="submit"
+                         ng-click="viewer.message.$sendMDN()"><var:string label:value="Yes"/></md-button>
+            </div>
+          </md-whiteframe>
+
+          <div class="msg-body">
+            <div layout="row" layout-wrap="layout-wrap">
+              <div ng-class="part.msgclass" layout="row" layout-wrap="layout-wrap" class="mailer_mailcontent" ng-repeat="part in viewer.message.$content()">
+                <div ng-if="part.html" ng-bind-html="part.content | ensureTarget"><!-- msg --></div>
+                <div ng-if="part.compile" sg-compile="part.content"><!-- msg --></div>
+              </div>
+            </div>
+          </div>
+        </md-content>
       </div>
-      <div layout="row" layout-wrap="layout-wrap">
-        <div ng-class="part.msgclass" layout="row" layout-wrap="layout-wrap" class="mailer_mailcontent" ng-repeat="part in viewer.message.$content()">
-          <div ng-if="part.html" ng-bind-html="part.content | ensureTarget"><!-- msg --></div>
-          <div ng-if="part.compile" sg-compile="part.content"><!-- msg --></div>
-        </div>
-      </div>
-    </div>
-  </md-content>
+    </md-content>
+  </div>
 </container>
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
index 4b249cbbc..00a402a20 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
@@ -5,7 +5,7 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
   <md-dialog flex="40" flex-md="60" flex-sm="100">
-      <md-toolbar class="md-padding" ng-class="editor.component.getClassName('bg')">
+      <md-toolbar ng-class="editor.component.getClassName('bg')">
         <div class="md-toolbar-tools">
           <md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
           <div class="sg-md-title md-flex">
diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
index e79ef33c5..c88b87673 100644
--- a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -7,7 +7,7 @@
   <md-dialog flex="60" flex-sm="100">
     <form name="eventForm" ng-submit="editor.save(eventForm)">
       <md-toolbar ng-class="editor.component.getClassName('bg')">
-        <div class="md-toolbar-tools sg-padded">
+        <div class="md-toolbar-tools">
           <!-- summary -->
           <md-icon ng-if="editor.component.classification == 'confidential'">visibility_off</md-icon>
           <md-icon ng-if="editor.component.classification == 'private'">vpn_key</md-icon>
diff --git a/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
index 87d560a8b..7826cb58d 100644
--- a/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskViewTemplate.wox
@@ -5,7 +5,7 @@
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
   <md-dialog flex="40" flex-md="60" flex-sm="100">
-    <md-toolbar class="md-padding" ng-class="editor.component.getClassName('bg')">
+    <md-toolbar ng-class="editor.component.getClassName('bg')">
       <div class="md-toolbar-tools">
         <md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
         <div class="sg-md-title md-flex">
diff --git a/UI/Templates/UIxSidenavToolbarTemplate.wox b/UI/Templates/UIxSidenavToolbarTemplate.wox
index 4b42c0db4..29d2ed0f9 100644
--- a/UI/Templates/UIxSidenavToolbarTemplate.wox
+++ b/UI/Templates/UIxSidenavToolbarTemplate.wox
@@ -4,13 +4,13 @@
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:label="OGo:label">
-  <md-toolbar class="md-tall sg-padded">
+  <md-toolbar class="md-tall sg-padded md-hue-2">
     <div layout="column" layout-align="center start">
       <sg-avatar-image class="md-tile-left"
                        sg-email="activeUser.email"
-                       size="48"><!-- avatar --></sg-avatar-image>
+                       size="64"><!-- avatar --></sg-avatar-image>
       <p class="sg-md-title">{{activeUser.identification}}</p>
-        <p class="md-caption">{{activeUser.email}}</p>
+      <p class="md-caption">{{activeUser.email}}</p>
     </div>
   </md-toolbar>
 </container>
diff --git a/UI/Templates/UIxTopnavToolbarTemplate.wox b/UI/Templates/UIxTopnavToolbarTemplate.wox
index 39239095d..2e9e35438 100644
--- a/UI/Templates/UIxTopnavToolbarTemplate.wox
+++ b/UI/Templates/UIxTopnavToolbarTemplate.wox
@@ -20,16 +20,16 @@
   </div>
 
   <div class="sg-toolbar-group-last">
-    <md-menu layout-fill="layout-fill">
+    <md-menu>
       <md-button label:aria-label="Modules"
                  class="sg-icon-button" ng-click="$mdOpenMenu($event)">
         <md-icon>apps</md-icon>
       </md-button>
       <md-menu-content width="8">
-        <div class="md-toolbar-tools sg-padded" layout="row"
+        <div class="md-toolbar-tools" layout="row"
              layout-align="space-around start">
           <md-button class="sg-icon-button"
-                     ng-show="activeUser.path.calendar.length"
+                     ng-if="activeUser.path.calendar.length"
                      ng-disabled="baseURL.endsWith('/Calendar')"
                      ng-href="{{activeUser.path.calendar}}">
             <md-icon>event</md-icon>
@@ -42,7 +42,7 @@
             <md-tooltip><var:string label:value="Address Book"/></md-tooltip>
           </md-button>
           <md-button class="sg-icon-button"
-                     ng-show="activeUser.path.mail.length"
+                     ng-if="activeUser.path.mail.length"
                      ng-disabled="baseURL.endsWith('/Mail')"
                      ng-href="{{activeUser.path.mail}}">
             <md-icon>email</md-icon>
@@ -54,11 +54,11 @@
             <md-icon>settings</md-icon>
             <md-tooltip><var:string label:value="Preferences"/></md-tooltip>
           </md-button>
-          <md-button class="sg-icon-button" ng-show="activeUser.isSuperUser" ng-href="{{activeUser.path.administration}}">
+          <md-button class="sg-icon-button" ng-if="activeUser.isSuperUser" ng-href="{{activeUser.path.administration}}">
             <md-icon>settings_applications</md-icon>
             <md-tooltip><var:string label:value="Administration"/></md-tooltip>
           </md-button>
-          <md-button class="sg-icon-button" ng-show="activeUser.path.logoff.length" ng-href="{{activeUser.path.logoff}}">
+          <md-button class="sg-icon-button" ng-if="activeUser.path.logoff.length" ng-href="{{activeUser.path.logoff}}">
             <md-icon>settings_power</md-icon>
             <md-tooltip><var:string label:value="Disconnect"/></md-tooltip>
           </md-button>
diff --git a/UI/WebServerResources/scss/components/button/button.scss b/UI/WebServerResources/scss/components/button/button.scss
index c56d08b69..0be2e6558 100644
--- a/UI/WebServerResources/scss/components/button/button.scss
+++ b/UI/WebServerResources/scss/components/button/button.scss
@@ -108,7 +108,7 @@ md-list md-list-item button.md-button.sg-icon-button {
 .sg-icon-bar--vertical {
   display: flex;
   flex-direction: column;
-  margin: 0 ($mg * -1) 0 $mg;
+  //margin: 0 ($mg * -1) 0 $mg;
   font-size: $sg-font-size-3;
   align-items: center;
   // Containers have padding, we compensate to align according to specs
diff --git a/UI/WebServerResources/scss/components/icon/icon.scss b/UI/WebServerResources/scss/components/icon/icon.scss
index b91e81d3b..3c70c7586 100644
--- a/UI/WebServerResources/scss/components/icon/icon.scss
+++ b/UI/WebServerResources/scss/components/icon/icon.scss
@@ -123,11 +123,11 @@ md-icon {
 }
 
 // Message flag
-.sg-msg-flag {
-  md-icon {
-    color: sg-color($sogoGreen, 50) !important;
-    &.flagged {
-      color: sg-color($sogoBlue, 600) !important;
-    }
-  }
-}
+//.sg-msg-flag {
+//  md-icon {
+//    color: sg-color($sogoGreen, 50) !important;
+//    &.flagged {
+//      color: sg-color($sogoBlue, 600) !important;
+//    }
+//  }
+//}
diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
index 1ab249444..d2f1279c5 100644
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/UI/WebServerResources/scss/components/list/list.scss
@@ -45,8 +45,11 @@ md-list-item {
   padding: $layout-gutter-width;
   width: $sg-md-grid-pitch + $baseline-grid;
   height: $sg-md-grid-pitch + $baseline-grid;
-  line-height: $sg-md-grid-pitch + $baseline-grid;
+  //line-height: $sg-md-grid-pitch + $baseline-grid;
   background-clip: content-box;
+  md-icon {
+    font-size: $sg-md-grid-pitch + $baseline-grid - 2 * $layout-gutter-width;
+  }
 }
 .md-tile-right {
   margin-right: -$layout-gutter-width;
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index 94412b257..31461e046 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -1,7 +1,7 @@
 /// toolbar.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
-$toolbar-tools-height: 100%;
+//$toolbar-tools-height: 100%;
 $toolbar-height: $pitch;
-$toolbar-medium-tall-height: 88px !default;
+//$toolbar-medium-tall-height: 88px !default;
 $toolbar-tall-height: ($toolbar-height * 2);
 $toolbar-indent-margin: $pitch;
 $toolbar-padding: $mg;
@@ -18,18 +18,34 @@ md-toolbar {
   font-size: 1em !important;
   background-image: url("../img/felt-transp.png");
   background-blend-mode: luminosity;
-  box-shadow: $whiteframe-shadow-z1;
+  //box-shadow: $whiteframe-shadow-z1;
 }
 
 .md-toolbar-tools {
-  padding: 0;
+  //padding: 0;
   // dirty fix to override angular-material botchy typography
   font-size: 1em !important;
 }
 
+md-toolbar,
+.md-toolbar-tools {
+  // Animate the first icon button of a "secondary" toolbar
+  &.sg-toolbar-secondary {
+    > .md-toolbar-tools > .sg-icon-button:first-child,
+    > .sg-icon-button:first-child {
+      transition: $swift-ease-in;
+      transform: translateX(0px);
+    }
+    &.ng-hide > .md-toolbar-tools > .sg-icon-button:first-child,
+    &.ng-hide > .sg-icon-button:first-child {
+      transform: translateX(-$touch-zone-width);
+    }
+  }
+}
+
 // angular-material is overspecifying so we are
 .md-toolbar-tools[layout-align="start start"] {
-  align-items: flex-start;
+  //align-items: flex-start;
 }
 
 .md-toolbar-tools.md-toolbar-tools-top {
@@ -50,14 +66,14 @@ header {
 }
 hgroup {
   align-items: center;
-  flex: 1 1 auto;
+  //flex: 1 1 auto;
   &h3 {
     margin-bottom: 0;
   }
 }
 .toolbar-main .md-button {
-  color: inherit;
-  font-size: sg-size(headline);
+//  color: inherit;
+//  font-size: sg-size(headline);
 }
 
 .sg-toolbar-group {
@@ -65,6 +81,9 @@ hgroup {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+//  & > .sg-icon-button:first-child {
+//    padding-left: 0;
+//  }
   &-1 {
     order: 1;
     max-width: $listView-width;
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index 26c194bbd..7ae8b853e 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/UI/WebServerResources/scss/views/MailerUI.scss
@@ -39,8 +39,10 @@
 }
 
 .msg-date {
+  font-size: $sg-font-size-2;
   text-align: right;
-  margin-bottom: 10px;
+//  margin-bottom: 10px;
+//  margin-bottom: ($mg/2);
 }
 
 .msg-attachment-image {
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index 31389a900..549c62b37 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -38,7 +38,7 @@ $detailView-width: grid-step(8) !global;
   z-index: ($z-index-view - 1);
   min-width: ($listView-width - ($pitch * 2));
   @include at(md){
-    @include flex-col(md, 7, 1, 1);
+    @include flex-col(md, 6, 1, 1);
     min-width: ($pitch * 3);
   }
   @include from(lg) {
@@ -52,26 +52,30 @@ $detailView-width: grid-step(8) !global;
 
 .view-detail {
   z-index: $z-index-view;
-  overflow-x: hidden;
+  //overflow-x: hidden;
+  overflow: hidden;
   @include at(md) {
-    @include flex-col(md, 9);
+    @include flex-col(md, 10);
     margin: 0;
-
   }
   @include from(lg) {
     @include flex-col(lg, 10, 2, 1);
     margin: 0;
-
   }
 
   // No animation on medium to large screens
   @include from(md) {
+    .md-static {
+      position: static;
+    }
     .viewer {
       position: absolute;
-      top: 0;
+      top: $toolbar-height;
       left: 0;
       right: 0;
+      bottom: 0;
       max-width: 100%;
+      overflow-y: auto;
 //      transform: translate3d(0, 0, 0);
 //      transition: all 0.5s $swift-ease-in-out-timing-function;
 //      &.ng-enter {
@@ -109,10 +113,12 @@ $detailView-width: grid-step(8) !global;
     display: block;
     background-color: transparent !important;
     position: absolute;
-    top: $toolbar-tall-height;
+    //top: $toolbar-tall-height;
+    top: 0;
     bottom: 0;
     left: 0;
     right: 0;
+    z-index: ($z-index-toolbar + 1);
     transform: translateX(0);
     transition: $swift-ease-in-out;
     &.sg-close {
@@ -133,6 +139,7 @@ $detailView-width: grid-step(8) !global;
       bottom: 0;
       left: 0;
       right: 0;
+      overflow-x: hidden;
     }
   }
 }