Replace bottom-bar by bottom-sheet

Adjust sidenav layout
Unify background colors

UI/Templates/ContactsUI/UIxContactEditorTemplate.wox

@@ -1,7 +1,7 @@
 <?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:label="OGo:label">
 
-  <md-content md-scroll-y="true" class="md-padding">
+  <md-content md-scroll-y="true" class="md-padding bg-sogoPaper-50">
     <div class="editor md-padding" style="padding-bottom: 72px">
       <hgroup class="header">
         <h1 class="sg-md-display-2--light" ng-bind-html="card.$fullname()"><!-- fullname --></h1>

UI/Templates/ContactsUI/UIxContactFoldersView.wox

@@ -67,8 +67,7 @@
 
     Templates script tag wrappers goes next
   -->
-  <!-- fixme : consistently prefix attributes with or without data prefix-->
-  <main class="view md-layout-fill" ui-view="addressbooks" layout="row"><!-- addressbooks list --></main>
+  <main class="view md-layout-fill" ui-view="addressbooks" layout="row" ng-controller="navController"><!-- addressbooks list --></main>
 
   <!-- TEMPLATE SCRIPT WRAPPER -->
   <script type="text/ng-template" id="UIxContactFoldersView">
@@ -146,10 +145,10 @@
          sg-subscribe-on-select="subscribeToFolder">!- subscription dropdown -</div>
     -->
 <!-- Sidenav -->
-    <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
+    <md-sidenav id="left-sidenav" class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
       <md-toolbar class="md-tall" layout-align="start start">
         <div class="md-toolbar-tools" layout="row">
-          <md-button class="iconButton sg-button-navicon">
+          <md-button class="iconButton sg-button-navicon" ng-click="openBottomSheet()">
             <i class="md-icon-apps"><!--icon--></i>
           </md-button>
           <span class="sg-logo"><!--logo.svg--></span>
@@ -173,27 +172,29 @@
               ng-class="{_selected: addressbook.id==folder.id}"
               ng-dblclick="edit($index)">
             <md-item-content>
-              <i class="icon" ng-class="{'icon-earth': folder.isRemote, 'icon-address-book': folder.isEditable}"><!-- icon --></i>
-              <form ng-submit="save($index)">
-                <a ui-sref="addressbook({addressbookId: folder.id})"
-                    ng-click="select($index)"
-                    ng-show="editMode!=folder.id"
-                    ng-cloak="ng-cloak">{{folder.name}}
-                </a>
-                <input class="folder-name" type="text"
-                    ng-model="folder.name"
-                    ng-show="editMode==folder.id"
-                    ng-cloak="ng-cloak"
-                    ng-blur="save($index)"
-                    sg-focus-on="addressBookName_{{$index}}"
-                    sg-escape="revertEditing($index)" />
-              </form>
+              <i class="sg-child-level-0" ng-class="{'md-icon-public': folder.isRemote, 'md-icon-contacts': folder.isEditable}"><!-- icon --></i>
+              <md-button class="sg-folder">
+                <form ng-submit="save($index)">
+                  <a ui-sref="addressbook({addressbookId: folder.id})"
+                     ng-click="select($index)"
+                     ng-show="editMode!=folder.id"
+                     ng-cloak="ng-cloak">{{folder.name}}
+                  </a>
+                  <input class="folder-name" type="text"
+                         ng-model="folder.name"
+                         ng-show="editMode==folder.id"
+                         ng-cloak="ng-cloak"
+                         ng-blur="save($index)"
+                         sg-focus-on="addressBookName_{{$index}}"
+                         sg-escape="revertEditing($index)"/>
+                </form>
+              </md-button>
               <span class="icon" ng-cloak="ng-cloak">
                 <a class="icon" href="#"
                     dropdown-toggle="#addressbookProperties"
                     options="align:right"
                     ng-show="currentFolderIsConfigurable(folder)">
-                  <i class="icon-cog"><!-- options --></i>
+                  <i class="md-icon-settings"><!-- options --></i>
                 </a>
               </span>
             </md-item-content>
@@ -204,7 +205,7 @@
 
     <section layout="column" class="md-layout-fill">
       <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" ng-controller="toggleCtrl">
+        <div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
           <div class="sg-toolbar-group-1" layout="row">
             <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
               <span class="md-icon-menu"></span>
@@ -300,6 +301,8 @@
       <var:component className="UIxContactViewTemplate" />
     </script>
 
+
+
     <var:string value="errorAlertJavaScript" const:escapeHTML="NO" />
 
 </var:component>

