Merge pull request #254 from cosmos/peng/118-scrollbar-improvements

Peng/118 scrollbar improvements

app/src/renderer/App.vue

@@ -1,17 +1,14 @@
 <template lang="pug">
 #app
   app-header
-  #app-content
-    #app-main: router-view
-    app-footer
+  #app-content: router-view
   notifications(:notifications='notifications' theme='cosmos')
   modal-help
   session
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import AppFooter from './components/common/AppFooter'
 import AppHeader from './components/common/AppHeader'
 import Notifications from '@nylira/vue-notifications'
 import ModalHelp from './components/common/NiModalHelp'
@@ -21,7 +18,6 @@ export default {
   name: 'app',
   components: {
     AppHeader,
-    AppFooter,
     ModalHelp,
     Notifications,
     Session

app/src/renderer/components/common/AppFooter.vue

@@ -26,12 +26,6 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.app-footer
-  position fixed
-  bottom 0
-  right 0
-  width 100vw
-
 .app-footer-container
   border-top px solid bc
   height 3rem + px
@@ -41,7 +35,6 @@ export default {
   background app-bg
 
   color dim
-  margin-left width-side
 
   .afi
     display flex

app/src/renderer/components/common/AppHeader.vue

@@ -102,40 +102,4 @@ export default {
 
         img
           height 1rem
-
-@media screen and (min-width: 1024px)
-  #app
-    padding-top 0
-
-  #app-header
-    width width-side
-    border-right px solid bc
-    position initial
-    height 100vh
-    display flex
-    position fixed
-    top 0
-    left 0
-
-    > .container
-      flex 1
-      display flex
-      flex-flow column nowrap
-
-    .header-item-logo
-      border-bottom px solid bc
-      padding 2rem 1rem .75rem
-      line-height: normal
-      img
-        height 1.25rem
-
-  #app-content
-    min-height 100vh
-    margin-left width-side
-
-    display flex
-    flex-flow column nowrap
-
-  #app-main
-    flex 1
 </style>

app/src/renderer/components/common/AppMenu.vue

@@ -17,6 +17,7 @@ menu.app-menu
 </template>
 
 <script>
+import PerfectScrollbar from 'perfect-scrollbar'
 import { mapGetters } from 'vuex'
 import Btn from '@nylira/vue-button'
 import noScroll from 'no-scroll'
@@ -44,6 +45,10 @@ export default {
       this.$store.commit('setActiveMenu', '')
       noScroll.off()
     }
+  },
+  mounted () {
+    // eslint-disable-next-line no-unused-vars
+    const ps = new PerfectScrollbar('.app-menu-main')
   }
 }
 </script>
@@ -61,7 +66,7 @@ export default {
 
   .app-menu-main
     flex 1
-    overflow-y auto
+    position relative // for perfect-scrollbar
 
   .ni-user
     border-top 1px solid bc

app/src/renderer/components/common/NiListItem.vue

@@ -93,7 +93,6 @@ export default {
   display block
   border-bottom 2px solid bc-dim
   height 3rem
-  max-width width-main
   position relative
 
   &:last-child

app/src/renderer/components/common/NiPage.vue

@@ -5,18 +5,31 @@
     div(slot='subtitle') {{ subtitle }}
     div(slot="menu"): slot(name="menu")
   main.ni-page-main: slot
-  page-footer
+  app-footer
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+import PerfectScrollbar from 'perfect-scrollbar'
 import PageHeader from 'common/NiPageHeader'
-import PageFooter from 'common/NiPageFooter'
+import AppFooter from 'common/AppFooter'
 export default {
   name: 'ni-page',
   props: ['title', 'subtitle', 'icon'],
   components: {
     PageHeader,
-    PageFooter
+    AppFooter
+  },
+  computed: {
+    ...mapGetters(['config'])
+  },
+  mounted () {
+    let ps
+    if (this.config.desktop) {
+      ps = new PerfectScrollbar('.ni-page-main')
+    } else {
+      ps.destroy()
+    }
   }
 }
 </script>
@@ -25,8 +38,13 @@ export default {
 @require '~variables'
 
 .ni-page
-  max-width aw
-  margin 0 auto
+  flex 1
+  display flex
+  flex-flow column nowrap
+
+.ni-page-main
+  flex 1
+  position relative
 
 .ni-page-title
   color bright

app/src/renderer/components/common/NiPageHeader.vue

@@ -21,7 +21,7 @@ export default {
 @require '~variables'
 
 .ni-page-header
-  -webkit-app-region: drag;
+  -webkit-app-region drag
 
 .ni-page-header-title
   font-size xl

app/src/renderer/components/common/NiToolBar.vue

@@ -110,6 +110,9 @@ export default {
     height 3rem + px
     border-top px solid bc
 
+  .ni-page
+    padding-bottom 3rem
+
 @media screen and (min-width: 568px)
   .ni-tool-bar-container
     .main

app/src/renderer/styles/app.styl

@@ -40,25 +40,46 @@ a
 .desktop-only
   display none
 
-@media screen and (min-width: 1024px)
- agu .desktop-only
-    display block
-
 #app
   df()
   color txt
   padding-top 3rem
-  min-height 100vh
-  display flex
-  flex-flow column nowrap
+  height 100vh
+  width 100vw
 
-#app-content
-  flex 1
   display flex
   flex-flow column nowrap
 
-#app-main
-  flex 1
-
 .ni-field
   border-radius 2px!important
+
+@media screen and (min-width: 1024px)
+  #app
+    padding-top 0
+    flex-flow row nowrap
+
+  #app-header, #app-content
+    display flex
+
+  #app-header
+    flex 0 0 width-side
+    border-right px solid bc
+    display flex
+
+    > .container
+      flex 1
+      display flex
+      flex-flow column nowrap
+
+    .header-item-logo
+      border-bottom px solid bc
+      padding 2rem 1rem .75rem
+      line-height: normal
+      img
+        height 1.25rem
+
+  #app-content
+    flex 1
+
+ .desktop-only
+    display block

app/src/renderer/styles/vendor/perfect-scrollbar.styl

@@ -0,0 +1,80 @@
+.ps
+  overflow hidden !important
+  overflow-anchor none
+  -ms-overflow-style none
+  touch-action auto
+  -ms-touch-action auto
+
+.ps__rail-x
+  display none
+  opacity 0
+  transition background-color .2s linear, opacity .2s linear
+  -webkit-transition background-color .2s linear, opacity .2s linear
+  height 15px
+  bottom 0px
+  position absolute
+
+.ps__rail-y
+  display none
+  opacity 0
+  transition background-color .2s linear, opacity .2s linear
+  -webkit-transition background-color .2s linear, opacity .2s linear
+  width 15px
+  right 0
+  position absolute
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y
+  display block
+  background-color transparent
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y
+  opacity 0.6
+
+.ps__rail-x:hover,
+.ps__rail-y:hover,
+.ps__rail-x:focus,
+.ps__rail-y:focus
+  background-color #eee
+  opacity 0.9
+
+.ps__thumb-x
+  background-color input-bc
+  border-radius 6px
+  transition background-color .2s linear, height .2s ease-in-out
+  -webkit-transition background-color .2s linear, height .2s ease-in-out
+  height 6px
+  bottom 2px
+  position absolute
+
+.ps__thumb-y
+  background-color input-bc
+  border-radius 6px
+  transition background-color .2s linear, width .2s ease-in-out
+  -webkit-transition background-color .2s linear, width .2s ease-in-out
+  width 6px
+  right 2px
+  position absolute
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x
+  background-color #999
+  height 11px
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y
+  background-color #999
+  width 11px
+
+@supports (-ms-overflow-style: none)
+  .ps
+    overflow auto !important
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
+  .ps
+    overflow auto !important

package.json

@@ -116,6 +116,7 @@
     "mousetrap": "^1.6.1",
     "nib": "^1.1.2",
     "no-scroll": "^2.1.0",
+    "perfect-scrollbar": "^1.3.0",
     "proxyquire": "^1.8.0",
     "request-interval": "^2.0.0",
     "shortid": "^2.2.8",

test/unit/specs/__snapshots__/PageBalances.spec.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PageBalances has the expected html structure 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\">123abc456def</div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"123abc456def\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">FERMION</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">N/A</div><div class=\\"ni-li-dd\\">None Available</div></div></div></div></main></div></section></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
+exports[`PageBalances has the expected html structure 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\">123abc456def</div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"123abc456def\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">FERMION</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li proposal-enter proposal-enter-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----><div class=\\"ni-li proposal-leave proposal-leave-active\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">N/A</div><div class=\\"ni-li-dd\\">None Available</div></div></div></div></main></div></section></main><footer class=\\"app-footer\\"><div class=\\"app-footer-container\\"><div class=\\"afi\\"><i class=\\"material-icons fa-spin\\">rotate_right</i><span>Connecting…</span></div></div></footer></div>"`;
 
-exports[`PageBalances should filter the balances 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\">123abc456def</div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"123abc456def\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">FERMION</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----></main></div></section></main><footer class=\\"ni-page-footer\\"><div class=\\"container\\"></div></footer></div>"`;
+exports[`PageBalances should filter the balances 1`] = `"<div class=\\"ni-page\\"><header class=\\"ni-page-header\\"><div class=\\"ni-page-header-container\\"><div class=\\"ni-page-header-text\\"><div class=\\"ni-page-header-title\\"><div>Balance</div></div><div class=\\"ni-page-header-subtitle\\"><div></div></div></div><menu class=\\"ni-page-header-menu\\"><div><div><div class=\\"ni-tool-bar\\"><div class=\\"ni-tool-bar-container\\"><div class=\\"main\\"><a><i class=\\"material-icons\\">refresh</i><div class=\\"label\\">Refresh</div></a><a><i class=\\"material-icons\\">search</i><div class=\\"label\\">Search</div></a></div><a class=\\"help\\"><i class=\\"material-icons\\">help_outline</i></a></div></div></div></div></menu></div></header><main class=\\"ni-page-main\\"><!----><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Your Address</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li-copy\\"><div class=\\"value\\">123abc456def</div><menu><button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"123abc456def\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button></menu></div></main></div></section><section class=\\"ni-part\\"><div class=\\"ni-part-container\\"><header class=\\"ni-part-header\\"><div class=\\"ni-part-header-container\\"><div class=\\"ni-part-title h5\\">Denomination Balances</div><menu class=\\"ni-part-menu\\"></menu></div></header><main class=\\"ni-part-main\\"><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">FERMION</div><div class=\\"ni-li-dd\\">456</div></div></div></div><div class=\\"ni-li\\"><div class=\\"ni-li-container\\"><div class=\\"ni-li-thumb\\"><!----></div><div class=\\"ni-li-dl\\"><div class=\\"ni-li-dt\\">ATOM</div><div class=\\"ni-li-dd\\">123</div></div></div></div><!----></main></div></section></main><footer class=\\"app-footer\\"><div class=\\"app-footer-container\\"><div class=\\"afi\\"><i class=\\"material-icons fa-spin\\">rotate_right</i><span>Connecting…</span></div></div></footer></div>"`;

test/unit/specs/__snapshots__/PageBond.spec.js.snap

@@ -54,8 +54,12 @@ unbonded atoms. Start by bonding some of your atoms to these delegates.
 </div>
 </form>
 </main>
-<footer class=\\"ni-page-footer\\">
-   <div class=\\"container\\"></div>
+<footer class=\\"app-footer\\">
+   <div class=\\"app-footer-container\\">
+      <div class=\\"afi\\">
+         <i class=\\"material-icons fa-spin\\">rotate_right</i><span>Connecting…</span>
+      </div>
+</div>
 </footer>
 </div>"
 `;