From 27d928ac07bdf9c677e353f54cb99b74c89501c5 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Fri, 27 May 2016 23:21:31 -0700
Subject: [PATCH] Tapping view tab scrolls to top

---
 src/components/ha-view-tabs.html |  4 ++--
 src/components/ha-view-tabs.js   |  4 ++++
 src/layouts/partial-cards.html   |  4 ++--
 src/layouts/partial-cards.js     | 22 ++++++++++++++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/ha-view-tabs.html b/src/components/ha-view-tabs.html
index a1b54dfa08..f61e4f2f80 100644
--- a/src/components/ha-view-tabs.html
+++ b/src/components/ha-view-tabs.html
@@ -9,9 +9,9 @@
   <template>
     <paper-tabs selected='[[currentView]]' attr-for-selected='data-entity'
       on-iron-select='viewSelected' scrollable=''>
-        <paper-tab data-entity=''>[[locationName]]</paper-tab>
+        <paper-tab data-entity='' on-tap='viewTapped'>[[locationName]]</paper-tab>
         <template is='dom-repeat' items='[[views]]'>
-          <paper-tab data-entity$='[[item.entityId]]'>
+          <paper-tab data-entity$='[[item.entityId]]' on-tap='viewTapped'>
             <template is='dom-if' if='[[item.attributes.icon]]'>
               <iron-icon icon='[[item.attributes.icon]]'></iron-icon>
             </template>
diff --git a/src/components/ha-view-tabs.js b/src/components/ha-view-tabs.js
index 930036b12f..25a5939be3 100644
--- a/src/components/ha-view-tabs.js
+++ b/src/components/ha-view-tabs.js
@@ -39,6 +39,10 @@ export default new Polymer({
     },
   },
 
+  viewTapped() {
+    this.fire('view-tapped');
+  },
+
   viewSelected(ev) {
     const view = ev.detail.item.getAttribute('data-entity') || null;
     const current = this.currentView || null;
diff --git a/src/layouts/partial-cards.html b/src/layouts/partial-cards.html
index aaf7b74edf..8e951fc013 100644
--- a/src/layouts/partial-cards.html
+++ b/src/layouts/partial-cards.html
@@ -45,7 +45,7 @@
       condenses keep-condensed-header class='fit' has-views$='[[hasViews]]'
       header-height="[[computeHeaderHeight(hasViews)]]"
       condensed-header-height="[[computeCondensedHeaderHeight(hasViews)]]"
-      on-paper-header-transform='headerScrollAdjust'
+      on-paper-header-transform='headerScrollAdjust' id='panel'
       >
       <paper-toolbar>
         <div class='flex layout horizontal' id='menu'>
@@ -65,7 +65,7 @@
 
         <template is='dom-if' if='[[hasViews]]'>
           <div class='fit bottom views'>
-            <ha-view-tabs></ha-view-tabs>
+            <ha-view-tabs on-view-tapped='scrollToTop'></ha-view-tabs>
           </div>
         </template>
       </paper-toolbar>
diff --git a/src/layouts/partial-cards.js b/src/layouts/partial-cards.js
index 4fa2fdfecc..11b025dd33 100644
--- a/src/layouts/partial-cards.js
+++ b/src/layouts/partial-cards.js
@@ -113,6 +113,28 @@ export default new Polymer({
     this.columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
   },
 
+  scrollToTop() {
+    const scrollEl = this.$.panel.scroller;
+    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() {
     syncActions.fetchAll();
   },