UI/Templates/MailerUI/UIxMailEditor.wox

@@ -7,7 +7,7 @@
     xmlns:label="OGo:label"
     xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
   <div id="messageEditor">
-<md-content class="md-padding">
+<md-content class="md-padding bg-sogoPaper-50">
     <form>
       <div class="pseudo-input-container">
         <label class="pseudo-input-label">

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -227,7 +227,7 @@
 
   Templates script tag wrappers goes next
 -->
-  <main class="view md-layout-fill" ui-view="mailboxes" layout="row"><!-- mailboxes list --></main>
+  <main class="view md-layout-fill" ui-view="mailboxes" layout="row" ng-controller="navController"><!-- mailboxes list --></main>
 
 <!-- TEMPLATE SCRIPT WRAPPER -->
   <script type="text/ng-template" id="UIxMailMainFrame">
@@ -263,10 +263,10 @@
     </div>
 
 <!-- Sidenav -->
-    <md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
+    <md-sidenav id="left-sidenav" class="md-sidenav-left" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
       <md-toolbar class="md-tall" layout-align="start start">
         <div class="md-toolbar-tools" layout="row">
-          <md-button class="iconButton sg-button-navicon">
+          <md-button class="iconButton sg-button-navicon" ng-click="openBottomSheet()">
             <i class="md-icon-apps"><!--icon--></i>
           </md-button>
           <span class="sg-logo"><!--logo.svg--></span>
@@ -303,7 +303,7 @@
 <!-- Main section -->
     <section layout="column" class="md-layout-fill">
       <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" ng-controller="toggleCtrl">
+        <div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start" ng-controller="navController">
           <div class="sg-toolbar-group-1" layout="row">
             <md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
               <span class="md-icon-menu"></span>

UI/Templates/MailerUI/UIxMailViewTemplate.wox

@@ -7,7 +7,7 @@
    xmlns:label="OGo:label"
    xmlns:uix="OGo:uix">
 
-<md-content md-scroll-y="md-scroll-y"  class="md-padding">
+<md-content md-scroll-y="md-scroll-y"  class="md-padding bg-sogoPaper-50">
   <header class="msg-header">
 
       <div class="msg-header-content">

UI/Templates/UIxPageFrame.wox

@@ -78,61 +78,105 @@
 
           <var:component-content />
 
-          <!-- BOTTOM-BAR -->
-          <var:if condition="shortUserNameForDisplay" const:value="anonymous" const:negate="YES">
-          <md-toolbar class="sg-bottombar md-hide-sm" layout="row" layout-align="center center">
-            <var:if condition="userHasCalendarAccess">
-              <var:if condition="isCalendar">
-                <md-button ng-disabled="true">
-                  <var:string label:value="Calendar"/>
-                </md-button>
-              </var:if>
-              <var:if condition="isCalendar" const:negate="YES">
-                <md-button var:href="relativeCalendarPath">
-                  <var:string label:value="Calendar"/>
-                </md-button>
-              </var:if>
-            </var:if>
-            <var:if condition="isContacts">
+          <!-- BOTTOM-SHEET -->
+<script type="text/ng-template" id="bottomSheetTemplate.html">
+  <md-bottom-sheet class="md-list">
+    <md-list>
+      <var:if condition="shortUserNameForDisplay" const:value="anonymous" const:negate="YES">
+
+        <var:if condition="userHasCalendarAccess">
+          <var:if condition="isCalendar">
+            <md-item>
               <md-button ng-disabled="true">
-                <var:string label:value="Address Book"/>
+                <i class="md-icon-event"><!--icon--></i>
+                <var:string label:value="Calendar"/>
               </md-button>
