mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Tapping view tab scrolls to top
This commit is contained in:
parent
0be98873d7
commit
27d928ac07
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
},
|
||||
|
Loading…
x
Reference in New Issue
Block a user