toolbar for menu and page, fix page header to app

luniehq · Dec 19, 2017 · 2492fa6 · 2492fa6
1 parent a288326
commit 2492fa6
Show file tree

Hide file tree

Showing 12 changed files with 142 additions and 68 deletions.
diff --git a/app/src/renderer/App.vue b/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

diff --git a/app/src/renderer/components/common/AppFooter.vue b/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

diff --git a/app/src/renderer/components/common/AppHeader.vue b/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>
diff --git a/app/src/renderer/components/common/AppMenu.vue b/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,9 @@ export default {
       this.$store.commit('setActiveMenu', '')
       noScroll.off()
     }
+  },
+  mounted () {
+    const ps = new PerfectScrollbar('.app-menu-main')
   }
 }
 </script>
@@ -61,7 +65,7 @@ export default {
 
   .app-menu-main
     flex 1
-    overflow-y auto
+    position relative // for perfect-scrollbar
 
   .ni-user
     border-top 1px solid bc

diff --git a/app/src/renderer/components/common/NiListItem.vue b/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

diff --git a/app/src/renderer/components/common/NiPage.vue b/app/src/renderer/components/common/NiPage.vue
@@ -5,18 +5,22 @@
     div(slot='subtitle') {{ subtitle }}
     div(slot="menu"): slot(name="menu")
   main.ni-page-main: slot
-  page-footer
+  app-footer
 </template>
 
 <script>
+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
+  },
+  mounted () {
+    const ps = new PerfectScrollbar('.ni-page-main')
   }
 }
 </script>
@@ -25,8 +29,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
+  overflow-y scroll
 
 .ni-page-title
   color bright

diff --git a/app/src/renderer/components/common/NiPageHeader.vue b/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

diff --git a/app/src/renderer/components/common/NiToolBar.vue b/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

diff --git a/app/src/renderer/styles/app.styl b/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
diff --git a/app/src/renderer/styles/vendor/perfect-scrollbar.styl b/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 hover
+  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 hover
+  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
diff --git a/package.json b/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",

diff --git a/yarn.lock b/yarn.lock
@@ -6029,6 +6029,10 @@ pend@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 
+perfect-scrollbar@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
+
 performance-now@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"