Use mwc-button instead of paper-button (#2744)

* Convert from paper-button to mwc-button

* Fixes

* Bye paper-button

* Fixes

* Final fixes

* Fix rebase conversion
This commit is contained in:
Paulus Schoutsen 2019-02-12 23:08:29 -08:00 committed by GitHub
parent e1c2cf770a
commit 1b8c567fd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
97 changed files with 530 additions and 514 deletions

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;
}
`,
];

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;
}

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>
`;

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>

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>

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>
`;

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>
`;

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>

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>

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>

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>

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>

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>
`;

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",

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>

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>
`;

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>

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
>
`;
}

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>

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>
`;

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>
`;
}

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>

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

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>

View File

@ -1,5 +1,5 @@
import "@polymer/paper-spinner/paper-spinner-lite";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import {
LitElement,
@ -28,7 +28,7 @@ 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>
@ -51,10 +51,6 @@ class HaInitPage extends LitElement {
paper-spinner-lite {
margin-bottom: 10px;
}
paper-button {
font-weight: 500;
color: var(--primary-color);
}
`;
}
}

View File

@ -7,6 +7,7 @@ import {
property,
customElement,
} from "lit-element";
import "@material/mwc-button";
import "./hass-subpage";
@customElement("hass-error-screen")
@ -20,7 +21,7 @@ class HassErrorScreen extends LitElement {
<div class="content">
<h3>${this.error}</h3>
<slot>
<paper-button @click=${this._backTapped}>go back</paper-button>
<mwc-button @click=${this._backTapped}>go back</mwc-button>
</slot>
</div>
</hass-subpage>
@ -41,11 +42,6 @@ class HassErrorScreen extends LitElement {
justify-content: center;
flex-direction: column;
}
paper-button {
font-weight: bold;
color: var(--primary-color);
}
`,
];
}

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>

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 {

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``}

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;
}

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

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

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;
}

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);
}

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>

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

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>

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

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>

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 {

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>

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>

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>

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>

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 {

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>
`

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;
}

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>

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>

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}"

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

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`

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

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>
`;

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>

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>

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>

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>

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>

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>

View File

@ -130,12 +130,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 +152,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 +271,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 +285,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);
}
`,

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);

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;
}
`;
}

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";
@ -42,7 +42,7 @@ export class HuiCardOptions extends LitElement {
flex: 4;
text-align: right;
}
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
}
@ -69,10 +69,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">

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

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>
`;

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

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

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

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>
`;

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%;
}
}

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>
`;

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";
@ -160,7 +160,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 +168,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,7 +182,7 @@ 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>
`
@ -469,7 +469,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;

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;

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;

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;

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;

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;

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;

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>
`;
}

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;
}

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 {

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;

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

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-textarea";
import "@polymer/paper-item/paper-item-body";

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 "@polymer/paper-card/paper-card";
@ -78,8 +78,8 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
<div><paper-spinner active></paper-spinner></div>
</template>
<template is="dom-if" if="[[!_loading]]">
<paper-button on-click="_changePassword"
>[[localize('ui.panel.profile.change_password.submit')]]</paper-button
<mwc-button on-click="_changePassword"
>[[localize('ui.panel.profile.change_password.submit')]]</mwc-button
>
</template>
</div>

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";
@ -61,9 +61,9 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
</ha-settings-row>
</template>
<div class="card-actions">
<paper-button on-click="_handleCreate">
<mwc-button on-click="_handleCreate">
[[localize('ui.panel.profile.long_lived_access_tokens.create')]]
</paper-button>
</mwc-button>
</div>
</paper-card>
`;

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-spinner/paper-spinner";
@ -107,13 +107,13 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
</paper-dialog-scrollable>
<div class="buttons">
<template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
<paper-button on-click="_flowDone"
>[[localize('ui.panel.profile.mfa_setup.close')]]</paper-button
<mwc-button on-click="_flowDone"
>[[localize('ui.panel.profile.mfa_setup.close')]]</mwc-button
>
</template>
<template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
<paper-button on-click="_flowDone"
>[[localize('ui.panel.profile.mfa_setup.close')]]</paper-button
<mwc-button on-click="_flowDone"
>[[localize('ui.panel.profile.mfa_setup.close')]]</mwc-button
>
</template>
<template is="dom-if" if="[[_equals(_step.type, 'form')]]">
@ -123,8 +123,8 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
</div>
</template>
<template is="dom-if" if="[[!_loading]]">
<paper-button on-click="_submitStep"
>[[localize('ui.panel.profile.mfa_setup.submit')]]</paper-button
<mwc-button on-click="_submitStep"
>[[localize('ui.panel.profile.mfa_setup.submit')]]</mwc-button
>
</template>
</template>

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-item/paper-item";
@ -36,7 +36,7 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
max-width: 600px;
margin: 16px auto;
}
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
margin-right: -0.57em;
@ -50,13 +50,13 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
<div secondary="">[[module.id]]</div>
</paper-item-body>
<template is="dom-if" if="[[module.enabled]]">
<paper-button on-click="_disable"
>[[localize('ui.panel.profile.mfa.disable')]]</paper-button
<mwc-button on-click="_disable"
>[[localize('ui.panel.profile.mfa.disable')]]</mwc-button
>
</template>
<template is="dom-if" if="[[!module.enabled]]">
<paper-button on-click="_enable"
>[[localize('ui.panel.profile.mfa.enable')]]</paper-button
<mwc-button on-click="_enable"
>[[localize('ui.panel.profile.mfa.enable')]]</mwc-button
>
</template>
</paper-item>

