Tapping view tab scrolls to top

This commit is contained in:
Paulus Schoutsen 2016-05-27 23:21:31 -07:00
parent 0be98873d7
commit 27d928ac07
4 changed files with 30 additions and 4 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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>

View File

@ -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();
},