[layout] Resolve resize handler blocking issue

* #422

dist/styles/bootstrap-darkster.css

@@ -9978,6 +9978,10 @@ a:focus, a:hover {
   user-select: none;
 }
 
+.no-pointer-events {
+  pointer-events: none;
+}
+
 .side-panel {
   background-color: #fff;
   padding: 0.3em;

dist/styles/bootstrap-default.css

@@ -9931,6 +9931,10 @@ a:focus, a:hover {
   user-select: none;
 }
 
+.no-pointer-events {
+  pointer-events: none;
+}
+
 .side-panel {
   background-color: #fff;
   padding: 0.3em;

dist/styles/bootstrap-greyson.css

@@ -9687,6 +9687,10 @@ a:focus, a:hover {
   user-select: none;
 }
 
+.no-pointer-events {
+  pointer-events: none;
+}
+
 .side-panel {
   background-color: #fff;
   padding: 0.3em;

dist/styles/bootstrap-herbie.css

@@ -9935,6 +9935,10 @@ a:focus, a:hover {
   user-select: none;
 }
 
+.no-pointer-events {
+  pointer-events: none;
+}
+
 .side-panel {
   background-color: #fff;
   padding: 0.3em;

dist/styles/bootstrap-monotony.css

@@ -9936,6 +9936,10 @@ a:focus, a:hover {
   user-select: none;
 }
 
+.no-pointer-events {
+  pointer-events: none;
+}
+
 .side-panel {
   background-color: #fff;
   padding: 0.3em;

src/Gargantext/Hooks/Resize.js

@@ -3,7 +3,7 @@
 exports._add = add;
 exports._remove = remove;
 /**
- * @name add
+ * @function add
  * @param {Window} window
  * @param {Document} document
  * @param {String} sourceQuery
@@ -22,13 +22,18 @@ function add(window, document, sourceQuery, targetQuery, type) {
   }
 
   function startResizing(e) {
+    var height = e.clientY - target.offsetTop
+    var width = e.clientX - target.offsetLeft
+
     if (type === 'both' || type === 'horizontal')
-      target.style.height = (e.clientY - target.offsetTop) + 'px';
+      target.style.height = height + 'px';
     if (type === 'both' || type === 'vertical')
-      target.style.width = (e.clientX - target.offsetLeft) + 'px';
+      target.style.width = width + 'px';
 
     // prevent "user-select" highlights
     document.body.classList.add('no-user-select');
+    // prevent event focus losing (eg. while hovering iframe, see #422)
+    document.body.classList.add('no-pointer-events');
   }
 
   function stopResizing(e) {
@@ -36,10 +41,11 @@ function add(window, document, sourceQuery, targetQuery, type) {
     window.removeEventListener('mouseup', stopResizing, false);
 
     document.body.classList.remove('no-user-select');
+    document.body.classList.remove('no-pointer-events');
   }
 }
 /**
- * @name remove
+ * @function remove
  * @param {Document} document
  * @param {String} sourceQuery
  */

src/sass/_legacy/_styles.sass

@@ -2,6 +2,9 @@
 .no-user-select
   user-select: none
 
+.no-pointer-events
+  pointer-events: none
+
 .side-panel
   background-color: #fff
   padding: 0.3em