mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-13 12:26:35 +00:00
Fix toolbar when no views
This commit is contained in:
parent
943e9b2899
commit
f0466f42e5
@ -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"
|
||||
|
@ -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) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user