jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-20 15:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

🕶 convert hui-notification-item-template to TypeScript/LitElement (#3029)

Browse Source 
* 🕶 convert hui-notification-item-template to TypeScript/LitElement

* address review comments
This commit is contained in:
Ian Richardson 2019-03-28 00:05:07 -05:00 committed by Paulus Schoutsen
parent 22e5792a8f
commit 7b821aa363
2 changed files with 61 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/panels/lovelace/components/notifications/hui-notification-item-template.js
View File

@ -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`
<style>
.contents {
padding: 16px;
}
ha-card .header {
@apply --paper-font-headline;
color: var(--primary-text-color);
padding: 16px 16px 0;
}
.actions {
border-top: 1px solid #e8e8e8;
padding: 5px 16px;
}
::slotted(.primary) {
color: var(--primary-color);
}
</style>
<ha-card>
<div class="header"><slot name="header"></slot></div>
<div class="contents"><slot></slot></div>
<div class="actions"><slot name="actions"></slot></div>
</ha-card>
`;
}
}
customElements.define(
"hui-notification-item-template",
HuiNotificationItemTemplate
);

61
src/panels/lovelace/components/notifications/hui-notification-item-template.ts Normal file
View File

@ -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`
<ha-card>
<div class="header"><slot name="header"></slot></div>
<div class="contents"><slot></slot></div>
<div class="actions"><slot name="actions"></slot></div>
</ha-card>
`;
}
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;
}
}