Fix breakpoints in scss and js (in await for a more elegant solution)

UI/Templates/ContactsUI/UIxContactFoldersView.wox

@@ -288,6 +288,7 @@
             </md-item>
           </md-list>
         </md-content>
+        <!-- This extra container prevent card from being stretch by layout-fill -->
         <md-content class="md-padding" ui-view="card" layout="row" layout-align="center start"><!-- card view --></md-content>
       </div>
 

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -21,7 +21,7 @@
             <!--avatar-->
           </div>
           <div class="sg-tile-content">
-            <a ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})">
+            <a ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})" ng-click="toggleRight()">
               <div class="sg-md-subhead-multi subject">
                 {{currentMessage.subject}}
               </div>
@@ -41,6 +41,9 @@
     </md-list>
   </md-content>
 
-  <div layout="column" ui-view="message"><!-- message view --></div>
+
+    <div layout="column" ui-view="message" md-component-id="right"><!-- message view --></div>
+
+
 
 </container>

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -264,7 +264,7 @@
     </div>
 
 <!-- Sidenav -->
-    <md-sidenav id="left-sidenav" class="md-sidenav-left md-layout-fill" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')" layout="column">
+    <md-sidenav id="left-sidenav" class="md-sidenav-left md-layout-fill" md-component-id="left" md-is-locked-open="isGtMedium" 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" ng-click="openBottomSheet()">
@@ -304,7 +304,7 @@
 <!-- Main section -->
     <section layout="column" class="sg-app-content 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="navController">
+        <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>

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 bg-sogoPaper-50 md-whiteframe-z1">
+<md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1">
   <header class="msg-header">
 
       <div class="msg-header-content">

UI/WebServerResources/js/Common/ui.js

@@ -9,6 +9,18 @@
   'use strict';
 
   angular.module('SOGo.UI', ['ngMaterial'])
