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

Merge pull request #2747 from home-assistant/dev

Browse Source 
20190213.0
This commit is contained in:
Paulus Schoutsen 2019-02-13 15:13:04 -08:00 committed by GitHub
commit f9663143a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
122 changed files with 1408 additions and 899 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.vscode/extensions.json vendored
View File

@ -1,8 +1,9 @@
{
"recommendations": [
"dbaeumer.vscode-eslint",
"eg2.tslint",
"esbenp.prettier-vscode",
"bierner.lit-html"
]
"recommendations": [
"dbaeumer.vscode-eslint",
"eg2.tslint",
"esbenp.prettier-vscode",
"bierner.lit-html",
"runem.lit-plugin"
]
}

11
demo/src/custom-cards/ha-demo-card.ts
View File

@ -7,7 +7,7 @@ import {
} from "lit-element";
import { until } from "lit-html/directives/until";
import "@polymer/paper-icon-button";
import "@polymer/paper-button";
import "@material/mwc-button";
import "@polymer/paper-spinner/paper-spinner-lite";
import "../../../src/components/ha-card";
import { LovelaceCard, Lovelace } from "../../../src/panels/lovelace/types";
@ -85,7 +85,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
</div>
<div class="actions">
<a href="https://www.home-assistant.io" target="_blank">
<paper-button>Learn more about Home Assistant</paper-button>
<mwc-button>Learn more about Home Assistant</mwc-button>
</a>
</div>
</ha-card>
@ -146,12 +146,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
}
.actions {
padding-left: 5px;
}
.actions paper-button {
color: var(--primary-color);
font-weight: 500;
padding-left: 8px;
}
`,
];

11
gallery/src/demos/demo-util-long-press.ts
View File

@ -1,5 +1,5 @@
import { html, LitElement, TemplateResult } from "lit-element";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "../../../src/components/ha-card";
import { longPress } from "../../../src/panels/lovelace/common/directives/long-press-directive";
@ -11,13 +11,13 @@ export class DemoUtilLongPress extends LitElement {
${[1, 2, 3].map(
() => html`
<ha-card>
<paper-button
<mwc-button
@ha-click="${this._handleTap}"
@ha-hold="${this._handleHold}"
.longPress="${longPress()}"
>
(long) press me!
</paper-button>
</mwc-button>
<textarea></textarea>
@ -60,11 +60,6 @@ export class DemoUtilLongPress extends LitElement {
margin-bottom: 16px;
}
paper-button {
font-weight: bold;
color: var(--primary-color);
}
textarea {
height: 50px;
}

4
hassio/src/addon-view/hassio-addon-audio.js
View File

