Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2025-03-02 03:41:09 +01:00
Code Issues Projects Releases Wiki Activity

append dropdown menus to body

Browse Source
This commit is contained in:
Kyle Spearrin 2017-04-14 22:49:51 -04:00
parent ff4e76b723
commit 8d6cbe8e1e
7 changed files with 112 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/app/global/mainController.js
View File

@ -51,4 +51,97 @@ angular
$scope.addFolder = function () { $scope.addFolder = function () {
$scope.$broadcast('vaultAddFolder'); $scope.$broadcast('vaultAddFolder');
}; };
// Append dropdown menus to body
var bodyScrollbarWidth;
var bodyDropdownMenu;
var dropdownHelpers = {
scrollParent: function (elem, includeHidden, includeSelf) {
var overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
var documentEl = $(document).documentElement;
var elemStyle = window.getComputedStyle(elem);
if (includeSelf && overflowRegex.test(elemStyle.overflow + elemStyle.overflowY + elemStyle.overflowX)) {
return elem;
}
var excludeStatic = elemStyle.position === 'absolute';
var scrollParent = elem.parentElement || documentEl;
if (scrollParent === documentEl || elemStyle.position === 'fixed') {
return documentEl;
}
while (scrollParent.parentElement && scrollParent !== documentEl) {
var spStyle = window.getComputedStyle(scrollParent);
if (excludeStatic && spStyle.position !== 'static') {
excludeStatic = false;
}
if (!excludeStatic && overflowRegex.test(spStyle.overflow + spStyle.overflowY + spStyle.overflowX)) {
break;
}
scrollParent = scrollParent.parentElement;
}
return scrollParent;
},
scrollbarWidth: function () {
if (!bodyScrollbarWidth) {
var bodyElem = $('body');
bodyElem.addClass('bit-position-body-scrollbar-measure');
bodyScrollbarWidth = window.innerWidth - bodyElem[0].clientWidth;
bodyScrollbarWidth = isFinite(bodyScrollbarWidth) ? bodyScrollbarWidth : 0;
bodyElem.removeClass('bit-position-body-scrollbar-measure');
}
return bodyScrollbarWidth;
},
scrollbarPadding: function (elem) {
elem = elem[0];
var scrollParent = dropdownHelpers.scrollParent(elem, false, true);
var scrollbarWidth = dropdownHelpers.scrollbarWidth();
return {
scrollbarWidth: scrollbarWidth,
widthOverflow: scrollParent.scrollWidth > scrollParent.clientWidth,
heightOverflow: scrollParent.scrollHeight > scrollParent.clientHeight
};
}
};
$('.dropdown-menu-body').on('show.bs.dropdown', function (e) {
bodyScrollbarWidth = $(e.target).find('.dropdown-menu');
var body = $('body');
body.append(bodyScrollbarWidth.detach());
var eOffset = $(e.target).offset();
var css = {
display: 'block',
top: eOffset.top + $(e.target).outerHeight()
};
if (bodyScrollbarWidth.hasClass('dropdown-menu-right')) {
var scrollbarPadding = dropdownHelpers.scrollbarPadding(body);
var scrollbarWidth = 0;
if (scrollbarPadding.heightOverflow && scrollbarPadding.scrollbarWidth) {
scrollbarWidth = scrollbarPadding.scrollbarWidth;
}
css.right = window.innerWidth - scrollbarWidth -
(eOffset.left + $(e.target).prop('offsetWidth')) + 'px';
css.left = 'auto';
}
else {
css.left = eOffset.left + 'px';
css.right = 'auto';
}
bodyScrollbarWidth.css(css);
});
$('.dropdown-menu-body').on('hide.bs.dropdown', function (e) {
$(e.target).append(bodyScrollbarWidth.detach());
bodyScrollbarWidth.hide();
});
}); });

6
src/app/organization/views/organizationPeople.html
View File

@ -34,11 +34,11 @@
<tr ng-repeat="user in filteredUsers = (users | filter: (filterSearch || '') | <tr ng-repeat="user in filteredUsers = (users | filter: (filterSearch || '') |
orderBy: ['type', 'name', 'email'])"> orderBy: ['type', 'name', 'email'])">
<td style="width: 70px;"> <td style="width: 70px;">
<div class="btn-group" uib-dropdown dropdown-append-to-body> <div class="btn-group">
<button type="button" class="btn btn-default" uib-dropdown-toggle> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span> <i class="fa fa-cog"></i> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" uib-dropdown-menu> <ul class="dropdown-menu dropdown-menu-body">
<li> <li>
<a href="javascript:void(0)" ng-click="edit(user.id)"> <a href="javascript:void(0)" ng-click="edit(user.id)">
<i class="fa fa-fw fa-pencil"></i> Edit <i class="fa fa-fw fa-pencil"></i> Edit

6
src/app/organization/views/organizationSubvaults.html
View File

