mirror of
https://github.com/bitwarden/browser.git
synced 2025-01-26 22:01:32 +01:00
make dropdown append more generic
This commit is contained in:
parent
f904558315
commit
3728f012d7
@ -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;
|
||||
});
|
||||
});
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -35,7 +35,7 @@
|
||||
|
||||
$scope.delete = function (i) {
|
||||
$scope.equivalentDomains.splice(i, 1);
|
||||
$scope.$emit('removeBodyDropdownMenu');
|
||||
$scope.$emit('removeAppendedDropdownMenu');
|
||||
};
|
||||
|
||||
$scope.addEdit = function (i) {
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user