Animate popup screens transition

client/components/main/popup.js

@@ -7,7 +7,7 @@ Popup.template.events({
   'click .js-back-view': function() {
     Popup.back();
   },
-  'click .js-close-popover': function() {
+  'click .js-close-pop-over': function() {
     Popup.close();
   },
   'click .js-confirm': function() {

client/components/main/popup.styl

@@ -73,8 +73,17 @@
         color: darken(white, 80%)
 
     .back-btn
-      padding: 10px
       float: left
+      overflow: hidden
+      width: 30px
+      transition: width 0.2s
+
+      i.fa
+        margin: 10px
+        margin-top: 12px
+
+      &.is-hidden
+        width: 0
 
     .close-btn
       padding: 10px 10px 10px 4px
@@ -82,11 +91,21 @@
       top: 0
       right: 0
 
-  .content
+  .content-wrapper
-    overflow-x: hidden
+    width: 100%
-    overflow-y: auto
+
-    padding: 0 10px 10px
+  .content-container
+    width: 1000px
     max-height: 550px
+    transition: transform 0.2s
+
+    .content
+      width: 300 - 20px
+      padding: 0 10px 10px
+      float: left
+
+      &.is-hidden
+        height: 0
 
   .quiet
     padding: 6px 6px 4px

client/components/main/popup.tpl.jade

@@ -3,11 +3,19 @@
   class=currentBoard.colorClass
   style="display:block; left:{{offset.left}}px; top:{{offset.top}}px;")
   .header.clearfix
-    if hasPopupParent
+    a.back-btn.js-back-view(class="{{#unless hasPopupParent}}is-hidden{{/unless}}")
-      a.back-btn.js-back-view
+      i.fa.fa-chevron-left
-        i.fa.fa-chevron-left
     span.header-title= title
-    a.close-btn.js-close-popover
+    a.close-btn.js-close-pop-over
       i.fa.fa-times
-  .content.clearfix
+  .content-wrapper
-    +Template.dynamic(template=popupName data=dataContext)
+    //-
+      We display the all stack of popup content next to each other and move
+      the "window" by translating .content-container inside .content-wrapper.
+    .content-container(style="transform:translateX({{containerTranslation}}px)")
+      each stack
+        //-
+          XXX We need a better way to express the "is the last element" condition.
+          Hopefully the @last helper will come soon (or at least @index)
+        .content(class="{{#unless $eq popupName ../popupName}}is-hidden{{/unless}}")
+          +Template.dynamic(template=popupName data=dataContext)

client/lib/popup.js

@@ -56,9 +56,9 @@ Popup = {
 
       // If there are no popup currently opened we use the Blaze API to render
       // one into the DOM. We use a reactive function as the data parameter that
-      // just return the top element on the stack and depends on our internal
+      // return the the complete along with its top element and depends on our
-      // dependency that is being invalidated every time the top element of the
+      // internal dependency that is being invalidated every time the top
-      // stack has changed and we want to update the popup.
+      // element of the stack has changed and we want to update the popup.
       //
       // Otherwise if there is already a popup open we just need to invalidate
       // our internal dependency, and since we just changed the top element of
@@ -66,7 +66,10 @@ Popup = {
       if (! self.isOpen()) {
         self.current = Blaze.renderWithData(self.template, function() {
           self._dep.depend();
-          return self._stack[self._stack.length - 1];
+          return _.extend(self._stack[self._stack.length - 1], {
+            stack: self._stack,
+            containerTranslation: (self._stack.length - 1) * -300
+          });
         }, document.body);
 
       } else {