From 6fe08cd4b3a0db0695db13a1b95cab7834de3ba6 Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Fri, 22 May 2015 19:40:12 +0200
Subject: Animate popup screens transition

---
 client/components/main/popup.js       |  2 +-
 client/components/main/popup.styl     | 29 ++++++++++++++++++++++++-----
 client/components/main/popup.tpl.jade | 20 ++++++++++++++------
 3 files changed, 39 insertions(+), 12 deletions(-)

(limited to 'client/components/main')

diff --git a/client/components/main/popup.js b/client/components/main/popup.js
index 53695d10..e6ce8051 100644
--- a/client/components/main/popup.js
+++ b/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() {
diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl
index 8c9993af..151b4fcb 100644
--- a/client/components/main/popup.styl
+++ b/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
-    overflow-x: hidden
-    overflow-y: auto
-    padding: 0 10px 10px
+  .content-wrapper
+    width: 100%
+
+  .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
diff --git a/client/components/main/popup.tpl.jade b/client/components/main/popup.tpl.jade
index ba24db0a..9e99030d 100644
--- a/client/components/main/popup.tpl.jade
+++ b/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
-        i.fa.fa-chevron-left
+    a.back-btn.js-back-view(class="{{#unless hasPopupParent}}is-hidden{{/unless}}")
+      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
-    +Template.dynamic(template=popupName data=dataContext)
+  .content-wrapper
+    //-
+      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)
-- 
cgit v1.2.3-1-g7c22