refactor files for transform transition for mobile

use prototypical inheritance by invoking parent functions in child scopes

src/js/controller/mail-list.js

@@ -65,6 +65,7 @@ define(function(require) {
             }
 
             // development... display dummy mail objects
+            firstSelect = true;
             updateStatus('Last update: ', new Date());
             $scope.$parent.emails = $scope.emails = createDummyMails();
             $scope.select($scope.emails[0]);
@@ -167,6 +168,11 @@ define(function(require) {
                 return;
             }
 
+            $scope.openReadMode();
+            if (!window.chrome || !chrome.socket) {
+                return;
+            }
+
             if (!email.unread) {
                 return;
             }

src/js/controller/navigation.js

@@ -50,6 +50,13 @@ define(function(require) {
             $scope.accountOpen = false;
         };
 
+        $scope.openReadMode = function() {
+            $scope.readingMode = true;
+        };
+        $scope.closeReadMode = function() {
+            $scope.readingMode = false;
+        };
+
         $scope.remove = function(email) {
             if (!email) {
                 return;

src/js/controller/write.js

@@ -114,10 +114,9 @@ define(function(require) {
                     return;
                 }
 
-                var ps = $scope.$parent.$parent;
-                ps.closeWriter();
-                ps.$apply();
-                ps.emptyOutbox();
+                $scope.closeWriter();
+                $scope.$apply();
+                $scope.emptyOutbox();
             });
         };
     };

src/sass/_responsive.scss

@@ -2,7 +2,10 @@
 // -------------------------
 
 @mixin respond-to($media) {
-    @if $media == desktop {
+    @if $media == mobile {
+        @media only screen and (max-width: $respond-size-desktop - 1) { @content; }
+    }
+    @else if $media == desktop {
         @media only screen and (min-width: $respond-size-desktop) { @content; }
     }
     @else if $media == retina {

src/sass/_scaffolding.scss

@@ -46,4 +46,9 @@ textarea {
     ::-webkit-scrollbar {
         width: 0px;
     }
+
+    // remove flickering on item touch selection in ios
+    * {
+        -webkit-tap-highlight-color: transparent !important;
+    }
 }

src/sass/components/_layout.scss

@@ -2,9 +2,35 @@
     @include clearfix();
     height: 100%;
     overflow: hidden;
+
+    // double in modile to allow slide transition
+    @include respond-to(mobile) {
+        width: 200%; // this currently causes a smear effect bug on mail-list header in safari
+        transition: transform $time-nav-animation ease-in-out;
+    }
 }
 
 .column {
     height: 100%;
     overflow: hidden;
+
+    // half of main-content in mobile mode to allow slide transition
+    @include respond-to(mobile) {
+        width: 50%;
+    }
+}
+
+.column-left {
+    float: left;
+
+    @include respond-to(desktop) {
+        width: $content-nav-width;
+        border-right: 1px solid $color-grey-light;
+    }
+}
+
+.shift-right {
+    @include respond-to(mobile) {
+        transform: translateX(-50%);
+    }
 }

src/sass/components/_nav.scss

@@ -49,13 +49,6 @@
     border-right: 1px solid $color-grey-light;
 }
 
-.nav-menu-open .nav-pusher::after {
-    width: 100%;
-    height: 100%;
-    opacity: 1;
-    transition: opacity $time-nav-animation;
-}
-
 .nav-effect.nav-menu-open .nav-pusher {
     transform: translate3d($nav-max-width, 0, 0);
 }
@@ -65,9 +58,8 @@
     }
 }
 
-
 .nav-effect.nav-menu {
-z-index: 1;
+    z-index: 1;
     transform: translate3d(-50%, 0, 0);
 }
 

src/sass/views/_mail-list.scss

@@ -1,22 +1,11 @@
 .view-mail-list {
     $padding-horizontal: 15px;
     $padding-vertical: 10px;
+    height: 100%;
 
     background: $color-grey-lightest;
     background-image: linear-gradient(to right ,$color-grey-lightest 98%, darken($color-grey-lightest, 1%) 100%);
 
-    // remove flickering on item touch selection in ios
-    * {
-        -webkit-tap-highlight-color: transparent !important;
-    }
-
-    width: 100%;
-    @include respond-to(desktop) {
-        float: left;
-        width: $content-nav-width;
-        border-right: 1px solid $color-grey-light;
-    }
-
     header {
 
         cursor: pointer;

src/tpl/desktop.html

@@ -5,10 +5,10 @@
 
   <!-- content wrapper pushed right -->
   <div class="nav-pusher" ng-click="closeNav()">
-    <section class="content main-content">
+    <section class="content main-content" ng-class="{'shift-right': readingMode}">
 
       <!-- left column: containing list view and navigation header -->
-      <div class="column view-mail-list" ng-include="'tpl/mail-list.html'" ng-controller="MailListCtrl"></div>
+      <div class="column column-left" ng-include="'tpl/mail-list.html'" ng-controller="MailListCtrl"></div>
 
       <!-- right column: containing list read view -->
       <div class="column" ng-include="'tpl/read.html'" ng-controller="ReadCtrl"></div>

src/tpl/mail-list.html

@@ -1,21 +1,23 @@
-<!-- nav controll and section headline -->
-<header data-icon="&#xe004;" ng-click="openNav(); $event.stopPropagation()">
-  <h2>{{currentFolder.type}}</h2>
-</header>
+<div class="view-mail-list">
+  <!-- nav controll and section headline -->
+  <header data-icon="&#xe004;" ng-click="openNav(); $event.stopPropagation()">
+    <h2>{{currentFolder.type}}</h2>
+  </header>
 
-<div class="list-wrapper" ng-iscroll>
-  <ul class="mail-list">
-    <li ng-class="{'mail-list-active': email === selected, 'mail-list-attachment': email.attachments !== undefined && email.attachments.length > 0, 'mail-list-unread': email.unread, 'mail-list-replied': email.answered}" ng-click="select(email)" ng-repeat="email in emails">
-      <h3>{{email.from[0].name || email.from[0].address}}</h3>
-      <div class="head">
-        <p class="subject">{{email.subject || 'No subject'}}</p>
-        <time>{{email.sentDate | date:'mediumDate'}}</time>
-      </div>
-      <p class="body">{{email.body}}</p>
-    </li>
-  </ul><!--/.mail-list-->
-</div>
+  <div class="list-wrapper" ng-iscroll>
+    <ul class="mail-list">
+      <li ng-class="{'mail-list-active': email === selected, 'mail-list-attachment': email.attachments !== undefined && email.attachments.length > 0, 'mail-list-unread': email.unread, 'mail-list-replied': email.answered}" ng-click="select(email)" ng-repeat="email in emails">
+        <h3>{{email.from[0].name || email.from[0].address}}</h3>
+        <div class="head">
+          <p class="subject">{{email.subject || 'No subject'}}</p>
+          <time>{{email.sentDate | date:'mediumDate'}}</time>
+        </div>
+        <p class="body">{{email.body}}</p>
+      </li>
+    </ul><!--/.mail-list-->
+  </div>
 
-<footer ng-click="synchronize()">
-  {{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
-</footer>
+  <footer ng-click="synchronize()">
+    {{lastUpdateLbl}} {{lastUpdate | date:'shortTime'}}
+  </footer>
+</div><!--/.view-mail-list-->

src/tpl/read.html

@@ -6,7 +6,7 @@
 
 <div class="view-read">
   <div class="headers">
-    <p class="subject">{{selected.subject || 'No subject'}}</p>
+    <p class="subject" ng-click="closeReadMode()">{{selected.subject || 'No subject'}}</p>
     <p class="date">{{selected.sentDate | date:'EEEE, MMM d, yyyy h:mm a'}}</p>
     <p class="address">From: <span class="label">{{selected.from[0].name || selected.from[0].address}}</span></p>
     <p class="address">To: <span class="label" ng-repeat="t in selected.to">{{t.address}} </span></p>