moparisthebest
/
mail
mirror of https://github.com/moparisthebest/mail
1
0
Fork 0
Code Issues Releases Wiki Activity

[WO-333] Fix lightbox outer scrollbar 

* Use ng-animate with display:none instead of visibility:hidden
* Fix min-height in lightbox
* Start refactoring lightbox opening code using scope.state.lightbox
This commit is contained in:
Tankred Hase 2014-04-23 15:24:48 +02:00
parent 6adc9da8c1
commit c08ff4f287
9 changed files with 63 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/chrome.html
View File

@ -19,7 +19,7 @@
<!-- error dialog lightbox -->
<div class="lightbox-overlay" ng-class="{'show': state.dialog.open}">
<div class="lightbox lightbox-effect dialog view-dialog" ng-include="'tpl/dialog.html'"></div>
<div class="lightbox dialog view-dialog" ng-include="'tpl/dialog.html'"></div>
</div><!--/.lightbox-overlay-->
</body>

3
src/js/controller/about.js
View File

@ -10,9 +10,8 @@ define(function(require) {
var AboutCtrl = function($scope) {
$scope.state.about = {
open: false,
toggle: function(to) {
this.open = to;
$scope.state.lightbox = (to) ? 'about' : undefined;
}
};

3
src/js/controller/account.js
View File

@ -15,9 +15,8 @@ define(function(require) {
pgp = appController._crypto;
$scope.state.account = {
open: false,
toggle: function(to) {
this.open = to;
$scope.state.lightbox = (to) ? 'account' : undefined;
}
};

4
src/js/controller/contacts.js
View File

@ -15,9 +15,9 @@ define(function(require) {
pgp = appController._crypto;
$scope.state.contacts = {
open: false,
toggle: function(to) {
this.open = to;
$scope.state.lightbox = (to) ? 'contacts' : undefined;
$scope.listKeys();
}
};

3
src/js/controller/set-passphrase.js
View File

@ -13,9 +13,8 @@ define(function(require) {
pgp = appController._crypto;
$scope.state.setPassphrase = {
open: false,
toggle: function(to) {
this.open = to;
$scope.state.lightbox = (to) ? 'set-passphrase' : undefined;
$scope.newPassphrase = undefined;
$scope.oldPassphrase = undefined;

5
src/js/controller/write.js
View File

@ -25,9 +25,8 @@ define(function(require) {
//
$scope.state.writer = {
open: false,
write: function(replyTo, replyAll, forward) {
this.open = true;
$scope.state.lightbox = 'write';
$scope.replyTo = replyTo;
resetFields();
@ -39,7 +38,7 @@ define(function(require) {
$scope.verify($scope.to[0]);
},
close: function() {
this.open = false;
$scope.state.lightbox = undefined;
}
};

2
src/sass/all.scss
View File

@ -40,4 +40,4 @@
@import "views/mail-list";
@import "views/read";
@import "views/write";
@import "views/login";
@import "views/login";

62
src/sass/components/_lightbox.scss
View File

@ -5,14 +5,12 @@
width: 100%;
height: 100%;
z-index: 2000;
visibility: hidden;
backface-visibility: hidden;
@include respond-to(desktop) {
margin: 0 auto;
width: $lightbox-width;
max-width: $lightbox-max-width;
max-height: $lightbox-min-height;
height: auto;
text-align: left;
}
@ -22,6 +20,11 @@
padding: $lightbox-padding;
background: #fff;
backface-visibility: hidden;
@include respond-to(desktop) {
max-height: $lightbox-min-height;
}
header {
text-align: center;
position: relative;
@ -53,39 +56,54 @@
}
}
.lightbox-overlay.show .lightbox {
visibility: visible;
}
.lightbox-overlay {
position: absolute;
width: 100%;
height: 100%;
visibility: hidden;
display: none;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: $color-grey-dark-alpha;
transition: all 0.3s;
@include respond-to(desktop) {
@include scut-vcenter-ib(".lightbox");
text-align: center;
}
}
.lightbox-overlay.show {
opacity: 1;
visibility: visible;
}
&.show {
display: block;
}
// effect
.lightbox-effect .lightbox-body {
transform: scale(0.7);
transition: all 0.3s;
}
.lightbox-overlay.show .lightbox-effect .lightbox-body {
transform: scale(1);
/* ngAnimate */
&.show-add {
display: block;
opacity: 0;
transition: opacity 0.3s;
.lightbox-body {
transform: scale(0.7);
transition: transform 0.3s;
}
}
&.show-add-active {
opacity: 1;
.lightbox-body {
transform: scale(1);
}
}
&.show-remove {
display: block;
opacity: 1;
transition: opacity 0.3s;
.lightbox-body {
transform: scale(1);
transition: transform 0.3s;
}
}
&.show-remove-active {
opacity: 0;
.lightbox-body {
transform: scale(0.7);
}
}
}

24
src/tpl/desktop.html
View File

@ -19,18 +19,22 @@
</div><!--/.nav-container-->
<!-- lightbox -->
<div class="lightbox-overlay" ng-class="{'show': state.writer.open}">
<div class="lightbox lightbox-effect" ng-include="'tpl/write.html'"></div>
<div class="lightbox-overlay" ng-class="{'show': state.lightbox === 'write'}">
<div class="lightbox" ng-include="'tpl/write.html'"></div>
</div>
<div class="lightbox-overlay" ng-class="{'show': state.account.open}">
<div class="lightbox lightbox-effect" ng-include="'tpl/account.html'"></div>
<div class="lightbox-overlay" ng-class="{'show': state.lightbox === 'account'}">
<div class="lightbox" ng-include="'tpl/account.html'"></div>
</div>
<div class="lightbox-overlay" ng-class="{'show': state.setPassphrase.open}">
<div class="lightbox lightbox-effect" ng-include="'tpl/set-passphrase.html'"></div>
<div class="lightbox-overlay" ng-class="{'show': state.lightbox === 'set-passphrase'}">
<div class="lightbox" ng-include="'tpl/set-passphrase.html'"></div>
</div>
<div class="lightbox-overlay" ng-class="{'show': state.contacts.open}">
<div class="lightbox lightbox-effect" ng-include="'tpl/contacts.html'"></div>
<div class="lightbox-overlay" ng-class="{'show': state.lightbox === 'contacts'}">
<div class="lightbox" ng-include="'tpl/contacts.html'"></div>
</div>
<div class="lightbox-overlay" ng-class="{'show': state.about.open}">
<div class="lightbox lightbox-effect view-about" ng-include="'tpl/about.html'"></div>
<div class="lightbox-overlay" ng-class="{'show': state.lightbox === 'about'}">
<div class="lightbox view-about" ng-include="'tpl/about.html'"></div>
</div>