1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-26 17:08:33 +01:00

ux improvements for bulk actions

This commit is contained in:
Kyle Spearrin 2017-06-09 12:30:47 -04:00
parent d640bb5a04
commit cdaf3cb428
2 changed files with 34 additions and 8 deletions

View File

@ -312,8 +312,17 @@
return $scope.folderIdFilter === undefined || folder.id === $scope.folderIdFilter; return $scope.folderIdFilter === undefined || folder.id === $scope.folderIdFilter;
}; };
$scope.unselectAll = function () {
selectAll(false);
};
$scope.selectFolder = function (folder, $event) {
var checkbox = $($event.currentTarget).closest('.box').find('input[name="loginSelection"]');
checkbox.prop('checked', true);
};
$scope.select = function ($event) { $scope.select = function ($event) {
var checkbox = $($event.currentTarget).parent().find('input[name="loginSelection"]'); var checkbox = $($event.currentTarget).closest('tr').find('input[name="loginSelection"]');
checkbox.prop('checked', !checkbox.prop('checked')); checkbox.prop('checked', !checkbox.prop('checked'));
}; };
@ -327,8 +336,8 @@
}).get().filter(distinct); }).get().filter(distinct);
} }
function clearLoginSelections() { function selectAll(select) {
$('input[name="loginSelection"]').prop('checked', false); $('input[name="loginSelection"]').prop('checked', select);
} }
$scope.bulkMove = function () { $scope.bulkMove = function () {
@ -356,8 +365,9 @@
} }
} }
clearLoginSelections(); selectAll(false);
sortScopedLoginData(); sortScopedLoginData();
toastr.success('Items have been moved!');
}); });
}; };
@ -383,9 +393,11 @@
} }
} }
clearLoginSelections(); selectAll(false);
$scope.bulkActionLoading = false; $scope.bulkActionLoading = false;
toastr.success('Items have been deleted!');
}, function () { }, function () {
toastr.error('An error occurred.');
$scope.bulkActionLoading = false; $scope.bulkActionLoading = false;
}); });
}; };

View File

@ -16,6 +16,12 @@
<i class="fa fa-fw fa-trash"></i> Delete Selected <i class="fa fa-fw fa-trash"></i> Delete Selected
</a> </a>
</li> </li>
<li role="separator" class="divider"></li>
<li>
<a href="#" stop-click ng-click="unselectAll()">
<i class="fa fa-fw fa-minus-square-o"></i> Unselect All
</a>
</li>
</ul> </ul>
</div> </div>
<h1> <h1>
@ -144,6 +150,11 @@
<i class="fa fa-fw fa-pencil"></i> Edit Folder <i class="fa fa-fw fa-pencil"></i> Edit Folder
</a> </a>
</li> </li>
<li>
<a href="#" stop-click ng-click="selectFolder(folder, $event)">
<i class="fa fa-fw fa-check-square-o"></i> Select All
</a>
</li>
<li ng-show="canDeleteFolder(folder)"> <li ng-show="canDeleteFolder(folder)">
<a href="#" stop-click ng-click="deleteFolder(folder)" class="text-red"> <a href="#" stop-click ng-click="deleteFolder(folder)" class="text-red">
<i class="fa fa-fw fa-trash"></i> Delete Folder <i class="fa fa-fw fa-trash"></i> Delete Folder
@ -202,8 +213,8 @@
</ul> </ul>
</div> </div>
</td> </td>
<td class="action-select"> <td class="action-select" ng-click="select($event)">
<input type="checkbox" value="{{::login.id}}" name="loginSelection" /> <input type="checkbox" value="{{::login.id}}" name="loginSelection" stop-prop />
</td> </td>
<td ng-click="select($event)"> <td ng-click="select($event)">
<a href="#" stop-click ng-click="editLogin(login)" stop-prop>{{login.name}}</a> <a href="#" stop-click ng-click="editLogin(login)" stop-prop>{{login.name}}</a>
@ -231,7 +242,10 @@
<h3 class="control-sidebar-heading"> <h3 class="control-sidebar-heading">
<i class="fa fa-folder fa-fw"></i> Folders <i class="fa fa-folder fa-fw"></i> Folders
</h3> </h3>
<ul class="control-sidebar-menu"> <div ng-show="loading && !vaultFolders.length">
<p>Loading...</p>
</div>
<ul class="control-sidebar-menu" ng-show="!loading && vaultFolders.length">
<li ng-repeat="folder in vaultFolders track by folder.id"> <li ng-repeat="folder in vaultFolders track by folder.id">
<a href="#" stop-click ng-click="filterFolder(folder)"> <a href="#" stop-click ng-click="filterFolder(folder)">
<i class="fa fa-check" ng-if="folder.id === folderIdFilter"></i> <i class="fa fa-check" ng-if="folder.id === folderIdFilter"></i>