Fix toolbar when no views

src/layouts/partial-cards.html

@@ -36,7 +36,7 @@
       transition: opacity 0.4s;
     }
 
-    paper-scroll-header-panel.condensed paper-toolbar:after {
+    paper-scroll-header-panel.raised paper-toolbar:after {
       opacity: 1;
     }
 
@@ -48,6 +48,10 @@
       line-height: 40px;
     }
 
+    #menu > .title > span {
+      pointer-events: auto;
+    }
+
     .views {
       padding-left: 12px;
       --paper-tabs-selection-bar-color: #FFF;
@@ -55,17 +59,22 @@
   </style>
 
   <template>
-    <paper-scroll-header-panel
+    <paper-scroll-header-panel id='panel'
       condenses keep-condensed-header class='fit' has-views$='[[hasViews]]'
-      header-height="[[computeHeaderHeight(hasViews)]]"
+      header-height="[[computeHeaderHeight(hasViews, narrow)]]"
-      condensed-header-height="[[computeCondensedHeaderHeight(hasViews)]]"
+      condensed-header-height="[[computeCondensedHeaderHeight(hasViews, narrow)]]"
-      on-paper-header-transform='headerScrollAdjust' id='panel'
+      on-paper-header-transform='headerScrollAdjust'
+      on-content-scroll='contentScroll'
       >
       <paper-toolbar>
         <div class='flex layout horizontal' id='menu'>
           <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
 
-          <span class='title flex'>[[computeTitle(hasViews, locationName)]]</span>
+          <span class='title flex'>
+            <span on-tap='scrollToTop'>
+              [[computeTitle(hasViews, locationName)]]
+            </span>
+          </span>
 
           <paper-icon-button
             icon="mdi:refresh"

src/layouts/partial-cards.js

@@ -104,25 +104,7 @@ export default new Polymer({
   },
 
   scrollToTop() {
-    const scrollEl = this.$.panel.scroller;
+    this.$.panel.scrollToTop(true);
-    const begin = scrollEl.scrollTop;
-
-    if (!begin) return;
-
-    const duration = Math.round(begin / 5);
-    let start = null;
-
-    function scroll(timestamp) {
-      if (!start) start = timestamp;
-      const progress = timestamp - start;
-
-      scrollEl.scrollTop = begin - (progress / duration * begin);
-
-      if (progress < duration) {
-        requestAnimationFrame(scroll);
-      }
-    }
-    requestAnimationFrame(scroll);
   },
 
   handleRefresh() {
@@ -133,18 +115,44 @@ export default new Polymer({
     this.hass.voiceActions.listen();
   },
 
+  contentScroll() {
+    if (this.debouncedContentScroll) return;
+
+    this.debouncedContentScroll = this.async(() => {
+      this.checkRaised();
+      this.debouncedContentScroll = false;
+    }, 100);
+  },
+
+  checkRaised() {
+    this.toggleClass(
+      'raised',
+      this.$.panel.scroller.scrollTop > (this.hasViews ? 56 : 0),
+      this.$.panel);
+  },
+
   headerScrollAdjust(ev) {
     if (!this.hasViews) return;
     this.translate3d('0', `-${ev.detail.y}px`, '0', this.$.menu);
-    this.toggleClass('condensed', ev.detail.y === 56, this.$.panel);
+    // this.toggleClass('condensed', ev.detail.y === 56, this.$.panel);
   },
 
-  computeHeaderHeight(hasViews) {
+  computeHeaderHeight(hasViews, narrow) {
-    return hasViews ? 104 : 64;
+    if (hasViews) {
+      return 104;
+    } else if (narrow) {
+      return 56;
+    }
+    return 64;
   },
 
-  computeCondensedHeaderHeight(hasViews) {
+  computeCondensedHeaderHeight(hasViews, narrow) {
-    return hasViews ? 48 : 64;
+    if (hasViews) {
+      return 48;
+    } else if (narrow) {
+      return 56;
+    }
+    return 64;
   },
 
   computeMenuButtonClass(narrow, showMenu) {