@ -38,11 +38,11 @@
<tr ng-repeat="subvault in filteredSubvaults = (subvaults | filter: (filterSearch || '') | <tr ng-repeat="subvault in filteredSubvaults = (subvaults | filter: (filterSearch || '') |
orderBy: ['name'])"> orderBy: ['name'])">
<td style="width: 70px;"> <td style="width: 70px;">
<div class="btn-group" uib-dropdown dropdown-append-to-body> <div class="btn-group">
<button type="button" class="btn btn-default" uib-dropdown-toggle> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span> <i class="fa fa-cog"></i> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" uib-dropdown-menu> <ul class="dropdown-menu dropdown-menu-body">
<li> <li>
<a href="javascript:void(0)" ng-click="users(subvault)"> <a href="javascript:void(0)" ng-click="users(subvault)">
<i class="fa fa-fw fa-users"></i> Users <i class="fa fa-fw fa-users"></i> Users

6
src/app/organization/views/organizationSubvaultsUsers.html
View File

@ -14,11 +14,11 @@
<tbody> <tbody>
<tr ng-repeat="user in users | orderBy: ['email']"> <tr ng-repeat="user in users | orderBy: ['email']">
<td style="width: 70px;"> <td style="width: 70px;">
<div class="btn-group" uib-dropdown dropdown-append-to="modalWindow"> <div class="btn-group">
<button type="button" class="btn btn-default" uib-dropdown-toggle> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span> <i class="fa fa-cog"></i> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" uib-dropdown-menu> <ul class="dropdown-menu dropdown-menu-body">
<li> <li>
<a href="javascript:void(0)" ng-click="remove(user)" class="text-red"> <a href="javascript:void(0)" ng-click="remove(user)" class="text-red">
<i class="fa fa-fw fa-remove"></i> Remove <i class="fa fa-fw fa-remove"></i> Remove

6
src/app/settings/views/settings.html
View File

@ -115,11 +115,11 @@
</div> </div>
<div class="list-group" ng-if="model.organizations && model.organizations.length"> <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="list-group-item" ng-repeat="org in model.organizations | orderBy: ['name']">
<div class="btn-group" uib-dropdown dropdown-append-to-body> <div class="btn-group">
<button type="button" class="btn btn-default" uib-dropdown-toggle> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span> <i class="fa fa-cog"></i> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" uib-dropdown-menu> <ul class="dropdown-menu dropdown-menu-body">
<li> <li>
<a href="javascript:void(0)" ng-click="leaveOrganization(org)" class="text-red"> <a href="javascript:void(0)" ng-click="leaveOrganization(org)" class="text-red">
<i class="fa fa-fw fa-remove"></i> Leave <i class="fa fa-fw fa-remove"></i> Leave

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

@ -20,7 +20,7 @@
<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span> <i class="fa fa-cog"></i> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-right"> <ul class="dropdown-menu dropdown-menu-right dropdown-menu-body">
<li> <li>
<a href="#" ng-click="addLogin(null, true)"> <a href="#" ng-click="addLogin(null, true)">
<i class="fa fa-fw fa-plus-circle"></i> Add Login <i class="fa fa-fw fa-plus-circle"></i> Add Login
@ -49,7 +49,7 @@
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span> <i class="fa fa-cog"></i> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu dropdown-menu-body">
<li> <li>
<a href="javascript:void(0)" ng-click="editLogin(login)"> <a href="javascript:void(0)" ng-click="editLogin(login)">
<i class="fa fa-fw fa-pencil"></i> Edit <i class="fa fa-fw fa-pencil"></i> Edit
@ -96,7 +96,7 @@
<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span> <i class="fa fa-cog"></i> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-right"> <ul class="dropdown-menu dropdown-menu-right dropdown-menu-body">
<li> <li>
<a href="#" ng-click="addLogin(folder)"> <a href="#" ng-click="addLogin(folder)">
<i class="fa fa-fw fa-plus-circle"></i> Add Login <i class="fa fa-fw fa-plus-circle"></i> Add Login
@ -135,7 +135,7 @@
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span> <i class="fa fa-cog"></i> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu dropdown-menu-body">
<li> <li>
<a href="javascript:void(0)" ng-click="editLogin(login)"> <a href="javascript:void(0)" ng-click="editLogin(login)">
<i class="fa fa-fw fa-pencil"></i> Edit <i class="fa fa-fw fa-pencil"></i> Edit

6
src/app/vault/views/vaultSubvaults.html
View File

@ -49,11 +49,11 @@
<tr ng-repeat="login in subvaultLogins = (logins | filter: filterBySubvault(subvault) | <tr ng-repeat="login in subvaultLogins = (logins | filter: filterBySubvault(subvault) |
filter: (main.searchVaultText || '') | orderBy: ['name', 'username'])"> filter: (main.searchVaultText || '') | orderBy: ['name', 'username'])">
<td style="width: 70px;"> <td style="width: 70px;">
<div class="btn-group" uib-dropdown dropdown-append-to-body> <div class="btn-group">
<button type="button" class="btn btn-default" uib-dropdown-toggle> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-cog"></i> <span class="caret"></span> <i class="fa fa-cog"></i> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu" uib-dropdown-menu> <ul class="dropdown-menu dropdown-menu-body">
<li> <li>
<a href="javascript:void(0)" ng-click="editLogin(login)"> <a href="javascript:void(0)" ng-click="editLogin(login)">
<i class="fa fa-fw fa-pencil"></i> Edit <i class="fa fa-fw fa-pencil"></i> Edit