slide up/down animations for "modal" style pages

gulpfile.js

@@ -65,6 +65,10 @@ gulp.task('lib', ['clean:lib'], function () {
             src: paths.npmDir + 'angular/angular*.js',
             dest: paths.libDir + 'angular'
         },
+        {
+            src: paths.npmDir + 'angular-animate/angular-animate.js',
+            dest: paths.libDir + 'angular-animate'
+        },
         {
             src: paths.npmDir + 'angular-ui-bootstrap/dist/*tpls*.js',
             dest: paths.libDir + 'angular-ui-bootstrap'

src/popup/app/app.js

@@ -2,6 +2,7 @@
     .module('bit', [
         'ui.router',
         'angular-jwt',
+        'ngAnimate',
 
         'bit.services',
 

src/popup/app/config.js

@@ -30,20 +30,23 @@
                 url: "/login",
                 controller: 'accountsLoginController',
                 templateUrl: "app/accounts/views/accountsLogin.html",
-                data: { authorize: false }
+                data: { authorize: false },
+                params: { animation: null }
             })
             .state('twoFactor', {
                 url: "/two-factor",
                 controller: 'accountsLoginController',
                 templateUrl: "app/accounts/views/accountsLoginTwoFactor.html",
-                data: { authorize: false }
+                data: { authorize: false },
+                params: { animation: null }
             })
 
             .state('tabs', {
                 url: "/tab",
                 abstract: true,
                 templateUrl: "app/global/tabs.html",
-                data: { authorize: true }
+                data: { authorize: true },
+                params: { animation: null }
             })
                 .state('tabs.current', {
                     url: "/current",
@@ -70,19 +73,22 @@
                 url: "/view-site?siteId",
                 templateUrl: "app/vault/views/vaultViewSite.html",
                 controller: 'vaultViewSiteController',
-                data: { authorize: true }
+                data: { authorize: true },
+                params: { animation: null }
             })
             .state('addSite', {
                 url: "/add-site",
                 templateUrl: "app/vault/views/vaultAddSite.html",
                 controller: 'vaultAddSiteController',
-                data: { authorize: true }
+                data: { authorize: true },
+                params: { animation: null }
             })
             .state('editSite', {
                 url: "/edit-site?siteId",
                 templateUrl: "app/vault/views/vaultEditSite.html",
                 controller: 'vaultEditSiteController',
-                data: { authorize: true }
+                data: { authorize: true },
+                params: { animation: null }
             });
     })
     .run(function ($rootScope, userService, loginService, tokenService, $state) {

src/popup/app/global/mainController.js

@@ -2,9 +2,17 @@
     .module('bit.global')
 
     .controller('mainController', function ($scope, $state) {
-        $scope.currentYear = new Date().getFullYear();
+        var self = this;
+        self.currentYear = new Date().getFullYear();
+        self.animation = '';
 
         $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
-            
+            if (toParams.animation) {
+                self.animation = toParams.animation;
+                return;
+            }
+            else {
+                self.animation = '';
+            }
         });
     });

src/popup/app/vault/vaultModule.js

@@ -1,2 +1,2 @@
 angular
-    .module('bit.vault', []);
+    .module('bit.vault', ['ngAnimate']);

src/popup/app/vault/views/vault.html

@@ -1,5 +1,5 @@
 <div class="header">
-    <a class="right" ui-sref="addSite"><i class="fa fa-plus fa-lg"></i></a>
+    <a class="right" ui-sref="addSite({animation: 'in-slide-up'})"><i class="fa fa-plus fa-lg"></i></a>
     <div class="title">My Vault</div>
 </div>
 <div class="content content-tabs">
@@ -8,7 +8,7 @@
             <div class="list-item-header">
                 <i class="fa fa-folder-open"></i> {{folder.name}}
             </div>
-            <a ui-sref="viewSite({siteId: site.id})" class="list-item list-item-condensed" ng-repeat="site in folderSites = (sites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])">
+            <a ui-sref="viewSite({siteId: site.id, animation: 'in-slide-up'})" class="list-item list-item-condensed" ng-repeat="site in folderSites = (sites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])">
                 <span class="text">{{site.name}}</span>
                 <span class="detail">{{site.username}}</span>
                 <!--<span class="btn btn-link pull-right"><i class="fa fa-ellipsis-h"></i></span>-->

src/popup/app/vault/views/vaultAddSite.html

@@ -1,5 +1,5 @@
 <div class="header">
-    <a ui-sref="tabs.vault" class="left">Close</a>
+    <a ui-sref="tabs.vault({animation: 'out-slide-down'})" class="left">Close</a>
     <a href="#" class="right">Save</a>
     <div class="title">Add Site</div>
 </div>

src/popup/app/vault/views/vaultViewSite.html

@@ -1,5 +1,5 @@
 <div class="header">
-    <a ui-sref="tabs.vault" class="left">Close</a>
+    <a ui-sref="tabs.vault({animation: 'out-slide-down'})" class="left">Close</a>
     <a href="#" class="right">Edit</a>
     <div class="title">View Site</div>
 </div>

src/popup/index.html

@@ -13,6 +13,7 @@
     <script src="../lib/bootstrap/js/bootstrap.js"></script>
 
     <script src="../lib/angular/angular.js"></script>
+    <script src="../lib/angular-animate/angular-animate.js"></script>
     <script src="../lib/angular-ui-router/angular-ui-router.js"></script>
     <script src="../lib/angular-jwt/angular-jwt.js"></script>
 
@@ -52,7 +53,7 @@
     <script src="app/tools/toolsModule.js"></script>
     <script src="app/tools/toolsController.js"></script>
 </head>
-<body ng-controller="mainController as main">
-    <div ui-view></div>
+<body ng-controller="mainController as main" class="{{main.animation}}">
+    <div ui-view class="main-view"></div>
 </body>
 </html>

src/popup/less/animations.less

@@ -0,0 +1,51 @@
+.in-slide-up {
+    .main-view.ng-enter,
+    .main-view.ng-leave {
+        -webkit-transition: all 0.4s ease;
+        transition: all 0.4s ease;
+    }
+
+    .main-view.ng-enter {
+        top: 100%;
+        z-index: 990;
+    }
+
+    .main-view.ng-enter.ng-enter-active {
+        top: 0;
+    }
+
+    .main-view.ng-leave {
+        top: 0;
+        z-index: 970;
+    }
+
+    .main-view.ng-leave.ng-leave-active {
+        top: 0;
+    }
+}
+
+.out-slide-down {
+    .main-view.ng-enter,
+    .main-view.ng-leave {
+        -webkit-transition: all 0.4s ease;
+        transition: all 0.4s ease;
+    }
+
+    .main-view.ng-enter {
+        top: 0;
+        z-index: 970;
+    }
+
+    .main-view.ng-enter.ng-enter-active {
+        top: 0;
+    }
+
+    .main-view.ng-leave {
+        top: 0;
+        z-index: 990;
+    }
+
+    .main-view.ng-leave.ng-leave-active {
+        top: 100%;
+    }
+}

src/popup/less/popup.less

@@ -1,6 +1,7 @@
 @import "../../../node_modules/bootstrap/less/bootstrap.less";
 @import "variables.less";
 @import "components.less";
+@import "animations.less";
 
 body {
     width: 320px;
@@ -8,6 +9,13 @@ body {
     background-color: @background-color;
 }
 
+.main-view {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 980;
+}
+
 .content {
     position: absolute;
     top: 44px;
@@ -15,6 +23,7 @@ body {
     left: 0;
     right: 0;
     overflow: auto;
+    background-color: @background-color;
 
     &.content-tabs {
         bottom: 55px;