jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 23:06:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hassio: fix scroll issues (#1354)

Browse Source 
* Hassio: fix scroll issues

* Feedback

* Lint

* Lint

* Move to dom
This commit is contained in:
c727 2018-06-28 04:20:16 +02:00 committed by GitHub
parent de91aea3b9
commit 9e2d311ce6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
hassio/src/addon-view/hassio-addon-logs.js
View File

@ -13,6 +13,9 @@ class HassioAddonLogs extends PolymerElement {
paper-card {
display: block;
}
pre {
overflow-x: auto;
}
</style>
<paper-card heading="Log">
<div class="card-content">

2
hassio/src/addon-view/hassio-addon-view.js
View File

@ -37,6 +37,7 @@ class HassioAddonView extends PolymerElement {
width: 600px;
}
hassio-addon-logs {
max-width: calc(100% - 8px);
min-width: 600px;
}
@media only screen and (max-width: 600px) {
@ -46,6 +47,7 @@ class HassioAddonView extends PolymerElement {
hassio-addon-config,
hassio-addon-logs {
max-width: 100%;
min-width: 100%;
}
}
</style>

10
hassio/src/hassio-pages-with-tabs.js
View File

@ -15,6 +15,9 @@ import './hassio-markdown-dialog.js';
import './snapshots/hassio-snapshot.js';
import './snapshots/hassio-snapshots.js';
import './system/hassio-system.js';
import scrollToTarget from '../../src/common/dom/scroll-to-target.js';
import NavigateMixin from '../../src/mixins/navigate-mixin.js';
class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
@ -31,11 +34,11 @@ class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
text-transform: uppercase;
}
</style>
<app-header-layout has-scrolling-region="">
<app-header fixed="" slot="header">
<app-header-layout id="layout" has-scrolling-region>
<app-header fixed slot="header">
<app-toolbar>
<ha-menu-button hassio narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button>
<div main-title="">Hass.io</div>
<div main-title>Hass.io</div>
<template is="dom-if" if="[[showRefreshButton(page)]]">
<paper-icon-button icon="hassio:refresh" on-click="refreshClicked"></paper-icon-button>
</template>
@ -99,6 +102,7 @@ class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
if (newPage !== this.page) {
this.navigate(`/hassio/${newPage}`);
}
scrollToTarget(this, this.$.layout.header.scrollTarget);
}
equals(a, b) {

38
src/common/dom/scroll-to-target.js Normal file
View File

@ -0,0 +1,38 @@
/**
* Scroll to a specific y coordinate.
*
* Copied from paper-scroll-header-panel.
*
* @method scroll
* @param {number} top The coordinate to scroll to, along the y-axis.
* @param {boolean} smooth true if the scroll position should be smoothly adjusted.
*/
export default function scrollToTarget(element, target) {
// the scroll event will trigger _updateScrollState directly,
// However, _updateScrollState relies on the previous `scrollTop` to update the states.
// Calling _updateScrollState will ensure that the states are synced correctly.
var top = 0;
var scroller = target;
var easingFn = function easeOutQuad(t, b, c, d) {
/* eslint-disable no-param-reassign, space-infix-ops, no-mixed-operators */
t /= d;
return -c * t*(t-2) + b;
/* eslint-enable no-param-reassign, space-infix-ops, no-mixed-operators */
};
var animationId = Math.random();
var duration = 200;
var startTime = Date.now();
var currentScrollTop = scroller.scrollTop;
var deltaScrollTop = top - currentScrollTop;
element._currentAnimationId = animationId;
(function updateFrame() {
var now = Date.now();
var elapsedTime = now - startTime;
if (elapsedTime > duration) {
scroller.scrollTop = top;
} else if (element._currentAnimationId === animationId) {
scroller.scrollTop = easingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration);
requestAnimationFrame(updateFrame.bind(element));
}
}).call(element);
}

44
src/panels/lovelace/hui-root.js
View File

@ -10,6 +10,8 @@ import '@polymer/iron-icon/iron-icon.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import scrollToTarget from '../../common/dom/scroll-to-target.js';
import EventsMixin from '../../mixins/events-mixin.js';
import NavigateMixin from '../../mixins/navigate-mixin.js';
@ -59,7 +61,7 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
<div sticky hidden$="[[_computeTabsHidden(config.views)]]">
<paper-tabs scrollable selected="[[_curView]]" on-iron-activate="_handleViewSelected">
<template is="dom-repeat" items="[[config.views]]">
<paper-tab on-click="_scrollToTop">
<paper-tab>
<template is="dom-if" if="[[item.tab_icon]]">
<iron-icon title$="[[item.name]]" icon="[[item.tab_icon]]"></iron-icon>
</template>
@ -150,6 +152,7 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
const id = this.config.views[index].id || index;
this.navigate(`/lovelace/${id}`);
}
scrollToTarget(this, this.$.layout.header.scrollTarget);
}
_selectView(viewIndex) {
@ -208,45 +211,6 @@ class HUIRoot extends NavigateMixin(EventsMixin(PolymerElement)) {
}
});
}
/**
* Scroll to a specific y coordinate.
*
* Copied from paper-scroll-header-panel.
*
* @method scroll
* @param {number} top The coordinate to scroll to, along the y-axis.
* @param {boolean} smooth true if the scroll position should be smoothly adjusted.
*/
_scrollToTop() {
// the scroll event will trigger _updateScrollState directly,
// However, _updateScrollState relies on the previous `scrollTop` to update the states.
// Calling _updateScrollState will ensure that the states are synced correctly.
var top = 0;
var scroller = this.$.layout.header.scrollTarget;
var easingFn = function easeOutQuad(t, b, c, d) {
/* eslint-disable no-param-reassign, space-infix-ops, no-mixed-operators */
t /= d;
return -c * t*(t-2) + b;
/* eslint-enable no-param-reassign, space-infix-ops, no-mixed-operators */
};
var animationId = Math.random();
var duration = 200;
var startTime = Date.now();
var currentScrollTop = scroller.scrollTop;
var deltaScrollTop = top - currentScrollTop;
this._currentAnimationId = animationId;
(function updateFrame() {
var now = Date.now();
var elapsedTime = now - startTime;
if (elapsedTime > duration) {
scroller.scrollTop = top;
} else if (this._currentAnimationId === animationId) {
scroller.scrollTop = easingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration);
requestAnimationFrame(updateFrame.bind(this));
}
}).call(this);
}
}
customElements.define('hui-root', HUIRoot);