Merge pull request #1757 from cosmos/jordan/1572-scroll-bug

Jordan/1572 scroll bug
luniehq · Dec 19, 2018 · 726bf8b · 726bf8b
2 parents f2e5edf + 0e1638e
commit 726bf8b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -134,6 +134,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [\#1667](https://github.com/cosmos/voyager/issues/1667) Fixed menu in PageSend + hover cursor for menu @sabau
 - [\#1676](https://github.com/cosmos/voyager/issues/1676) Reduced minWidth css for ModalVote to have 2 buttons per line @sabau
 - [\#1676](https://github.com/cosmos/voyager/issues/1670) Update balance in header after voting and depositing @faboweb
+- [\#1572](https://github.com/cosmos/voyager/issues/1572) Fixed scroll bug when switching between tabs @jbibla
 
 ## [0.10.7] - 2018-10-10
 

diff --git a/app/src/renderer/components/governance/PageGovernance.vue b/app/src/renderer/components/governance/PageGovernance.vue
@@ -31,6 +31,7 @@
 import { mapGetters } from "vuex"
 import DataEmptySearch from "common/TmDataEmptySearch"
 import ModalSearch from "common/TmModalSearch"
+import PerfectScrollbar from "perfect-scrollbar"
 import ModalPropose from "./ModalPropose"
 import ToolBar from "common/ToolBar"
 import TmBalance from "common/TmBalance"
@@ -66,6 +67,12 @@ export default {
     // TODO: get min deposit denom from gov params
     ...mapGetters([`proposals`, `filters`, `bondingDenom`, `connected`])
   },
+  mounted() {
+    this.ps = new PerfectScrollbar(this.$el.querySelector(`.tm-page-main`))
+  },
+  updated() {
+    this.$el.querySelector(`.tm-page-main`).scrollTop = 0
+  },
   methods: {
     onPropose() {
       this.showModalPropose = true

diff --git a/app/src/renderer/components/staking/PageStaking.vue b/app/src/renderer/components/staking/PageStaking.vue
@@ -23,6 +23,7 @@ import { mapGetters, mapActions } from "vuex"
 import Mousetrap from "mousetrap"
 import { TmPage } from "@tendermint/ui"
 import ModalSearch from "common/TmModalSearch"
+import PerfectScrollbar from "perfect-scrollbar"
 import ToolBar from "common/ToolBar"
 import TmBalance from "common/TmBalance"
 export default {
@@ -53,13 +54,18 @@ export default {
   computed: {
     ...mapGetters([`connected`, `delegates`, `filters`])
   },
-  async mounted() {
+  mounted() {
+    this.ps = new PerfectScrollbar(this.$el.querySelector(`.tm-page-main`))
+
     Mousetrap.bind([`command+f`, `ctrl+f`], () => this.setSearch(true))
     Mousetrap.bind(`esc`, () => this.setSearch(false))
 
     // XXX temporary because querying the shares shows old shares after bonding
     // this.updateDelegates()
   },
+  updated() {
+    this.$el.querySelector(`.tm-page-main`).scrollTop = 0
+  },
   methods: {
     setSearch(bool = !this.filters[`delegates`].search.visible) {
       this.$store.commit(`setSearchVisible`, [`delegates`, bool])

diff --git a/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap b/test/unit/specs/components/governance/__snapshots__/PageGovernance.spec.js.snap
@@ -61,7 +61,7 @@ exports[`PageGovernance disables proposal creation if not connected 1`] = `
 </menu>
 </div>
 </header>
-<main class=\\"tm-page-main\\">
+<main class=\\"tm-page-main ps\\">
    <!---->
    <!---->
    <div class=\\"tm-page\\" data-title=\\"Wallet\\">
@@ -134,6 +134,12 @@ exports[`PageGovernance disables proposal creation if not connected 1`] = `
 </div>
 </main>
 </div>
+<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+</div>
 </main>
 </div>"
 `;
@@ -278,6 +284,12 @@ exports[`PageGovernance has the expected html structure 1`] = `
 <div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
    <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
+<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+</div>
 </main>
 </div>"
 `;
diff --git a/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageStaking.spec.js.snap
@@ -138,6 +138,12 @@ exports[`PageStaking has the expected html structure 1`] = `
 <div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
    <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
+<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+</div>
 </main>
 </div>"
 `;