From c08ff4f287c69a065a5e326f6f1d5e0da3d16e7c Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Wed, 23 Apr 2014 15:24:48 +0200 Subject: [PATCH] [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 | 2 +- src/js/controller/about.js | 3 +- src/js/controller/account.js | 3 +- src/js/controller/contacts.js | 4 +- src/js/controller/set-passphrase.js | 3 +- src/js/controller/write.js | 5 +-- src/sass/all.scss | 2 +- src/sass/components/_lightbox.scss | 62 +++++++++++++++++++---------- src/tpl/desktop.html | 24 ++++++----- 9 files changed, 63 insertions(+), 45 deletions(-) diff --git a/src/chrome.html b/src/chrome.html index 3c91d94..b0d886a 100644 --- a/src/chrome.html +++ b/src/chrome.html @@ -19,7 +19,7 @@
-
+
diff --git a/src/js/controller/about.js b/src/js/controller/about.js index 7df3cfd..7e952a0 100644 --- a/src/js/controller/about.js +++ b/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; } }; diff --git a/src/js/controller/account.js b/src/js/controller/account.js index 5e0a5c5..3eceaaf 100644 --- a/src/js/controller/account.js +++ b/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; } }; diff --git a/src/js/controller/contacts.js b/src/js/controller/contacts.js index a49200a..db97fb6 100644 --- a/src/js/controller/contacts.js +++ b/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(); } }; diff --git a/src/js/controller/set-passphrase.js b/src/js/controller/set-passphrase.js index a280135..d1eb1b6 100644 --- a/src/js/controller/set-passphrase.js +++ b/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; diff --git a/src/js/controller/write.js b/src/js/controller/write.js index 11e9ed2..58cd807 100644 --- a/src/js/controller/write.js +++ b/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; } }; diff --git a/src/sass/all.scss b/src/sass/all.scss index 408a18d..49a9811 100755 --- a/src/sass/all.scss +++ b/src/sass/all.scss @@ -40,4 +40,4 @@ @import "views/mail-list"; @import "views/read"; @import "views/write"; -@import "views/login"; +@import "views/login"; \ No newline at end of file diff --git a/src/sass/components/_lightbox.scss b/src/sass/components/_lightbox.scss index ea9bb29..7dca482 100755 --- a/src/sass/components/_lightbox.scss +++ b/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 { - 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); + } + } } \ No newline at end of file diff --git a/src/tpl/desktop.html b/src/tpl/desktop.html index 9821fcb..88ec5d9 100644 --- a/src/tpl/desktop.html +++ b/src/tpl/desktop.html @@ -19,18 +19,22 @@ -
-
+
+
-
-
+ +
+
-
-
+ +
+
-
-
+ +
+
-
-
+ +
+
\ No newline at end of file