Merge branch 'issue-boards-tooltip-hide' into 'master'

Issue boards tooltip hide

- Hides & disables tooltips when dragging issues or lists
- Fixes bug where cursor wouldn't change when dragging.

See merge request !5889

app/assets/javascripts/boards/components/board.js.es6

@@ -55,7 +55,7 @@
         draggable: '.is-draggable',
         handle: '.js-board-handle',
         onEnd: (e) => {
-          document.body.classList.remove('is-dragging');
+          gl.issueBoards.onEnd();
 
           if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
             const order = this.sortable.toArray(),

app/assets/javascripts/boards/components/board_list.js.es6

@@ -63,6 +63,8 @@
 
           Store.moving.issue = card.issue;
           Store.moving.list = card.list;
+
+          gl.issueBoards.onStart();
         },
         onAdd: (e) => {
           gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);

app/assets/javascripts/boards/mixins/sortable_default_options.js.es6

@@ -25,12 +25,8 @@
       delay: gl.issueBoards.touchEnabled ? 100 : 0,
       scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
       scrollSpeed: 20,
-      onStart () {
-        document.body.classList.add('is-dragging');
-      },
-      onEnd () {
-        document.body.classList.remove('is-dragging');
-      }
+      onStart: gl.issueBoards.onStart,
+      onEnd: gl.issueBoards.onEnd
     }
 
     Object.keys(obj).forEach((key) => { defaultSortOptions[key] = obj[key]; });

app/assets/stylesheets/pages/boards.scss

@@ -8,9 +8,13 @@
 }
 
 .is-dragging {
+  // Important because plugin sets inline CSS
+  opacity: 1!important;
+  
   * {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
+    // !important to make sure no style can override this when dragging
+    cursor: -webkit-grabbing!important;
+    cursor: grabbing!important;
   }
 }
 
@@ -246,11 +250,6 @@
   opacity: 0.3;
 }
 
-.is-dragging {
-  // Important because plugin sets inline CSS
-  opacity: 1!important;
-}
-
 .card {
   position: relative;
   width: 100%;