Merge pull request #3329 from home-assistant/dev

20190702.0

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20190630.0",
+    version="20190702.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/components/ha-sidebar.ts

@@ -116,10 +116,13 @@ class HaSidebar extends LitElement {
 
   @property({ type: Boolean }) public alwaysExpand = false;
   @property({ type: Boolean, reflect: true }) public expanded = false;
+  @property({ type: Boolean, reflect: true }) public expandedWidth = false;
   @property() public _defaultPage?: string =
     localStorage.defaultPage || DEFAULT_PANEL;
   @property() private _externalConfig?: ExternalConfig;
   @property() private _notifications?: PersistentNotification[];
+  private _expandTimeout?: number;
+  private _contractTimeout?: number;
 
   protected render() {
     const hass = this.hass;
@@ -239,6 +242,7 @@ class HaSidebar extends LitElement {
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (
       changedProps.has("expanded") ||
+      changedProps.has("expandedWidth") ||
       changedProps.has("narrow") ||
       changedProps.has("alwaysExpand") ||
       changedProps.has("_externalConfig") ||
@@ -271,8 +275,17 @@ class HaSidebar extends LitElement {
         this._externalConfig = conf;
       });
     }
+    // On tablets, there is no hover. So we receive click and mouseenter at the
+    // same time. In that case, we're going to cancel expanding, because it is
+    // going to require another tap outside the sidebar to trigger mouseleave
+    this.addEventListener("click", () => {
+      if (this._expandTimeout) {
+        clearTimeout(this._expandTimeout);
+        this._expandTimeout = undefined;
+      }
+    });
     this.addEventListener("mouseenter", () => {
-      this.expanded = true;
+      this._expand();
     });
     this.addEventListener("mouseleave", () => {
       this._contract();
@@ -284,23 +297,48 @@ class HaSidebar extends LitElement {
 
   protected updated(changedProps) {
     super.updated(changedProps);
-    if (changedProps.has("alwaysExpand")) {
+    if (changedProps.has("alwaysExpand") && this.alwaysExpand) {
-      this.expanded = this.alwaysExpand;
+      this.expanded = true;
+      this.expandedWidth = true;
     }
-    if (SUPPORT_SCROLL_IF_NEEDED || !changedProps.has("hass")) {
+    if (!SUPPORT_SCROLL_IF_NEEDED || !changedProps.has("hass")) {
       return;
     }
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     if (!oldHass || oldHass.panelUrl !== this.hass.panelUrl) {
-      this.shadowRoot!.querySelector(
+      const selectedEl = this.shadowRoot!.querySelector(".iron-selected");
-        ".iron-selected"
+      if (selectedEl) {
         // @ts-ignore
-      )!.scrollIntoViewIfNeeded();
+        selectedEl.scrollIntoViewIfNeeded();
+      }
+    }
+  }
+
+  private _expand() {
+    // We debounce it one frame, because on tablets, the mouse-enter and
+    // click event fire at the same time.
+    this._expandTimeout = window.setTimeout(() => {
+      this.expanded = true;
+      this.expandedWidth = true;
+    }, 0);
+    if (this._contractTimeout) {
+      clearTimeout(this._contractTimeout);
+      this._contractTimeout = undefined;
     }
   }
 
   private _contract() {
-    this.expanded = this.alwaysExpand || false;
+    if (this._expandTimeout) {
+      clearTimeout(this._expandTimeout);
+      this._expandTimeout = undefined;
+    }
+    if (this.alwaysExpand) {
+      return;
+    }
+    this.expandedWidth = false;
+    this._contractTimeout = window.setTimeout(() => {
+      this.expanded = this.alwaysExpand || false;
+    }, 400);
   }
 
   private _handleShowNotificationDrawer() {
@@ -338,7 +376,7 @@ class HaSidebar extends LitElement {
         contain: strict;
         transition-delay: 0.2s;
       }
-      :host([expanded]) {
+      :host([expandedwidth]) {
         width: 256px;
       }
 

src/data/zha.ts

@@ -9,6 +9,9 @@ export interface ZHADevice {
   name: string;
   ieee: string;
   nwk: string;
+  lqi: string;
+  rssi: string;
+  last_seen: string;
   manufacturer: string;
   model: string;
   quirk_applied: boolean;

src/dialogs/notifications/notification-drawer.js

@@ -1,3 +1,4 @@
+import "@polymer/app-layout/app-drawer/app-drawer";
 import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
@@ -6,11 +7,10 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "./notification-item";
-import "../../components/ha-paper-icon-button-next";
+import "../../components/ha-paper-icon-button-prev";
 
 import { EventsMixin } from "../../mixins/events-mixin";
 import LocalizeMixin from "../../mixins/localize-mixin";
-import { computeRTL } from "../../common/util/compute_rtl";
 import { subscribeNotifications } from "../../data/persistent_notification";
 import computeDomain from "../../common/entity/compute_domain";
 /*
@@ -23,86 +23,12 @@ export class HuiNotificationDrawer extends EventsMixin(
   static get template() {
     return html`
     <style include="paper-material-styles">
-      :host {
-        bottom: 0;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-
-      :host([hidden]) {
-        display: none;
-      }
-
-      .container {
-        align-items: stretch;
-        background: var(--sidebar-background-color, var(--primary-background-color));
-        bottom: 0;
-        box-shadow: var(--paper-material-elevation-1_-_box-shadow);
-        display: flex;
-        flex-direction: column;
-        overflow-y: hidden;
-        position: fixed;
-        top: 0;
-        transition: right .2s ease-in;
-        width: 500px;
-        z-index: 10;
-      }
-
-      :host([rtl]) .container {
-        transition: left .2s ease-in !important;
-      }
-
-      :host(:not(narrow)) .container {
-        right: -500px;
-      }
-
-      :host([rtl]:not(narrow)) .container {
-        left: -500px;
-      }
-
-      :host([narrow]) .container {
-        right: -100%;
-        width: 100%;
-      }
-
-      :host([rtl][narrow]) .container {
-        left: -100%;
-        width: 100%;
-      }
-
-      :host(.open) .container,
-      :host(.open[narrow]) .container {
-        right: 0;
-      }
-
-      :host([rtl].open) .container,
-      :host([rtl].open[narrow]) .container {
-        left: 0;
-      }
-
       app-toolbar {
         color: var(--primary-text-color);
         border-bottom: 1px solid var(--divider-color);
         background-color: var(--primary-background-color);
         min-height: 64px;
         width: calc(100% - 32px);
-        z-index: 11;
-      }
-
-      .overlay {
-        display: none;
-      }
-
-      :host(.open) .overlay {
-        bottom: 0;
-        display: block;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-        z-index: 5;
       }
 
       .notifications {
@@ -119,11 +45,10 @@ export class HuiNotificationDrawer extends EventsMixin(
         text-align: center;
       }
     </style>
-    <div class="overlay" on-click="_closeDrawer"></div>
+    <app-drawer id='drawer' opened="{{open}}" disable-swipe>
-    <div class="container">
       <app-toolbar>
         <div main-title>[[localize('ui.notification_drawer.title')]]</div>
-        <ha-paper-icon-button-next on-click="_closeDrawer"></paper-icon-button>
+        <ha-paper-icon-button-prev on-click="_closeDrawer"></paper-icon-button>
       </app-toolbar>
       <div class="notifications">
         <template is="dom-if" if="[[!_empty(notifications)]]">
@@ -139,27 +64,17 @@ export class HuiNotificationDrawer extends EventsMixin(
           <div class="empty">[[localize('ui.notification_drawer.empty')]]<div>
         </template>
       </div>
-    </div>
+    </app-drawer>
     `;
   }
 
   static get properties() {
     return {
       hass: Object,
-      narrow: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
       open: {
         type: Boolean,
-        notify: true,
         observer: "_openChanged",
       },
-      hidden: {
-        type: Boolean,
-        value: true,
-        reflectToAttribute: true,
-      },
       notifications: {
         type: Array,
         computed: "_computeNotifications(open, hass, _notificationsBackend)",
@@ -168,11 +83,6 @@ export class HuiNotificationDrawer extends EventsMixin(
         type: Array,
         value: [],
       },
-      rtl: {
-        type: Boolean,
-        reflectToAttribute: true,
-        computed: "_computeRTL(hass)",
-      },
     };
   }
 
@@ -196,36 +106,20 @@ export class HuiNotificationDrawer extends EventsMixin(
   }
 
   _openChanged(open) {
-    clearTimeout(this._openTimer);
     if (open) {
       // Render closed then animate open
-      this.hidden = false;
-      this._openTimer = setTimeout(() => {
-        this.classList.add("open");
-      }, 50);
       this._unsubNotifications = subscribeNotifications(
         this.hass.connection,
         (notifications) => {
           this._notificationsBackend = notifications;
         }
       );
-    } else {
+    } else if (this._unsubNotifications) {
-      // Animate closed then hide
+      this._unsubNotifications();
-      this.classList.remove("open");
+      this._unsubNotifications = undefined;
-      this._openTimer = setTimeout(() => {
-        this.hidden = true;
-      }, 250);
-      if (this._unsubNotifications) {
-        this._unsubNotifications();
-        this._unsubNotifications = undefined;
-      }
     }
   }
 
-  _computeRTL(hass) {
-    return computeRTL(hass);
-  }
-
   _computeNotifications(open, hass, notificationsBackend) {
     if (!open) {
       return [];
@@ -239,8 +133,11 @@ export class HuiNotificationDrawer extends EventsMixin(
   }
 
   showDialog({ narrow }) {
-    this.open = true;
+    this.style.setProperty(
-    this.narrow = narrow;
+      "--app-drawer-width",
+      narrow ? window.innerWidth + "px" : "500px"
+    );
+    this.$.drawer.open();
   }
 }
 customElements.define("notification-drawer", HuiNotificationDrawer);

src/panels/config/automation/ha-automation-picker.ts

@@ -26,7 +26,6 @@ import { HomeAssistant } from "../../../types";
 import { AutomationEntity } from "../../../data/automation";
 import format_date_time from "../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { repeat } from "lit-html/directives/repeat";
 
 @customElement("ha-automation-picker")
 class HaAutomationPicker extends LitElement {
@@ -74,9 +73,7 @@ class HaAutomationPicker extends LitElement {
                     </p>
                   </div>
                 `
-              : repeat(
+              : this.automations.map(
-                  this.automations,
-                  (automation) => automation.entity_id,
                   (automation) => html`
 
                       <div class='automation'>

src/panels/config/script/ha-script-picker.ts

@@ -25,7 +25,6 @@ import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { triggerScript } from "../../../data/script";
 import { showToast } from "../../../util/toast";
-import { repeat } from "lit-html/directives/repeat";
 
 @customElement("ha-script-picker")
 class HaScriptPicker extends LitElement {
@@ -57,9 +56,7 @@ class HaScriptPicker extends LitElement {
                     <p>We couldn't find any scripts.</p>
                   </div>
                 `
-              : repeat(
+              : this.scripts.map(
-                  this.scripts,
-                  (script) => script.entity_id,
                   (script) => html`
                     <div class="script">
                       <paper-icon-button

src/panels/config/zha/zha-device-card.ts

@@ -135,6 +135,14 @@ class ZHADeviceCard extends LitElement {
             <dd class="zha-info">${this.device!.ieee}</dd>
             <dt>Nwk:</dt>
             <dd class="zha-info">${formatAsPaddedHex(this.device!.nwk)}</dd>
+            <dt>LQI:</dt>
+            <dd class="zha-info">${this.device!.lqi || "Unknown"}</dd>
+            <dt>RSSI:</dt>
+            <dd class="zha-info">${this.device!.rssi || "Unknown"}</dd>
+            <dt>Last Seen:</dt>
+            <dd class="zha-info">${this.device!.last_seen || "Unknown"}</dd>
+            <dt>Power Source:</dt>
+            <dd class="zha-info">${this.device!.power_source || "Unknown"}</dd>
             ${
               this.device!.quirk_applied
                 ? html`
@@ -360,7 +368,7 @@ class ZHADeviceCard extends LitElement {
         dl dt {
           padding-left: 12px;
           float: left;
-          width: 50px;
+          width: 100px;
           text-align: left;
         }
         dt dd {

translations/fi.json

@@ -401,7 +401,7 @@
                         "alias": "Nimi",
                         "triggers": {
                             "header": "Laukaisuehdot",
-                            "introduction": "Laukaisuehdot määrittelevät, milloin automaatiota aletaan suorittaa. Samassa säännössä voi olla useita laukaisuehtoja. Kun laukaisuehto täyttyy, Home Assistant varmistaa ehdot. Jos ehdot täyttyvät, toiminto suoritetaan.\n\n[Lue lisää laukaisuehdoista (englanniksi).](https:\/\/home-assistant.io\/docs\/automation\/trigger\/)",
+                            "introduction": "Laukaisuehdot määrittelevät, milloin automaatiota aletaan suorittaa. Samassa säännössä voi olla useita laukaisuehtoja. Kun laukaisuehto täyttyy, Home Assistant varmistaa ehdot. Jos ehdot täyttyvät, toiminto suoritetaan.",
                             "add": "Laukaisuehto",
                             "duplicate": "Kopioi",
                             "delete": "Poista",
@@ -483,7 +483,7 @@
                         },
                         "conditions": {
                             "header": "Ehdot",
-                            "introduction": "Ehdot ovat vapaaehtoinen osa automaatiosääntöä. Niillä voidaan estää toimintoa tapahtumasta, vaikka se olisi laukaistu. Ehdot näyttävät hyvin samanlaisilta kuin laukaisimet, mutta ne ovat eri asia. Laukaisimen tehtävä on tarkkailla järjestelmän tapahtumia. Ehto kuitenkin katsoo systeemin tilaa vain ja ainoastaan yhdellä hetkellä. Laukaisin voi esimerkiksi huomata, jos jokin vipu käännetään päälle. Ehto voi nähdä vain onko vipu päällä vai pois päältä.\n\n[Lue lisää ehdoista (englanniksi).](https:\/\/home-assistant.io\/docs\/scripts\/conditions\/)",
+                            "introduction": "Ehdot ovat vapaaehtoinen osa automaatiosääntöä. Niillä voidaan estää toimintoa tapahtumasta, vaikka se olisi laukaistu. Ehdot näyttävät hyvin samanlaisilta kuin laukaisimet, mutta ne ovat eri asia. Laukaisimen tehtävä on tarkkailla järjestelmän tapahtumia. Ehto kuitenkin katsoo systeemin tilaa vain ja ainoastaan yhdellä hetkellä. Laukaisin voi esimerkiksi huomata, jos jokin vipu käännetään päälle. Ehto voi nähdä vain onko vipu päällä vai pois päältä.",
                             "add": "Lisää ehto",
                             "duplicate": "Kopioi",
                             "delete": "Poista",
@@ -529,7 +529,7 @@
                         },
                         "actions": {
                             "header": "Toiminnot",
-                            "introduction": "Home Assistant suorittaa toiminnot, kun automaatio laukaistaan.\n\n[Opi lisää toiminnoista (englanniksi).](https:\/\/home-assistant.io\/docs\/automation\/action\/)",
+                            "introduction": "Home Assistant suorittaa toiminnot, kun automaatio laukaistaan.",
                             "add": "Lisää toiminto",
                             "duplicate": "Kopioi",
                             "delete": "Poista",