Hassio: fix scroll issues (#1354)

* Hassio: fix scroll issues

* Feedback

* Lint

* Lint

* Move to dom

hassio/src/addon-view/hassio-addon-logs.js

@@ -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">

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%;
         }
       }
     </style>

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;
       }
     </style>
-    <app-header-layout has-scrolling-region="">
+    <app-header-layout id="layout" has-scrolling-region>
-      <app-header fixed="" slot="header">
+      <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) {

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);
+}

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)) {
         <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);