From 732237d4e17add5c7ec82580449035bd0a057e66 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Mon, 14 Jan 2019 19:32:57 -0800 Subject: [PATCH] Use static get styles to embed ha-style (#2479) * Use static get styles * Fix errors --- .../cloud/cloud-webhook-manage-dialog.ts | 25 ++- src/panels/lovelace/hui-editor.ts | 25 +-- src/panels/lovelace/hui-root.ts | 25 +-- src/resources/{ha-style.js => ha-style.ts} | 188 +++++++++--------- 4 files changed, 129 insertions(+), 134 deletions(-) rename src/resources/{ha-style.js => ha-style.ts} (71%) diff --git a/src/panels/config/cloud/cloud-webhook-manage-dialog.ts b/src/panels/config/cloud/cloud-webhook-manage-dialog.ts index 2614db408b..9b6baa4309 100644 --- a/src/panels/config/cloud/cloud-webhook-manage-dialog.ts +++ b/src/panels/config/cloud/cloud-webhook-manage-dialog.ts @@ -1,4 +1,10 @@ -import { html, LitElement, PropertyDeclarations } from "lit-element"; +import { + html, + LitElement, + PropertyDeclarations, + css, + CSSResult, +} from "lit-element"; import "@polymer/paper-button/paper-button"; import "@polymer/paper-input/paper-input"; @@ -10,10 +16,9 @@ import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog"; // tslint:disable-next-line import { PaperInputElement } from "@polymer/paper-input/paper-input"; -import { buttonLink } from "../../../resources/ha-style"; - import { HomeAssistant } from "../../../types"; import { WebhookDialogParams } from "./types"; +import { haStyle } from "../../../resources/ha-style"; const inputLabel = "Public URL – Click to copy to clipboard"; @@ -44,7 +49,6 @@ export class CloudWebhookManageDialog extends LitElement { ? "https://www.home-assistant.io/docs/automation/trigger/#webhook-trigger" : `https://www.home-assistant.io/components/${webhook.domain}/`; return html` - ${this._renderStyle()}

Webhook for ${webhook.name}

@@ -112,24 +116,25 @@ export class CloudWebhookManageDialog extends LitElement { this._paperInput.label = inputLabel; } - private _renderStyle() { - return html` - - `; + `, + ]; } } diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index 9395a8413f..aff267d636 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -1,4 +1,4 @@ -import { LitElement, html, TemplateResult } from "lit-element"; +import { LitElement, html, TemplateResult, CSSResult, css } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; import yaml from "js-yaml"; @@ -14,6 +14,7 @@ import { Lovelace } from "./types"; import { hassLocalizeLitMixin } from "../../mixins/lit-localize-mixin"; import "../../components/ha-icon"; +import { haStyle } from "../../resources/ha-style"; const TAB_INSERT = " "; @@ -26,7 +27,6 @@ const lovelaceStruct = struct.interface({ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) { public lovelace?: Lovelace; public closeEditor?: () => void; - private _haStyle?: DocumentFragment; private _saving?: boolean; private _changed?: boolean; private _hashAdded?: boolean; @@ -44,7 +44,6 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) { public render(): TemplateResult | void { return html` - ${this.renderStyle()} @@ -115,18 +114,10 @@ class LovelaceFullConfigEditor extends hassLocalizeLitMixin(LitElement) { }); } - protected renderStyle() { - if (!this._haStyle) { - this._haStyle = document.importNode( - (document.getElementById("ha-style")! - .children[0] as HTMLTemplateElement).content, - true - ); - } - - return html` - ${this._haStyle} - - `; + `, + ]; } private _closeEditor() { diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 5fa119540f..b4af107248 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -4,6 +4,8 @@ import { PropertyDeclarations, PropertyValues, TemplateResult, + CSSResult, + css, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; import "@polymer/app-layout/app-header-layout/app-header-layout"; @@ -45,6 +47,7 @@ import { showEditViewDialog } from "./editor/view-editor/show-edit-view-dialog"; import { showEditLovelaceDialog } from "./editor/lovelace-editor/show-edit-lovelace-dialog"; import { Lovelace } from "./types"; import { afterNextRender } from "../../common/util/render-status"; +import { haStyle } from "../../resources/ha-style"; // CSS and JS should only be imported once. Modules and HTML are safe. const CSS_CACHE = {}; @@ -63,7 +66,6 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) { private _curView?: number | "hass-unused-entities"; private _notificationsOpen: boolean; private _persistentNotifications?: Notification[]; - private _haStyle?: DocumentFragment; private _viewCache?: { [viewId: string]: HUIView }; private _debouncedConfigChanged: () => void; @@ -114,7 +116,6 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) { protected render(): TemplateResult | void { return html` - ${this.renderStyle()} @@ -296,18 +297,10 @@ class HUIRoot extends hassLocalizeLitMixin(LitElement) { `; } - protected renderStyle(): TemplateResult { - if (!this._haStyle) { - this._haStyle = document.importNode( - (document.getElementById("ha-style")! - .children[0] as HTMLTemplateElement).content, - true - ); - } - - return html` - ${this._haStyle} - - `; + `, + ]; } protected updated(changedProperties: PropertyValues): void { diff --git a/src/resources/ha-style.js b/src/resources/ha-style.ts similarity index 71% rename from src/resources/ha-style.js rename to src/resources/ha-style.ts index b645210773..cb4f736abb 100644 --- a/src/resources/ha-style.js +++ b/src/resources/ha-style.ts @@ -1,7 +1,33 @@ import "@polymer/paper-styles/paper-styles"; import "@polymer/polymer/polymer-legacy"; +import { css } from "lit-element"; + +export const haStyle = css` + :host { + @apply --paper-font-body1; + } + + app-header-layout, + ha-app-layout { + background-color: var(--primary-background-color); + } + + app-header, + app-toolbar { + background-color: var(--primary-color); + font-weight: 400; + color: var(--text-primary-color, white); + } + + app-toolbar ha-menu-button + [main-title], + app-toolbar paper-icon-button + [main-title] { + margin-left: 24px; + } + + h1 { + @apply --paper-font-title; + } -export const buttonLink = ` button.link { background: none; color: inherit; @@ -12,6 +38,74 @@ export const buttonLink = ` text-decoration: underline; cursor: pointer; } + + .card-actions a { + text-decoration: none; + } + + .card-actions paper-button:not([disabled]), + .card-actions ha-progress-button:not([disabled]), + .card-actions ha-call-api-button:not([disabled]), + .card-actions ha-call-service-button:not([disabled]) { + color: var(--primary-color); + font-weight: 500; + } + + .card-actions paper-button.warning:not([disabled]), + .card-actions ha-call-api-button.warning:not([disabled]), + .card-actions ha-call-service-button.warning:not([disabled]) { + color: var(--google-red-500); + } + + .card-actions paper-button[primary] { + background-color: var(--primary-color); + color: var(--text-primary-color); + } +`; + +export const haStyleDialog = css` + :host { + --ha-dialog-narrow: { + margin: 0; + width: 100% !important; + max-height: calc(100% - 64px); + + position: fixed !important; + bottom: 0px; + left: 0px; + right: 0px; + overflow: scroll; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + } + + --ha-dialog-fullscreen: { + width: 100% !important; + border-radius: 0px; + position: fixed !important; + margin: 0; + } + } + + /* prevent clipping of positioned elements */ + paper-dialog-scrollable { + --paper-dialog-scrollable: { + -webkit-overflow-scrolling: auto; + } + } + + /* force smooth scrolling for iOS 10 */ + paper-dialog-scrollable.can-scroll { + --paper-dialog-scrollable: { + -webkit-overflow-scrolling: touch; + } + } + + @media all and (max-width: 450px), all and (max-height: 500px) { + paper-dialog { + @apply (--ha-dialog-narrow); + } + } `; const documentContainer = document.createElement("template"); @@ -152,101 +246,13 @@ documentContainer.innerHTML = ` `;