diff options
author | Maxime Quandalle <maxime@quandalle.com> | 2015-05-22 19:40:12 +0200 |
---|---|---|
committer | Maxime Quandalle <maxime@quandalle.com> | 2015-05-22 19:40:12 +0200 |
commit | 6fe08cd4b3a0db0695db13a1b95cab7834de3ba6 (patch) | |
tree | 75eab6c86b48696c04dd205bd38b0887f9d72f78 /client/components | |
parent | 790a0e0a2d703f4a318acea3b102fcc6f7aebbb0 (diff) | |
download | wekan-6fe08cd4b3a0db0695db13a1b95cab7834de3ba6.tar.gz wekan-6fe08cd4b3a0db0695db13a1b95cab7834de3ba6.tar.bz2 wekan-6fe08cd4b3a0db0695db13a1b95cab7834de3ba6.zip |
Animate popup screens transition
Diffstat (limited to 'client/components')
-rw-r--r-- | client/components/main/popup.js | 2 | ||||
-rw-r--r-- | client/components/main/popup.styl | 29 | ||||
-rw-r--r-- | client/components/main/popup.tpl.jade | 20 |
3 files changed, 39 insertions, 12 deletions
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) |