Andreas/wekan
1
0
Fork 0
mirror of https://github.com/wekan/wekan.git synced 2025-12-16 07:20:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Define the popup translation in the stylesheet, not in the JS code

Browse source 
This allows us to autoprexfix the property, which is needed for Safari
support (see http://caniuse.com/#feat=transforms2d).

Fixes #178.
This commit is contained in:
Maxime Quandalle 2015-06-09 17:41:55 +02:00
parent 270236363a
commit 0b6c229b6c
3 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/components/main/popup.styl
View file

@ -1,5 +1,7 @@
@import 'nib' @import 'nib'
$popupWidth = 300px
.pop-over .pop-over
background: #fff background: #fff
border-radius: 3px border-radius: 3px
@ -7,13 +9,13 @@
border-bottom-color: #c2c2c2 border-bottom-color: #c2c2c2
box-shadow: 0 1px 6px rgba(0, 0, 0, .3) box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
position: absolute position: absolute
width: 300px width: $popupWidth
z-index: 99999 z-index: 99999
margin-top: 5px margin-top: 5px
hr hr
margin: 4px -10px margin: 4px -10px
width: 300px width: $popupWidth
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
@ -118,6 +120,10 @@
.at-result .at-result
background: #b2dfdb background: #b2dfdb
for depth in (1..6)
.popup-container-depth-{depth}
transform: translateX(- depth * $popupWidth)
.select-members-list .select-members-list
margin-bottom: 8px margin-bottom: 8px

2
client/components/main/popup.tpl.jade
View file

@ -13,7 +13,7 @@
//- //-
We display the all stack of popup content next to each other and move We display the all stack of popup content next to each other and move
the "window" by translating .content-container inside .content-wrapper. the "window" by translating .content-container inside .content-wrapper.
.content-container(style="transform:translateX({{containerTranslation}}px)") .content-container(class="popup-container-depth-{{depth}}")
each stack each stack
//- //-
XXX We need a better way to express the "is the last element" condition. XXX We need a better way to express the "is the last element" condition.

4
client/lib/popup.js
View file

@ -52,6 +52,7 @@ Popup = {
hasPopupParent: self._hasPopupParent(), hasPopupParent: self._hasPopupParent(),
title: self._getTitle(popupName), title: self._getTitle(popupName),
openerElement: openerElement, openerElement: openerElement,
depth: self._stack.length,
offset: self._getOffset(openerElement), offset: self._getOffset(openerElement),
dataContext: this.currentData && this.currentData() || this dataContext: this.currentData && this.currentData() || this
}); });
@ -69,8 +70,7 @@ Popup = {
self.current = Blaze.renderWithData(self.template, function() { self.current = Blaze.renderWithData(self.template, function() {
self._dep.depend(); self._dep.depend();
return _.extend(self._stack[self._stack.length - 1], { return _.extend(self._stack[self._stack.length - 1], {
stack: self._stack, stack: self._stack
containerTranslation: (self._stack.length - 1) * -300
}); });
}, document.body); }, document.body);