diff options
| -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 | ||||
| -rw-r--r-- | client/lib/popup.js | 11 |
4 files changed, 46 insertions, 16 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) diff --git a/client/lib/popup.js b/client/lib/popup.js index dd2a43b0..04f7dbf6 100644 --- a/client/lib/popup.js +++ b/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 - // dependency that is being invalidated every time the top element of the - // stack has changed and we want to update the popup. + // return the the complete along with its top element and depends on our + // internal dependency that is being invalidated every time the top + // 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 { |