+// md break-points values are hard-coded in angular-material/src/core/util/constant.js
+// $mdMedia has a built-in support for those values but can also evaluate others
+// For some reasons, angular-material's break-points don't match the specs
+// Here we define values according to specs
+    .constant('sgConstant', {
+      'sm': '(max-width: 600px)',
+      'gt-sm': '(min-width: 600px)',
+      'md': '(min-width: 600px) and (max-width: 1024px)',
+      'gt-md': '(min-width: 1025px)',
+      'lg': '(min-width: 1024px) and (max-width: 1280px)',
+      'gt-lg': '(min-width: 1280px)'
+    })
 
     .config(['$mdThemingProvider', function ($mdThemingProvider) {
 
@@ -104,7 +116,8 @@
       return l;
     })
 
-    .controller('navController', ['$scope', '$timeout', '$mdSidenav', '$mdBottomSheet', '$log', function ($scope, $timeout, $mdSidenav, $mdBottomSheet, $log) {
+    .controller('navController', ['$scope', '$timeout', '$mdSidenav', '$mdBottomSheet', '$mdMedia', '$log', 'sgConstant', function ($scope, $timeout, $mdSidenav, $mdBottomSheet, $mdMedia, $log, sgConstant) {
+
       $scope.toggleLeft = function () {
         $mdSidenav('left').toggle()
           .then(function () {
@@ -123,5 +136,11 @@
           templateUrl: 'bottomSheetTemplate.html'
         });
       };
+      $scope.$watch(function() {
+        return $mdMedia(sgConstant['gt-md']);
+      },
+      function(newVal) {
+        $scope.isGtMedium = newVal;
+      });
     }]);
 })();

UI/WebServerResources/scss/app.scss

@@ -1,83 +0,0 @@
-//@import "settings";
-//@import "foundation";
-
-// Or selectively include components
-// @import
-//   "foundation/components/accordion",
-//   "foundation/components/alert-boxes",
-//   "foundation/components/block-grid",
-//   "foundation/components/breadcrumbs",
-//   "foundation/components/button-groups",
-//   "foundation/components/buttons",
-//   "foundation/components/clearing",
-//   "foundation/components/dropdown",
-//   "foundation/components/dropdown-buttons",
-//   "foundation/components/flex-video",
-//   "foundation/components/forms",
-//   "foundation/components/grid",
-//   "foundation/components/inline-lists",
-//   "foundation/components/joyride",
-//   "foundation/components/keystrokes",
-//   "foundation/components/labels",
-//   "foundation/components/magellan",
-//   "foundation/components/orbit",
-//   "foundation/components/pagination",
-//   "foundation/components/panels",
-//   "foundation/components/pricing-tables",
-//   "foundation/components/progress-bars",
-//   "foundation/components/reveal",
-//   "foundation/components/side-nav",
-//   "foundation/components/split-buttons",
-//   "foundation/components/sub-nav",
-//   "foundation/components/switch",
-//   "foundation/components/tables",
-//   "foundation/components/tabs",
-//   "foundation/components/thumbs",
-//   "foundation/components/tooltips",
-//   "foundation/components/top-bar",
-//   "foundation/components/type",
-//   "foundation/components/offcanvas",
-//   "foundation/components/visibility";
-
-// http://docs.angularjs.org/api/ng/directive/ngCloak
-[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
-  display: none !important;
-}
-
-.animate-show {
-  -webkit-transition:all linear 0.5s;
-  transition:all linear 0.5s;
-  line-height:20px;
-  opacity:1;
-  padding:10px;
-  border:1px solid black;
-  background:white;
-}
- 
-.animate-show.ng-hide-add,
-.animate-show.ng-hide-remove {
-  display:block!important;
-}
- 
-.animate-show.ng-hide {
-  line-height:0;
-  opacity:0;
-  padding:0 10px;
-}
-
-.reveal-modal {
-    .close-reveal-modal {
-        &:hover {
-            color: #aaa;
-        }
-    }
-}
-
-
-._selected {
-    //background-color: #ddd !important;
-    //border: 2px solid #ddd !important;
-    /* -webkit-border-radius: 2px; */
-    /*    -moz-border-radius: 2px; */
-    /*         border-radius: 2px; */
-}

UI/WebServerResources/scss/core/typography/typography.scss

@@ -130,7 +130,7 @@
 }
 
 // Google's Material design specs are in 'sp' or 'dp' which are not css units
-// 'dp' is 'density independant pexels' and 'sp' is 'scale-independent pixels'
+// 'dp' is 'density independant pixels' and 'sp' is 'scale-independent pixels'
 // (same as dp, but will be scaled by the user's font size preference)
 // Android gives a 160dpi  base value to 'sp' and 'dp', but Google's examples seems to use 'sp' as 'px'
 // We define a scaling factor in case we need to adjust

UI/WebServerResources/scss/core/variables.scss

@@ -17,9 +17,6 @@ $primary-color: sg-color($sogoBlue, 300) !default;
 //$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
 $foreground-primary-color: rgba($primary-color, 0.87);//override
 
-$bottombar-color: #212121;
-
-
 
 // Layout and grid
 // ------------------------------
@@ -56,6 +53,11 @@ $layout-breakpoint-sm:     600px !default;
 $layout-breakpoint-md:     960px !default;
 $layout-breakpoint-lg:     1200px !default;
 
+// Redefinitions
+// $layout-breakpoint-sm:     360px;
+$layout-breakpoint-md:     1025px;
+$layout-breakpoint-lg:     1280px;
+
 // App bar variables
 $app-bar-height: $sg-md-grid-pitch;
 

UI/WebServerResources/scss/styles.scss

@@ -57,7 +57,7 @@
 @import 'components/textField/textField';
 @import 'components/toast/toast';
 @import 'components/toolbar/toolbar';
-@import 'components/bottombar/bottombar';
+// @import 'components/bottombar/bottombar';
 @import 'components/tooltip/tooltip';
 @import 'components/whiteframe/whiteframe';
 

UI/WebServerResources/scss/views/ContactsUI.scss

@@ -1,7 +1,8 @@
 /*! ContactUI.scss */
 
 [id ="contactsList"] {
-  flex: 0 0 $listView-width;
+  flex: 0 1 $listView-width;
+  min-width: ($listView-width - ($pitch * 2));
 }
 
 [id = "contactsList"] .sg-md-subheader {
@@ -9,12 +10,14 @@
 }
 // md is overqualifying, we have to do the same to override
 md-content[ui-view="card"] {
+  margin: 0 auto;
   background-color: sg-color($sogoPaper, 200);
 }
 
 // md is overqualifying, we have to do the same to override
 md-card.viewer {
-  width: $detailView-width;
+  flex: 0 2 $detailView-width;
+  min-width: ($detailView-width - ($pitch * 2));
 }
 
 // Contact editor

UI/WebServerResources/scss/views/MailerUI.scss

@@ -4,7 +4,9 @@
 
 }
 [ui-view="message"] {
-  flex: 0 0 $detailView-width;
+  flex: 1 2 $detailView-width;
+  min-width: ($detailView-width - $pitch);
+  max-width: ($detailView-width + $pitch);
   margin: 0 auto;
 }