From 9e2d311ce65a0bd40b648f2c14add5c2b60dabfa Mon Sep 17 00:00:00 2001 From: c727 Date: Thu, 28 Jun 2018 04:20:16 +0200 Subject: [PATCH] Hassio: fix scroll issues (#1354) * Hassio: fix scroll issues * Feedback * Lint * Lint * Move to dom --- hassio/src/addon-view/hassio-addon-logs.js | 3 ++ hassio/src/addon-view/hassio-addon-view.js | 2 + hassio/src/hassio-pages-with-tabs.js | 10 +++-- src/common/dom/scroll-to-target.js | 38 +++++++++++++++++++ src/panels/lovelace/hui-root.js | 44 ++-------------------- 5 files changed, 54 insertions(+), 43 deletions(-) create mode 100644 src/common/dom/scroll-to-target.js diff --git a/hassio/src/addon-view/hassio-addon-logs.js b/hassio/src/addon-view/hassio-addon-logs.js index fb3d44a792..8655607461 100644 --- a/hassio/src/addon-view/hassio-addon-logs.js +++ b/hassio/src/addon-view/hassio-addon-logs.js @@ -13,6 +13,9 @@ class HassioAddonLogs extends PolymerElement { paper-card { display: block; } + pre { + overflow-x: auto; + }
diff --git a/hassio/src/addon-view/hassio-addon-view.js b/hassio/src/addon-view/hassio-addon-view.js index 2328fb937b..f1a6bef2df 100644 --- a/hassio/src/addon-view/hassio-addon-view.js +++ b/hassio/src/addon-view/hassio-addon-view.js @@ -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%; } } diff --git a/hassio/src/hassio-pages-with-tabs.js b/hassio/src/hassio-pages-with-tabs.js index 2e6c41babe..5c7f99c204 100644 --- a/hassio/src/hassio-pages-with-tabs.js +++ b/hassio/src/hassio-pages-with-tabs.js @@ -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; } - - + + -
Hass.io
+
Hass.io
@@ -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) { diff --git a/src/common/dom/scroll-to-target.js b/src/common/dom/scroll-to-target.js new file mode 100644 index 0000000000..ba15feed4a --- /dev/null +++ b/src/common/dom/scroll-to-target.js @@ -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); +} diff --git a/src/panels/lovelace/hui-root.js b/src/panels/lovelace/hui-root.js index 8a7537b200..504187b616 100644 --- a/src/panels/lovelace/hui-root.js +++ b/src/panels/lovelace/hui-root.js @@ -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)) {