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

Issue boards tooltip hide

## What does this MR do?

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

See merge request !5889

4 files changed, 22 insertions, 14 deletions

diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
index e17784e7948..5ef6a1b2277 100644
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ b/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(),
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
index 1503d14c508..dceacb25452 100644
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ b/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);
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
index b7afe4897b6..8e8d13ede5a 100644
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
@@ -2,6 +2,17 @@
   window.gl = window.gl || {};
   window.gl.issueBoards = window.gl.issueBoards || {};
 
+  gl.issueBoards.onStart = () => {
+    $('.has-tooltip').tooltip('hide')
+      .tooltip('disable');
+    document.body.classList.add('is-dragging');
+  };
+
+  gl.issueBoards.onEnd = () => {
+    $('.has-tooltip').tooltip('enable');
+    document.body.classList.remove('is-dragging');
+  };
+
   gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
     let defaultSortOptions = {
       forceFallback: true,
@@ -11,12 +22,8 @@
       filter: '.has-tooltip',
       scrollSensitivity: 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]; });
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index ad4b2d6496f..2d1cb547f95 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/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;
   }
 }
 
@@ -254,11 +258,6 @@
   opacity: 0.3;
 }
 
-.is-dragging {
-  // Important because plugin sets inline CSS
-  opacity: 1!important;
-}
-
 .card {
   position: relative;
   width: 100%;