mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-22 11:45:59 +01:00
slide up/down animations for "modal" style pages
This commit is contained in:
Kyle Spearrin
parent
ac0ceac647
commit
59f72d6e09
@ -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'
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
.module('bit', [
|
||||
'ui.router',
|
||||
'angular-jwt',
|
||||
'ngAnimate',
|
||||
|
||||
'bit.services',
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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 = '';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
angular
|
||||
.module('bit.vault', []);
|
||||
.module('bit.vault', ['ngAnimate']);
|
||||
|
||||
@ -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>-->
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
51
src/popup/less/animations.less
Normal file
51
src/popup/less/animations.less
Normal file
@ -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%;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user