jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 14:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Way to dismiss

Browse Source
This commit is contained in:
Zack 2022-02-21 20:47:41 -06:00
parent 7d9a60973c
commit 1c4f6dc3f1
1 changed files with 44 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/ha-newsletter.ts
View File

@ -1,11 +1,14 @@
import "./ha-icon-button";
import "./ha-circular-progress"; import "./ha-circular-progress";
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "./ha-card"; import "./ha-card";
import "./ha-textfield"; import "./ha-textfield";
import { LitElement, TemplateResult, html, CSSResultGroup, css } from "lit"; import { LitElement, TemplateResult, html, CSSResultGroup, css } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { mdiClose } from "@mdi/js";
import type { HaTextField } from "./ha-textfield"; import type { HaTextField } from "./ha-textfield";
import { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
import { LocalStorage } from "../common/decorators/local-storage";
@customElement("ha-newsletter") @customElement("ha-newsletter")
class HaNewsletter extends LitElement { class HaNewsletter extends LitElement {
@ -14,11 +17,26 @@ class HaNewsletter extends LitElement {
@query("ha-textfield") @query("ha-textfield")
private _emailField?: HaTextField; private _emailField?: HaTextField;
@LocalStorage("dismissNewsletter", true)
private _dismissNewsletter = false;
private _requestStatus?: "inprogress" | "complete"; private _requestStatus?: "inprogress" | "complete";
protected render(): TemplateResult { protected render(): TemplateResult {
if (this._dismissNewsletter) {
return html``;
}
return html` return html`
<ha-card .header=${this.hass.localize("ui.newsletter.newsletter")}> <ha-card>
<div class="header">
${this.hass.localize("ui.newsletter.newsletter")}
<ha-icon-button
.path=${mdiClose}
label="Dismiss"
@click=${this._dismiss}
></ha-icon-button>
</div>
<div class="newsletter"> <div class="newsletter">
${this._requestStatus === "complete" ${this._requestStatus === "complete"
? html`<span>${this.hass.localize("ui.newsletter.thanks")}</span>` ? html`<span>${this.hass.localize("ui.newsletter.thanks")}</span>`
@ -66,6 +84,7 @@ class HaNewsletter extends LitElement {
) )
.then(() => { .then(() => {
this._requestStatus = "complete"; this._requestStatus = "complete";
setTimeout(this._dismiss, 2000);
}) })
.catch((err) => { .catch((err) => {
this._requestStatus = undefined; this._requestStatus = undefined;
@ -74,6 +93,10 @@ class HaNewsletter extends LitElement {
}); });
} }
private _dismiss(): void {
this._dismissNewsletter = true;
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
.newsletter { .newsletter {
@ -82,6 +105,21 @@ class HaNewsletter extends LitElement {
padding: 0 16px 16px; padding: 0 16px 16px;
} }
.header {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--ha-card-header-color, --primary-text-color);
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
letter-spacing: -0.012em;
line-height: 48px;
padding: 12px 16px 16px;
margin-block-start: 0px;
margin-block-end: 0px;
font-weight: normal;
}
ha-textfield { ha-textfield {
flex: 1; flex: 1;
display: block; display: block;
@ -91,6 +129,10 @@ class HaNewsletter extends LitElement {
mwc-button { mwc-button {
padding-top: 12px; padding-top: 12px;
} }
ha-icon-button {
cursor: pointer;
}
`; `;
} }
} }