1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-18 02:41:15 +02:00

make dropdown append more generic

This commit is contained in:
Kyle Spearrin 2017-04-18 10:19:42 -04:00
parent f904558315
commit 3728f012d7
10 changed files with 39 additions and 36 deletions

View File

@ -52,10 +52,11 @@ angular
$scope.$broadcast('vaultAddFolder');
};
// Append dropdown menus to body
// Append dropdown menu somewhere else
var bodyScrollbarWidth,
bodyDropdownMenu,
bodyDropdownMenuParent;
appendedDropdownMenu,
appendedDropdownMenuParent;
var dropdownHelpers = {
scrollbarWidth: function () {
if (!bodyScrollbarWidth) {
@ -77,58 +78,60 @@ angular
};
$(window).on('show.bs.dropdown', function (e) {
var target = bodyDropdownMenuParent = $(e.target);
if (!target.hasClass('dropdown-to-body')) {
var target = appendedDropdownMenuParent = $(e.target);
var appendTo = target.data('appendTo');
if (!appendTo) {
return true;
}
bodyDropdownMenu = target.find('.dropdown-menu');
var body = $('body');
body.append(bodyDropdownMenu.detach());
appendedDropdownMenu = target.find('.dropdown-menu');
var appendToEl = $(appendTo);
appendToEl.append(appendedDropdownMenu.detach());
var eOffset = target.offset();
var offset = target.offset();
var css = {
display: 'block',
top: eOffset.top + target.outerHeight()
top: offset.top + target.outerHeight()
};
if (bodyDropdownMenu.hasClass('dropdown-menu-right')) {
if (appendedDropdownMenu.hasClass('dropdown-menu-right')) {
var scrollbarInfo = dropdownHelpers.scrollbarInfo();
var scrollbarWidth = 0;
if (scrollbarInfo.visible && scrollbarInfo.width) {
scrollbarWidth = scrollbarInfo.width;
}
css.right = $window.innerWidth - scrollbarWidth - (eOffset.left + target.prop('offsetWidth')) + 'px';
css.right = $window.innerWidth - scrollbarWidth - (offset.left + target.prop('offsetWidth')) + 'px';
css.left = 'auto';
}
else {
css.left = eOffset.left + 'px';
css.left = offset.left + 'px';
css.right = 'auto';
}
bodyDropdownMenu.css(css);
appendedDropdownMenu.css(css);
});
$(window).on('hide.bs.dropdown', function (e) {
if (!bodyDropdownMenu) {
if (!appendedDropdownMenu) {
return true;
}
$(e.target).append(bodyDropdownMenu.detach());
bodyDropdownMenu.hide();
bodyDropdownMenu = null;
bodyDropdownMenuParent = null;
$(e.target).append(appendedDropdownMenu.detach());
appendedDropdownMenu.hide();
appendedDropdownMenu = null;
appendedDropdownMenuParent = null;
});
$scope.$on('removeBodyDropdownMenu', function (event, args) {
if (!bodyDropdownMenu && !bodyDropdownMenuParent) {
$scope.$on('removeAppendedDropdownMenu', function (event, args) {
if (!appendedDropdownMenu && !appendedDropdownMenuParent) {
return true;
}
bodyDropdownMenuParent.append(bodyDropdownMenu.detach());
bodyDropdownMenu.hide();
bodyDropdownMenu = null;
bodyDropdownMenuParent = null;
appendedDropdownMenuParent.append(appendedDropdownMenu.detach());
appendedDropdownMenu.hide();
appendedDropdownMenu = null;
appendedDropdownMenuParent = null;
});
});

View File

@ -34,7 +34,7 @@
<tr ng-repeat="user in filteredUsers = (users | filter: (filterSearch || '') |
orderBy: ['type', 'name', 'email'])">
<td style="width: 70px;">
<div class="btn-group dropdown-to-body">
<div class="btn-group" data-append-to="body">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>

View File

@ -38,7 +38,7 @@
<tr ng-repeat="subvault in filteredSubvaults = (subvaults | filter: (filterSearch || '') |
orderBy: ['name'])">
<td style="width: 70px;">
<div class="btn-group dropdown-to-body">
<div class="btn-group" data-append-to="body">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>

View File

@ -14,7 +14,7 @@
<tbody>
<tr ng-repeat="user in users | orderBy: ['email']">
<td style="width: 70px;">
<div class="btn-group dropdown-to-body">
<div class="btn-group" data-append-to=".modal">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>

View File

@ -34,7 +34,7 @@
<tr ng-repeat="login in subvaultLogins = (logins | filter: filterBySubvault(subvault) |
orderBy: ['name', 'username'])">
<td style="width: 70px;">
<div class="btn-group dropdown-to-body">
<div class="btn-group" data-append-to="body">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>

View File

@ -35,7 +35,7 @@
$scope.delete = function (i) {
$scope.equivalentDomains.splice(i, 1);
$scope.$emit('removeBodyDropdownMenu');
$scope.$emit('removeAppendedDropdownMenu');
};
$scope.addEdit = function (i) {

View File

@ -115,7 +115,7 @@
</div>
<div class="list-group" ng-if="model.organizations && model.organizations.length">
<div class="list-group-item" ng-repeat="org in model.organizations | orderBy: ['name']">
<div class="btn-group dropdown-to-body">
<div class="btn-group" data-append-to="body">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>

View File

@ -22,7 +22,7 @@
<tbody ng-if="equivalentDomains.length">
<tr ng-repeat="customDomain in equivalentDomains track by $index">
<td style="width: 70px;">
<div class="btn-group dropdown-to-body">
<div class="btn-group" data-append-to="body">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>
@ -70,7 +70,7 @@
<tbody ng-if="globalEquivalentDomains.length">
<tr ng-repeat="globalDomain in globalEquivalentDomains">
<td style="width: 70px;">
<div class="btn-group dropdown-to-body">
<div class="btn-group" data-append-to="body">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>

View File

@ -45,7 +45,7 @@
<tr ng-repeat="login in favoriteLogins = (logins | filter: { favorite: true } |
filter: (main.searchVaultText || '')) track by login.id">
<td style="width: 70px;">
<div class="btn-group dropdown-to-body">
<div class="btn-group" data-append-to="body">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>
@ -131,7 +131,7 @@
<tr ng-repeat="login in folderLogins = (logins | filter: { folderId: folder.id } |
filter: (main.searchVaultText || '')) track by login.id">
<td style="width: 70px;">
<div class="btn-group dropdown-to-body">
<div class="btn-group" data-append-to="body">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>

View File

@ -49,7 +49,7 @@
<tr ng-repeat="login in subvaultLogins = (logins | filter: filterBySubvault(subvault) |
filter: (main.searchVaultText || '') | orderBy: ['name', 'username'])">
<td style="width: 70px;">
<div class="btn-group dropdown-to-body">
<div class="btn-group" data-append-to="body">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>