[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

src/chrome.html

@@ -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>

src/js/controller/about.js

@@ -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;
             }
         };
 

src/js/controller/account.js

@@ -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;
             }
         };
 

src/js/controller/contacts.js

@@ -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();
             }
         };

src/js/controller/set-passphrase.js

@@ -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;

src/js/controller/write.js

@@ -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;
             }
         };
 

src/sass/all.scss

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

src/sass/components/_lightbox.scss

@@ -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 {
+    &.show {
-    opacity: 1;
+        display: block;
-    visibility: visible;
+    }
-}
 
-// effect
+    /* ngAnimate */
-.lightbox-effect .lightbox-body {
+    &.show-add {
-    transform: scale(0.7);
+        display: block;
-    transition: all 0.3s;
+        opacity: 0;
-}
+        transition: opacity 0.3s;
-
+        .lightbox-body {
-.lightbox-overlay.show .lightbox-effect .lightbox-body {
+            transform: scale(0.7);
-    transform: scale(1);
+            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);
+        }
+    }
 }

src/tpl/desktop.html

@@ -19,18 +19,22 @@
 </div><!--/.nav-container-->
 
 <!-- lightbox  -->
-<div class="lightbox-overlay" ng-class="{'show': state.writer.open}">
+<div class="lightbox-overlay" ng-class="{'show': state.lightbox === 'write'}">
-  <div class="lightbox lightbox-effect" ng-include="'tpl/write.html'"></div>
+  <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>