mirror of
https://github.com/bitwarden/browser.git
synced 2024-12-26 17:08:33 +01:00
control sidebar for vault with filters
This commit is contained in:
Kyle Spearrin
parent
5989918300
commit
b191ecd29e
@ -7,7 +7,7 @@ angular
|
||||
$locationProvider.hashPrefix('');
|
||||
jwtOptionsProvider.config({
|
||||
urlParam: 'access_token3',
|
||||
whiteListedDomains: ['api.bitwarden.com', 'preview-api.bitwarden.com', 'localhost', '192.168.1.8']
|
||||
whiteListedDomains: ['api.bitwarden.com', 'preview-api.bitwarden.com', 'localhost', '192.168.1.6']
|
||||
});
|
||||
var refreshPromise;
|
||||
jwtInterceptorProvider.tokenGetter = /*@ngInject*/ function (options, tokenService, authService) {
|
||||
@ -77,7 +77,10 @@ angular
|
||||
url: '^/vault',
|
||||
templateUrl: 'app/vault/views/vault.html',
|
||||
controller: 'vaultController',
|
||||
data: { pageTitle: 'My Vault' },
|
||||
data: {
|
||||
pageTitle: 'My Vault',
|
||||
controlSidebar: true
|
||||
},
|
||||
params: {
|
||||
refreshFromServer: false
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ angular
|
||||
.controller('mainController', function ($scope, $state, authService, appSettings, toastr, $window, $document) {
|
||||
var vm = this;
|
||||
vm.bodyClass = '';
|
||||
vm.usingControlSidebar = vm.openControlSidebar = false;
|
||||
vm.searchVaultText = null;
|
||||
vm.version = appSettings.version;
|
||||
|
||||
@ -24,7 +25,17 @@ angular
|
||||
$.AdminLTE.pushMenu.expandOnHover();
|
||||
}
|
||||
|
||||
$(document).off('click', '.sidebar li a');
|
||||
$document.off('click', '.sidebar li a');
|
||||
|
||||
$('#control-sidebar').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var bod = $('body');
|
||||
if (!bod.hasClass('control-sidebar-open')) {
|
||||
bod.addClass('control-sidebar-open');
|
||||
} else {
|
||||
bod.removeClass('control-sidebar-open');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -38,6 +49,9 @@ angular
|
||||
else {
|
||||
vm.bodyClass = '';
|
||||
}
|
||||
|
||||
vm.usingControlSidebar = !!toState.data.controlSidebar;
|
||||
vm.openControlSidebar = vm.usingControlSidebar && $document.width() > 768;
|
||||
});
|
||||
|
||||
$scope.addLogin = function () {
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
$scope.loading = true;
|
||||
$scope.logins = [];
|
||||
$scope.favoriteCollapsed = $localStorage.collapsedFolders && 'favorite' in $localStorage.collapsedFolders;
|
||||
$scope.folderIdFilter = undefined;
|
||||
|
||||
if ($state.params.refreshFromServer) {
|
||||
$rootScope.vaultFolders = $rootScope.vaultLogins = null;
|
||||
@ -281,6 +282,18 @@
|
||||
});
|
||||
};
|
||||
|
||||
$scope.filterFolder = function (folder) {
|
||||
$scope.folderIdFilter = folder.id;
|
||||
};
|
||||
|
||||
$scope.clearFilters = function () {
|
||||
$scope.folderIdFilter = undefined;
|
||||
};
|
||||
|
||||
$scope.folderFilter = function (folder) {
|
||||
return $scope.folderIdFilter === undefined || folder.id === $scope.folderIdFilter;
|
||||
}
|
||||
|
||||
function removeLoginFromScopes(login) {
|
||||
var index = $rootScope.vaultLogins.indexOf(login);
|
||||
if (index > -1) {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
<div class="box box-primary" ng-class="{'collapsed-box': favoriteCollapsed}" style="margin-bottom: 40px;"
|
||||
ng-show="vaultFolders.length && (!main.searchVaultText || favoriteLogins.length)">
|
||||
ng-show="vaultFolders.length && folderIdFilter === undefined && (!main.searchVaultText || favoriteLogins.length)">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">
|
||||
<i class="fa fa-star"></i>
|
||||
@ -90,7 +90,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" ng-class="{'collapsed-box': folder.collapsed}" ng-repeat="folder in vaultFolders track by folder.id"
|
||||
<div class="box" ng-class="{'collapsed-box': folder.collapsed}"
|
||||
ng-repeat="folder in filteredVaultFolders = (vaultFolders | filter: folderFilter) track by folder.id"
|
||||
ng-show="vaultFolders.length && (!main.searchVaultText || folderLogins.length)">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">
|
||||
@ -179,3 +180,29 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<aside class="control-sidebar control-sidebar-light">
|
||||
<div class="tab-content">
|
||||
<ul class="control-sidebar-menu">
|
||||
<li>
|
||||
<a href="javascript:void(0)" ng-click="clearFilters()">
|
||||
Clear All Filters
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="control-sidebar-heading">
|
||||
<i class="fa fa-folder-open"></i> Folders
|
||||
</h3>
|
||||
<ul class="control-sidebar-menu">
|
||||
<li ng-repeat="folder in vaultFolders track by folder.id">
|
||||
<a href="javascript:void(0)" ng-click="filterFolder(folder)">
|
||||
<i class="fa fa-check" ng-if="folder.id === folderIdFilter"></i>
|
||||
{{folder.name}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="control-sidebar-heading">
|
||||
<i class="fa fa-tags"></i> Tags
|
||||
</h3>
|
||||
<p>Coming soon...</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
<div class="navbar-custom-menu">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a ui-sref="frontend.logout">Log Out</a></li>
|
||||
<li class="control-sidebar-show">
|
||||
<a href="#" id="control-sidebar"><i class="fa fa-bars"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
<div class="navbar-custom-menu">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a ui-sref="frontend.logout">Log Out</a></li>
|
||||
<li class="control-sidebar-show">
|
||||
<a href="#" id="control-sidebar"><i class="fa fa-bars"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -26,7 +26,9 @@
|
||||
<link rel="stylesheet" href="css/vault.css" />
|
||||
<!-- @endexclude -->
|
||||
</head>
|
||||
<body ng-controller="mainController as main" class="layout-boxed skin-blue sidebar-mini {{main.bodyClass}}">
|
||||
<body ng-controller="mainController as main" class="layout-boxed skin-blue sidebar-mini {{main.bodyClass}}"
|
||||
ng-class="{'using-control-sidebar': main.usingControlSidebar,
|
||||
'control-sidebar-open': main.usingControlSidebar && main.openControlSidebar}">
|
||||
<div ui-view></div>
|
||||
|
||||
<!-- @if true !>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
@boxed-layout-bg-image-path: "../images/boxed-bg.png";
|
||||
@yellow: #bf7e16;
|
||||
@footer-height: 51px;
|
||||
|
||||
body {
|
||||
background-color: @gray;
|
||||
@ -71,6 +72,65 @@ h1, h2, h3, h4, h5, h6,
|
||||
}
|
||||
}
|
||||
|
||||
.control-sidebar {
|
||||
height: ~"calc(100% - @{footer-height})";
|
||||
position: absolute;
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
padding-top: @navbar-height;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
padding-top: @navbar-height + 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.control-sidebar-heading {
|
||||
padding: 0;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.control-sidebar-menu {
|
||||
li a {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
li.active a {
|
||||
background-color: @component-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.control-sidebar-open {
|
||||
@media (min-width: @screen-sm) {
|
||||
.main-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-sidebar-show {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.using-control-sidebar {
|
||||
.control-sidebar-show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.control-sidebar-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.control-sidebar-bg {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.main-footer {
|
||||
height: @footer-height;
|
||||
}
|
||||
|
||||
form div.validation-errors ul {
|
||||
margin-bottom: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user