Migrate main view to app elements

src/app-core.js

@@ -32,7 +32,7 @@ hass.reactor.batch(function () {
 setTimeout(hass.startLocalStoragePreferencesSync, 5000);
 
 if ('serviceWorker' in navigator) {
-  window.addEventListener('load', function() {
+  window.addEventListener('load', function () {
     navigator.serviceWorker.register('/service_worker.js');
   });
 }

src/components/ha-cards.html

@@ -10,15 +10,12 @@
     <style>
       :host {
         display: block;
+        background-color: #E5E5E5;
+        padding-top: 8px;
         padding-right: 8px;
       }
 
-      .no-badges {
-        height: 8px;
-      }
-
       .badges {
-        margin-top: 16px;
         font-size: 85%;
         text-align: center;
       }
@@ -61,9 +58,6 @@
           <ha-badges-card states='[[cards.badges]]' hass='[[hass]]'></ha-badges-card>
         </div>
       </template>
-      <template is='dom-if' if='[[!cards.badges]]'>
-        <div class='no-badges'> </div>
-      </template>
 
       <div class='horizontal layout center-justified'>
         <template is='dom-repeat' items='[[cards.columns]]' as='column'>

src/components/ha-label-badge.html

@@ -65,6 +65,7 @@
       font-weight: 300;
       overflow: hidden;
       text-overflow: ellipsis;
+      line-height: normal;
     }
 
     iron-image {

src/components/ha-view-tabs.html

@@ -6,6 +6,7 @@
   <template>
     <style>
       :host {
+        display: block;
         --paper-tabs-selection-bar-color: #FFF;
       }
       paper-tab {

src/home-assistant.html

@@ -5,7 +5,6 @@
 <link rel='import' href='./util/roboto.html'>
 <link rel='import' href='../bower_components/paper-styles/typography.html'>
 <link rel='import' href='../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
-<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
 
 <link rel='import' href='./util/hass-util.html'>
 <link rel='import' href='./util/hass-behavior.html'>
@@ -16,7 +15,9 @@
 
 <dom-module id='home-assistant'>
   <template>
-    <home-assistant-main hass='[[hass]]' hidden$='[[!loaded]]'></home-assistant-main>
+    <template is='dom-if' if='[[loaded]]'>
+      <home-assistant-main hass='[[hass]]'></home-assistant-main>
+    </template>
 
     <template is='dom-if' if='[[!loaded]]'>
       <login-form

src/layouts/partial-cards.html

@@ -1,87 +1,36 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
-<link rel="import" href="../../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel='import' href='../../bower_components/paper-toolbar/paper-toolbar.html'>
 
+<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
+<link rel="import" href="../../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
+<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+
+<link rel="import" href="../components/ha-menu-button.html">
 <link rel="import" href="../components/ha-cards.html">
 <link rel="import" href="../components/ha-view-tabs.html">
 
 <dom-module id="partial-cards">
   <template>
-    <style is="custom-style" include="iron-flex iron-positioning"></style>
-    <style>
+    <style include="iron-flex iron-positioning ha-style">
       :host {
-        display: block;
         -ms-user-select: none;
         -webkit-user-select: none;
         -moz-user-select: none;
       }
 
-      paper-scroll-header-panel {
-        --paper-scroll-header-panel-container: {
-          background-color: #E5E5E5;
-        };
-      }
-
-      paper-scroll-header-panel[has-views] paper-toolbar {
-        height: 104px;
-      }
-
-      paper-toolbar:after {
-        content: "";
-        position: absolute;
-        left: 0px;
-        right: 0px;
-        bottom: -5px;
-        width: 100%;
-        height: 5px;
-        pointer-events: none;
-        opacity: 0;
-        box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
-        will-change: opacity;
-        transition: opacity 0.4s;
-      }
-
-      paper-scroll-header-panel.raised paper-toolbar:after {
-        opacity: 1;
-      }
-
-      .menu-icon {
-        margin-right: 24px;
-      }
-
-      #menu > .title {
-        line-height: 40px;
-      }
-
-      #menu > .title > span {
-        pointer-events: auto;
-      }
-
-      .views {
-        padding-left: 12px;
+      ha-view-tabs {
+        margin-left: 12px;
         --paper-tabs-selection-bar-color: #FFF;
       }
     </style>
 
-    <paper-scroll-header-panel id='panel'
-      condenses keep-condensed-header class='fit' has-views$='[[hasViews]]'
-      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'>
-            <span on-tap='scrollToTop'>
-              [[computeTitle(hasViews, locationName)]]
-            </span>
-          </span>
-
+    <app-header-layout has-scrolling-region id='layout'>
+      <app-header effects="waterfall" condenses fixed>
+        <app-toolbar>
+          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
+          <div main-title>[[computeTitle(hasViews, locationName)]]</div>
           <paper-icon-button
             icon="mdi:refresh"
             class$="[[computeRefreshButtonClass(isFetching)]]"
@@ -90,19 +39,20 @@
           <paper-icon-button
             icon="mdi:microphone" hidden$='[[!canListen]]'
             on-tap="handleListenClick"></paper-icon-button>
-        </div>
+        </app-toolbar>
 
-        <template is='dom-if' if='[[hasViews]]'>
-          <div class='fit bottom views'>
-            <ha-view-tabs hass='[[hass]]' on-view-tapped='scrollToTop'></ha-view-tabs>
-          </div>
-        </template>
-      </paper-toolbar>
+        <ha-view-tabs
+          sticky
+          hass='[[hass]]'
+          on-view-tapped='scrollToTop'
+        ></ha-view-tabs>
+      </app-header>
 
       <ha-cards
         show-introduction='[[computeShowIntroduction(currentView, introductionLoaded, states)]]'
-        states='[[states]]' columns='[[columns]]' hass='[[hass]]'></ha-cards>
-    </paper-header-panel>
+        states='[[states]]' columns='[[columns]]' hass='[[hass]]'
+      ></ha-cards>
+    </app-header-layout>
   </template>
 
 </dom-module>
@@ -229,8 +179,43 @@ Polymer({
     this.columns = Math.max(1, matchColumns - (!this.narrow && this.showMenu));
   },
 
+  /**
+   * 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: function () {
-    this.$.panel.scrollToTop(true);
+    // 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);
   },
 
   handleRefresh: function () {
@@ -241,46 +226,6 @@ Polymer({
     this.hass.voiceActions.listen();
   },
 
-  contentScroll: function () {
-    if (this.debouncedContentScroll) return;
-
-    this.debouncedContentScroll = this.async(function () {
-      this.checkRaised();
-      this.debouncedContentScroll = false;
-    }.bind(this), 100);
-  },
-
-  checkRaised: function () {
-    this.toggleClass(
-      'raised',
-      this.$.panel.scroller.scrollTop > (this.hasViews ? 56 : 0),
-      this.$.panel);
-  },
-
-  headerScrollAdjust: function (ev) {
-    if (!this.hasViews) return;
-    this.translate3d('0', '-' + ev.detail.y + 'px', '0', this.$.menu);
-    // this.toggleClass('condensed', ev.detail.y === 56, this.$.panel);
-  },
-
-  computeHeaderHeight: function (hasViews, narrow) {
-    if (hasViews) {
-      return 104;
-    } else if (narrow) {
-      return 56;
-    }
-    return 64;
-  },
-
-  computeCondensedHeaderHeight: function (hasViews, narrow) {
-    if (hasViews) {
-      return 48;
-    } else if (narrow) {
-      return 56;
-    }
-    return 64;
-  },
-
   computeMenuButtonClass: function (narrow, showMenu) {
     return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon';
   },
@@ -300,9 +245,5 @@ Polymer({
   computeHasViews: function (views) {
     return views.length > 0;
   },
-
-  toggleMenu: function () {
-    this.fire('open-menu');
-  },
 });
 </script>

src/layouts/partial-panel-resolver.html

@@ -1,12 +1,14 @@
-<link rel='import' href='../../bower_components/paper-toolbar/paper-toolbar.html'>
 <link rel='import' href='../../bower_components/paper-spinner/paper-spinner.html'>
 
+<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+
 <link rel='import' href='../components/ha-menu-button.html'>
 <link rel='import' href='../util/hass-behavior.html'>
+<link rel="import" href="../resources/home-assistant-style.html">
 
 <dom-module id='partial-panel-resolver'>
   <template>
-    <style include='iron-flex'>
+    <style include='iron-flex ha-style'>
       [hidden] {
         display: none !important;
       }
@@ -21,9 +23,9 @@
     </style>
 
     <div hidden$='[[resolved]]' class='placeholder'>
-      <paper-toolbar>
+      <app-toolbar>
         <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-      </paper-toolbar>
+      </app-toolbar>
       <div class='layout horizontal center-center'>
         <template is='dom-if' if='[[!errorLoading]]'>
           <paper-spinner active></paper-spinner>

src/resources/home-assistant-style.html

@@ -18,8 +18,6 @@
     --paper-toggle-button-checked-button-color: #039be5;
     --paper-toggle-button-checked-bar-color: #039be5;
 
-    --paper-toolbar-background: #03A9F4;
-
     font-size: 14px;
   }
 
@@ -57,7 +55,7 @@
         @apply(--paper-font-body1);
       }
 
-      app-toolbar {
+      app-header, app-toolbar {
         background-color: var(--primary-color);
         font-weight: 400;
         color: white;