Fix toolbar when no views

This commit is contained in:
Paulus Schoutsen 2016-06-11 23:55:59 -07:00
parent 943e9b2899
commit f0466f42e5
2 changed files with 47 additions and 30 deletions

View File

@ -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)]]"
condensed-header-height="[[computeCondensedHeaderHeight(hasViews)]]"
on-paper-header-transform='headerScrollAdjust' id='panel'
header-height="[[computeHeaderHeight(hasViews, narrow)]]"
condensed-header-height="[[computeCondensedHeaderHeight(hasViews, narrow)]]"
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"

View File

@ -104,25 +104,7 @@ export default new Polymer({
},
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);
this.$.panel.scrollToTop(true);
},
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) {
return hasViews ? 104 : 64;
computeHeaderHeight(hasViews, narrow) {
if (hasViews) {
return 104;
} else if (narrow) {
return 56;
}
return 64;
},
computeCondensedHeaderHeight(hasViews) {
return hasViews ? 48 : 64;
computeCondensedHeaderHeight(hasViews, narrow) {
if (hasViews) {
return 48;
} else if (narrow) {
return 56;
}
return 64;
},
computeMenuButtonClass(narrow, showMenu) {