From 2c8d1b5db772105795ce1b5501514f6e06ed3f8a Mon Sep 17 00:00:00 2001
From: Benoit Favreault <benoit.favreault@gmail.com>
Date: Fri, 27 Mar 2015 17:08:53 -0400
Subject: [PATCH] Alternate mobile transitions

---
 UI/Templates/MailerUI/UIxMailViewTemplate.wox |  2 +-
 .../scss/components/button/_button.scss       |  6 ++++
 .../scss/components/content/content.scss      | 30 +++++++++++++++++++
 .../scss/components/toolbar/toolbar.scss      |  2 +-
 UI/WebServerResources/scss/views/_view.scss   | 23 +++++++++-----
 5 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
index ac5e53210..b041ba90a 100644
--- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox
@@ -8,7 +8,7 @@
    xmlns:uix="OGo:uix">
 
 <md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1" ng-class="">
-  <md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-arrow-back"><!--icon--></i></md-button>
+  <md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-close"><!--icon--></i></md-button>
   <header class="msg-header">
 
       <div class="msg-header-content">
diff --git a/UI/WebServerResources/scss/components/button/_button.scss b/UI/WebServerResources/scss/components/button/_button.scss
index 63cfe02c0..cb4b13000 100644
--- a/UI/WebServerResources/scss/components/button/_button.scss
+++ b/UI/WebServerResources/scss/components/button/_button.scss
@@ -92,6 +92,11 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
     border-radius: 50%;
   }
 }
+// First button must have it's icon align to margin/padding
+md-content.md-padding > .iconButton:first-child {
+  margin-top: ($iconButton-padding * -1);
+  margin-left: ($iconButton-padding * -1);
+  }
 
 
 
@@ -128,6 +133,7 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
 }
 
 .sg-button-navicon {
+  top: ($mg * -1);
   margin-left: ($mg * -1);
   width: $touch-zone;
   height: $touch-zone;
diff --git a/UI/WebServerResources/scss/components/content/content.scss b/UI/WebServerResources/scss/components/content/content.scss
index 7f4d95887..604f7ab40 100644
--- a/UI/WebServerResources/scss/components/content/content.scss
+++ b/UI/WebServerResources/scss/components/content/content.scss
@@ -1,4 +1,34 @@
 @import 'extends';
+
+// angular-material is mobile first (is it ?) SOGo is not. We're inversing
+// the media definitions and replacing magic numbers with variables
+// ----------------------------------------------------------------------------
 md-content {
+
+  display: block;
+  position: relative;
+  overflow: auto;
   background-color: transparent;
+  -webkit-overflow-scrolling: touch;
+
+  &[md-scroll-y] {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  &[md-scroll-x] {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  &[md-scroll-xy] {
+  }
+
+  &.md-padding {
+    padding: $mg;
+  }
 }
+// Overrides out of specs angular-material definition
+@include at(sm) {
+  md-content.md-padding {
+    padding: $mg;
+  }
+}
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/toolbar/toolbar.scss b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
index b816fab99..f83303686 100644
--- a/UI/WebServerResources/scss/components/toolbar/toolbar.scss
+++ b/UI/WebServerResources/scss/components/toolbar/toolbar.scss
@@ -7,7 +7,7 @@ md-toolbar {
 }
 
 .md-toolbar-tools.md-toolbar-tools-top {
-  padding-top: $bl;
+  padding-top: $mg;
 }
 
 .md-toolbar-tools.md-toolbar-tools-bottom {
diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss
index 850b8fb39..be159a7b7 100644
--- a/UI/WebServerResources/scss/views/_view.scss
+++ b/UI/WebServerResources/scss/views/_view.scss
@@ -62,26 +62,33 @@ $detailView-width: grid-step(8) !global;
     width: 100%;
     min-width: 100%;
     background-color: sg-color($sogoPaper, 50);
-    transform: translateX(-100%);
-    transition: all 0.2s $swift-ease-in-out-timing-function;
+    transform: translateX(-100%) scale(1);
+    filter: opacity(1);
+    transform-origin: 50% 50%;
+    transition: all 0.5s $swift-ease-in-out-timing-function;
     &.sg-close {
-      transition-delay: 0.2s;
-      transform: translateX(-200%);
+      transition: all 0.35s $swift-ease-in-out-timing-function;
+      transition-delay: 0.15s;
+      transform: translateX(-100%) scale(0);
+      //transform: translateX(-200%);
       &.ng-enter {
-        filter: opacity(0);
+        transform: translateX(-100%) scale(0);
       }
     }
     &.ng-enter {
-      transform: translateX(0);
+      transform: translateX(-100%) scale(0);
+      //transform: translateX(0);
     }
     &.ng-enter.ng-enter-active,
     &.ng-leave {
+      transform: translateX(-100%) scale(1);
       filter: opacity(1);
-      transform: translateX(-100%);
+      //transform: translateX(-100%);
     }
     &.ng-leave.ng.leave-active {
+      transform: translateX(-100%) scale(0);
       filter: opacity(1);
-      transform: translateX(-200%);
+      //transform: translateX(-200%);
     }
     [class *= md-whiteframe-] {
       box-shadow: none;