@ -1,6 +1,6 @@
import "web-animations-js/web-animations-next-lite.min";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
@ -65,7 +65,7 @@ class HassioAddonAudio extends EventsMixin(PolymerElement) {
</paper-dropdown-menu>
</div>
<div class="card-actions">
<paper-button on-click="_saveSettings">Save</paper-button>
<mwc-button on-click="_saveSettings">Save</mwc-button>
</div>
</paper-card>
`;

6
hassio/src/addon-view/hassio-addon-config.js
View File

@ -1,5 +1,5 @@
import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -50,8 +50,8 @@ class HassioAddonConfig extends PolymerElement {
data="[[resetData]]"
>Reset to defaults</ha-call-api-button
>
<paper-button on-click="saveTapped" disabled="[[!configParsed]]"
>Save</paper-button
<mwc-button on-click="saveTapped" disabled="[[!configParsed]]"
>Save</mwc-button
>
</div>
</paper-card>

16
hassio/src/addon-view/hassio-addon-info.js
View File

@ -1,5 +1,5 @@
import "@polymer/iron-icon/iron-icon";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-toggle-button/paper-toggle-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -77,7 +77,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
color: white;
--paper-card-header-color: white;
}
paper-card.warning paper-button {
paper-card.warning mwc-button {
color: white !important;
}
.warning {
@ -169,7 +169,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
>Update</ha-call-api-button
>
<template is="dom-if" if="[[addon.changelog]]">
<paper-button on-click="openChangelog">Changelog</paper-button>
<mwc-button on-click="openChangelog">Changelog</mwc-button>
</template>
</div>
</paper-card>
@ -219,7 +219,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
Protection mode on this addon is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this addon.
</div>
<div class="card-actions">
<paper-button on-click="protectionToggled">Enable Protection mode</paper-button>
<mwc-button on-click="protectionToggled">Enable Protection mode</mwc-button>
</div>
</div>
</paper-card>
@ -250,7 +250,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
<ha-label-badge
on-click="showMoreInfo"
id="full_access"
icon="hassio:chip"
icon="hassio:chip"
label="hardware"
description=""
></ha-label-badge>
@ -337,8 +337,8 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
</div>
<div class="card-actions">
<template is="dom-if" if="[[addon.version]]">
<paper-button class="warning" on-click="_unistallClicked"
>Uninstall</paper-button
<mwc-button class="warning" on-click="_unistallClicked"
>Uninstall</mwc-button
>
<template is="dom-if" if="[[addon.build]]">
<ha-call-api-button
@ -378,7 +378,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
tabindex="-1"
target="_blank"
class="right"
><paper-button>Open web UI</paper-button></a
><mwc-button>Open web UI</mwc-button></a
>
</template>
</template>

4
hassio/src/addon-view/hassio-addon-logs.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -24,7 +24,7 @@ class HassioAddonLogs extends PolymerElement {
<paper-card heading="Log">
<div class="card-content" id="content"></div>
<div class="card-actions">
<paper-button on-click="refresh">Refresh</paper-button>
<mwc-button on-click="refresh">Refresh</mwc-button>
</div>
</paper-card>
`;

2
hassio/src/addon-view/hassio-addon-network.js
View File

@ -60,7 +60,7 @@ class HassioAddonNetwork extends EventsMixin(PolymerElement) {
data="[[resetData]]"
>Reset to defaults</ha-call-api-button
>
<paper-button on-click="saveTapped">Save</paper-button>
<mwc-button on-click="saveTapped">Save</mwc-button>
</div>
</paper-card>
`;

4
hassio/src/dashboard/hassio-hass-update.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -56,7 +56,7 @@ class HassioHassUpdate extends PolymerElement {
<a
href="https://github.com/home-assistant/home-assistant/releases"
target="_blank"
><paper-button>Release notes</paper-button></a
><mwc-button>Release notes</mwc-button></a
>
</div>
</paper-card>

10
hassio/src/snapshots/hassio-snapshot.js
View File

@ -1,5 +1,5 @@
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-dialog/paper-dialog";
@ -123,12 +123,12 @@ class HassioSnapshot extends PolymerElement {
class="download"
title="Download snapshot"
></paper-icon-button>
<paper-button on-click="_partialRestoreClicked"
>Restore selected</paper-button
<mwc-button on-click="_partialRestoreClicked"
>Restore selected</mwc-button
>
<template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">
<paper-button on-click="_fullRestoreClicked"
>Wipe &amp; restore</paper-button
<mwc-button on-click="_fullRestoreClicked"
>Wipe &amp; restore</mwc-button
>
</template>
</div>

6
hassio/src/snapshots/hassio-snapshots.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-input/paper-input";
@ -90,10 +90,10 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
</template>
</div>
<div class="card-actions">
<paper-button
<mwc-button
disabled="[[creatingSnapshot]]"
on-click="_createSnapshot"
>Create</paper-button
>Create</mwc-button
>
</div>
</paper-card>

12
hassio/src/system/hassio-host-info.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -39,7 +39,7 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
color: var(--google-red-500);
margin-top: 16px;
}
paper-button.info {
mwc-button.info {
max-width: calc(50% - 12px);
}
table.info {
@ -67,13 +67,13 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
</template>
</tbody>
</table>
<paper-button raised on-click="_showHardware" class="info">
<mwc-button raised on-click="_showHardware" class="info">
Hardware
</paper-button>
</mwc-button>
<template is="dom-if" if="[[_featureAvailable(data, 'hostname')]]">
<paper-button raised on-click="_changeHostnameClicked" class="info">
<mwc-button raised on-click="_changeHostnameClicked" class="info">
Change hostname
</paper-button>
</mwc-button>
</template>
<template is="dom-if" if="[[errors]]">
<div class="errors">Error: [[errors]]</div>

6
hassio/src/system/hassio-supervisor-info.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -80,11 +80,11 @@ class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
>
</template>
<template is="dom-if" if='[[_equals(data.channel, "stable")]]'>
<paper-button
<mwc-button
on-click="_joinBeta"
class="warning"
title="Get beta updates for Home Assistant (RCs), supervisor and host"
>Join beta channel</paper-button
>Join beta channel</mwc-button
>
</template>
</div>

4
hassio/src/system/hassio-supervisor-log.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -24,7 +24,7 @@ class HassioSupervisorLog extends PolymerElement {
<paper-card>
<div class="card-content" id="content"></div>
<div class="card-actions">
<paper-button on-click="refresh">Refresh</paper-button>
<mwc-button on-click="refresh">Refresh</mwc-button>
</div>
</paper-card>
`;

1
hassio/src/system/hassio-system.js
View File

@ -12,6 +12,7 @@ class HassioSystem extends PolymerElement {
<style include="iron-flex ha-style">
.content {
margin: 4px;
color: var(--primary-text-color);
}
.title {
margin-top: 24px;

3
package.json
View File

@ -17,6 +17,8 @@
"author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
"license": "Apache-2.0",
"dependencies": {
"@material/mwc-button": "^0.3.6",
"@material/mwc-ripple": "^0.3.6",
"@mdi/svg": "^3.0.39",
"@polymer/app-layout": "^3.0.1",
"@polymer/app-localize-behavior": "^3.0.1",
@ -35,7 +37,6 @@
"@polymer/iron-pages": "^3.0.1",
"@polymer/iron-resizable-behavior": "^3.0.1",
"@polymer/neon-animation": "^3.0.1",
"@polymer/paper-button": "^3.0.1",
"@polymer/paper-card": "^3.0.1",
"@polymer/paper-checkbox": "^3.0.1",
"@polymer/paper-dialog": "^3.0.1",

2
setup.py
View File

@ -2,7 +2,7 @@ from setuptools import setup, find_packages
setup(
name="home-assistant-frontend",
version="20190212.0",
version="20190213.0",
description="The Home Assistant frontend",
url="https://github.com/home-assistant/home-assistant-polymer",
author="The Home Assistant Authors",

6
src/auth/ha-auth-flow.js
View File

@ -1,5 +1,5 @@
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import "../components/ha-form";
import { localizeLiteMixin } from "../mixins/localize-lite-mixin";
@ -55,8 +55,8 @@ class HaAuthFlow extends localizeLiteMixin(PolymerElement) {
></ha-form>
</template>
<div class="action">
<paper-button raised on-click="_handleSubmit"
>[[_computeSubmitCaption(_step.type)]]</paper-button
<mwc-button raised on-click="_handleSubmit"
>[[_computeSubmitCaption(_step.type)]]</mwc-button
>
</div>
</template>

8
src/cards/ha-persistent_notification-card.js
View File

@ -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,7 +38,7 @@ class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
ha-markdown img {
max-width: 100%;
}
paper-button {
mwc-button {
margin: 8px;
font-weight: 500;
}
@ -46,8 +46,8 @@ class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
<ha-card header="[[computeTitle(stateObj)]]">
<ha-markdown content="[[stateObj.attributes.message]]"></ha-markdown>
<paper-button on-click="dismissTap"
>[[localize('ui.card.persistent_notification.dismiss')]]</paper-button
<mwc-button on-click="dismissTap"
>[[localize('ui.card.persistent_notification.dismiss')]]</mwc-button
>
</ha-card>
`;

20
src/components/buttons/ha-progress-button.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-spinner/paper-spinner";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -12,26 +12,22 @@ class HaProgressButton extends PolymerElement {
display: inline-block;
}
paper-button {
mwc-button {
transition: all 1s;
}
.success paper-button {
color: white;
.success mwc-button {
--mdc-theme-primary: white;
background-color: var(--google-green-500);
transition: none;
}
.error paper-button {
color: white;
.error mwc-button {
--mdc-theme-primary: white;
background-color: var(--google-red-500);
transition: none;
}
paper-button[disabled] {
color: #c8c8c8;
}
.progress {
@apply --layout;
@apply --layout-center-center;
@ -43,13 +39,13 @@ class HaProgressButton extends PolymerElement {
}
</style>
<div class="container" id="container">
<paper-button
<mwc-button
id="button"
disabled="[[computeDisabled(disabled, progress)]]"
on-click="buttonTapped"
>
<slot></slot>
</paper-button>
</mwc-button>
<template is="dom-if" if="[[progress]]">
<div class="progress"><paper-spinner active=""></paper-spinner></div>
</template>

42
src/components/ha-card.js
View File

@ -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`
<style include="paper-material-styles">
:host {
@apply --paper-material-elevation-1;
display: block;
border-radius: var(--ha-card-border-radius, 2px);
transition: all 0.3s ease-out;
background: var(
--ha-card-background,
var(--paper-card-background-color, white)
);
color: var(--primary-text-color);
}
.header {
@apply --paper-font-headline;
@apply --paper-font-common-expensive-kerning;
opacity: var(--dark-primary-opacity);
padding: 24px 16px 16px;
}
</style>
<template is="dom-if" if="[[header]]">
<div class="header">[[header]]</div>
</template>
<slot></slot>
`;
}
static get properties() {
return {
header: String,
};
}
}
customElements.define("ha-card", HaCard);

45
src/components/ha-card.ts Normal file
View File

@ -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`
<div class="header">${this.header}</div>
<slot></slot>
`;
}
}
customElements.define("ha-card", HaCard);

10
src/components/ha-vacuum-state.js
View File

@ -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`
<style>
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
top: 3px;
height: 37px;
margin-right: -0.57em;
}
paper-button[disabled] {
mwc-button[disabled] {
background-color: transparent;
color: var(--secondary-text-color);
}
</style>
<paper-button on-click="_callService" disabled="[[!_interceptable]]"
>[[_computeLabel(stateObj.state, _interceptable)]]</paper-button
<mwc-button on-click="_callService" disabled="[[!_interceptable]]"
>[[_computeLabel(stateObj.state, _interceptable)]]</mwc-button
>
`;
}

8
src/dialogs/ha-store-auth-card.js
View File

@ -37,11 +37,11 @@ class HaStoreAuth extends LocalizeMixin(PolymerElement) {
<paper-card elevation="4">
<div class="card-content">[[localize('ui.auth_store.ask')]]</div>
<div class="card-actions">
<paper-button on-click="_done"
>[[localize('ui.auth_store.decline')]]</paper-button
<mwc-button on-click="_done"
>[[localize('ui.auth_store.decline')]]</mwc-button
>
<paper-button primary on-click="_save"
>[[localize('ui.auth_store.confirm')]]</paper-button
<mwc-button raised on-click="_save"
>[[localize('ui.auth_store.confirm')]]</mwc-button
>
</div>
</paper-card>

64
src/dialogs/more-info/controls/more-info-alarm_control_panel.js
View File

@ -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);
}
</style>
@ -51,87 +51,87 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
<template is="dom-if" if="[[_isNumber(_codeFormat)]]">
<div class="pad">
<div>
<paper-button
<mwc-button
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="1"
raised
>1</paper-button
>1</mwc-button
>
<paper-button
<mwc-button
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="4"
raised
>4</paper-button
>4</mwc-button
>
<paper-button
<mwc-button
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="7"
raised
>7</paper-button
>7</mwc-button
>
</div>
<div>
<paper-button
<mwc-button
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="2"
raised
>2</paper-button
>2</mwc-button
>
<paper-button
<mwc-button
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="5"
raised
>5</paper-button
>5</mwc-button
>
<paper-button
<mwc-button
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="8"
raised
>8</paper-button
>8</mwc-button
>
<paper-button
<mwc-button
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="0"
raised
>0</paper-button
>0</mwc-button
>
</div>
<div>
<paper-button
<mwc-button
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="3"
raised
>3</paper-button
>3</mwc-button
>
<paper-button
<mwc-button
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="6"
raised
>6</paper-button
>6</mwc-button
>
<paper-button
<mwc-button
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="9"
raised
>9</paper-button
>9</mwc-button
>
<paper-button
<mwc-button
on-click="_clearEnteredCode"
disabled="[[!_inputEnabled]]"
raised
>
[[localize('ui.card.alarm_control_panel.clear_code')]]
</paper-button>
</mwc-button>
</div>
</div>
</template>
@ -139,7 +139,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
<div class="layout horizontal center-justified actions">
<template is="dom-if" if="[[_disarmVisible]]">
<paper-button
<mwc-button
raised
class="disarm"
on-click="_callService"
@ -147,25 +147,25 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
disabled="[[!_codeValid]]"
>
[[localize('ui.card.alarm_control_panel.disarm')]]
</paper-button>
</mwc-button>
</template>
<template is="dom-if" if="[[_armVisible]]">
<paper-button
<mwc-button
raised
on-click="_callService"
data-service="alarm_arm_home"
disabled="[[!_codeValid]]"
>
[[localize('ui.card.alarm_control_panel.arm_home')]]
</paper-button>
<paper-button
</mwc-button>
<mwc-button
raised
on-click="_callService"
data-service="alarm_arm_away"
disabled="[[!_codeValid]]"
>
[[localize('ui.card.alarm_control_panel.arm_away')]]
</paper-button>
</mwc-button>
</template>
</div>
`;

8
src/dialogs/more-info/controls/more-info-automation.js
View File

@ -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`
<style>
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
}
@ -33,9 +33,9 @@ class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
</div>
<div class="actions">
<paper-button on-click="handleTriggerTapped">
<mwc-button on-click="handleTriggerTapped">
[[localize('ui.card.automation.trigger')]]
</paper-button>
</mwc-button>
</div>
`;
}

6
src/dialogs/more-info/controls/more-info-configurator.js
View File

@ -1,6 +1,6 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/iron-input/iron-input";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-spinner/paper-spinner";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -69,7 +69,7 @@ class MoreInfoConfigurator extends PolymerElement {
</template>
<p class="submit" hidden$="[[!stateObj.attributes.submit_caption]]">
<paper-button
<mwc-button
raised=""
disabled="[[isConfiguring]]"
on-click="submitClicked"
@ -80,7 +80,7 @@ class MoreInfoConfigurator extends PolymerElement {
alt="Configuring"
></paper-spinner>
[[stateObj.attributes.submit_caption]]
</paper-button>
</mwc-button>
</p>
</template>
</div>

10
src/dialogs/more-info/controls/more-info-lock.js
View File

@ -1,4 +1,4 @@
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";
@ -26,17 +26,17 @@ class MoreInfoLock extends LocalizeMixin(PolymerElement) {
pattern="[[stateObj.attributes.code_format]]"
type="password"
></paper-input>
<paper-button
<mwc-button
on-click="callService"
data-service="unlock"
hidden$="[[!isLocked]]"
>[[localize('ui.card.lock.unlock')]]</paper-button
>[[localize('ui.card.lock.unlock')]]</mwc-button
>
<paper-button
<mwc-button
on-click="callService"
data-service="lock"
hidden$="[[isLocked]]"
>[[localize('ui.card.lock.lock')]]</paper-button
>[[localize('ui.card.lock.lock')]]</mwc-button
>
</template>
<ha-attributes

8
src/dialogs/more-info/more-info-settings.js
View File

@ -1,5 +1,5 @@
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -33,7 +33,7 @@ class MoreInfoSettings extends LocalizeMixin(EventsMixin(PolymerElement)) {
@apply --ha-more-info-app-toolbar-title;
}
app-toolbar paper-button {
app-toolbar mwc-button {
font-size: 0.8em;
margin: 0;
}
@ -49,8 +49,8 @@ class MoreInfoSettings extends LocalizeMixin(EventsMixin(PolymerElement)) {
on-click="_backTapped"
></paper-icon-button>
<div main-title="">[[_computeStateName(stateObj)]]</div>
<paper-button on-click="_save" disabled="[[_computeInvalid(_entityId)]]"
>[[localize('ui.dialogs.more_info_settings.save')]]</paper-button
<mwc-button on-click="_save" disabled="[[_computeInvalid(_entityId)]]"
>[[localize('ui.dialogs.more_info_settings.save')]]</mwc-button
>
</app-toolbar>

32
src/layouts/ha-init-page.ts
View File

@ -1,4 +1,5 @@
import "@polymer/paper-spinner/paper-spinner-lite";
import "@material/mwc-button";
import {
LitElement,
@ -8,9 +9,6 @@ import {
css,
} from "lit-element";
/*
* @appliesMixin LocalizeMixin
*/
class HaInitPage extends LitElement {
public error?: boolean;
@ -30,22 +28,21 @@ class HaInitPage extends LitElement {
${this.error
? html`
Unable to connect to Home Assistant.
<paper-button @click=${this._retry}>Retry</paper-button>
<mwc-button @click=${this._retry}>Retry</mwc-button>
`
: "Loading data"}
</div>
`;
}
private _retry() {
location.reload();
}
static get styles(): CSSResult {
return css`
div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
@ -54,23 +51,8 @@ class HaInitPage extends LitElement {
paper-spinner-lite {
margin-bottom: 10px;
}
paper-button {
font-weight: 500;
color: var(--primary-color);
}
`;
}
protected updated(changedProps) {
super.updated(changedProps);
if (changedProps.has("error") && this.error) {
import(/* webpackChunkName: "paper-button" */ "@polymer/paper-button/paper-button");
}
}
private _retry() {
location.reload();
}
}
customElements.define("ha-init-page", HaInitPage);

56
src/layouts/hass-error-screen.js
View File

@ -1,56 +0,0 @@
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/paper-button/paper-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
class HassErrorScreen extends PolymerElement {
static get template() {
return html`
<style include="iron-flex ha-style">
.placeholder {
height: 100%;
}
.layout {
height: calc(100% - 64px);
}
paper-button {
font-weight: bold;
color: var(--primary-color);
}
</style>
<div class="placeholder">
<app-toolbar> <div main-title="">[[title]]</div> </app-toolbar>
<div class="layout vertical center-center">
<h3>[[error]]</h3>
<slot
><paper-button on-click="backTapped">go back</paper-button></slot
>
</div>
</div>
`;
}
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);

54
src/layouts/hass-error-screen.ts Normal file
View File

@ -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`
<hass-subpage>
<div class="content">
<h3>${this.error}</h3>
<slot>
<mwc-button @click=${this._backTapped}>go back</mwc-button>
</slot>
</div>
</hass-subpage>
`;
}
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;
}
}

57
src/layouts/hass-loading-screen.js
View File

@ -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`
<style include="iron-flex ha-style">
.placeholder {
height: 100%;
}
.layout {
height: calc(100% - 64px);
}
</style>
<div class="placeholder">
<app-toolbar>
<ha-menu-button
narrow="[[narrow]]"
show-menu="[[showMenu]]"
></ha-menu-button>
<div main-title>[[title]]</div>
</app-toolbar>
<div class="layout horizontal center-center">
<paper-spinner-lite active></paper-spinner-lite>
</div>
</div>
`;
}
static get properties() {
return {
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
title: {
type: String,
value: "",
},
};
}
}
customElements.define("hass-loading-screen", HassLoadingScreen);

56
src/layouts/hass-loading-screen.ts Normal file
View File

@ -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`
<app-toolbar>
<ha-menu-button
.narrow=${this.narrow}
.showMenu=${this.showMenu}
></ha-menu-button>
</app-toolbar>
<div class="content">
<paper-spinner-lite active></paper-spinner-lite>
</div>
`;
}
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;
}
}

40
src/layouts/hass-subpage.js
View File

@ -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`
<style include="ha-style"></style>
<app-header-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button
icon="hass:arrow-left"
on-click="_backTapped"
></paper-icon-button>
<div main-title="">[[header]]</div>
<slot name="toolbar-icon"></slot>
</app-toolbar>
</app-header>
<slot></slot>
</app-header-layout>
`;
}
static get properties() {
return {
header: String,
};
}
_backTapped() {
history.back();
}
}
customElements.define("hass-subpage", HassSubpage);

52
src/layouts/hass-subpage.ts Normal file
View File

@ -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`
<app-header-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<paper-icon-button
icon="hass:arrow-left"
@click=${this._backTapped}
></paper-icon-button>
<div main-title>${this.header}</div>
<slot name="toolbar-icon"></slot>
</app-toolbar>
</app-header>
<slot></slot>
</app-header-layout>
`;
}
private _backTapped(): void {
history.back();
}
static get styles(): CSSResult {
return haStyle;
}
}
declare global {
interface HTMLElementTagNameMap {
"hass-subpage": HassSubpage;
}
}

12
src/layouts/partial-panel-resolver.ts
View File

@ -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`
<hass-error-screen
title=""
error="Error while loading this panel."
.narrow=${this.narrow}
.showMenu=${this.showMenu}
/>
></hass-error-screen>
`;
}
@ -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) => {

6
src/onboarding/ha-onboarding.js
View File

@ -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) {
<template is='dom-if' if='[[!_loading]]'>
<p class='action'>
<paper-button raised on-click='_submitForm'>
<mwc-button raised on-click='_submitForm'>
[[localize('ui.panel.page-onboarding.user.create_account')]]
</paper-button>
</mwc-button>
</p>
</template>
</div>

18
src/panels/config/area_registry/dialog-area-registry-detail.ts
View File

@ -77,18 +77,18 @@ class DialogAreaDetail extends LitElement {
<div class="paper-dialog-buttons">
${this._params.entry
? html`
<paper-button
class="danger"
<mwc-button
class="warning"
@click="${this._deleteEntry}"
.disabled=${this._submitting}
>
${this.hass.localize(
"ui.panel.config.area_registry.editor.delete"
)}
</paper-button>
</mwc-button>
`
: html``}
<paper-button
<mwc-button
@click="${this._updateEntry}"
.disabled=${nameInvalid || this._submitting}
>
@ -99,7 +99,7 @@ class DialogAreaDetail extends LitElement {
: this.hass.localize(
"ui.panel.config.area_registry.editor.create"
)}
</paper-button>
</mwc-button>
</div>
</paper-dialog>
`;
@ -156,13 +156,7 @@ class DialogAreaDetail extends LitElement {
.form {
padding-bottom: 24px;
}
paper-button {
font-weight: 500;
}
paper-button.danger {
font-weight: 500;
color: var(--google-red-500);
margin-left: -12px;
mwc-button.warning {
margin-right: auto;
}
.error {

4
src/panels/config/area_registry/ha-config-area-registry.ts
View File

@ -79,11 +79,11 @@ class HaConfigAreaRegistry extends LitElement {
${this.hass.localize(
"ui.panel.config.area_registry.picker.no_areas"
)}
<paper-button @click=${this._createArea}>
<mwc-button @click=${this._createArea}>
${this.hass.localize(
"ui.panel.config.area_registry.picker.create_area"
)}
</paper-button>
</mwc-button>
</div>
`
: html``}

2
src/panels/config/automation/ha-automation-editor.ts
View File

@ -242,7 +242,7 @@ class HaAutomationEditor extends LitElement {
.script paper-card {
margin-top: 16px;
}
.add-card paper-button {
.add-card mwc-button {
display: block;
text-align: center;
}

2
src/panels/config/cloud/cloud-alexa-pref.ts
View File

@ -4,7 +4,7 @@ import {
PropertyDeclarations,
TemplateResult,
} from "lit-element";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-toggle-button/paper-toggle-button";
// tslint:disable-next-line

2
src/panels/config/cloud/cloud-google-pref.ts
View File

@ -4,7 +4,7 @@ import {
PropertyDeclarations,
TemplateResult,
} from "lit-element";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-toggle-button/paper-toggle-button";
// tslint:disable-next-line

8
src/panels/config/cloud/cloud-webhook-manage-dialog.ts
View File

@ -6,7 +6,7 @@ import {
CSSResult,
} from "lit-element";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-dialog/paper-dialog";
@ -69,9 +69,9 @@ export class CloudWebhookManageDialog extends LitElement {
<div class="paper-dialog-buttons">
<a href="${docsUrl}" target="_blank"
><paper-button>VIEW DOCUMENTATION</paper-button></a
><mwc-button>VIEW DOCUMENTATION</mwc-button></a
>
<paper-button @click="${this._closeDialog}">CLOSE</paper-button>
<mwc-button @click="${this._closeDialog}">CLOSE</mwc-button>
</div>
</paper-dialog>
`;
@ -129,7 +129,7 @@ export class CloudWebhookManageDialog extends LitElement {
button.link {
color: var(--primary-color);
}
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
}

6
src/panels/config/cloud/cloud-webhooks.ts
View File

@ -122,8 +122,8 @@ export class CloudWebhooks extends LitElement {
`
: this._cloudHooks![entry.webhook_id]
? html`
<paper-button @click="${this._handleManageButton}"
>Manage</paper-button
<mwc-button @click="${this._handleManageButton}"
>Manage</mwc-button
>
`
: html`
@ -226,7 +226,7 @@ export class CloudWebhooks extends LitElement {
flex-direction: column;
justify-content: center;
}
paper-button {
mwc-button {
font-weight: 500;
color: var(--primary-color);
}

12
src/panels/config/cloud/ha-config-cloud-account.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-toggle-button/paper-toggle-button";
@ -48,7 +48,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
display: flex;
padding: 0 16px;
}
paper-button {
mwc-button {
align-self: center;
}
.soon {
@ -66,7 +66,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
text-transform: capitalize;
padding: 16px;
}
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
}
@ -100,10 +100,10 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
<div class="card-actions">
<a href="https://account.nabucasa.com" target="_blank"
><paper-button>Manage Account</paper-button></a
><mwc-button>Manage Account</mwc-button></a
>
<paper-button style="float: right" on-click="handleLogout"
>Sign out</paper-button
<mwc-button style="float: right" on-click="handleLogout"
>Sign out</mwc-button
>
</div>
</paper-card>

2
src/panels/config/cloud/ha-config-cloud-login.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-input/paper-input";

12
src/panels/config/config-entries/ha-config-entries-dashboard.js
View File

@ -1,6 +1,6 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/paper-tooltip/paper-tooltip";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/iron-icon/iron-icon";
import "@polymer/paper-item/paper-item";
@ -29,7 +29,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
static get template() {
return html`
<style include="iron-flex ha-style">
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
top: 3px;
@ -65,8 +65,8 @@ class HaConfigManagerDashboard extends LocalizeMixin(
<paper-item-body>
[[_computeIntegrationTitle(localize, item.handler)]]
</paper-item-body>
<paper-button on-click="_continueFlow"
>[[localize('ui.panel.config.integrations.configure')]]</paper-button
<mwc-button on-click="_continueFlow"
>[[localize('ui.panel.config.integrations.configure')]]</mwc-button
>
</div>
</template>
@ -128,8 +128,8 @@ class HaConfigManagerDashboard extends LocalizeMixin(
<paper-item-body>
[[_computeIntegrationTitle(localize, item)]]
</paper-item-body>
<paper-button on-click="_createFlow"
>[[localize('ui.panel.config.integrations.configure')]]</paper-button
<mwc-button on-click="_createFlow"
>[[localize('ui.panel.config.integrations.configure')]]</mwc-button
>
</div>
</template>

10
src/panels/config/config-entries/ha-config-flow.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-tooltip/paper-tooltip";
@ -102,10 +102,10 @@ class HaConfigFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
</paper-dialog-scrollable>
<div class="buttons">
<template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
<paper-button on-click="_flowDone">Close</paper-button>
<mwc-button on-click="_flowDone">Close</mwc-button>
</template>
<template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
<paper-button on-click="_flowDone">Close</paper-button>
<mwc-button on-click="_flowDone">Close</mwc-button>
</template>
<template is="dom-if" if="[[_equals(_step.type, 'form')]]">
<template is="dom-if" if="[[_loading]]">
@ -115,8 +115,8 @@ class HaConfigFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
</template>
<template is="dom-if" if="[[!_loading]]">
<div>
<paper-button on-click="_submitStep" disabled="[[!_canSubmit]]"
>Submit</paper-button
<mwc-button on-click="_submitStep" disabled="[[!_canSubmit]]"
>Submit</mwc-button
>
<template is="dom-if" if="[[!_canSubmit]]">
<paper-tooltip position="left">

12
src/panels/config/core/ha-config-section-core.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-input";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -40,7 +40,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
font-weight: 500;
}
.config-invalid paper-button {
.config-invalid mwc-button {
float: right;
}
@ -70,9 +70,9 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
[[localize('ui.panel.config.core.section.core.validation.valid')]]
</div>
</template>
<paper-button raised="" on-click="validateConfig">
<mwc-button raised="" on-click="validateConfig">
[[localize('ui.panel.config.core.section.core.validation.check_config')]]
</paper-button>
</mwc-button>
</template>
<template is="dom-if" if="[[validating]]">
<paper-spinner active=""></paper-spinner>
@ -84,9 +84,9 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
<span class="text">
[[localize('ui.panel.config.core.section.core.validation.invalid')]]
</span>
<paper-button raised="" on-click="validateConfig">
<mwc-button raised="" on-click="validateConfig">
[[localize('ui.panel.config.core.section.core.validation.check_config')]]
</paper-button>
</mwc-button>
</div>
<div id="configLog" class="validate-log">[[validateLog]]</div>
</template>

18
src/panels/config/entity_registry/dialog-entity-registry-detail.ts
View File

@ -98,23 +98,23 @@ class DialogEntityRegistryDetail extends LitElement {
</div>
</paper-dialog-scrollable>
<div class="paper-dialog-buttons">
<paper-button
class="danger"
<mwc-button
class="warning"
@click="${this._deleteEntry}"
.disabled=${this._submitting}
>
${this.hass.localize(
"ui.panel.config.entity_registry.editor.delete"
)}
</paper-button>
<paper-button
</mwc-button>
<mwc-button
@click="${this._updateEntry}"
.disabled=${invalidDomainUpdate || this._submitting}
>
${this.hass.localize(
"ui.panel.config.entity_registry.editor.update"
)}
</paper-button>
</mwc-button>
</div>
</paper-dialog>
`;
@ -172,13 +172,7 @@ class DialogEntityRegistryDetail extends LitElement {
.form {
padding-bottom: 24px;
}
paper-button {
font-weight: 500;
}
paper-button.danger {
font-weight: 500;
color: var(--google-red-500);
margin-left: -12px;
mwc-button.warning {
margin-right: auto;
}
.error {

10
src/panels/config/ha-entity-config.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
@ -75,17 +75,17 @@ class HaEntityConfig extends PolymerElement {
</div>
</div>
<div class="card-actions">
<paper-button
<mwc-button
on-click="saveEntity"
disabled="[[computeShowPlaceholder(formState)]]"
>SAVE</paper-button
>SAVE</mwc-button
>
<template is="dom-if" if="[[allowDelete]]">
<paper-button
<mwc-button
class="warning"
on-click="deleteEntity"
disabled="[[computeShowPlaceholder(formState)]]"
>DELETE</paper-button
>DELETE</mwc-button
>
</template>
</div>

2
src/panels/config/ha-panel-config.js
View File

@ -3,8 +3,6 @@ import "@polymer/iron-media-query/iron-media-query";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../layouts/hass-error-screen";
import isComponentLoaded from "../../common/config/is_component_loaded";
import EventsMixin from "../../mixins/events-mixin";
import NavigateMixin from "../../mixins/navigate-mixin";

6
src/panels/config/js/condition/index.js
View File

@ -1,6 +1,6 @@
import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import ConditionRow from "./condition_row";
@ -46,9 +46,9 @@ export default class Condition extends Component {
))}
<paper-card>
<div class="card-actions add-card">
<paper-button onTap={this.addCondition}>
<mwc-button onTap={this.addCondition}>
{localize("ui.panel.config.automation.editor.conditions.add")}
</paper-button>
</mwc-button>
</div>
</paper-card>
</div>

6
src/panels/config/js/script/index.js
View File

@ -1,6 +1,6 @@
import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import ActionRow from "./action_row";
@ -46,9 +46,9 @@ export default class Script extends Component {
))}
<paper-card>
<div class="card-actions add-card">
<paper-button onTap={this.addAction}>
<mwc-button onTap={this.addAction}>
{localize("ui.panel.config.automation.editor.actions.add")}
</paper-button>
</mwc-button>
</div>
</paper-card>
</div>

6
src/panels/config/js/trigger/index.js
View File

@ -1,6 +1,6 @@
import { h, Component } from "preact";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import TriggerRow from "./trigger_row";
import StateTrigger from "./state";
@ -47,9 +47,9 @@ export default class Trigger extends Component {
))}
<paper-card>
<div class="card-actions add-card">
<paper-button onTap={this.addTrigger}>
<mwc-button onTap={this.addTrigger}>
{localize("ui.panel.config.automation.editor.triggers.add")}
</paper-button>
</mwc-button>
</div>
</paper-card>
</div>

18
src/panels/config/person/dialog-person-detail.ts
View File

@ -83,21 +83,21 @@ class DialogPersonDetail extends LitElement {
<div class="paper-dialog-buttons">
${this._params.entry
? html`
<paper-button
class="danger"
<mwc-button
class="warning"
@click="${this._deleteEntry}"
.disabled=${this._submitting}
>
DELETE
</paper-button>
</mwc-button>
`
: html``}
<paper-button
<mwc-button
@click="${this._updateEntry}"
.disabled=${nameInvalid || this._submitting}
>
${this._params.entry ? "UPDATE" : "CREATE"}
</paper-button>
</mwc-button>
</div>
</paper-dialog>
`;
@ -162,13 +162,7 @@ class DialogPersonDetail extends LitElement {
.form {
padding-bottom: 24px;
}
paper-button {
font-weight: 500;
}
paper-button.danger {
font-weight: 500;
color: var(--google-red-500);
margin-left: -12px;
mwc-button.warning {
margin-right: auto;
}
.error {

4
src/panels/config/person/ha-config-person.ts
View File

@ -82,8 +82,8 @@ class HaConfigPerson extends LitElement {
? html`
<div class="empty">
Looks like you have no people yet!
<paper-button @click=${this._createPerson}>
CREATE PERSON</paper-button
<mwc-button @click=${this._createPerson}>
CREATE PERSON</mwc-button
>
</div>
`

2
src/panels/config/script/ha-script-editor.js
View File

@ -47,7 +47,7 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
.script paper-card {
margin-top: 16px;
}
.add-card paper-button {
.add-card mwc-button {
display: block;
text-align: center;
}

4
src/panels/config/users/ha-dialog-add-user.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-spinner/paper-spinner";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -71,7 +71,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
</div>
</template>
<template is="dom-if" if="[[!_loading]]">
<paper-button on-click="_createUser">Create</paper-button>
<mwc-button on-click="_createUser">Create</mwc-button>
</template>
</div>
</paper-dialog>

9
src/panels/config/users/ha-user-editor.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -18,7 +18,7 @@ class HaUserEditor extends EventsMixin(
) {
static get template() {
return html`
<style>
<style include="ha-style">
paper-card {
display: block;
max-width: 600px;
@ -58,12 +58,13 @@ class HaUserEditor extends EventsMixin(
</paper-card>
<paper-card>
<div class="card-actions">
<paper-button
<mwc-button
class="warning"
on-click="_deleteUser"
disabled="[[user.system_generated]]"
>
[[localize('ui.panel.config.users.editor.delete_user')]]
</paper-button>
</mwc-button>
<template is="dom-if" if="[[user.system_generated]]">
Unable to remove system generated users.
</template>

0
src/panels/config/zha/ha-config-zha.ts Executable file → Normal file
View File

6
src/panels/config/zha/zha-cluster-attributes.ts
View File

@ -7,7 +7,7 @@ import {
CSSResult,
css,
} from "lit-element";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-icon-button/paper-icon-button";
import "../../../components/buttons/ha-call-service-button";
@ -145,8 +145,8 @@ export class ZHAClusterAttributes extends LitElement {
></paper-input>
</div>
<div class="card-actions">
<paper-button @click="${this._onGetZigbeeAttributeClick}"
>Get Zigbee Attribute</paper-button
<mwc-button @click="${this._onGetZigbeeAttributeClick}"
>Get Zigbee Attribute</mwc-button
>
<ha-call-service-button
.hass="${this.hass}"

2
src/panels/config/zha/zha-network.ts
View File

@ -6,7 +6,7 @@ import {
CSSResult,
css,
} from "lit-element";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-icon-button/paper-icon-button";
import "../../../components/buttons/ha-call-service-button";

6
src/panels/config/zha/zha-node.ts
View File

@ -7,7 +7,7 @@ import {
PropertyValues,
css,
} from "lit-element";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item";
@ -142,8 +142,8 @@ export class ZHANode extends LitElement {
private _renderNodeActions(): TemplateResult {
return html`
<div class="card-actions">
<paper-button @click="${this._onReconfigureNodeClick}"
>Reconfigure Node</paper-button
<mwc-button @click="${this._onReconfigureNodeClick}"
>Reconfigure Node</mwc-button
>
${this._showHelp
? html`

8
src/panels/config/zwave/ha-config-zwave.js
View File

@ -236,8 +236,8 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
hidden$="[[!showHelp]]"
>
</ha-service-description>
<paper-button on-click="_nodeMoreInfo"
>Node Information</paper-button
<mwc-button on-click="_nodeMoreInfo"
>Node Information</mwc-button
>
</div>
@ -277,8 +277,8 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
hidden$="[[!showHelp]]"
>
</ha-service-description>
<paper-button on-click="_entityMoreInfo"
>Entity Information</paper-button
<mwc-button on-click="_entityMoreInfo"
>Entity Information</mwc-button
>
</div>
<div class="form-group">

6
src/panels/config/zwave/zwave-log.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-input/paper-input";
@ -42,8 +42,8 @@ class OzwLog extends EventsMixin(PolymerElement) {
</paper-input>
</div>
<div class="card-actions">
<paper-button raised="true" on-click="_openLogWindow">Load</paper-button>
<paper-button raised="true" on-click="_tailLog" disabled="{{_completeLog}}">Tail</paper-button>
<mwc-button raised="true" on-click="_openLogWindow">Load</mwc-button>
<mwc-button raised="true" on-click="_tailLog" disabled="{{_completeLog}}">Tail</mwc-button>
</paper-card>
</ha-config-section>
`;

6
src/panels/dev-event/ha-panel-dev-event.js
View File

@ -2,7 +2,7 @@ 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/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-input/paper-textarea";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -68,9 +68,7 @@ class HaPanelDevEvent extends EventsMixin(PolymerElement) {
label="Event Data (JSON, optional)"
value="{{eventData}}"
></paper-textarea>
<paper-button on-click="fireEvent" raised
>Fire Event</paper-button
>
<mwc-button on-click="fireEvent" raised>Fire Event</mwc-button>
</div>
</div>

6
src/panels/dev-info/error-log-card.ts
View File

@ -7,7 +7,7 @@ import {
TemplateResult,
} from "lit-element";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import { HomeAssistant } from "../../types";
import { fetchErrorLog } from "../../data/error_log";
@ -34,9 +34,9 @@ class ErrorLogCard extends LitElement {
></paper-icon-button>
`
: html`
<paper-button raised @click=${this._refreshErrorLog}>
<mwc-button raised @click=${this._refreshErrorLog}>
Load Full Home Assistant Log
</paper-button>
</mwc-button>
`}
</p>
<div class="error-log">${this._errorLog}</div>

4
src/panels/dev-info/ha-panel-dev-info.ts
View File

@ -138,9 +138,9 @@ class HaPanelDevInfo extends LitElement {
</p>
<p>
<a href="${nonDefaultLink}">${nonDefaultLinkText}</a><br />
<paper-button @click="${this._toggleDefaultPage}" raised>
<mwc-button @click="${this._toggleDefaultPage}" raised>
${defaultPageText}
</paper-button>
</mwc-button>
</p>
</div>
<system-health-card .hass=${this.hass}></system-health-card>

6
src/panels/dev-mqtt/ha-panel-dev-mqtt.js
View File

@ -1,7 +1,7 @@
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-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-input/paper-textarea";
@ -33,7 +33,7 @@ class HaPanelDevMqtt extends PolymerElement {
display: block;
}
paper-button {
mwc-button {
background-color: white;
}
</style>
@ -69,7 +69,7 @@ class HaPanelDevMqtt extends PolymerElement {
></paper-textarea>
</div>
<div class="card-actions">
<paper-button on-click="_publish">Publish</paper-button>
<mwc-button on-click="_publish">Publish</mwc-button>
</div>
</paper-card>
</div>

9
src/panels/dev-service/ha-panel-dev-service.js
View File

@ -1,7 +1,7 @@
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-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-input/paper-textarea";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -131,11 +131,8 @@ class HaPanelDevService extends PolymerElement {
autocomplete="off"
spellcheck="false"
></paper-textarea>
<paper-button
on-click="_callService"
raised
disabled="[[!validJSON]]"
>Call Service</paper-button
<mwc-button on-click="_callService" raised disabled="[[!validJSON]]"
>Call Service</mwc-button
>
<template is="dom-if" if="[[!validJSON]]">
<span class="error">Invalid JSON</span>

6
src/panels/dev-state/ha-panel-dev-state.js
View File

@ -1,7 +1,7 @@
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-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-input/paper-textarea";
@ -111,9 +111,7 @@ class HaPanelDevState extends EventsMixin(PolymerElement) {
spellcheck="false"
value="{{_stateAttributes}}"
></paper-textarea>
<paper-button on-click="handleSetState" raised
>Set State</paper-button
>
<mwc-button on-click="handleSetState" raised>Set State</mwc-button>
</div>
<h1>Current entities</h1>

28
src/panels/lovelace/cards/hui-alarm-panel-card.ts
View File

@ -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`
<paper-button
noink
raised
.action="${state}"
@click="${this._handleActionClick}"
>${this._label(state)}</paper-button
<mwc-button .action="${state}" @click="${this._handleActionClick}"
>${this._label(state)}</mwc-button
>
`;
})}
@ -156,17 +150,17 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
${BUTTONS.map((value) => {
return value === ""
? html`
<paper-button disabled></paper-button>
<mwc-button disabled></mwc-button>
`
: html`
<paper-button
<mwc-button
noink
raised
.value="${value}"
@click="${this._handlePadClick}"
>${value === "clear"
? this._label("clear_code")
: value}</paper-button
: value}</mwc-button
>
`;
})}
@ -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);
}
`,

6
src/panels/lovelace/cards/hui-empty-state-card.ts
View File

@ -53,11 +53,11 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
</div>
<div class="card-actions">
<a href="/config/integrations">
<paper-button>
<mwc-button>
${this.hass.localize(
"ui.panel.lovelace.cards.empty_state.go_to_integrations_page"
)}
</paper-button>
</mwc-button>
</a>
</div>
</paper-card>
@ -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);

116
src/panels/lovelace/cards/hui-entity-button-card.ts
View File

@ -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`
<div class="not-found">
Entity not available: ${this._config.entity}
</div>
`;
}
return html`
${this.renderStyle()}
<ha-card
@ha-click="${this._handleTap}"
@ha-hold="${this._handleHold}"
.longPress="${longPress()}"
>
${!stateObj
? html`
<div class="not-found">
Entity not available: ${this._config.entity}
</div>
`
: html`
<paper-button>
<div>
<ha-icon
data-domain="${computeStateDomain(stateObj)}"
data-state="${stateObj.state}"
.icon="${this._config.icon || stateIcon(stateObj)}"
style="${styleMap({
filter: this._computeBrightness(stateObj),
color: this._computeColor(stateObj),
})}"
></ha-icon>
<span>
${this._config.name || computeStateName(stateObj)}
</span>
</div>
</paper-button>
`}
<ha-icon
data-domain="${computeStateDomain(stateObj)}"
data-state="${stateObj.state}"
.icon="${this._config.icon || stateIcon(stateObj)}"
style="${styleMap({
filter: this._computeBrightness(stateObj),
color: this._computeColor(stateObj),
})}"
></ha-icon>
<span>
${this._config.name || computeStateName(stateObj)}
</span>
<mwc-ripple></mwc-ripple>
</ha-card>
`;
}
@ -132,43 +131,36 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
}
}
private renderStyle(): TemplateResult {
return html`
<style>
ha-icon {
display: flex;
margin: auto;
width: 40%;
height: 40%;
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);
}
state-badge {
display: flex;
margin: auto;
width: 40%;
height: 40%;
}
paper-button {
display: flex;
margin: auto;
text-align: center;
}
.not-found {
flex: 1;
background-color: yellow;
padding: 8px;
}
</style>
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;
}
`;
}

0
src/panels/lovelace/cards/hui-sensor-card.ts Executable file → Normal file
View File

23
src/panels/lovelace/components/hui-card-options.ts
View File

@ -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 {
<slot></slot>
<div class="options">
<div class="primary-actions">
<paper-button @click="${this._editCard}"
<mwc-button @click="${this._editCard}"
>${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.edit"
)}</paper-button
)}</mwc-button
>
</div>
<div class="secondary-actions">
@ -92,7 +95,11 @@ export class HuiCardOptions extends LitElement {
@click="${this._cardUp}"
?disabled="${this.path![1] === 0}"
></paper-icon-button>
<paper-menu-button>
<paper-menu-button
horizontal-align="right"
vertical-align="bottom"
vertical-offset="40"
>
<paper-icon-button
icon="hass:dots-vertical"
slot="dropdown-trigger"

2
src/panels/lovelace/components/hui-theme-select-editor.ts
View File

@ -4,7 +4,7 @@ import {
PropertyDeclarations,
TemplateResult,
} from "lit-element";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import { HomeAssistant } from "../../../types";
import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";

13
src/panels/lovelace/components/hui-yaml-editor.ts
View File

@ -32,9 +32,12 @@ export class HuiYamlEditor extends HTMLElement {
<style>
${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"]

6
src/panels/lovelace/components/notifications/hui-configurator-notification-item.js
View File

@ -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(
<div>[[_getMessage(notification)]]</div>
<paper-button slot="actions" class="primary" on-click="_handleClick"
>[[_localizeState(notification.state)]]</paper-button
<mwc-button slot="actions" on-click="_handleClick"
>[[_localizeState(notification.state)]]</mwc-button
>
</hui-notification-item-template>
`;

2
src/panels/lovelace/components/notifications/hui-notification-drawer.js
View File

@ -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";

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

@ -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";

2
src/panels/lovelace/components/notifications/hui-notifications-button.js
View File

@ -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";

6
src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
View File

@ -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(
</span>
</div>
<paper-button slot="actions" class="primary" on-click="_handleDismiss"
>[[localize('ui.card.persistent_notification.dismiss')]]</paper-button
<mwc-button slot="actions" on-click="_handleDismiss"
>[[localize('ui.card.persistent_notification.dismiss')]]</mwc-button
>
</hui-notification-item-template>
`;

17
src/panels/lovelace/editor/card-editor/hui-card-picker.ts
View File

@ -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 {
<div class="cards-container">
${cards.map((card) => {
return html`
<paper-button
raised
@click="${this._cardPicked}"
.type="${card.type}"
>${card.name}</paper-button
>
<mwc-button @click="${this._cardPicked}" .type="${card.type}">
${card.name}
</mwc-button>
`;
})}
</div>
@ -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%;
}
}

2
src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
View File

@ -41,7 +41,7 @@ export class HuiDialogPickCard extends LitElement {
></hui-card-picker>
</paper-dialog-scrollable>
<div class="paper-dialog-buttons">
<paper-button @click="${this._skipPick}">MANUAL CARD</paper-button>
<mwc-button @click="${this._skipPick}">MANUAL CARD</mwc-button>
</div>
</paper-dialog>
`;

36
src/panels/lovelace/editor/card-editor/hui-edit-card.ts
View File

@ -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`
<div class="paper-dialog-buttons">
<paper-button
<mwc-button
class="toggle-button"
?hidden="${!this._configValue || !this._configValue.value}"
?disabled="${this._configElement === null ||
@ -168,12 +169,12 @@ export class HuiEditCard extends LitElement {
@click="${this._toggleEditor}"
>${this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.toggle_editor"
)}</paper-button
)}</mwc-button
>
<paper-button @click="${this.closeDialog}"
>${this.hass!.localize("ui.common.cancel")}</paper-button
<mwc-button @click="${this.closeDialog}"
>${this.hass!.localize("ui.common.cancel")}</mwc-button
>
<paper-button
<mwc-button
?hidden="${!this._configValue || !this._configValue.value}"
?disabled="${this._saving || this._configState !== "OK"}"
@click="${this._save}"
@ -182,8 +183,8 @@ export class HuiEditCard extends LitElement {
?active="${this._saving}"
alt="Saving"
></paper-spinner>
${this.hass!.localize("ui.common.save")}</paper-button
>
${this.hass!.localize("ui.common.save")}
</mwc-button>
</div>
`
: ""}
@ -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;

2
src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
View File

@ -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()}

15
src/panels/lovelace/editor/hui-dialog-save-config.ts
View File

@ -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 {
</p>
</paper-dialog-scrollable>
<div class="paper-dialog-buttons">
<paper-button @click="${this._closeDialog}"
<mwc-button @click="${this._closeDialog}"
>${this.hass!.localize(
"ui.panel.lovelace.editor.save_config.cancel"
)}</paper-button
>
<paper-button
?disabled="${this._saving}"
@click="${this._saveConfig}"
)}</mwc-button
>
<mwc-button ?disabled="${this._saving}" @click="${this._saveConfig}">
<paper-spinner
?active="${this._saving}"
alt="Saving"
></paper-spinner>
${this.hass!.localize(
"ui.panel.lovelace.editor.save_config.save"
)}</paper-button
)}</mwc-button
>
</div>
</paper-dialog>
@ -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;

12
src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
View File

@ -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 {
></hui-lovelace-editor
></paper-dialog-scrollable>
<div class="paper-dialog-buttons">
<paper-button @click="${this._closeDialog}"
>${this.hass!.localize("ui.common.cancel")}</paper-button
<mwc-button @click="${this._closeDialog}"
>${this.hass!.localize("ui.common.cancel")}</mwc-button
>
<paper-button
<mwc-button
?disabled="${!this._config || this._saving}"
@click="${this._save}"
>
@ -78,7 +78,7 @@ export class HuiDialogEditLovelace extends LitElement {
?active="${this._saving}"
alt="Saving"
></paper-spinner>
${this.hass!.localize("ui.common.save")}</paper-button
${this.hass!.localize("ui.common.save")}</mwc-button
>
</div>
</paper-dialog>
@ -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;

12
src/panels/lovelace/editor/view-editor/hui-edit-view.ts
View File

@ -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 {
></paper-icon-button>
`
: ""}
<paper-button @click="${this._closeDialog}"
>${this.hass!.localize("ui.common.cancel")}</paper-button
<mwc-button @click="${this._closeDialog}"
>${this.hass!.localize("ui.common.cancel")}</mwc-button
>
<paper-button
<mwc-button
?disabled="${!this._config || this._saving}"
@click="${this._save}"
>
@ -155,7 +155,7 @@ export class HuiEditView extends LitElement {
?active="${this._saving}"
alt="Saving"
></paper-spinner>
${this.hass!.localize("ui.common.save")}</paper-button
${this.hass!.localize("ui.common.save")}</mwc-button
>
</div>
</paper-dialog>
@ -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;

6
src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
View File

@ -47,11 +47,11 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
return html`
${this.renderStyle()}
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
<paper-button @click="${this._callService}">
<mwc-button @click="${this._callService}">
${stateObj.state === "locked"
? this.hass!.localize("ui.card.lock.unlock")
: this.hass!.localize("ui.card.lock.lock")}
</paper-button>
</mwc-button>
</hui-generic-entity-row>
`;
}
@ -59,7 +59,7 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
protected renderStyle(): TemplateResult {
return html`
<style>
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
margin-right: -0.57em;

6
src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
View File

@ -56,9 +56,9 @@ class HuiSceneEntityRow extends LitElement implements EntityRow {
></ha-entity-toggle>
`
: html`
<paper-button @click="${this._callService}">
<mwc-button @click="${this._callService}">
${this.hass!.localize("ui.card.scene.activate")}
</paper-button>
</mwc-button>
`}
</hui-generic-entity-row>
`;
@ -67,7 +67,7 @@ class HuiSceneEntityRow extends LitElement implements EntityRow {
protected renderStyle(): TemplateResult {
return html`
<style>
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
margin-right: -0.57em;

6
src/panels/lovelace/entity-rows/hui-script-entity-row.ts
View File

@ -56,9 +56,9 @@ class HuiScriptEntityRow extends LitElement implements EntityRow {
></ha-entity-toggle>
`
: html`
<paper-button @click="${this._callService}">
<mwc-button @click="${this._callService}">
${this.hass!.localize("ui.card.script.execute")}
</paper-button>
</mwc-button>
`}
</hui-generic-entity-row>
`;
@ -67,7 +67,7 @@ class HuiScriptEntityRow extends LitElement implements EntityRow {
protected renderStyle(): TemplateResult {
return html`
<style>
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
margin-right: -0.57em;

8
src/panels/lovelace/ha-panel-lovelace.ts
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import { fetchConfig, LovelaceConfig, saveConfig } from "../../data/lovelace";
import "../../layouts/hass-loading-screen";
@ -74,7 +74,7 @@ class LovelacePanel extends LitElement {
if (state === "error") {
return html`
<style>
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
}
@ -85,9 +85,7 @@ class LovelacePanel extends LitElement {
.narrow="${this.narrow}"
.showMenu="${this.showMenu}"
>
<paper-button on-click="_forceFetchConfig"
>Reload Lovelace</paper-button
>
<mwc-button on-click="_forceFetchConfig">Reload Lovelace</mwc-button>
</hass-error-screen>
`;
}

12
src/panels/lovelace/hui-editor.ts
View File

@ -5,7 +5,7 @@ import yaml from "js-yaml";
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-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-spinner/paper-spinner";
@ -53,7 +53,7 @@ class LovelaceFullConfigEditor extends LitElement {
@click="${this._closeEditor}"
></paper-icon-button>
<div main-title>Edit Config</div>
<paper-button @click="${this._handleSave}">Save</paper-button>
<mwc-button raised @click="${this._handleSave}">Save</mwc-button>
<ha-icon
class="save-button
${classMap({
@ -92,9 +92,7 @@ class LovelaceFullConfigEditor extends LitElement {
app-header-layout {
height: 100vh;
}
paper-button {
font-size: 16px;
}
app-toolbar {
background-color: var(--dark-background-color, #455a64);
color: var(--dark-text-color);
@ -114,8 +112,8 @@ class LovelaceFullConfigEditor extends LitElement {
.save-button {
opacity: 0;
margin-left: -16px;
margin-top: -4px;
margin-left: -21px;
margin-top: -1px;
transition: opacity 1.5s;
}

20
src/panels/lovelace/hui-root.ts
View File

@ -14,7 +14,7 @@ import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/app-route/app-route";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-menu-button/paper-menu-button";
@ -296,14 +296,14 @@ class HUIRoot extends LitElement {
)}
${this._editMode
? html`
<paper-button id="add-view" @click="${this._addView}">
<ha-icon
title="${this.hass!.localize(
"ui.panel.lovelace.editor.edit_view.add"
)}"
icon="hass:plus"
></ha-icon>
</paper-button>
<paper-icon-button
id="add-view"
@click="${this._addView}"
title="${this.hass!.localize(
"ui.panel.lovelace.editor.edit_view.add"
)}"
icon="hass:plus"
></paper-icon-button>
`
: ""}
</paper-tabs>
@ -371,7 +371,7 @@ class HUIRoot extends LitElement {
app-toolbar a {
color: var(--text-primary-color, white);
}
paper-button.warning:not([disabled]) {
mwc-button.warning:not([disabled]) {
color: var(--google-red-500);
}
#view {

8
src/panels/lovelace/special-rows/hui-call-service-row.ts
View File

@ -1,5 +1,5 @@
import { html, LitElement, TemplateResult } from "lit-element";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "../../../components/ha-icon";
@ -36,8 +36,8 @@ class HuiCallServiceRow extends LitElement implements EntityRow {
<ha-icon .icon="${this._config.icon}"></ha-icon>
<div class="flex">
<div>${this._config.name}</div>
<paper-button @click="${this._callService}"
>${this._config.action_name}</paper-button
<mwc-button @click="${this._callService}"
>${this._config.action_name}</mwc-button
>
</div>
`;
@ -67,7 +67,7 @@ class HuiCallServiceRow extends LitElement implements EntityRow {
overflow: hidden;
text-overflow: ellipsis;
}
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
margin-right: -0.57em;

2
src/panels/mailbox/ha-dialog-show-audio-message.js
View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/paper-dialog/paper-dialog";
import "@polymer/paper-spinner/paper-spinner";
import { html } from "@polymer/polymer/lib/utils/html-tag";

Some files were not shown because too many files have changed in this diff Show More