-
-
+
diff --git a/src/components/ha-card.js b/src/components/ha-card.js
deleted file mode 100644
index 44e58f43e9..0000000000
--- a/src/components/ha-card.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import "@polymer/paper-styles/element-styles/paper-material-styles";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HaCard extends PolymerElement {
- static get template() {
- return html`
-
-
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- header: String,
- };
- }
-}
-
-customElements.define("ha-card", HaCard);
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
new file mode 100644
index 0000000000..917ec69f8d
--- /dev/null
+++ b/src/components/ha-card.ts
@@ -0,0 +1,45 @@
+import {
+ css,
+ CSSResult,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+
+class HaCard extends LitElement {
+ @property() public header?: string;
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ background: var(
+ --ha-card-background,
+ var(--paper-card-background-color, white)
+ );
+ border-radius: var(--ha-card-border-radius, 2px);
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+ color: var(--primary-text-color);
+ display: block;
+ transition: all 0.3s ease-out;
+ }
+ .header:not(:empty) {
+ font-size: 24px;
+ letter-spacing: -0.012em;
+ line-height: 32px;
+ opacity: 0.87;
+ padding: 24px 16px 16px;
+ }
+ `;
+ }
+
+ protected render(): TemplateResult {
+ return html`
+
+
+ `;
+ }
+}
+
+customElements.define("ha-card", HaCard);
diff --git a/src/components/ha-vacuum-state.js b/src/components/ha-vacuum-state.js
index fd8c9d7db7..5dc82224dd 100644
--- a/src/components/ha-vacuum-state.js
+++ b/src/components/ha-vacuum-state.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -38,21 +38,21 @@ class HaVacuumState extends LocalizeMixin(PolymerElement) {
static get template() {
return html`
-
[[_computeLabel(stateObj.state, _interceptable)]][[_computeLabel(stateObj.state, _interceptable)]]
`;
}
diff --git a/src/dialogs/ha-store-auth-card.js b/src/dialogs/ha-store-auth-card.js
index 2fb802650a..d63d805498 100644
--- a/src/dialogs/ha-store-auth-card.js
+++ b/src/dialogs/ha-store-auth-card.js
@@ -37,11 +37,11 @@ class HaStoreAuth extends LocalizeMixin(PolymerElement) {
[[localize('ui.auth_store.ask')]]
-
[[localize('ui.auth_store.decline')]][[localize('ui.auth_store.decline')]]
-
[[localize('ui.auth_store.confirm')]][[localize('ui.auth_store.confirm')]]
diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
index 5f1d186474..4628041974 100644
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
@@ -1,5 +1,5 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -27,15 +27,15 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
display: flex;
flex-direction: column;
}
- .pad paper-button {
+ .pad mwc-button {
width: 80px;
}
- .actions paper-button {
+ .actions mwc-button {
min-width: 160px;
margin-bottom: 16px;
color: var(--primary-color);
}
- paper-button.disarm {
+ mwc-button.disarm {
color: var(--google-red-500);
}
@@ -51,87 +51,87 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
-
33
-
66
-
99
-
[[localize('ui.card.alarm_control_panel.clear_code')]]
-
+
@@ -139,7 +139,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
-
[[localize('ui.card.alarm_control_panel.disarm')]]
-
+
-
[[localize('ui.card.alarm_control_panel.arm_home')]]
-
-
+
[[localize('ui.card.alarm_control_panel.arm_away')]]
-
+
`;
diff --git a/src/dialogs/more-info/controls/more-info-automation.js b/src/dialogs/more-info/controls/more-info-automation.js
index d65471f87d..9b06dc218c 100644
--- a/src/dialogs/more-info/controls/more-info-automation.js
+++ b/src/dialogs/more-info/controls/more-info-automation.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -10,7 +10,7 @@ class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
static get template() {
return html`
-
-
- `;
- }
-
- static get properties() {
- return {
- title: {
- type: String,
- value: "Home Assistant",
- },
-
- error: {
- type: String,
- value: "Oops! It looks like something went wrong.",
- },
- };
- }
-
- backTapped() {
- history.back();
- }
-}
-
-customElements.define("hass-error-screen", HassErrorScreen);
diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts
new file mode 100644
index 0000000000..ac382d2b37
--- /dev/null
+++ b/src/layouts/hass-error-screen.ts
@@ -0,0 +1,54 @@
+import {
+ LitElement,
+ CSSResultArray,
+ css,
+ TemplateResult,
+ html,
+ property,
+ customElement,
+} from "lit-element";
+import "@material/mwc-button";
+import "./hass-subpage";
+
+@customElement("hass-error-screen")
+class HassErrorScreen extends LitElement {
+ @property()
+ public error?: string;
+
+ protected render(): TemplateResult | void {
+ return html`
+
+
+
${this.error}
+
+ go back
+
+
+
+ `;
+ }
+
+ private _backTapped(): void {
+ history.back();
+ }
+
+ static get styles(): CSSResultArray {
+ return [
+ css`
+ .content {
+ height: calc(100% - 64px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hass-error-screen": HassErrorScreen;
+ }
+}
diff --git a/src/layouts/hass-loading-screen.js b/src/layouts/hass-loading-screen.js
deleted file mode 100644
index d97813833b..0000000000
--- a/src/layouts/hass-loading-screen.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-spinner/paper-spinner-lite";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../components/ha-menu-button";
-
-class HassLoadingScreen extends PolymerElement {
- static get template() {
- return html`
-
-
-
- `;
- }
-
- static get properties() {
- return {
- narrow: {
- type: Boolean,
- value: false,
- },
-
- showMenu: {
- type: Boolean,
- value: false,
- },
-
- title: {
- type: String,
- value: "",
- },
- };
- }
-}
-
-customElements.define("hass-loading-screen", HassLoadingScreen);
diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts
new file mode 100644
index 0000000000..6c96a88026
--- /dev/null
+++ b/src/layouts/hass-loading-screen.ts
@@ -0,0 +1,56 @@
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-spinner/paper-spinner-lite";
+import {
+ LitElement,
+ TemplateResult,
+ html,
+ property,
+ CSSResultArray,
+ css,
+ customElement,
+} from "lit-element";
+import "../components/ha-menu-button";
+import { haStyle } from "../resources/ha-style";
+
+@customElement("hass-loading-screen")
+class HassLoadingScreen extends LitElement {
+ @property({ type: Boolean })
+ public narrow?: boolean;
+
+ @property({ type: Boolean })
+ public showMenu?: boolean;
+
+ protected render(): TemplateResult | void {
+ return html`
+
+
+
+
+ `;
+ }
+
+ static get styles(): CSSResultArray {
+ return [
+ haStyle,
+ css`
+ .content {
+ height: calc(100% - 64px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hass-loading-screen": HassLoadingScreen;
+ }
+}
diff --git a/src/layouts/hass-subpage.js b/src/layouts/hass-subpage.js
deleted file mode 100644
index ef3ba4409e..0000000000
--- a/src/layouts/hass-subpage.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import "@polymer/app-layout/app-header-layout/app-header-layout";
-import "@polymer/app-layout/app-header/app-header";
-import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-icon-button/paper-icon-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-class HassSubpage extends PolymerElement {
- static get template() {
- return html`
-
-
-
-
-
- [[header]]
-
-
-
-
-
-
- `;
- }
-
- static get properties() {
- return {
- header: String,
- };
- }
-
- _backTapped() {
- history.back();
- }
-}
-
-customElements.define("hass-subpage", HassSubpage);
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
new file mode 100644
index 0000000000..25b4b5a794
--- /dev/null
+++ b/src/layouts/hass-subpage.ts
@@ -0,0 +1,52 @@
+import "@polymer/app-layout/app-header-layout/app-header-layout";
+import "@polymer/app-layout/app-header/app-header";
+import "@polymer/app-layout/app-toolbar/app-toolbar";
+import "@polymer/paper-icon-button/paper-icon-button";
+import {
+ LitElement,
+ property,
+ TemplateResult,
+ html,
+ customElement,
+ CSSResult,
+} from "lit-element";
+import { haStyle } from "../resources/ha-style";
+
+@customElement("hass-subpage")
+class HassSubpage extends LitElement {
+ @property()
+ public header?: string;
+
+ protected render(): TemplateResult | void {
+ return html`
+
+
+
+
+ ${this.header}
+
+
+
+
+
+
+ `;
+ }
+
+ private _backTapped(): void {
+ history.back();
+ }
+
+ static get styles(): CSSResult {
+ return haStyle;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hass-subpage": HassSubpage;
+ }
+}
diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts
index db43495ebb..3503c79a2c 100644
--- a/src/layouts/partial-panel-resolver.ts
+++ b/src/layouts/partial-panel-resolver.ts
@@ -1,6 +1,7 @@
import { LitElement, html, PropertyValues, property } from "lit-element";
import "./hass-loading-screen";
+import "./hass-error-screen";
import { HomeAssistant, Panel, PanelElement, Route } from "../types";
// Cache of panel loading promises.
@@ -122,11 +123,10 @@ class PartialPanelResolver extends LitElement {
if (this._error) {
return html`
+ >
`;
}
@@ -144,13 +144,6 @@ class PartialPanelResolver extends LitElement {
`;
}
- protected firstUpdated(changedProps: PropertyValues) {
- super.firstUpdated(changedProps);
- // Load it before it's needed, because it will be shown if user is offline
- // and a panel has to be loaded.
- import(/* webpackChunkName: "hass-error-screen" */ "./hass-error-screen");
- }
-
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (!this.hass) {
@@ -214,6 +207,7 @@ class PartialPanelResolver extends LitElement {
this._cache[panel.component_name] = this._panelEl;
}
+ this._error = false;
this._updatePanel();
},
(err) => {
diff --git a/src/onboarding/ha-onboarding.js b/src/onboarding/ha-onboarding.js
index ec9d8b2149..c2cd056a55 100644
--- a/src/onboarding/ha-onboarding.js
+++ b/src/onboarding/ha-onboarding.js
@@ -1,7 +1,7 @@
import "@polymer/polymer/lib/elements/dom-if";
import "@polymer/polymer/lib/elements/dom-repeat";
import "@polymer/paper-input/paper-input";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { localizeLiteMixin } from "../mixins/localize-lite-mixin";
@@ -64,9 +64,9 @@ class HaOnboarding extends localizeLiteMixin(PolymerElement) {
-
+
[[localize('ui.panel.page-onboarding.user.create_account')]]
-
+
Current entities
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
index 8311aec7ad..50fec942a5 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@@ -63,11 +63,9 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
const stateObj = this.hass.states[this._config.entity];
- if (!stateObj) {
- return 0;
- }
-
- return stateObj.attributes.code_format !== FORMAT_NUMBER ? 3 : 8;
+ return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER
+ ? 3
+ : 8;
}
public setConfig(config: Config): void {
@@ -130,12 +128,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
: ["disarm"]
).map((state) => {
return html`
- ${this._label(state)}${this._label(state)}
`;
})}
@@ -156,17 +150,17 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
${BUTTONS.map((value) => {
return value === ""
? html`
-
+
`
: html`
- ${value === "clear"
? this._label("clear_code")
- : value}
`;
})}
@@ -275,7 +269,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
margin: auto;
width: 300px;
}
- #keypad paper-button {
+ #keypad mwc-button {
margin-bottom: 5%;
width: 30%;
padding: calc(var(--base-unit));
@@ -289,11 +283,11 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
justify-content: center;
font-size: calc(var(--base-unit) * 1);
}
- .actions paper-button {
+ .actions mwc-button {
min-width: calc(var(--base-unit) * 9);
color: var(--primary-color);
}
- paper-button#disarm {
+ mwc-button#disarm {
color: var(--google-red-500);
}
`,
diff --git a/src/panels/lovelace/cards/hui-empty-state-card.ts b/src/panels/lovelace/cards/hui-empty-state-card.ts
index aedc6773da..3479d51db3 100644
--- a/src/panels/lovelace/cards/hui-empty-state-card.ts
+++ b/src/panels/lovelace/cards/hui-empty-state-card.ts
@@ -53,11 +53,11 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
@@ -71,7 +71,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
padding: 16px;
}
- paper-button {
+ mwc-button {
margin-left: -8px;
font-weight: 500;
color: var(--primary-color);
diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts
index a20e91cbf7..3ca969886c 100644
--- a/src/panels/lovelace/cards/hui-entity-button-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-button-card.ts
@@ -4,9 +4,12 @@ import {
PropertyDeclarations,
PropertyValues,
TemplateResult,
+ CSSResult,
+ css,
} from "lit-element";
import { HassEntity } from "home-assistant-js-websocket";
import { styleMap } from "lit-html/directives/style-map";
+import "@material/mwc-ripple";
import "../../../components/ha-card";
@@ -86,37 +89,33 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
}
const stateObj = this.hass.states[this._config.entity];
+ if (!stateObj) {
+ return html`
+
+ Entity not available: ${this._config.entity}
+
+ `;
+ }
+
return html`
- ${this.renderStyle()}
- ${!stateObj
- ? html`
-
- Entity not available: ${this._config.entity}
-
- `
- : html`
-
-
-
-
- ${this._config.name || computeStateName(stateObj)}
-
-
-
- `}
+
+
+ ${this._config.name || computeStateName(stateObj)}
+
+
`;
}
@@ -132,43 +131,36 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
}
}
- private renderStyle(): TemplateResult {
- return html`
-
+ static get styles(): CSSResult {
+ return css`
+ ha-card {
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 4% 0;
+ font-size: 1.2rem;
+ }
+ ha-icon {
+ width: 40%;
+ height: auto;
+ color: var(--paper-item-icon-color, #44739e);
+ }
+ ha-icon[data-domain="light"][data-state="on"],
+ ha-icon[data-domain="switch"][data-state="on"],
+ ha-icon[data-domain="binary_sensor"][data-state="on"],
+ ha-icon[data-domain="fan"][data-state="on"],
+ ha-icon[data-domain="sun"][data-state="above_horizon"] {
+ color: var(--paper-item-icon-active-color, #fdd835);
+ }
+ ha-icon[data-state="unavailable"] {
+ color: var(--state-icon-unavailable-color);
+ }
+ .not-found {
+ flex: 1;
+ background-color: yellow;
+ padding: 8px;
+ }
`;
}
diff --git a/src/panels/lovelace/cards/hui-sensor-card.ts b/src/panels/lovelace/cards/hui-sensor-card.ts
old mode 100755
new mode 100644
diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 52ed479310..374506ccd1 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -1,5 +1,5 @@
import { html, LitElement, PropertyDeclarations } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-menu-button/paper-menu-button";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-listbox/paper-listbox";
@@ -34,34 +34,37 @@ export class HuiCardOptions extends LitElement {
rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
display: flex;
}
+
div.options .primary-actions {
flex: 1;
margin: auto;
}
+
div.options .secondary-actions {
flex: 4;
text-align: right;
}
- paper-button {
- color: var(--primary-color);
- font-weight: 500;
- }
+
paper-icon-button {
color: var(--primary-text-color);
}
+
paper-icon-button.move-arrow[disabled] {
color: var(--disabled-text-color);
}
+
paper-menu-button {
color: var(--secondary-text-color);
padding: 0;
}
+
paper-item.header {
color: var(--primary-text-color);
text-transform: uppercase;
font-weight: 500;
font-size: 14px;
}
+
paper-item {
cursor: pointer;
}
@@ -69,10 +72,10 @@ export class HuiCardOptions extends LitElement {
-
${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.edit"
- )}
@@ -92,7 +95,11 @@ export class HuiCardOptions extends LitElement {
@click="${this._cardUp}"
?disabled="${this.path![1] === 0}"
>
-
+
${codeMirrorCSS}
.CodeMirror {
- height: var(--code-mirror-height, 300px);
+ height: var(--code-mirror-height, auto);
direction: var(--code-mirror-direction, ltr);
}
+ .CodeMirror-scroll {
+ max-height: var(--code-mirror-max-height, --code-mirror-height);
+ }
.CodeMirror-gutters {
border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
background-color: var(--paper-dialog-background-color, var(--primary-background-color));
@@ -46,7 +49,6 @@ export class HuiYamlEditor extends HTMLElement {
.CodeMirror-linenumber {
color: var(--paper-dialog-color, var(--primary-text-color));
}
-
.rtl .CodeMirror-vscrollbar {
right: auto;
left: 0px;
@@ -89,12 +91,7 @@ export class HuiYamlEditor extends HTMLElement {
mode: "yaml",
tabSize: 2,
autofocus: true,
- extraKeys: {
- Tab: (cm: CodeMirror) => {
- const spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
- cm.replaceSelection(spaces);
- },
- },
+ viewportMargin: Infinity,
gutters:
this._hass && computeRTL(this._hass!)
? ["rtl-gutter", "CodeMirror-linenumbers"]
diff --git a/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js b/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
index 0a480f4332..020a4b2821 100644
--- a/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
+++ b/src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-icon-button/paper-icon-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -23,8 +23,8 @@ export class HuiConfiguratorNotificationItem extends EventsMixin(
[[_getMessage(notification)]]
- [[_localizeState(notification.state)]][[_localizeState(notification.state)]]
`;
diff --git a/src/panels/lovelace/components/notifications/hui-notification-drawer.js b/src/panels/lovelace/components/notifications/hui-notification-drawer.js
index dc561fa06d..5b3aa7037b 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-drawer.js
+++ b/src/panels/lovelace/components/notifications/hui-notification-drawer.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/app-layout/app-toolbar/app-toolbar";
diff --git a/src/panels/lovelace/components/notifications/hui-notification-item-template.js b/src/panels/lovelace/components/notifications/hui-notification-item-template.js
index f949c9e749..a7b091849a 100644
--- a/src/panels/lovelace/components/notifications/hui-notification-item-template.js
+++ b/src/panels/lovelace/components/notifications/hui-notification-item-template.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-icon-button/paper-icon-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
diff --git a/src/panels/lovelace/components/notifications/hui-notifications-button.js b/src/panels/lovelace/components/notifications/hui-notifications-button.js
index ddd8cc8ad6..6ecf1ec920 100644
--- a/src/panels/lovelace/components/notifications/hui-notifications-button.js
+++ b/src/panels/lovelace/components/notifications/hui-notifications-button.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/app-layout/app-toolbar/app-toolbar";
diff --git a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js b/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
index b4db796b4c..d763ab3838 100644
--- a/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
+++ b/src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-tooltip/paper-tooltip";
@@ -49,8 +49,8 @@ export class HuiPersistentNotificationItem extends LocalizeMixin(
-
[[localize('ui.card.persistent_notification.dismiss')]][[localize('ui.card.persistent_notification.dismiss')]]
`;
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index cf6c230559..869a376f54 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -1,5 +1,5 @@
import { html, css, LitElement, TemplateResult, CSSResult } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { HomeAssistant } from "../../../../types";
import { LovelaceCardConfig } from "../../../../data/lovelace";
@@ -45,12 +45,9 @@ export class HuiCardPicker extends LitElement {
${cards.map((card) => {
return html`
-
${card.name}
+
+ ${card.name}
+
`;
})}
@@ -65,11 +62,13 @@ export class HuiCardPicker extends LitElement {
flex-wrap: wrap;
margin-bottom: 10px;
}
- .cards-container paper-button {
+ .cards-container mwc-button {
flex: 1 0 25%;
+ margin: 4px;
}
+
@media all and (max-width: 450px), all and (max-height: 500px) {
- .cards-container paper-button {
+ .cards-container mwc-button {
flex: 1 0 33%;
}
}
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
index fa1b628d39..ded2d651b8 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
@@ -41,7 +41,7 @@ export class HuiDialogPickCard extends LitElement {
>
`;
diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
index 1e08ff49dd..3c5d01278f 100644
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@@ -17,7 +17,7 @@ import "@polymer/paper-dialog/paper-dialog";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import { HomeAssistant } from "../../../../types";
import { LovelaceCardConfig } from "../../../../data/lovelace";
@@ -36,6 +36,7 @@ import { ConfigValue, ConfigError } from "../types";
import { EntityConfig } from "../../entity-rows/types";
import { getCardElementTag } from "../../common/get-card-element-tag";
import { addCard, replaceCard } from "../config-util";
+import { afterNextRender } from "../../../../common/util/render-status";
declare global {
interface HASSDomEvents {
@@ -160,7 +161,7 @@ export class HuiEditCard extends LitElement {
${!this._loading
? html`
`
: ""}
@@ -196,9 +197,10 @@ export class HuiEditCard extends LitElement {
this._loading = false;
this._resizeDialog();
if (!this._uiEditor) {
- setTimeout(() => {
+ afterNextRender(() => {
this.yamlEditor.codemirror.refresh();
- }, 1);
+ this._resizeDialog();
+ });
}
}
@@ -411,6 +413,10 @@ export class HuiEditCard extends LitElement {
return [
haStyleDialog,
css`
+ :host {
+ --code-mirror-max-height: calc(100vh - 176px);
+ }
+
@media all and (max-width: 450px), all and (max-height: 500px) {
/* overrule the ha-style-dialog max-height on small screens */
paper-dialog {
@@ -456,12 +462,14 @@ export class HuiEditCard extends LitElement {
.content {
flex-direction: row;
}
- .content .element-editor {
- flex: auto;
+ .content > * {
+ flex-basis: 0;
+ flex-grow: 1;
+ flex-shrink: 1;
+ min-width: 0;
}
.content hui-card-preview {
margin: 0 10px;
- flex: 490px;
max-width: 490px;
}
}
@@ -469,7 +477,7 @@ export class HuiEditCard extends LitElement {
.margin-bot {
margin-bottom: 24px;
}
- paper-button paper-spinner {
+ mwc-button paper-spinner {
width: 14px;
height: 14px;
margin-right: 20px;
diff --git a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
index d5a3dad07b..969a48f2e6 100644
--- a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
@@ -57,7 +57,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
return html``;
}
- const states = ["arm_home", "arm_away", "arm_night", "armed_custom_bypass"];
+ const states = ["arm_home", "arm_away", "arm_night", "arm_custom_bypass"];
return html`
${configElementStyle} ${this.renderStyle()}
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index f93662bb99..1b1f15c2df 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -12,7 +12,7 @@ import "@polymer/paper-dialog/paper-dialog";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { haStyleDialog } from "../../../resources/ha-style";
@@ -65,22 +65,19 @@ export class HuiSaveConfig extends LitElement {
@@ -133,7 +130,7 @@ export class HuiSaveConfig extends LitElement {
paper-spinner[active] {
display: block;
}
- paper-button paper-spinner {
+ mwc-button paper-spinner {
width: 14px;
height: 14px;
margin-right: 20px;
diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
index eb8d89deb4..8b743e13ea 100644
--- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
@@ -11,7 +11,7 @@ import "@polymer/paper-dialog/paper-dialog";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import { haStyleDialog } from "../../../../resources/ha-style";
@@ -67,10 +67,10 @@ export class HuiDialogEditLovelace extends LitElement {
>
@@ -147,7 +147,7 @@ export class HuiDialogEditLovelace extends LitElement {
paper-dialog {
max-width: 650px;
}
- paper-button paper-spinner {
+ mwc-button paper-spinner {
width: 14px;
height: 14px;
margin-right: 20px;
diff --git a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
index 767f86e88c..d95a5c4d12 100644
--- a/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-edit-view.ts
@@ -15,7 +15,7 @@ import "@polymer/paper-icon-button/paper-icon-button.js";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import { haStyleDialog } from "../../../../resources/ha-style";
@@ -144,10 +144,10 @@ export class HuiEditView extends LitElement {
>
`
: ""}
-
${this.hass!.localize("ui.common.cancel")}${this.hass!.localize("ui.common.cancel")}
-
@@ -155,7 +155,7 @@ export class HuiEditView extends LitElement {
?active="${this._saving}"
alt="Saving"
>
- ${this.hass!.localize("ui.common.save")}
@@ -288,7 +288,7 @@ export class HuiEditView extends LitElement {
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
- paper-button paper-spinner {
+ mwc-button paper-spinner {
width: 14px;
height: 14px;
margin-right: 20px;
diff --git a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
index 268458ef26..420185b4d8 100644
--- a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
@@ -47,11 +47,11 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
return html`
${this.renderStyle()}
-
+
${stateObj.state === "locked"
? this.hass!.localize("ui.card.lock.unlock")
: this.hass!.localize("ui.card.lock.lock")}
-
+
`;
}
@@ -59,7 +59,7 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
protected renderStyle(): TemplateResult {
return html`
diff --git a/src/state-summary/state-card-configurator.js b/src/state-summary/state-card-configurator.js
index 4b8449ff40..daacf85736 100644
--- a/src/state-summary/state-card-configurator.js
+++ b/src/state-summary/state-card-configurator.js
@@ -1,5 +1,5 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -15,7 +15,7 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
return html`