Fixed issue with dragging opening the issue sidebar

Added indicator when issue detail is visible

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

@@ -12,6 +12,21 @@
       disabled: Boolean,
       index: Number
     },
+    data () {
+      return {
+        showDetail: false,
+        detailIssue: Store.detail
+      };
+    },
+    computed: {
+      issueDetailVisible () {
+        if (this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id) {
+          return true;
+        } else {
+          return false;
+        }
+      }
+    },
     methods: {
       filterByLabel (label, e) {
         let labelToggleText = label.title;
@@ -38,8 +53,19 @@
 
         Store.updateFiltersUrl();
       },
+      mouseDown () {
+        this.showDetail = true;
+      },
+      mouseMove () {
+        if (this.showDetail) {
+          this.showDetail = false;
+        }
+      },
       showIssue () {
-        Store.detail.issue = this.issue;
+        if (this.showDetail) {
+          this.showDetail = false;
+          Vue.set(Store.detail, 'issue', this.issue);
+        }
       }
     }
   });

app/assets/stylesheets/pages/boards.scss

@@ -194,6 +194,10 @@ lex
     margin-bottom: 5px;
   }
 
+  &.is-active {
+    background-color: $row-hover;
+  }
+
   .label {
     border: 0;
     outline: 0;

app/views/projects/boards/components/_card.html.haml

@@ -7,9 +7,11 @@
   ":issue-link-base" => "issueLinkBase",
   ":disabled" => "disabled",
   "track-by" => "id" }
-  %li.card{ ":class" => "{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id }",
+  %li.card{ ":class" => "{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }",
     ":index" => "index",
-    "@click" => "showIssue" }
+    "@mousedown" => "mouseDown",
+    "@mouseMove" => "mouseMove",
+    "@mouseup" => "showIssue" }
     %h4.card-title
       = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
       %a{ ":href" => "issueLinkBase + '/' + issue.id",