Use bock-scroll-lock directive for the settings modal

1 files changed, 9 insertions, 2 deletions

diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 919eb7cd..19206610 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { mapState } from 'vuex'
 
 import './tab_switcher.scss'
 
@@ -44,7 +45,13 @@ export default Vue.component('tab-switcher', {
       } else {
         return this.active
       }
-    }
+    },
+    bodyLocked () {
+      return this.settingsModalState === 'visible'
+    },
+    ...mapState({
+      settingsModalState: state => state.interface.settingsModalState
+    })
   },
   beforeUpdate () {
     const currentSlot = this.$slots.default[this.active]
@@ -134,7 +141,7 @@ export default Vue.component('tab-switcher', {
         <div class="tabs">
           {tabs}
         </div>
-        <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock>
+        <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.bodyLocked}>
           {contents}
         </div>
       </div>