-            </var:if>
-            <var:if condition="isContacts" const:negate="YES">
-              <md-button var:href="relativeContactsPath">
-                <var:string label:value="Address Book"/>
-              </md-button>
-            </var:if>
-            <var:if condition="userHasMailAccess">
-              <var:if condition="isMail">
-                <md-button ng-disabled="true">
-                  <var:string label:value="Mail"/>
-                </md-button>
-              </var:if>
-              <var:if condition="isMail" const:negate="YES">
-                <md-button var:href="relativeMailPath">
-                  <var:string label:value="Mail" />
-                </md-button>
-              </var:if>
-            </var:if>
-            <md-button var:ng-href="relativePreferencesPath">
-              <var:string label:value="Preferences" />
-            </md-button>
-            <var:if condition="isSuperUser">
-              <var:if condition="isAdministration">
-                <md-button ng-disabled="true">
-                  <var:string label:value="Administration" />
-                </md-button>
-              </var:if>
-              <var:if condition="isAdministration" const:negate="YES">
-                <md-button var:href="relativeAdministrationPath">
-                  <var:string label:value="Administration" />
-                </md-button>
-              </var:if>
-            </var:if>
-          </md-toolbar>
+            </md-item>
+
+          </var:if>
+          <var:if condition="isCalendar" const:negate="YES">
+            <md-item>
+              <md-button var:href="relativeCalendarPath">
+                <i class="md-icon-event"><!--icon--></i>
+                <var:string label:value="Calendar"/>
+              </md-button>
+            </md-item>
+
+          </var:if>
+        </var:if>
+        <var:if condition="isContacts">
+          <md-item>
+            <md-button ng-disabled="true">
+              <i class="md-icon-contacts"><!--icon--></i>
+              <var:string label:value="Address Book"/>
+            </md-button>
+          </md-item>
+
+        </var:if>
+        <var:if condition="isContacts" const:negate="YES">
+          <md-item>
+            <md-button var:href="relativeContactsPath">
+              <i class="md-icon-contacts"><!--icon--></i>
+              <var:string label:value="Address Book"/>
+            </md-button>
+          </md-item>
+
+        </var:if>
+        <var:if condition="userHasMailAccess">
+          <var:if condition="isMail">
+            <md-item>
+              <md-button ng-disabled="true">
+                <i class="md-icon-email"><!--icon--></i>
+                <var:string label:value="Mail"/>
+              </md-button>
+            </md-item>
+
+          </var:if>
+          <var:if condition="isMail" const:negate="YES">
+            <md-item>
+              <md-button var:href="relativeMailPath">
+                <i class="md-icon-email"><!--icon--></i>
+                <var:string label:value="Mail"/>
+              </md-button>
+            </md-item>
+
+          </var:if>
+        </var:if>
+        <md-item>
+          <md-button var:ng-href="relativePreferencesPath">
+            <i class="md-icon-settings"><!--icon--></i>
+            <var:string label:value="Preferences"/>
+          </md-button>
+        </md-item>
+
+        <var:if condition="isSuperUser">
+          <var:if condition="isAdministration">
+            <md-item>
+              <md-button ng-disabled="true">
+                <i class="md-icon-settings-applications"><!--icon--></i>
+                <var:string label:value="Administration"/>
+              </md-button>
+            </md-item>
+
+          </var:if>
+          <var:if condition="isAdministration" const:negate="YES">
+            <md-item>
+              <md-button var:href="relativeAdministrationPath">
+                <i class="md-icon-settings-applications"><!--icon--></i>
+                <var:string label:value="Administration"/>
+              </md-button>
+            </md-item>
+
+          </var:if>
+        </var:if>
+
+      </var:if>
+    </md-list>
+  </md-bottom-sheet>
+</script>
+
+          <var:if condition="shortUserNameForDisplay" const:value="anonymous" const:negate="YES">
           </var:if>
-          
           <!-- Javascripot imports -->
           <script type="text/javascript">
             var ApplicationBaseURL = '<var:string value="modulePath" />';

UI/WebServerResources/js/Common/ui.js

@@ -28,9 +28,10 @@
         'A400': '00e676',
         'A700': '00c853',
         'contrastDefaultColor': 'dark',
-        'contrastLightColors': '500 600 700 800 900'
+        'contrastDarkColors': '50 100 200',
+        'contrastLightColors': '300 400 500 600 700 800 900'
       });
