1 files changed, 35 insertions, 0 deletions
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
index 4a7cfeaeab2..2f6c03e3538 100644
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ b/app/assets/javascripts/boards/components/board_card.js.es6
@@ -1,3 +1,4 @@
+/* eslint-disable */
 (() => {
   const Store = gl.issueBoards.BoardsStore;
 
@@ -12,6 +13,17 @@
       disabled: Boolean,
       index: Number
     },
+    data () {
+      return {
+        showDetail: false,
+        detailIssue: Store.detail
+      };
+    },
+    computed: {
+      issueDetailVisible () {
+        return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
+      }
+    },
     methods: {
       filterByLabel (label, e) {
         let labelToggleText = label.title;
@@ -37,6 +49,29 @@
         $('.labels-filter .dropdown-toggle-text').text(labelToggleText);
 
         Store.updateFiltersUrl();
+      },
+      mouseDown () {
+        this.showDetail = true;
+      },
+      mouseMove () {
+        if (this.showDetail) {
+          this.showDetail = false;
+        }
+      },
+      showIssue (e) {
+        const targetTagName = e.target.tagName.toLowerCase();
+
+        if (targetTagName === 'a' || targetTagName === 'button') return;
+
+        if (this.showDetail) {
+          this.showDetail = false;
+
+          if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+            Store.detail.issue = {};
+          } else {
+            Store.detail.issue = this.issue;
+          }
+        }
       }
     }
   });