From c393f86947d1f65f896cadaa39d53f13e0a1f4eb Mon Sep 17 00:00:00 2001
From: Fabio <fabio286@gmail.com>
Date: Mon, 26 Oct 2020 09:28:29 +0100
Subject: [PATCH] fix: issue with tabs horizontal scroll with wheel

---
 src/renderer/components/Workspace.vue         | 21 +++++++++++++++++--
 src/renderer/components/WorkspacePropsTab.vue |  4 +---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index 35218c01..f9173308 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -2,7 +2,11 @@
    <div v-show="isSelected" class="workspace column columns col-gapless">
       <WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
       <div v-if="workspace.connected" class="workspace-tabs column columns col-gapless">
-         <ul ref="tabWrap" class="tab tab-block column col-12">
+         <ul
+            id="tabWrap"
+            ref="tabWrap"
+            class="tab tab-block column col-12"
+         >
             <li class="tab-item">
                <a class="tab-link workspace-tools-link">
                   <i class="mdi mdi-24px mdi-tools" />
@@ -36,7 +40,7 @@
                class="tab-item"
                :class="{'active': selectedTab === tab.uid}"
                @click="selectTab({uid: workspace.uid, tab: tab.uid})"
-               @mousedown.middle="closeTab(tab.uid)"
+               @mouseup.middle="closeTab(tab.uid)"
             >
                <a class="tab-link">
                   <i class="mdi mdi-18px mdi-code-tags mr-1" />
@@ -101,6 +105,11 @@ export default {
    props: {
       connection: Object
    },
+   data () {
+      return {
+         hasWheelEvent: false
+      };
+   },
    computed: {
       ...mapGetters({
          selectedWorkspace: 'workspaces/getSelected',
@@ -144,6 +153,14 @@ export default {
       }),
       addTab () {
          this.newTab(this.connection.uid);
+
+         if (!this.hasWheelEvent) {
+            this.$refs.tabWrap.addEventListener('wheel', e => {
+               if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
+               else this.$refs.tabWrap.scrollLeft -= 50;
+            });
+            this.hasWheelEvent = true;
+         }
       },
       closeTab (tUid) {
          if (this.queryTabs.length === 1) return;
diff --git a/src/renderer/components/WorkspacePropsTab.vue b/src/renderer/components/WorkspacePropsTab.vue
index d6c124c2..aff977d7 100644
--- a/src/renderer/components/WorkspacePropsTab.vue
+++ b/src/renderer/components/WorkspacePropsTab.vue
@@ -3,9 +3,7 @@
       <div class="workspace-query-runner column col-12">
          <div class="workspace-query-runner-footer">
             <div class="workspace-query-buttons">
-               <button
-                  class="btn btn-primary btn-sm"
-               >
+               <button class="btn btn-primary btn-sm">
                   <span>{{ $t('word.save') }}</span>
                   <i class="mdi mdi-24px mdi-content-save ml-1" />
                </button>