vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

body dropdown tweaks

This commit is contained in:
Kyle Spearrin 2017-04-14 23:30:58 -04:00
parent 8d6cbe8e1e
commit c4a3e5c4fd
7 changed files with 48 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
angular
.module('bit.global')
.controller('mainController', function ($scope, $state, authService, appSettings, toastr) {
.controller('mainController', function ($scope, $state, authService, appSettings, toastr, $window, $document) {
var vm = this;
vm.bodyClass = '';
vm.searchVaultText = null;
@ -53,83 +53,52 @@ angular
};
// Append dropdown menus to body
var bodyScrollbarWidth;
var bodyDropdownMenu;
var bodyScrollbarWidth,
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 = $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();
scrollbarInfo: function () {
return {
scrollbarWidth: scrollbarWidth,
widthOverflow: scrollParent.scrollWidth > scrollParent.clientWidth,
heightOverflow: scrollParent.scrollHeight > scrollParent.clientHeight
width: dropdownHelpers.scrollbarWidth(),
visible: $document.height() > $($window).height()
};
}
};
$('.dropdown-menu-body').on('show.bs.dropdown', function (e) {
bodyScrollbarWidth = $(e.target).find('.dropdown-menu');
var body = $('body');
body.append(bodyScrollbarWidth.detach());
$(window).on('show.bs.dropdown', function (e) {
var target = $(e.target);
if (!target.hasClass('dropdown-to-body')) {
return true;
}
var eOffset = $(e.target).offset();
bodyDropdownMenu = target.find('.dropdown-menu');
var body = $('body');
body.append(bodyDropdownMenu.detach());
var eOffset = target.offset();
var css = {
display: 'block',
top: eOffset.top + $(e.target).outerHeight()
top: eOffset.top + target.outerHeight()
};
if (bodyScrollbarWidth.hasClass('dropdown-menu-right')) {
var scrollbarPadding = dropdownHelpers.scrollbarPadding(body);
if (bodyDropdownMenu.hasClass('dropdown-menu-right')) {
var scrollbarInfo = dropdownHelpers.scrollbarInfo();
var scrollbarWidth = 0;
if (scrollbarPadding.heightOverflow && scrollbarPadding.scrollbarWidth) {
scrollbarWidth = scrollbarPadding.scrollbarWidth;
if (scrollbarInfo.visible && scrollbarInfo.width) {
scrollbarWidth = scrollbarInfo.width;
}
css.right = window.innerWidth - scrollbarWidth -
(eOffset.left + $(e.target).prop('offsetWidth')) + 'px';
css.right = $window.innerWidth - scrollbarWidth - (eOffset.left + target.prop('offsetWidth')) + 'px';
css.left = 'auto';
}
else {
@ -137,11 +106,16 @@ angular
css.right = 'auto';
}
bodyScrollbarWidth.css(css);
bodyDropdownMenu.css(css);
});
$('.dropdown-menu-body').on('hide.bs.dropdown', function (e) {
$(e.target).append(bodyScrollbarWidth.detach());
bodyScrollbarWidth.hide();
$(window).on('hide.bs.dropdown', function (e) {
var target = $(e.target);
if (!target.hasClass('dropdown-to-body')) {
return true;
}
target.append(bodyDropdownMenu.detach());
bodyDropdownMenu.hide();
});
});

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

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

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

@ -38,11 +38,11 @@
<tr ng-repeat="subvault in filteredSubvaults = (subvaults | filter: (filterSearch || '') |
orderBy: ['name'])">
<td style="width: 70px;">
<div class="btn-group">
<div class="btn-group dropdown-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>
<ul class="dropdown-menu dropdown-menu-body">
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" ng-click="users(subvault)">
<i class="fa fa-fw fa-users"></i> Users

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

@ -14,11 +14,11 @@
<tbody>
<tr ng-repeat="user in users | orderBy: ['email']">
<td style="width: 70px;">
<div class="btn-group">
<div class="btn-group dropdown-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>
<ul class="dropdown-menu dropdown-menu-body">
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" ng-click="remove(user)" class="text-red">
<i class="fa fa-fw fa-remove"></i> Remove

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

@ -115,11 +115,11 @@
</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">
<div class="btn-group dropdown-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>
<ul class="dropdown-menu dropdown-menu-body">
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" ng-click="leaveOrganization(org)" class="text-red">
<i class="fa fa-fw fa-remove"></i> Leave

12
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">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-body">
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a href="#" ng-click="addLogin(null, true)">
<i class="fa fa-fw fa-plus-circle"></i> Add Login
@ -45,11 +45,11 @@
<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">
<div class="btn-group dropdown-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>
<ul class="dropdown-menu dropdown-menu-body">
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" ng-click="editLogin(login)">
<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">
<i class="fa fa-cog"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right dropdown-menu-body">
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a href="#" ng-click="addLogin(folder)">
<i class="fa fa-fw fa-plus-circle"></i> Add Login
@ -131,11 +131,11 @@
<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">
<div class="btn-group dropdown-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>
<ul class="dropdown-menu dropdown-menu-body">
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0)" ng-click="editLogin(login)">
<i class="fa fa-fw fa-pencil"></i> Edit

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

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