From 7b821aa363f7e06c5fb6529448b842b1285dc3ef Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Thu, 28 Mar 2019 00:05:07 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=95=B6=20convert=20hui-notification-item-?= =?UTF-8?q?template=20to=20TypeScript/LitElement=20(#3029)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 🕶 convert hui-notification-item-template to TypeScript/LitElement * address review comments --- .../hui-notification-item-template.js | 43 ------------- .../hui-notification-item-template.ts | 61 +++++++++++++++++++ 2 files changed, 61 insertions(+), 43 deletions(-) delete mode 100644 src/panels/lovelace/components/notifications/hui-notification-item-template.js create mode 100644 src/panels/lovelace/components/notifications/hui-notification-item-template.ts diff --git a/src/panels/lovelace/components/notifications/hui-notification-item-template.js b/src/panels/lovelace/components/notifications/hui-notification-item-template.js deleted file mode 100644 index a7b091849a..0000000000 --- a/src/panels/lovelace/components/notifications/hui-notification-item-template.js +++ /dev/null @@ -1,43 +0,0 @@ -import "@material/mwc-button"; -import "@polymer/paper-icon-button/paper-icon-button"; - -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -import "../../../../components/ha-card"; - -export class HuiNotificationItemTemplate extends PolymerElement { - static get template() { - return html` - - -
-
-
-
- `; - } -} -customElements.define( - "hui-notification-item-template", - HuiNotificationItemTemplate -); diff --git a/src/panels/lovelace/components/notifications/hui-notification-item-template.ts b/src/panels/lovelace/components/notifications/hui-notification-item-template.ts new file mode 100644 index 0000000000..5aa26648b7 --- /dev/null +++ b/src/panels/lovelace/components/notifications/hui-notification-item-template.ts @@ -0,0 +1,61 @@ +import { + html, + LitElement, + TemplateResult, + customElement, + css, + CSSResult, +} from "lit-element"; + +import "../../../../components/ha-card"; + +@customElement("hui-notification-item-template") +export class HuiNotificationItemTemplate extends LitElement { + protected render(): TemplateResult | void { + return html` + +
+
+
+
+ `; + } + + static get styles(): CSSResult { + return css` + .contents { + padding: 16px; + } + + ha-card .header { + /* start paper-font-headline style */ + font-family: "Roboto", "Noto", sans-serif; + -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */ + text-rendering: optimizeLegibility; + font-size: 24px; + font-weight: 400; + letter-spacing: -0.012em; + line-height: 32px; + /* end paper-font-headline style */ + + color: var(--primary-text-color); + padding: 16px 16px 0; + } + + .actions { + border-top: 1px solid #e8e8e8; + padding: 5px 16px; + } + + ::slotted(.primary) { + color: var(--primary-color); + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-notification-item-template": HuiNotificationItemTemplate; + } +}