View File

@ -3,7 +3,7 @@ import "@polymer/app-layout/app-header/app-header";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -86,8 +86,8 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
></ha-push-notifications-row>
<div class="card-actions">
<paper-button class="warning" on-click="_handleLogOut"
>[[localize('ui.panel.profile.logout')]]</paper-button
<mwc-button class="warning" on-click="_handleLogOut"
>[[localize('ui.panel.profile.logout')]]</mwc-button
>
</div>
</paper-card>

View File

@ -43,23 +43,8 @@ export const haStyle = css`
text-decoration: none;
}
.card-actions paper-button:not([disabled]),
.card-actions ha-progress-button:not([disabled]),
.card-actions ha-call-api-button:not([disabled]),
.card-actions ha-call-service-button:not([disabled]) {
color: var(--primary-color);
font-weight: 500;
}
.card-actions paper-button.warning:not([disabled]),
.card-actions ha-call-api-button.warning:not([disabled]),
.card-actions ha-call-service-button.warning:not([disabled]) {
color: var(--google-red-500);
}
.card-actions paper-button[primary] {
background-color: var(--primary-color);
color: var(--text-primary-color);
.card-actions .warning {
--mdc-theme-primary: var(--google-red-500);
}
`;
@ -78,6 +63,16 @@ export const haStyleDialog = css`
}
}
.paper-dialog-buttons {
height: 56px;
align-items: flex-end;
padding: 8px;
}
.paper-dialog-buttons .warning {
--mdc-theme-primary: var(--google-red-500);
}
@media all and (max-width: 450px), all and (max-height: 500px) {
paper-dialog {
margin: 0;
@ -213,6 +208,9 @@ documentContainer.innerHTML = `<custom-style>
--paper-slider-secondary-color: var(--slider-secondary-color);
--paper-slider-container-color: var(--slider-bar-color);
--ha-paper-slider-pin-font-size: 15px;
/* mwc */
--mdc-theme-primary: var(--primary-color);
}
</style>

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 { 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`
<style include="iron-flex iron-flex-alignment"></style>
<style>
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
top: 3px;
@ -26,8 +26,8 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
<div class="horizontal justified layout">
${this.stateInfoTemplate}
<paper-button hidden$="[[inDialog]]"
>[[_localizeState(stateObj.state)]]</paper-button
<mwc-button hidden$="[[inDialog]]"
>[[_localizeState(stateObj.state)]]</mwc-button
>
</div>

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 { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -15,7 +15,7 @@ class StateCardLock extends LocalizeMixin(PolymerElement) {
return html`
<style include="iron-flex iron-flex-alignment"></style>
<style>
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
top: 3px;
@ -26,17 +26,17 @@ class StateCardLock extends LocalizeMixin(PolymerElement) {
<div class="horizontal justified layout">
${this.stateInfoTemplate}
<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
>
</div>
`;

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 { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -14,7 +14,7 @@ class StateCardScene extends LocalizeMixin(PolymerElement) {
return html`
<style include="iron-flex iron-flex-alignment"></style>
<style>
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
top: 3px;
@ -25,8 +25,8 @@ class StateCardScene extends LocalizeMixin(PolymerElement) {
<div class="horizontal justified layout">
${this.stateInfoTemplate}
<paper-button on-click="activateScene"
>[[localize('ui.card.scene.activate')]]</paper-button
<mwc-button on-click="activateScene"
>[[localize('ui.card.scene.activate')]]</mwc-button
>
</div>
`;

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 { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -16,7 +16,7 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
return html`
<style include="iron-flex iron-flex-alignment"></style>
<style>
paper-button {
mwc-button {
color: var(--primary-color);
font-weight: 500;
top: 3px;
@ -38,8 +38,8 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
></ha-entity-toggle>
</template>
<template is="dom-if" if="[[!stateObj.attributes.can_cancel]]">
<paper-button on-click="fireScript"
>[[localize('ui.card.script.execute')]]</paper-button
<mwc-button on-click="fireScript"
>[[localize('ui.card.script.execute')]]</mwc-button
>
</template>
</div>

View File

@ -1,4 +1,4 @@
import "@polymer/paper-button/paper-button";
import "@material/mwc-button";
import "../components/ha-toast";
export default (installingWorker) => {
@ -7,7 +7,7 @@ export default (installingWorker) => {
toast.text = "A new version of the frontend is available.";
toast.duration = 0;
const button = document.createElement("paper-button");
const button = document.createElement("mwc-button");
button.addEventListener("click", () =>
installingWorker.postMessage({ type: "skipWaiting" })
);

107
yarn.lock
View File

@ -728,6 +728,99 @@
log-update "^2.3.0"
strip-ansi "^3.0.1"
"@material/animation@^0.40.1":
version "0.40.1"
resolved "https://registry.yarnpkg.com/@material/animation/-/animation-0.40.1.tgz#c5ff31e7d7e17324a0045e889d3530b150b9fcec"
integrity sha512-HtxFUw04EHg4S6pXfTA3Z0wKxnNDNcDhe1Np2Y2geo+lAk2Hb7m8yCL/GaL9o2I/eRYsgUXC0U7+Mk74GCz3zw==
"@material/base@^0.40.1":
version "0.40.1"
resolved "https://registry.yarnpkg.com/@material/base/-/base-0.40.1.tgz#a0d8e19cee98dae0f96dbf0887a14b3f7acd2aac"
integrity sha512-vrbOK8hONVCYgURQ9h7nkXvMdYnZVVNmAfFFijF8fbWQdwnoPcNTdqV6RoQlhBEqHYHQqLNfdUDlznAPKLclGQ==
"@material/button@^0.40.0":
version "0.40.1"
resolved "https://registry.yarnpkg.com/@material/button/-/button-0.40.1.tgz#b5a8657f7d3783d7fc0936f95d0187bdb0319eae"
integrity sha512-xLNjq9zySnpZAP4UynyeXnnlLXf3iIA/6ilecwgF4d2ooUmNXcRdlRa8wGYT36JHsCfsP3AeZOjoTZUcmaiejw==
dependencies:
"@material/elevation" "^0.40.1"
"@material/ripple" "^0.40.1"
"@material/rtl" "^0.40.1"
"@material/shape" "^0.40.1"
"@material/theme" "^0.40.1"
"@material/typography" "^0.40.1"
"@material/elevation@^0.40.1":
version "0.40.1"
resolved "https://registry.yarnpkg.com/@material/elevation/-/elevation-0.40.1.tgz#beb17eb90bde94459c41cd826c2de13f13b10b25"
integrity sha512-VD9ii90WzI+t4df08A9hQIsYLH/N+85a2Mqo10CNVZLZYW5fDOwFH/h7553aNoAuSHKPcGCLdyav9J9oC6TSaQ==
dependencies:
"@material/animation" "^0.40.1"
"@material/theme" "^0.40.1"
"@material/mwc-base@^0.3.6":
version "0.3.6"
resolved "https://registry.yarnpkg.com/@material/mwc-base/-/mwc-base-0.3.6.tgz#44382945509602adc3ba07b554e81e0f24810873"
integrity sha512-DVwsTJYCMSgIXzh7yGdn0CW11qz7/QaimPGbQ1jo4zyV/aizbetpKwFlkJj9Ut45/cCqZMlXIU2valjoO0dU8g==
dependencies:
lit-element "^2.0.0-rc.2"
lit-html "^1.0.0-rc.2"
"@material/mwc-button@^0.3.6":
version "0.3.6"
resolved "https://registry.yarnpkg.com/@material/mwc-button/-/mwc-button-0.3.6.tgz#86a05fe27ad365fd5f7d98d4840ef0def5f72096"
integrity sha512-ueIyVqSklgMFvlVJFszzlQSwDBvCQtM7FXWBpMGPiUFbzyESb1Wy3e7K0RaeHWzWolUrq9INl9Tt+15i1hnBhA==
dependencies:
"@material/button" "^0.40.0"
"@material/mwc-base" "^0.3.6"
"@material/mwc-icon" "^0.3.6"
"@material/mwc-ripple" "^0.3.6"
"@material/mwc-icon@^0.3.6":
version "0.3.6"
resolved "https://registry.yarnpkg.com/@material/mwc-icon/-/mwc-icon-0.3.6.tgz#0a4fe6984300f240b0a3371e037c9fd59957c40f"
integrity sha512-ssdZSY1z2i9n974iXZiy26wZzMAd4/LkPCbHtpUAOqxWLq+8r3djmPuoKhIdiI4YCarpBOpgm8HQEuHdvClkGw==
dependencies:
"@material/mwc-base" "^0.3.6"
"@material/mwc-ripple@^0.3.6":
version "0.3.6"
resolved "https://registry.yarnpkg.com/@material/mwc-ripple/-/mwc-ripple-0.3.6.tgz#27d7748e6d1cf45e2ce299d0786440217bf0b3c9"
integrity sha512-fCqIoHX5M7qW2iOitEIlJF0TBl1IhzHpXb1lroXBv1JlGGYWWSd5m+v7ZSJU3Apc8s/IkPsDDCk1vSHv6VyOwA==
dependencies:
"@material/mwc-base" "^0.3.6"
"@material/ripple" "^0.40.0"
lit-html "^1.0.0"
"@material/ripple@^0.40.0", "@material/ripple@^0.40.1":
version "0.40.1"
resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-0.40.1.tgz#57cbc689303b48282229cb9b62556af7442e852a"
integrity sha512-sndeTS4VHa0v1UGj7MNcxMCuO9LJ1DjoL1EjE6BH3Lm3M1MnXJHdsBo2CgPbU/FI84tt6+eyHGOYPdPrEDJhCA==
dependencies:
"@material/animation" "^0.40.1"
"@material/base" "^0.40.1"
"@material/theme" "^0.40.1"
"@material/rtl@^0.40.1":
version "0.40.1"
resolved "https://registry.yarnpkg.com/@material/rtl/-/rtl-0.40.1.tgz#5b0d973e3c6f8e2ea3656c06ada37ba2fedfa206"
integrity sha512-Pk6Iw1/KrhWZoZtkDsPMDUW0bm7Z1zeXb3MTQRCFmjf1wU5cRxgOTtuoZLcJqlcKGppLAzJL/TJV3E7KEiuL0A==
"@material/shape@^0.40.1":
version "0.40.1"
resolved "https://registry.yarnpkg.com/@material/shape/-/shape-0.40.1.tgz#bd4224902896c3d45fab353d788fe6c4866483a8"
integrity sha512-o1pw5+s/jWqsKbUAkCCaEcB8XLqJ4FlZhYfSvxZ88WRw9zoWOt9iQMMP82wLWhUX1DSzpNRI8BAD7aNLK6yRlA==
"@material/theme@^0.40.1":
version "0.40.1"
resolved "https://registry.yarnpkg.com/@material/theme/-/theme-0.40.1.tgz#3cc3f1bf87ee9581df03e347a1979e53ae617221"
integrity sha512-cH1CsGIDisEQ2oroZhLTypV0Ir00x3WIwFXnPo7qv3832tuIDkZY623U3rUax6KNPz4Hh1j0tNpTwgrNZwvwWA==
"@material/typography@^0.40.1":
version "0.40.1"
resolved "https://registry.yarnpkg.com/@material/typography/-/typography-0.40.1.tgz#68ecb767f7c54ca2f4053cccdd1c4a0198e60f9b"
integrity sha512-LkW2tAsId8zGKxGA5VIFXV/D1h4vCHQIuALRMaDpHbNGffgr2ubtJNvCh2EQkm19MTv4igVLEjn1Svh0dXcTpA==
"@mdi/svg@^3.0.39":
version "3.3.92"
resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-3.3.92.tgz#40a12670c46ed7673943b219e8410f90d0996e64"
@ -1065,16 +1158,6 @@
"@polymer/paper-ripple" "^3.0.0-pre.26"
"@polymer/polymer" "^3.0.0"
"@polymer/paper-button@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@polymer/paper-button/-/paper-button-3.0.1.tgz#f13b019137e3f6ccc4d04d0b1f27f4830ea5774d"
integrity sha512-JRNBc+Oj9EWnmyLr7FcCr8T1KAnEHPh6mosln9BUdkM+qYaYsudSICh3cjTIbnj6AuF5OJidoLkM1dlyj0j6Zg==
dependencies:
"@polymer/iron-flex-layout" "^3.0.0-pre.26"
"@polymer/paper-behaviors" "^3.0.0-pre.27"
"@polymer/paper-styles" "^3.0.0-pre.26"
"@polymer/polymer" "^3.0.0"
"@polymer/paper-card@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@polymer/paper-card/-/paper-card-3.0.1.tgz#fb5960b3e55fab56d20b7c1c3dee08f0d052ff2a"
@ -8695,14 +8778,14 @@ listr@^0.14.2:
p-map "^2.0.0"
rxjs "^6.3.3"
lit-element@^2.0.0:
lit-element@^2.0.0, lit-element@^2.0.0-rc.2:
version "2.0.1"
resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.0.1.tgz#9ec5871d3b64487f432c7c071df80ef031d7091b"
integrity sha512-2bu3B2ZYUZgntvOgu3i5mRK8geo45CLUwxwJEYK54hyednoJasjiTZPB13NBg1D+hNM2JfmWTWJnh1QEUQv7zw==
dependencies:
lit-html "^1.0.0"
lit-html@^1.0.0:
lit-html@^1.0.0, lit-html@^1.0.0-rc.2:
version "1.0.0"
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.0.0.tgz#3dc3781a8ca68a9b5c2ff2a61e263662b9b2267b"
integrity sha512-oeWlpLmBW3gFl7979Wol2LKITpmKTUFNn7PnFbh6YNynF61W74l6x5WhwItAwPRSATpexaX1egNnRzlN4GOtfQ==