From d7371ace6a7d9c511a8b4bf80f69c461f8b250c1 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Mon, 1 Jul 2019 10:35:10 -0700 Subject: [PATCH 1/5] Sidebar improvements (#3325) * Do not contract sidebar when undocking sidebar * Do not hide text until fully contracted * Cancel hover expanding on tablets * Open notifications on the left * Set property before opening * Fix check for support scroll if needed --- src/components/ha-sidebar.ts | 49 ++++++- .../notifications/notification-drawer.js | 129 ++---------------- 2 files changed, 56 insertions(+), 122 deletions(-) diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 3a9a1ed348..06f51a8235 100644 --- a/src/components/ha-sidebar.ts +++ b/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,10 +297,11 @@ class HaSidebar extends LitElement { protected updated(changedProps) { super.updated(changedProps); - if (changedProps.has("alwaysExpand")) { - this.expanded = this.alwaysExpand; + if (changedProps.has("alwaysExpand") && 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; @@ -299,8 +313,31 @@ class HaSidebar extends LitElement { } } + 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 +375,7 @@ class HaSidebar extends LitElement { contain: strict; transition-delay: 0.2s; } - :host([expanded]) { + :host([expandedwidth]) { width: 256px; } diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js index f86ce08a4e..b70ec0c496 100644 --- a/src/dialogs/notifications/notification-drawer.js +++ b/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` -
-
+
[[localize('ui.notification_drawer.title')]]
- +
-
+ `; } 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 { - // Animate closed then hide - this.classList.remove("open"); - this._openTimer = setTimeout(() => { - this.hidden = true; - }, 250); - if (this._unsubNotifications) { - this._unsubNotifications(); - this._unsubNotifications = undefined; - } + } else 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.narrow = narrow; + this.style.setProperty( + "--app-drawer-width", + narrow ? window.innerWidth + "px" : "500px" + ); + this.$.drawer.open(); } } customElements.define("notification-drawer", HuiNotificationDrawer); From deaccd6cd40d9aaf0cb3fa97492e379214b68649 Mon Sep 17 00:00:00 2001 From: "David F. Mulcahey" Date: Tue, 2 Jul 2019 13:13:59 -0400 Subject: [PATCH 2/5] Add info to ZHA device card (#3327) * add zha domain icon * update device card --- src/data/zha.ts | 3 +++ src/panels/config/zha/zha-device-card.ts | 10 +++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/data/zha.ts b/src/data/zha.ts index 105bd93503..9c10944f8b 100644 --- a/src/data/zha.ts +++ b/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; diff --git a/src/panels/config/zha/zha-device-card.ts b/src/panels/config/zha/zha-device-card.ts index cf32d49a1d..19d0e94b77 100644 --- a/src/panels/config/zha/zha-device-card.ts +++ b/src/panels/config/zha/zha-device-card.ts @@ -135,6 +135,14 @@ class ZHADeviceCard extends LitElement {
${this.device!.ieee}
Nwk:
${formatAsPaddedHex(this.device!.nwk)}
+
LQI:
+
${this.device!.lqi || "Unknown"}
+
RSSI:
+
${this.device!.rssi || "Unknown"}
+
Last Seen:
+
${this.device!.last_seen || "Unknown"}
+
Power Source:
+
${this.device!.power_source || "Unknown"}
${ 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 { From 6f77992387a8241fc4a1b5d7dac39f69173154b1 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Tue, 2 Jul 2019 10:31:48 -0700 Subject: [PATCH 3/5] Random fixes (#3328) * Fix scroll into view on first load * Do not crash when deleting script/automation * Disable swipe on notification drawer --- src/components/ha-sidebar.ts | 7 ++++--- src/dialogs/notifications/notification-drawer.js | 2 +- src/panels/config/automation/ha-automation-picker.ts | 5 +---- src/panels/config/script/ha-script-picker.ts | 5 +---- 4 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 06f51a8235..fddaa2b958 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -306,10 +306,11 @@ class HaSidebar extends LitElement { } const oldHass = changedProps.get("hass") as HomeAssistant | undefined; if (!oldHass || oldHass.panelUrl !== this.hass.panelUrl) { - this.shadowRoot!.querySelector( - ".iron-selected" + const selectedEl = this.shadowRoot!.querySelector(".iron-selected"); + if (selectedEl) { // @ts-ignore - )!.scrollIntoViewIfNeeded(); + selectedEl.scrollIntoViewIfNeeded(); + } } } diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js index b70ec0c496..0b1255a762 100644 --- a/src/dialogs/notifications/notification-drawer.js +++ b/src/dialogs/notifications/notification-drawer.js @@ -45,7 +45,7 @@ export class HuiNotificationDrawer extends EventsMixin( text-align: center; } - +
[[localize('ui.notification_drawer.title')]]
diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index b0ef0ba577..d8c6259bfb 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/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 {

` - : repeat( - this.automations, - (automation) => automation.entity_id, + : this.automations.map( (automation) => html`
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 570cc2faa1..bdba5f7621 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/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 {

We couldn't find any scripts.

` - : repeat( - this.scripts, - (script) => script.entity_id, + : this.scripts.map( (script) => html`
Date: Tue, 2 Jul 2019 10:32:40 -0700 Subject: [PATCH 4/5] Update translations --- translations/fi.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/translations/fi.json b/translations/fi.json index 882ea594b8..da0849ac5d 100644 --- a/translations/fi.json +++ b/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", From 317f43277e8b372a73af54a6f8ce5ca115554710 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Tue, 2 Jul 2019 10:32:43 -0700 Subject: [PATCH 5/5] Bumped version to 20190702.0 --- setup.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/setup.py b/setup.py index 32fae0f514..184ea304d9 100644 --- a/setup.py +++ b/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",