bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-10 13:23:34 +00:00
Code Issues Releases Wiki Activity

vault tuneups

Browse Source
This commit is contained in:
Kyle Spearrin
2016-09-09 23:00:11 -04:00
parent 59f72d6e09
commit 32b2eed66c
5 changed files with 98 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/popup/app/vault/vaultAddSiteController.js
View File

@@ -1,12 +1,12 @@
angular angular
.module('bit.vault') .module('bit.vault')
.controller('vaultAddSiteController', function ($scope, siteService, cipherService) { .controller('vaultAddSiteController', function ($scope, $state, siteService, cipherService) {
$scope.site = { $scope.site = {
folderId: null folderId: null
}; };
$scope.createSite = function (model) { $scope.save = function (model) {
cipherService.encryptSite(model, function (siteModel) { cipherService.encryptSite(model, function (siteModel) {
var site = new Site(siteModel, true); var site = new Site(siteModel, true);
siteService.saveWithServer(site, function () { siteService.saveWithServer(site, function () {
@@ -16,6 +16,6 @@
}; };
$scope.close = function () { $scope.close = function () {
$scope.parentScope.closeAddSite(); $state.go('tabs.vault', { animation: 'out-slide-down' });
}; };
}); });

70
src/popup/app/vault/vaultController.js
View File

@@ -1,14 +1,26 @@
angular angular
.module('bit.vault') .module('bit.vault')
.controller('vaultController', function ($scope, siteService, folderService, $q, cipherService) { .controller('vaultController', function ($scope, $rootScope, siteService, folderService, $q, cipherService) {
$scope.sites = []; var delayLoad = true;
$scope.folders = []; if (!$rootScope.vaultSites) {
$scope.focusedSiteId = null; $rootScope.vaultSites =[];
delayLoad = false;
}
if (!$rootScope.vaultFolders) {
$rootScope.vaultFolders = [];
delayLoad = false;
}
loadVault(); if (delayLoad) {
setTimeout(loadVault, 1000);
}
else {
loadVault();
}
function loadVault() { function loadVault() {
var promises = [];
var decSites = []; var decSites = [];
var decFolders = [{ var decFolders = [{
id: null, id: null,
@@ -17,8 +29,6 @@
folderService.getAll(function (folders) { folderService.getAll(function (folders) {
siteService.getAll(function (sites) { siteService.getAll(function (sites) {
var promises = [];
for (var i = 1; i < folders.length; i++) { for (var i = 1; i < folders.length; i++) {
decFolders.push({ decFolders.push({
id: folders[i].id id: folders[i].id
@@ -52,8 +62,8 @@
} }
$q.all(promises).then(function () { $q.all(promises).then(function () {
$scope.sites = decSites; $rootScope.vaultSites = decSites;
$scope.folders = decFolders; $rootScope.vaultFolders = decFolders;
}); });
}); });
}); });
@@ -66,46 +76,4 @@
return item.name.toLowerCase(); return item.name.toLowerCase();
}; };
/*
$scope.editSite = function (site) {
$scope.focusedSiteId = site.id;
$ionicModal.fromTemplateUrl('app/vault/views/vaultEditSite.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.editSiteModal = modal;
modal.show();
});
};
$scope.addSite = function () {
$ionicModal.fromTemplateUrl('app/vault/views/vaultAddSite.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.addSiteModal = modal;
modal.show();
});
};
*/
$scope.closeAddSite = function () {
$scope.addSiteModal.hide();
};
$scope.closeViewSite = function () {
$scope.viewSiteModal.hide();
$scope.focusedSiteId = null;
};
$scope.closeEditSite = function () {
$scope.editSiteModal.hide();
$scope.focusedSiteId = null;
};
$scope.$on('closeViewSite.hidden', function () {
console.log('modal hidden');
loadVault();
});
}); });

8
src/popup/app/vault/views/vault.html
View File

@@ -4,15 +4,15 @@
</div> </div>
<div class="content content-tabs"> <div class="content content-tabs">
<div class="list"> <div class="list">
<ng-repeat ng-repeat="folder in folders | orderBy: folderSort" ng-show="folders.length"> <div class="list-grouped" ng-repeat="folder in vaultFolders | orderBy: folderSort" ng-show="vaultFolders.length">
<div class="list-item-header"> <div class="list-grouped-header">
<i class="fa fa-folder-open"></i> {{folder.name}} <i class="fa fa-folder-open"></i> {{folder.name}}
</div> </div>
<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'])"> <a ui-sref="viewSite({siteId: site.id, animation: 'in-slide-up'})" class="list-grouped-item condensed" ng-repeat="site in folderSites = (vaultSites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])">
<span class="text">{{site.name}}</span> <span class="text">{{site.name}}</span>
<span class="detail">{{site.username}}</span> <span class="detail">{{site.username}}</span>
<!--<span class="btn btn-link pull-right"><i class="fa fa-ellipsis-h"></i></span>--> <!--<span class="btn btn-link pull-right"><i class="fa fa-ellipsis-h"></i></span>-->
</a> </a>
</ng-repeat> </div>
</div> </div>
</div> </div>

110
src/popup/app/vault/views/vaultAddSite.html
View File

@@ -1,62 +1,64 @@
<div class="header"> <form name="theForm" ng-submit="theForm.$valid && save(site)">
<a ui-sref="tabs.vault({animation: 'out-slide-down'})" class="left">Close</a> <div class="header">
<a href="#" class="right">Save</a> <a ng-click="close()" href class="left">Close</a>
<div class="title">Add Site</div> <button type="submit" class="right btn btn-link">Save</button>
</div> <div class="title">Add Site</div>
<div class="content"> </div>
<div class="list"> <div class="content">
<div class="list-section"> <div class="list">
<div class="list-section-header"> <div class="list-section">
Site Information <div class="list-section-header">
</div> Site Information
<div class="list-section-items">
<div class="list-section-item">
<label for="name">Name</label>
<input id="name" type="text" ng-model="site.name">
</div> </div>
<div class="list-section-item"> <div class="list-section-items">
<label for="uri">URI</label> <div class="list-section-item">
<input id="uri" type="text" ng-model="site.uri"> <label for="name">Name</label>
</div> <input id="name" type="text" ng-model="site.name">
<div class="list-section-item"> </div>
<label for="username">Username</label> <div class="list-section-item">
<input id="username" type="text" ng-model="site.username"> <label for="uri">URI</label>
</div> <input id="uri" type="text" ng-model="site.uri">
<div class="list-section-item"> </div>
<label for="password">Password</label> <div class="list-section-item">
<input id="password" type="password" ng-model="site.password"> <label for="username">Username</label>
</div> <input id="username" type="text" ng-model="site.username">
<a class="list-section-item" href="#"> </div>
Generate Password <div class="list-section-item">
<i class="fa fa-chevron-right pull-right"></i> <label for="password">Password</label>
</a> <input id="password" type="password" ng-model="site.password">
</div> </div>
</div> <a class="list-section-item" href="#">
<div class="list-section"> Generate Password
<div class="list-section-items"> <i class="fa fa-chevron-right pull-right"></i>
<div class="list-section-item"> </a>
<label for="folder">Folder</label>
<select id="folder">
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</div>
<div class="list-section-item list-section-item-checkbox">
<label for="favorite">Favorite</label>
<input id="favorite" type="checkbox" ng-model="site.favorite">
</div> </div>
</div> </div>
</div> <div class="list-section">
<div class="list-section"> <div class="list-section-items">
<div class="list-section-header"> <div class="list-section-item">
<label for="notes">Notes</label> <label for="folder">Folder</label>
<select id="folder">
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</div>
<div class="list-section-item list-section-item-checkbox">
<label for="favorite">Favorite</label>
<input id="favorite" type="checkbox" ng-model="site.favorite">
</div>
</div>
</div> </div>
<div class="list-section-items"> <div class="list-section">
<div class="list-section-item"> <div class="list-section-header">
<textarea id="notes" rows="5" ng-model="site.notes"></textarea> <label for="notes">Notes</label>
</div>
<div class="list-section-items">
<div class="list-section-item">
<textarea id="notes" rows="5" ng-model="site.notes"></textarea>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </form>

43
src/popup/less/components.less
View File

@@ -14,12 +14,14 @@
right: 0; right: 0;
overflow: hidden; overflow: hidden;
a { a, button {
color: white !important; color: white !important;
text-decoration: none; text-decoration: none;
background: none;
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
text-decoration: none;
} }
} }
@@ -100,21 +102,11 @@
} }
.list { .list {
.list-item { .list-grouped {
border-top: 1px solid @border-color; .list-grouped-header {
background-color: transparent;
&:first-child { padding: 10px 10px;
border: none; color: @gray-light;
}
}
.list-item-header {
background-color: transparent;
padding: 10px 10px;
color: @gray-light;
+ .list-item {
border: none;
} }
} }
@@ -139,14 +131,6 @@
.list-section-items { .list-section-items {
border-top: 1px solid @border-color-dark; border-top: 1px solid @border-color-dark;
border-bottom: 1px solid @border-color-dark; border-bottom: 1px solid @border-color-dark;
.list-section-item {
border-bottom: 1px solid @border-color;
&:last-child {
border: none;
}
}
} }
.list-section-footer { .list-section-footer {
@@ -156,7 +140,7 @@
} }
} }
.list-item, .list-section-item { .list-grouped-item, .list-section-item {
display: block; display: block;
padding: 10px 10px; padding: 10px 10px;
background-color: white; background-color: white;
@@ -165,12 +149,17 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: @text-color; color: @text-color;
border-bottom: 1px solid @border-color;
&:last-child {
border: none;
}
&:hover { &:hover {
background-color: @list-item-hover; background-color: @list-item-hover;
} }
&.list-item-condensed { &.condensed {
padding: 3px 10px; padding: 3px 10px;
} }
@@ -219,7 +208,7 @@
} }
&.list-no-selection { &.list-no-selection {
.list-item, .list-section-item { .list-grouped-item, .list-section-item {
&:hover { &:hover {
background-color: white; background-color: white;
} }