From e8d84e8ba50d1c6dafce18d26e7af2cb8df6257f Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Tue, 12 Feb 2019 00:33:57 -0600 Subject: [PATCH 1/8] Convert notification-button to Lit/TS and add badge --- package.json | 2 + .../notifications/hui-notifications-button.js | 68 ------------------- .../notifications/hui-notifications-button.ts | 57 ++++++++++++++++ src/panels/lovelace/hui-root.ts | 7 ++ yarn.lock | 11 +++ 5 files changed, 77 insertions(+), 68 deletions(-) delete mode 100644 src/panels/lovelace/components/notifications/hui-notifications-button.js create mode 100644 src/panels/lovelace/components/notifications/hui-notifications-button.ts diff --git a/package.json b/package.json index 4577c34aed..f986dc0baa 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,8 @@ "@polymer/iron-pages": "^3.0.1", "@polymer/iron-resizable-behavior": "^3.0.1", "@polymer/neon-animation": "^3.0.1", + "@polymer/paper-badge": "^3.0.1", + "@polymer/paper-button": "^3.0.1", "@polymer/paper-card": "^3.0.1", "@polymer/paper-checkbox": "^3.0.1", "@polymer/paper-dialog": "^3.0.1", diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.js b/src/panels/lovelace/components/notifications/hui-notifications-button.js deleted file mode 100644 index 6ecf1ec920..0000000000 --- a/src/panels/lovelace/components/notifications/hui-notifications-button.js +++ /dev/null @@ -1,68 +0,0 @@ -import "@material/mwc-button"; -import "@polymer/paper-icon-button/paper-icon-button"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; - -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -import EventsMixin from "../../../../mixins/events-mixin"; - -/* - * @appliesMixin EventsMixin - */ -export class HuiNotificationsButton extends EventsMixin(PolymerElement) { - static get template() { - return html` - - - - `; - } - - static get properties() { - return { - open: { - type: Boolean, - notify: true, - }, - notifications: { - type: Array, - value: [], - }, - }; - } - - _clicked() { - this.open = true; - } - - _hasNotifications(notifications) { - return notifications.length > 0; - } -} -customElements.define("hui-notifications-button", HuiNotificationsButton); diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.ts b/src/panels/lovelace/components/notifications/hui-notifications-button.ts new file mode 100644 index 0000000000..8bff5f3a21 --- /dev/null +++ b/src/panels/lovelace/components/notifications/hui-notifications-button.ts @@ -0,0 +1,57 @@ +import { + html, + LitElement, + TemplateResult, + css, + CSSResult, + property, +} from "lit-element"; +import "@polymer/paper-badge/paper-badge"; +import "@polymer/paper-icon-button/paper-icon-button"; +import { fireEvent } from "../../../../common/dom/fire_event"; + +class HuiNotificationsButton extends LitElement { + @property() public notifications?: string[]; + @property() public open?: boolean; + + protected render(): TemplateResult | void { + return html` + + ${this.notifications + ? html` + + ` + : ""} + `; + } + + static get styles(): CSSResult[] { + return [ + css` + :host { + position: relative; + } + paper-badge { + left: 23px !important; + top: 0px !important; + } + `, + ]; + } + + private _clicked() { + this.open = true; + fireEvent(this, "open-changed"); + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-notifications-button": HuiNotificationsButton; + } +} + +customElements.define("hui-notifications-button", HuiNotificationsButton); diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 25dadaebb3..86376918b0 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -57,6 +57,13 @@ const JS_CACHE = {}; let loadedUnusedEntities = false; +declare global { + // tslint:disable-next-line + interface HASSDomEvents { + "open-changed": {}; + } +} + class HUIRoot extends LitElement { public narrow?: boolean; public showMenu?: boolean; diff --git a/yarn.lock b/yarn.lock index 318b196f2c..4a19d56968 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1148,6 +1148,17 @@ "@polymer/iron-selector" "^3.0.0-pre.26" "@polymer/polymer" "^3.0.0" +"@polymer/paper-badge@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@polymer/paper-badge/-/paper-badge-3.0.1.tgz#ea973090342c66f99ea6ef1d32fc534ee40630e8" + integrity sha512-9lHB/AFPuDAY/+OPNio1Mi6JUAM8yQqzJEAkk99IwcCl9VB6uCjlrXVfistrYIv7z+Wy4SZHNEtA6xR1+FhCDg== + dependencies: + "@polymer/iron-flex-layout" "^3.0.0-pre.26" + "@polymer/iron-icon" "^3.0.0-pre.26" + "@polymer/iron-resizable-behavior" "^3.0.0-pre.26" + "@polymer/paper-styles" "^3.0.0-pre.26" + "@polymer/polymer" "^3.0.0" + "@polymer/paper-behaviors@^3.0.0-pre.27": version "3.0.1" resolved "https://registry.yarnpkg.com/@polymer/paper-behaviors/-/paper-behaviors-3.0.1.tgz#83f1cd06489f484c1b108a2967fb01952df722ad" From 08222dfbec49100834b597755e9dfea0045efea7 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Tue, 12 Feb 2019 17:30:50 -0600 Subject: [PATCH 2/8] review comments --- .../components/notifications/hui-notifications-button.ts | 6 +++--- src/panels/lovelace/hui-root.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.ts b/src/panels/lovelace/components/notifications/hui-notifications-button.ts index 8bff5f3a21..3eb69a243a 100644 --- a/src/panels/lovelace/components/notifications/hui-notifications-button.ts +++ b/src/panels/lovelace/components/notifications/hui-notifications-button.ts @@ -12,7 +12,7 @@ import { fireEvent } from "../../../../common/dom/fire_event"; class HuiNotificationsButton extends LitElement { @property() public notifications?: string[]; - @property() public open?: boolean; + @property() public opened?: boolean; protected render(): TemplateResult | void { return html` @@ -43,8 +43,8 @@ class HuiNotificationsButton extends LitElement { } private _clicked() { - this.open = true; - fireEvent(this, "open-changed"); + this.opened = true; + fireEvent(this, "opened", { value: this.opened }); } } diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 86376918b0..6d198621ef 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -60,7 +60,7 @@ let loadedUnusedEntities = false; declare global { // tslint:disable-next-line interface HASSDomEvents { - "open-changed": {}; + opened: {}; } } @@ -193,8 +193,8 @@ class HUIRoot extends LitElement {
${this.config.title || "Home Assistant"}
Date: Wed, 13 Feb 2019 00:01:07 -0600 Subject: [PATCH 3/8] address review comments --- .../components/notifications/hui-notifications-button.ts | 2 +- src/panels/lovelace/hui-root.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.ts b/src/panels/lovelace/components/notifications/hui-notifications-button.ts index 3eb69a243a..169c1cc4c1 100644 --- a/src/panels/lovelace/components/notifications/hui-notifications-button.ts +++ b/src/panels/lovelace/components/notifications/hui-notifications-button.ts @@ -22,7 +22,7 @@ class HuiNotificationsButton extends LitElement { > ${this.notifications ? html` - + ` : ""} `; diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 6d198621ef..f5398d139c 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -60,7 +60,7 @@ let loadedUnusedEntities = false; declare global { // tslint:disable-next-line interface HASSDomEvents { - opened: {}; + opened: { value: boolean }; } } From 56c1920cc167b3c15d7ca734e52676571ab7f98d Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Thu, 14 Feb 2019 23:16:09 -0600 Subject: [PATCH 4/8] css is dumb --- package.json | 1 - .../notifications/hui-notifications-button.ts | 26 +++++++++++++++---- yarn.lock | 11 -------- 3 files changed, 21 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index f986dc0baa..29f016bb22 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,6 @@ "@polymer/iron-pages": "^3.0.1", "@polymer/iron-resizable-behavior": "^3.0.1", "@polymer/neon-animation": "^3.0.1", - "@polymer/paper-badge": "^3.0.1", "@polymer/paper-button": "^3.0.1", "@polymer/paper-card": "^3.0.1", "@polymer/paper-checkbox": "^3.0.1", diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.ts b/src/panels/lovelace/components/notifications/hui-notifications-button.ts index 169c1cc4c1..8d72ef1623 100644 --- a/src/panels/lovelace/components/notifications/hui-notifications-button.ts +++ b/src/panels/lovelace/components/notifications/hui-notifications-button.ts @@ -6,7 +6,6 @@ import { CSSResult, property, } from "lit-element"; -import "@polymer/paper-badge/paper-badge"; import "@polymer/paper-icon-button/paper-icon-button"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -22,7 +21,9 @@ class HuiNotificationsButton extends LitElement { > ${this.notifications ? html` - + +
${this.notifications.length}
+ ` : ""} `; @@ -34,9 +35,24 @@ class HuiNotificationsButton extends LitElement { :host { position: relative; } - paper-badge { - left: 23px !important; - top: 0px !important; + + .indicator { + position: absolute; + top: 0px; + right: -3px; + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--accent-color); + pointer-events: none; + z-index: 1; + } + + .indicator > div { + right: 7px; + top: 3px; + position: absolute; + font-size: 0.55em; } `, ]; diff --git a/yarn.lock b/yarn.lock index 4a19d56968..318b196f2c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1148,17 +1148,6 @@ "@polymer/iron-selector" "^3.0.0-pre.26" "@polymer/polymer" "^3.0.0" -"@polymer/paper-badge@^3.0.1": - version "3.0.1" - resolved "https://registry.yarnpkg.com/@polymer/paper-badge/-/paper-badge-3.0.1.tgz#ea973090342c66f99ea6ef1d32fc534ee40630e8" - integrity sha512-9lHB/AFPuDAY/+OPNio1Mi6JUAM8yQqzJEAkk99IwcCl9VB6uCjlrXVfistrYIv7z+Wy4SZHNEtA6xR1+FhCDg== - dependencies: - "@polymer/iron-flex-layout" "^3.0.0-pre.26" - "@polymer/iron-icon" "^3.0.0-pre.26" - "@polymer/iron-resizable-behavior" "^3.0.0-pre.26" - "@polymer/paper-styles" "^3.0.0-pre.26" - "@polymer/polymer" "^3.0.0" - "@polymer/paper-behaviors@^3.0.0-pre.27": version "3.0.1" resolved "https://registry.yarnpkg.com/@polymer/paper-behaviors/-/paper-behaviors-3.0.1.tgz#83f1cd06489f484c1b108a2967fb01952df722ad" From 34f36c617992f250e78915791dc4e96ddd4a7af1 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Fri, 15 Feb 2019 08:49:48 -0800 Subject: [PATCH 5/8] Update package.json --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 29f016bb22..4577c34aed 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,6 @@ "@polymer/iron-pages": "^3.0.1", "@polymer/iron-resizable-behavior": "^3.0.1", "@polymer/neon-animation": "^3.0.1", - "@polymer/paper-button": "^3.0.1", "@polymer/paper-card": "^3.0.1", "@polymer/paper-checkbox": "^3.0.1", "@polymer/paper-dialog": "^3.0.1", From bdaf96b1146811b2b9311d036e84850585038222 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Sat, 16 Feb 2019 13:31:41 -0600 Subject: [PATCH 6/8] address review comments --- .../components/notifications/hui-notifications-button.ts | 2 +- src/panels/lovelace/hui-root.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.ts b/src/panels/lovelace/components/notifications/hui-notifications-button.ts index 8d72ef1623..f58f3425aa 100644 --- a/src/panels/lovelace/components/notifications/hui-notifications-button.ts +++ b/src/panels/lovelace/components/notifications/hui-notifications-button.ts @@ -60,7 +60,7 @@ class HuiNotificationsButton extends LitElement { private _clicked() { this.opened = true; - fireEvent(this, "opened", { value: this.opened }); + fireEvent(this, "opened-changed", { value: this.opened }); } } diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index f5398d139c..718d34a176 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -194,7 +194,7 @@ class HUIRoot extends LitElement { Date: Sat, 16 Feb 2019 13:57:39 -0600 Subject: [PATCH 7/8] lint --- src/panels/lovelace/hui-root.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 718d34a176..a7da02aca9 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -60,7 +60,7 @@ let loadedUnusedEntities = false; declare global { // tslint:disable-next-line interface HASSDomEvents { - opened: { value: boolean }; + "opened-changed": { value: boolean }; } } From 5e6b28d965c2b6444095297a1d99df823782edbb Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Sun, 17 Feb 2019 22:17:45 -0600 Subject: [PATCH 8/8] address review comments --- .../components/notifications/hui-notifications-button.ts | 9 ++++++++- src/panels/lovelace/hui-root.ts | 7 ------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.ts b/src/panels/lovelace/components/notifications/hui-notifications-button.ts index f58f3425aa..c56d2931a1 100644 --- a/src/panels/lovelace/components/notifications/hui-notifications-button.ts +++ b/src/panels/lovelace/components/notifications/hui-notifications-button.ts @@ -9,6 +9,13 @@ import { import "@polymer/paper-icon-button/paper-icon-button"; import { fireEvent } from "../../../../common/dom/fire_event"; +declare global { + // tslint:disable-next-line + interface HASSDomEvents { + "opened-changed": { value: boolean }; + } +} + class HuiNotificationsButton extends LitElement { @property() public notifications?: string[]; @property() public opened?: boolean; @@ -19,7 +26,7 @@ class HuiNotificationsButton extends LitElement { icon="hass:bell" @click="${this._clicked}" > - ${this.notifications + ${this.notifications && this.notifications.length > 0 ? html`
${this.notifications.length}
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index a7da02aca9..e2973b7573 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -57,13 +57,6 @@ const JS_CACHE = {}; let loadedUnusedEntities = false; -declare global { - // tslint:disable-next-line - interface HASSDomEvents { - "opened-changed": { value: boolean }; - } -} - class HUIRoot extends LitElement { public narrow?: boolean; public showMenu?: boolean;