diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less index e6fc7105c..28daed328 100644 --- a/customize.dist/src/less/dropdown.less +++ b/customize.dist/src/less/dropdown.less @@ -21,6 +21,10 @@ margin-right: 0px; margin-left: 5px; } + * { + .unselectable(); + cursor: default; + } } .dropdown-bar-content { diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index 076792dee..55d5d3713 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -912,7 +912,7 @@ body .cryptpad-toolbar { background: @dropdown-bg; display: flex; flex-flow: column; - z-index:1000; + z-index:10000; color: black; .fa { font-size: 17px; @@ -920,7 +920,7 @@ body .cryptpad-toolbar { &> span { box-sizing: border-box; min-width: 150px; - height: 26px; + height: 32px; border-radius: 0; border: 0; } diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js index 5983aa1c1..1f330573e 100644 --- a/www/common/toolbar2.js +++ b/www/common/toolbar2.js @@ -81,15 +81,31 @@ define([ var $rightside = $toolbar.find('.'+RIGHTSIDE_CLS); if (!config.hideDrawer) { - var $drawerContent = $('
', {'class': DRAWER_CLS}).appendTo($rightside).hide(); + var $drawerContent = $('
', { + 'class': DRAWER_CLS,// + ' dropdown-bar-content cryptpad-dropdown' + 'tabindex': 1 + }).appendTo($rightside).hide(); var $drawer = Cryptpad.createButton('more', true).appendTo($rightside); $drawer.click(function () { $drawerContent.toggle(); $drawer.removeClass('active'); if ($drawerContent.is(':visible')) { $drawer.addClass('active'); + $drawerContent.focus(); } }); + var onBlur = function (e) { + if (e.relatedTarget) { + if ($(e.relatedTarget).is('.drawer-button')) { return; } + if ($(e.relatedTarget).parents('.'+DRAWER_CLS).length) { + $(e.relatedTarget).blur(onBlur); + return; + } + } + $drawer.removeClass('active'); + $drawerContent.hide(); + }; + $drawerContent.blur(onBlur); } // The 'notitle' class removes the line added for the title with a small screen