feat(MdApp): create reveal toolbars

Author: marcosmoura

src/components/MdApp/MdApp.vue

@@ -88,6 +88,7 @@
       .md-app-toolbar {
         position: fixed;
         top: 0;
+        transition: none;
       }
     }
   }

src/components/MdApp/MdAppMixin.js

@@ -37,7 +37,8 @@ export default {
       toolbar: {
         element: null,
         transformY: 0,
-        hasElevation: true
+        hasElevation: true,
+        revealActive: false
       },
       drawer: {
         active: false,
@@ -95,11 +96,26 @@ export default {
       this.MdApp.toolbar.hasElevation = $event.target.scrollTop >= threshold
     },
     handleRevealMode ($event) {
-      /* const height = this.MdApp.toolbar.element.offsetHeight
-      const threshold = height + 10 */
+      const toolbarHeight = this.MdApp.toolbar.element.offsetHeight
+      const safeAmount = 10
+      const threshold = toolbarHeight + safeAmount
       const scrollTop = $event.target.scrollTop
 
-      this.MdApp.toolbar.transformY = scrollTop
+      window.clearTimeout(this.revealTimer)
+
+      this.revealTimer = window.setTimeout(() => {
+        this.revealLastPos = scrollTop
+      }, 100)
+
+      if (this.revealLastPos > scrollTop + safeAmount) {
+        this.MdApp.toolbar.revealActive = true
+        this.MdApp.toolbar.transformY = scrollTop - threshold
+      } else if (scrollTop < threshold) {
+        this.MdApp.toolbar.revealActive = false
+        this.MdApp.toolbar.transformY = 0
+      } else {
+        this.MdApp.toolbar.transformY = scrollTop - threshold
+      }
     },
     handleModeScroll ($event) {
       if (this.mdMode === 'reveal') {

src/components/MdApp/MdAppToolbar.vue

@@ -11,12 +11,13 @@
     computed: {
       toolbarClasses () {
         return {
-          'md-no-elevation': !this.MdApp.toolbar.hasElevation
+          'md-no-elevation': !this.MdApp.toolbar.hasElevation,
+          'md-reveal-active': this.MdApp.toolbar.revealActive
         }
       },
       toolbarStyles () {
         return {
-          transform: `translate3D(0, ${this.MdApp.toolbar.transformY}px, 0)`
+          'margin-top': `${this.MdApp.toolbar.transformY}px`
         }
       }
     },
@@ -27,7 +28,16 @@
 </script>
 
 <style lang="scss" scoped>
+  @import "~components/MdAnimation/variables";
+
   .md-no-elevation {
     box-shadow: none !important;
   }
+
+  .md-reveal .md-reveal-active {
+    transform: translate3d(0, calc(100% + 10px), 0);
+    transition: .3s $md-transition-stand-timing;
+    transition-property: box-shadow, transform;
+    will-change: box-shadow, transform;
+  }
 </style>