From 335898a4c70c49d48e9e5cfd3abbd210cb5b0e46 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 30 Jun 2017 18:23:23 +0200
Subject: [PATCH] Hack the drawer to close it when clicking outside

---
 customize.dist/src/less/dropdown.less |  4 ++++
 customize.dist/src/less/toolbar.less  |  4 ++--
 www/common/toolbar2.js                | 18 +++++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

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 = $('<div>', {'class': DRAWER_CLS}).appendTo($rightside).hide();
+            var $drawerContent = $('<div>', {
+                '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