Review animations of view detail (messages, cards)

UI/WebServerResources/js/Contacts/CardController.js

@@ -29,6 +29,7 @@
     vm.addMember = addMember;
     vm.userFilter = userFilter;
     vm.save = save;
+    vm.close = close;
     vm.reset = reset;
     vm.cancel = cancel;
     vm.confirmDelete = confirmDelete;
@@ -86,6 +87,11 @@
           });
       }
     }
+    function close() {
+      vm.card = null;
+      delete AddressBook.selectedFolder.selectedCard;
+      $state.go('app.addressbook', { addressbookId: AddressBook.selectedFolder.id });
+    }
     function reset() {
       vm.card.$reset();
     }

UI/WebServerResources/js/Mailer/MessageController.js

@@ -17,6 +17,7 @@
     vm.service = Message;
     vm.tags = { searchText: '', selected: '' };
     vm.doDelete = doDelete;
+    vm.close = close;
     vm.reply = reply;
     vm.replyAll = replyAll;
     vm.forward = forward;
@@ -69,6 +70,13 @@
       });
     }
 
+    function close() {
+      $state.go('mail.account.mailbox', { accountId: stateAccount.id, mailboxId: encodeUriFilter(stateMailbox.path) }).then(function() {
+        vm.message = null;
+        delete stateMailbox.selectedMessage;
+      });
+    }
+
     function reply($event) {
       var message = vm.message.$reply();
       showMailEditor($event, message);

UI/WebServerResources/scss/views/_view.scss

@@ -64,91 +64,60 @@ $detailView-width: grid-step(8) !global;
     margin: 0;
 
   }
+
+  // No animation on medium to large screens
   @include from(md) {
     .viewer {
       position: absolute;
       left: 0;
       right: 0;
       max-width: 100%;
-      transform: translate3d(0, 0, 0);
-      transition: all 0.5s $swift-ease-in-out-timing-function;
-      &.ng-enter {
-        transform: translate(-105%, 0);
-        &.ng-enter-active {
-          transform: translate(0%, 0%);
-          transition-delay: 0.5s;
-        }
-      }
-
-      &.ng-leave {
-        transition-delay: 0;
-        transition-duration: 0.1s;
-        transform: translate(0, 0);
-
-        &.ng-leave-active {
-          transition-delay: 0.1s;
-          transition-duration: 0.4s;
-          transform: translate(-105%, 100%);
-
-        }
-      }
+//      transform: translate3d(0, 0, 0);
+//      transition: all 0.5s $swift-ease-in-out-timing-function;
+//      &.ng-enter {
+//        transform: translate(-105%, 0);
+//        &.ng-enter-active {
+//          transform: translate(0, 0);
+//          transition-delay: 0.5s;
+//        }
+//      }
+//      &.ng-leave {
+//        transition-delay: 0;
+//        transition-duration: 0.1s;
+//        transform: translate(0, 0);
+//        &.ng-leave-active {
+//          transition-delay: 0.1s;
+//          transition-duration: 0.4s;
+//          transform: translate(-105%, 100%);
+//        }
+//      }
     }
   }
 
+  // On small screens, the view slides from the right and takes all screen place
   @include to(sm) {
     position: absolute;
     width: 100%;
     min-width: 100%;
-    // caution: limited support in Android (<=4.4), full-support in v. 37
-    height: calc(100vh - #{$toolbar-tall-height});
-    transform: translateX(-100%) scale(1);
-    transform-origin: 50% 50%;
+    top: $toolbar-tall-height;
+    bottom: 0;
+    left: 0;
+    right: 0;
     transition: all 0.5s $swift-ease-in-out-timing-function;
-// .view-detail.sg-close hides the background
     &.sg-close {
-      transition-delay: 0.1s;
-      transition-duration: 0.4s;
-      transform: translateX(-100%) scale(0);
-      // .viewer is the card itself
-      .viewer {
-        &.ng-leave,
-        &.ng-enter,
-        &.ng-leave.ng-leave-active {
-          transform: translateY(0) scale(0);
-        }
-        // ui-sref might add ng-animate class early
-        &.ng-enter.ng-enter-active {
-          transform: translateY(0) scale(0);
-        }
+      transform: translateX(100%);
+    }
+    &.ng-leave {
+      &.ng-leave-active {
+        transform: translateX(100%);
       }
     }
-    // .viewer is the card itself
-    .viewer {
-      &.ng-leave,
-      &.ng-leave.ng-leave-active {
-        transform: translateY(100%) scale(0);
-      }
-
-      &.ng-enter {
-        transition: all 0.5s $swift-ease-in-out-timing-function;
-        transform: translateY(100%) scale(0);
-      }
-      &.ng-enter.ng-enter-active {
-        transform: translateY(0) scale(1);
-      }
-    }
-
-    &.ng-leave,
-    &.ng-leave.ng-leave-active {
-      transform: translateX(-100%) scale(0);
-    }
-
     &.ng-enter {
       transition: all 0.5s $swift-ease-in-out-timing-function;
-      transform: translateX(-100%) scale(0);
-    }
-    &.ng-enter.ng-enter-active {
-      transform: translateX(-100%) scale(1);
+      transform: translateX(100%);
+      &.ng-enter-active {
+        transform: translateX(0);
+      }
     }
   }
 }