-      $mdThemingProvider.definePalette('vintage-blue', {
+      $mdThemingProvider.definePalette('sogo-blue', {
         '50': 'f0faf9',
         '100': 'e1f5f3',
         '200': 'ceebe8',
@@ -49,7 +50,7 @@
         'contrastDarkColors': ['50', '100', '200'],
         'contrastLightColors': ['300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']
       });
-      $mdThemingProvider.definePalette('paper', {
+      $mdThemingProvider.definePalette('sogo-paper', {
         '50': 'fcf7f8',
         '100': 'f7f1dc',
         '200': 'ede5ca',
@@ -71,14 +72,19 @@
       // Default theme definition
       // .primaryColor will soon be deprecated in favor of primaryPalette (already on dev builds https://groups.google.com/forum/m/#!topic/ngmaterial/-sXR8CYBMPg)
       $mdThemingProvider.theme('default')
-        .primaryPalette('vintage-blue', {
+        .primaryPalette('sogo-blue', {
           'default': '300',
           'hue-1': '100',
           'hue-2': '400',
           'hue-3': 'A700'
         })
-        .accentPalette('sogo-green')
-        .backgroundPalette('paper', {
+        .accentPalette('sogo-green', {
+          'default': '300',
+          'hue-1': '200',
+          'hue-2': '500',
+          'hue-3': 'A700'
+        })
+        .backgroundPalette('sogo-paper', {
           'default': '500',
           'hue-1': '200',
           'hue-2': '50',
@@ -98,7 +104,7 @@
       return l;
     })
 
-    .controller('toggleCtrl', ['$scope', '$timeout', '$mdSidenav', '$log', function ($scope, $timeout, $mdSidenav, $log) {
+    .controller('navController', ['$scope', '$timeout', '$mdSidenav', '$mdBottomSheet', '$log', function ($scope, $timeout, $mdSidenav, $mdBottomSheet, $log) {
       $scope.toggleLeft = function () {
         $mdSidenav('left').toggle()
           .then(function () {
@@ -111,5 +117,11 @@
             $log.debug("toggle RIGHT is done");
           });
       };
+      $scope.openBottomSheet = function() {
+        $mdBottomSheet.show({
+          parent: angular.element(document.getElementById('left-sidenav')),
+          templateUrl: 'bottomSheetTemplate.html'
+        });
+      };
     }]);
 })();

UI/WebServerResources/scss/components/_palette.scss

@@ -393,10 +393,10 @@ $colorBlueGrey900:  nth($paletteBlueGrey, 10);
   $hues: map-keys($palette);
   @each $hue in $hues {
     $color: map-get($palette, $hue);
-    .fg-#{$name}-#{$hue} {
+    .md-default-theme.fg-#{$name}-#{$hue} {
       color: $color;
     };
-    .bg-#{$name}-#{$hue} {
+    .md-default-theme.bg-#{$name}-#{$hue} {
       background-color: $color;
     };
   };

UI/WebServerResources/scss/components/bottomSheet/bottomSheet.scss

@@ -1 +1,17 @@
-@import 'extends';
+@import 'extends';
+
+md-bottom-sheet.md-default-theme {
+  border: none;
+  background-color: transparent;
+}
+
+md-bottom-sheet.md-default-theme .md-button.md-default-theme {
+  &:hover:not([disabled]) {
+    background-color: transparent;
+    color: sg-color($sogoBlue, 800);
+  }
+  &[disabled] {
+    padding: 6px; // The server remove the 'a' tag when disabling
+    text-transform: uppercase;
+  }
+}

UI/WebServerResources/scss/components/button/_button.scss

@@ -10,17 +10,26 @@
 
 // Buttons for the sidenav folder tree
 // ------------------------------------
-sg-folder-tree .md-button {
+sg-folder-tree .md-button,
+md-sidenav md-list button.md-button {
   outline: none;
   color: inherit;
   font-size: sg-size(button);
   padding: 0;
+  text-transform: initial;
   -webkit-font-smoothing: auto;
-
+}
+.sg-folder {
+  flex: 1;
+  text-align: left;
 }
 .sg-active .md-button {
   color: sg-color($sogoBlue, 800);
 }
+
+.md-button [class ^= md-icon] {
+  margin-right: 1em;
+}
 ///
 /// iconButton
 /// according to Material design specs:

UI/WebServerResources/scss/components/content/content.scss

@@ -1,4 +1,4 @@
 @import 'extends';
 md-content {
   background-color: transparent;
-}
+}

UI/WebServerResources/scss/components/select/select.scss

@@ -17,7 +17,7 @@ md-select.md-default-theme.sg-toolbar-sort {
 }
 
 md-select.md-default-theme.sg-logout {
-  margin-top: 0;
+  margin-top: $bl;
   color: $colorWhite;
 
   // angular material overqualifies, so we are

UI/WebServerResources/scss/core/base_styles/_base_style.scss

@@ -12,7 +12,6 @@
 
 main {
   background-color: sg-color($sogoPaper, 200);
-  padding-bottom: $toolbar-height; // padding to compensate for the bottom bar
 }
 
 .sg-logo {

UI/WebServerResources/scss/views/MessageEditorUI.scss

@@ -10,7 +10,7 @@
   margin: 0 auto;
   overflow: auto;
   height: 100%;
-  background-color: sg-color($sogoPaper, 100);
+  background-color: sg-color($sogoPaper, 50);
   transform: translateY(-1 * $pitch);
   z-index: 40;
   box-shadow: $whiteframe-shadow-z1;