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

Switch paper-toggle-button to mwc-switch (#3683)

Browse Source 
* Switch paper-toggle-button to mwc-switch

Closes https://github.com/home-assistant/home-assistant-polymer/issues/3352

* ha-switch

* apply not-checked theming

Thanks @bramkragten!

* address review comments
This commit is contained in:
Ian Richardson 2019-09-21 04:59:27 -05:00 committed by Bram Kragten
parent 9a7eb3d406
commit 5e28e1b320
32 changed files with 240 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
gallery/src/components/demo-cards.js
View File

@ -1,9 +1,9 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-toggle-button/paper-toggle-button";
import "./demo-card";
import "../../../src/components/ha-switch";
class DemoCards extends PolymerElement {
static get template() {
@ -26,9 +26,7 @@ class DemoCards extends PolymerElement {
</style>
<app-toolbar>
<div class="filters">
<paper-toggle-button checked="{{_showConfig}}"
>Show config</paper-toggle-button
>
<ha-switch checked="{{_showConfig}}">Show config</ha-switch>
</div>
</app-toolbar>
<div class="cards">

6
gallery/src/components/demo-more-infos.js
View File

@ -1,9 +1,9 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import "@polymer/paper-toggle-button/paper-toggle-button";
import "./demo-more-info";
import "../../../src/components/ha-switch";
class DemoMoreInfos extends PolymerElement {
static get template() {
@ -26,9 +26,7 @@ class DemoMoreInfos extends PolymerElement {
</style>
<app-toolbar>
<div class="filters">
<paper-toggle-button checked="{{_showConfig}}"
>Show entity</paper-toggle-button
>
<ha-switch checked="{{_showConfig}}">Show entity</ha-switch>
</div>
</app-toolbar>
<div class="cards">

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

@ -2,19 +2,19 @@ import "@polymer/iron-icon/iron-icon";
import "@material/mwc-button";
import "@polymer/paper-card/paper-card";
import "@polymer/paper-tooltip/paper-tooltip";
import "@polymer/paper-toggle-button/paper-toggle-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../src/components/ha-label-badge";
import "../../../src/components/ha-markdown";
import "../../../src/components/buttons/ha-call-api-button";
import "../../../src/components/ha-switch";
import "../../../src/resources/ha-style";
import "../components/hassio-card-content";
import { EventsMixin } from "../../../src/mixins/events-mixin";
import { navigate } from "../../../src/common/navigate";
import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
import "../components/hassio-card-content";
const PERMIS_DESC = {
rating: {
@ -122,7 +122,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
width: 16px;
color: var(--secondary-text-color);
}
paper-toggle-button {
ha-switch {
display: inline;
}
iron-icon.running {
@ -348,26 +348,26 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
<template is="dom-if" if="[[addon.version]]">
<div class="state">
<div>Start on boot</div>
<paper-toggle-button
<ha-switch
on-change="startOnBootToggled"
checked="[[computeStartOnBoot(addon.boot)]]"
></paper-toggle-button>
></ha-switch>
</div>
<div class="state">
<div>Auto update</div>
<paper-toggle-button
<ha-switch
on-change="autoUpdateToggled"
checked="[[addon.auto_update]]"
></paper-toggle-button>
></ha-switch>
</div>
<template is="dom-if" if="[[addon.ingress]]">
<div class="state">
<div>Show in sidebar</div>
<paper-toggle-button
<ha-switch
on-change="panelToggled"
checked="[[addon.ingress_panel]]"
disabled="[[_computeCannotIngressSidebar(hass, addon)]]"
></paper-toggle-button>
></ha-switch>
<template is="dom-if" if="[[_computeCannotIngressSidebar(hass, addon)]]">
<span>This option requires Home Assistant 0.92 or later.</span>
</template>
@ -381,10 +381,10 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
<paper-tooltip>Grant the add-on elevated system access.</paper-tooltip>
</span>
</div>
<paper-toggle-button
<ha-switch
on-change="protectionToggled"
checked="[[addon.protected]]"
></paper-toggle-button>
></ha-switch>
</div>
</template>
</div>

2
package.json
View File

@ -23,6 +23,7 @@
"@material/mwc-checkbox": "^0.8.0",
"@material/mwc-fab": "^0.8.0",
"@material/mwc-ripple": "0.8.0",
"@material/mwc-switch": "^0.8.0",
"@mdi/svg": "4.4.95",
"@polymer/app-layout": "^3.0.2",
"@polymer/app-localize-behavior": "^3.0.1",
@ -63,7 +64,6 @@
"@polymer/paper-styles": "^3.0.1",
"@polymer/paper-tabs": "^3.0.1",
"@polymer/paper-toast": "^3.0.1",
"@polymer/paper-toggle-button": "^3.0.1",
"@polymer/paper-tooltip": "^3.0.1",
"@polymer/polymer": "3.1.0",
"@thomasloven/round-slider": "^0.2.2",

16
src/components/entity/ha-entity-toggle.ts
View File

@ -1,8 +1,6 @@
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-toggle-button/paper-toggle-button";
import { STATES_OFF } from "../../common/const";
import computeStateDomain from "../../common/entity/compute_state_domain";
import {
LitElement,
TemplateResult,
@ -15,8 +13,12 @@ import {
import { HomeAssistant } from "../../types";
import { HassEntity } from "home-assistant-js-websocket";
import { forwardHaptic } from "../../data/haptics";
import computeStateDomain from "../../common/entity/compute_state_domain";
import computeStateName from "../../common/entity/compute_state_name";
import "../ha-switch";
const isOn = (stateObj?: HassEntity) =>
stateObj !== undefined && !STATES_OFF.includes(stateObj.state);
@ -29,7 +31,7 @@ class HaEntityToggle extends LitElement {
protected render(): TemplateResult | void {
if (!this.stateObj) {
return html`
<paper-toggle-button disabled></paper-toggle-button>
<ha-switch disabled></ha-switch>
`;
}
@ -51,13 +53,13 @@ class HaEntityToggle extends LitElement {
}
return html`
<paper-toggle-button
<ha-switch
aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
this._isOn ? "off" : "on"
}`}
.checked=${this._isOn}
@change=${this._toggleChanged}
></paper-toggle-button>
></ha-switch>
`;
}
@ -149,9 +151,7 @@ class HaEntityToggle extends LitElement {
paper-icon-button[state-active] {
color: var(--paper-icon-button-active-color, var(--primary-color));
}
paper-toggle-button {
cursor: pointer;
--paper-toggle-button-label-spacing: 0;
ha-switch {
padding: 13px 5px;
margin: -4px -5px;
}

8
src/components/ha-push-notifications-toggle.js
View File

@ -1,11 +1,11 @@
import "@polymer/paper-toggle-button/paper-toggle-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { getAppKey } from "../data/notify_html5";
import { EventsMixin } from "../mixins/events-mixin";
import "./ha-switch";
export const pushSupported =
"serviceWorker" in navigator &&
"PushManager" in window &&
@ -19,11 +19,11 @@ export const pushSupported =
class HaPushNotificationsToggle extends EventsMixin(PolymerElement) {
static get template() {
return html`
<paper-toggle-button
<ha-switch
disabled="[[_compDisabled(disabled, loading)]]"
checked="{{pushChecked}}"
on-change="handlePushChange"
></paper-toggle-button>
></ha-switch>
`;
}

37
src/components/ha-switch.ts Normal file
View File

@ -0,0 +1,37 @@
import { Constructor, customElement, CSSResult, css } from "lit-element";
import "@material/mwc-switch";
import { style } from "@material/mwc-switch/mwc-switch-css";
// tslint:disable-next-line
import { Switch } from "@material/mwc-switch";
// tslint:disable-next-line
const MwcSwitch = customElements.get("mwc-switch") as Constructor<Switch>;
@customElement("ha-switch")
export class HaSwitch extends MwcSwitch {
protected firstUpdated() {
super.firstUpdated();
this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
}
protected static get styles(): CSSResult[] {
return [
style,
css`
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
background-color: var(--paper-toggle-button-unchecked-button-color);
border-color: var(--paper-toggle-button-unchecked-button-color);
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
background-color: var(--paper-toggle-button-unchecked-bar-color;
border-color: var(--paper-toggle-button-unchecked-bar-color);
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-switch": HaSwitch;
}
}

15
src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
View File

@ -11,6 +11,8 @@ import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-input/paper-input";
import "../../components/dialog/ha-paper-dialog";
import "../../components/ha-switch";
import { HomeAssistant } from "../../types";
import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
import {
@ -19,6 +21,8 @@ import {
} from "../../data/config_entries";
import { PolymerChangedEvent } from "../../polymer-types";
import { haStyleDialog } from "../../resources/styles";
// tslint:disable-next-line: no-duplicate-imports
import { HaSwitch } from "../../components/ha-switch";
@customElement("dialog-config-entry-system-options")
class DialogConfigEntrySystemOptions extends LitElement {
@ -72,9 +76,9 @@ class DialogConfigEntrySystemOptions extends LitElement {
`
: ""}
<div class="form">
<paper-toggle-button
<ha-switch
.checked=${!this._disableNewEntities}
@checked-changed=${this._disableNewEntitiesChanged}
@change=${this._disableNewEntitiesChanged}
.disabled=${this._submitting}
>
<div>
@ -87,7 +91,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
"ui.dialogs.config_entry_system_options.enable_new_entities_description"
)}
</div>
</paper-toggle-button>
</ha-switch>
</div>
`}
</paper-dialog-scrollable>
@ -109,9 +113,9 @@ class DialogConfigEntrySystemOptions extends LitElement {
`;
}
private _disableNewEntitiesChanged(ev: PolymerChangedEvent<boolean>): void {
private _disableNewEntitiesChanged(ev: Event): void {
this._error = undefined;
this._disableNewEntities = !ev.detail.value;
this._disableNewEntities = !(ev.target as HaSwitch).checked;
}
private async _updateEntry(): Promise<void> {
@ -152,6 +156,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
}
.form {
padding-top: 6px;
padding-bottom: 24px;
color: var(--primary-text-color);
}

6
src/dialogs/more-info/controls/more-info-climate.ts
View File

@ -1,7 +1,6 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-toggle-button/paper-toggle-button";
import {
LitElement,
html,
@ -15,6 +14,7 @@ import {
import "../../../components/ha-climate-control";
import "../../../components/ha-paper-slider";
import "../../../components/ha-paper-dropdown-menu";
import "../../../components/ha-switch";
import { supportsFeature } from "../../../common/entity/supports-feature";
@ -279,10 +279,10 @@ class MoreInfoClimate extends LitElement {
<div class="flex">
${hass.localize("ui.card.climate.aux_heat")}
</div>
<paper-toggle-button
<ha-switch
.checked=${stateObj.attributes.aux_heat === "on"}
@change=${this._auxToggleChanged}
></paper-toggle-button>
></ha-switch>
</div>
</div>
`

9
src/dialogs/more-info/controls/more-info-fan.js
View File

@ -2,15 +2,16 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/paper-icon-button/paper-icon-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-toggle-button/paper-toggle-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-attributes";
import "../../../components/ha-paper-dropdown-menu";
import "../../../components/ha-switch";
import { EventsMixin } from "../../../mixins/events-mixin";
import attributeClassNames from "../../../common/entity/attribute_class_names";
import { EventsMixin } from "../../../mixins/events-mixin";
import LocalizeMixin from "../../../mixins/localize-mixin";
/*
@ -68,11 +69,11 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
<div class="container-oscillating">
<div class="center horizontal layout single-row">
<div class="flex">[[localize('ui.card.fan.oscillate')]]</div>
<paper-toggle-button
<ha-switch
checked="[[oscillationToggleChecked]]"
on-change="oscillationToggleChanged"
>
</paper-toggle-button>
</ha-switch>
</div>
</div>

12
src/dialogs/more-info/controls/more-info-water_heater.js
View File

@ -1,7 +1,6 @@
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-toggle-button/paper-toggle-button";
import { timeOut } from "@polymer/polymer/lib/utils/async";
import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -10,11 +9,12 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../components/ha-water_heater-control";
import "../../../components/ha-paper-slider";
import "../../../components/ha-paper-dropdown-menu";
import "../../../components/ha-switch";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { EventsMixin } from "../../../mixins/events-mixin";
import featureClassNames from "../../../common/entity/feature_class_names";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { EventsMixin } from "../../../mixins/events-mixin";
import LocalizeMixin from "../../../mixins/localize-mixin";
/*
@ -124,11 +124,11 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
<div class="flex">
[[localize('ui.card.water_heater.away_mode')]]
</div>
<paper-toggle-button
<ha-switch
checked="[[awayToggleChecked]]"
on-change="awayToggleChanged"
>
</paper-toggle-button>
</ha-switch>
</div>
</div>
</template>

13
src/panels/config/cloud/account/cloud-account.js
View File

@ -1,6 +1,5 @@
import "@material/mwc-button";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-toggle-button/paper-toggle-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -8,18 +7,18 @@ import "../../../../components/ha-card";
import "../../../../components/buttons/ha-call-api-button";
import "../../../../layouts/hass-subpage";
import "../../../../resources/ha-style";
import "../../ha-config-section";
import "./cloud-webhooks";
import formatDateTime from "../../../../common/datetime/format_date_time";
import { EventsMixin } from "../../../../mixins/events-mixin";
import LocalizeMixin from "../../../../mixins/localize-mixin";
import { fetchCloudSubscriptionInfo } from "../../../../data/cloud";
import "./cloud-alexa-pref";
import "./cloud-google-pref";
import "./cloud-remote-pref";
import { EventsMixin } from "../../../../mixins/events-mixin";
import { fetchCloudSubscriptionInfo } from "../../../../data/cloud";
import formatDateTime from "../../../../common/datetime/format_date_time";
import LocalizeMixin from "../../../../mixins/localize-mixin";
/*
* @appliesMixin EventsMixin
* @appliesMixin LocalizeMixin

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

@ -7,12 +7,12 @@ import {
property,
} from "lit-element";
import "@material/mwc-button";
import "@polymer/paper-toggle-button/paper-toggle-button";
// tslint:disable-next-line
import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
import "../../../../components/ha-card";
import "../../../../components/ha-switch";
// tslint:disable-next-line: no-duplicate-imports
import { HaSwitch } from "../../../../components/ha-switch";
import { fireEvent } from "../../../../common/dom/fire_event";
import { HomeAssistant } from "../../../../types";
import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
@ -32,10 +32,10 @@ export class CloudAlexaPref extends LitElement {
return html`
<ha-card header="Alexa">
<paper-toggle-button
<ha-switch
.checked=${alexa_enabled}
@change=${this._enabledToggleChanged}
></paper-toggle-button>
></ha-switch>
<div class="card-content">
With the Alexa integration for Home Assistant Cloud you'll be able to
control all your Home Assistant devices via any Alexa-enabled device.
@ -70,10 +70,10 @@ export class CloudAlexaPref extends LitElement {
allows you to always see the latest states in the Alexa app
and use the state changes to create routines.
</p>
<paper-toggle-button
<ha-switch
.checked=${alexa_report_state}
@change=${this._reportToggleChanged}
></paper-toggle-button>
></ha-switch>
`
: ""}
</div>
@ -102,7 +102,7 @@ export class CloudAlexaPref extends LitElement {
}
private async _enabledToggleChanged(ev) {
const toggle = ev.target as PaperToggleButtonElement;
const toggle = ev.target as HaSwitch;
try {
await updateCloudPref(this.hass!, { alexa_enabled: toggle.checked! });
fireEvent(this, "ha-refresh-cloud-status");
@ -112,7 +112,7 @@ export class CloudAlexaPref extends LitElement {
}
private async _reportToggleChanged(ev) {
const toggle = ev.target as PaperToggleButtonElement;
const toggle = ev.target as HaSwitch;
try {
await updateCloudPref(this.hass!, {
alexa_report_state: toggle.checked!,
@ -133,7 +133,7 @@ export class CloudAlexaPref extends LitElement {
a {
color: var(--primary-color);
}
ha-card > paper-toggle-button {
ha-card > ha-switch {
margin: -4px 0;
position: absolute;
right: 8px;

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

@ -7,13 +7,13 @@ import {
css,
} from "lit-element";
import "@material/mwc-button";
import "@polymer/paper-toggle-button/paper-toggle-button";
// tslint:disable-next-line
import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
import "../../../../components/buttons/ha-call-api-button";
import "../../../../components/ha-card";
import "../../../../components/ha-switch";
// tslint:disable-next-line
import { HaSwitch } from "../../../../components/ha-switch";
import { fireEvent } from "../../../../common/dom/fire_event";
import { HomeAssistant } from "../../../../types";
import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
@ -43,11 +43,11 @@ export class CloudGooglePref extends LitElement {
return html`
<ha-card header="Google Assistant">
<paper-toggle-button
<ha-switch
id="google_enabled"
.checked="${google_enabled}"
@change="${this._toggleChanged}"
></paper-toggle-button>
></ha-switch>
<div class="card-content">
With the Google Assistant integration for Home Assistant Cloud you'll
be able to control all your Home Assistant devices via any Google
@ -110,7 +110,7 @@ export class CloudGooglePref extends LitElement {
}
private async _toggleChanged(ev) {
const toggle = ev.target as PaperToggleButtonElement;
const toggle = ev.target as HaSwitch;
try {
await updateCloudPref(this.hass!, { [toggle.id]: toggle.checked! });
fireEvent(this, "ha-refresh-cloud-status");
@ -138,7 +138,7 @@ export class CloudGooglePref extends LitElement {
a {
color: var(--primary-color);
}
ha-card > paper-toggle-button {
ha-card > ha-switch {
margin: -4px 0;
position: absolute;
right: 8px;

14
src/panels/config/cloud/account/cloud-remote-pref.ts
View File

@ -8,13 +8,13 @@ import {
css,
} from "lit-element";
import "@material/mwc-button";
import "@polymer/paper-toggle-button/paper-toggle-button";
import "@polymer/paper-item/paper-item-body";
// tslint:disable-next-line
import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
import "../../../../components/ha-card";
import "../../../../components/ha-switch";
// tslint:disable-next-line
import { HaSwitch } from "../../../../components/ha-switch";
import { fireEvent } from "../../../../common/dom/fire_event";
import { HomeAssistant } from "../../../../types";
import {
@ -59,10 +59,10 @@ export class CloudRemotePref extends LitElement {
return html`
<ha-card header="Remote Control">
<paper-toggle-button
<ha-switch
.checked="${remote_connected}"
@change="${this._toggleChanged}"
></paper-toggle-button>
></ha-switch>
<div class="card-content">
Home Assistant Cloud provides a secure remote connection to your
instance while away from home. Your instance
@ -95,7 +95,7 @@ export class CloudRemotePref extends LitElement {
}
private async _toggleChanged(ev) {
const toggle = ev.target as PaperToggleButtonElement;
const toggle = ev.target as HaSwitch;
try {
if (toggle.checked) {
@ -118,7 +118,7 @@ export class CloudRemotePref extends LitElement {
a {
color: var(--primary-color);
}
ha-card > paper-toggle-button {
ha-card > ha-switch {
margin: -4px 0;
position: absolute;
right: 8px;

7
src/panels/config/cloud/account/cloud-webhooks.ts
View File

@ -4,11 +4,12 @@ import {
PropertyDeclarations,
PropertyValues,
} from "lit-element";
import "@polymer/paper-toggle-button/paper-toggle-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-spinner/paper-spinner";
import "../../../../components/ha-card";
import "../../../../components/ha-switch";
import { HomeAssistant, WebhookError } from "../../../../types";
import { Webhook, fetchWebhooks } from "../../../../data/webhook";
@ -116,9 +117,7 @@ export class CloudWebhooks extends LitElement {
</mwc-button>
`
: html`
<paper-toggle-button
@click="${this._enableWebhook}"
></paper-toggle-button>
<ha-switch @click="${this._enableWebhook}"></ha-switch>
`}
</div>
`

29
src/panels/config/cloud/alexa/cloud-alexa.ts
View File

@ -7,12 +7,15 @@ import {
customElement,
property,
} from "lit-element";
import "@polymer/paper-toggle-button";
import "@polymer/paper-icon-button";
import memoizeOne from "memoize-one";
import "../../../../layouts/hass-subpage";
import "../../../../layouts/hass-loading-screen";
import "../../../../components/ha-card";
import "../../../../components/ha-switch";
import "../../../../components/entity/state-info";
import { HomeAssistant } from "../../../../types";
import {
CloudStatusLoggedIn,
@ -20,19 +23,20 @@ import {
updateCloudAlexaEntityConfig,
AlexaEntityConfig,
} from "../../../../data/cloud";
import memoizeOne from "memoize-one";
import {
generateFilter,
isEmptyFilter,
EntityFilter,
} from "../../../../common/entity/entity_filter";
import { compare } from "../../../../common/string/compare";
import computeStateName from "../../../../common/entity/compute_state_name";
import { fireEvent } from "../../../../common/dom/fire_event";
import { PolymerChangedEvent } from "../../../../polymer-types";
import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler";
import computeDomain from "../../../../common/entity/compute_domain";
import { AlexaEntity, fetchCloudAlexaEntities } from "../../../../data/alexa";
// tslint:disable-next-line: no-duplicate-imports
import { HaSwitch } from "../../../../components/ha-switch";
import computeStateName from "../../../../common/entity/compute_state_name";
import computeDomain from "../../../../common/entity/compute_domain";
const DEFAULT_CONFIG_EXPOSE = true;
const IGNORE_INTERFACES = ["Alexa.EndpointHealth"];
@ -126,14 +130,14 @@ class CloudAlexa extends LitElement {
)
.join(", ")}
</state-info>
<paper-toggle-button
<ha-switch
.entityId=${entity.entity_id}
.disabled=${!emptyFilter}
.checked=${isExposed}
@checked-changed=${this._exposeChanged}
@change=${this._exposeChanged}
>
Expose to Alexa
</paper-toggle-button>
</ha-switch>
</div>
</ha-card>
`);
@ -227,9 +231,9 @@ class CloudAlexa extends LitElement {
fireEvent(this, "hass-more-info", { entityId });
}
private async _exposeChanged(ev: PolymerChangedEvent<boolean>) {
private async _exposeChanged(ev: Event) {
const entityId = (ev.currentTarget as any).entityId;
const newExposed = ev.detail.value;
const newExposed = (ev.target as HaSwitch).checked;
await this._updateExposed(entityId, newExposed);
}
@ -328,9 +332,8 @@ class CloudAlexa extends LitElement {
display: flex;
flex-wrap: wrap;
padding: 4px;
--paper-toggle-button-label-spacing: 16px;
}
paper-toggle-button {
ha-switch {
clear: both;
}
ha-card {
@ -344,7 +347,7 @@ class CloudAlexa extends LitElement {
state-info {
cursor: pointer;
}
paper-toggle-button {
ha-switch {
padding: 8px 0;
}

37
src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
View File

@ -7,12 +7,15 @@ import {
customElement,
property,
} from "lit-element";
import "@polymer/paper-toggle-button";
import memoizeOne from "memoize-one";
import "@polymer/paper-icon-button";
import "../../../../layouts/hass-subpage";
import "../../../../layouts/hass-loading-screen";
import "../../../../components/ha-card";
import "../../../../components/entity/state-info";
import "../../../../components/ha-switch";
import { HomeAssistant } from "../../../../types";
import {
CloudStatusLoggedIn,
@ -21,23 +24,24 @@ import {
cloudSyncGoogleAssistant,
GoogleEntityConfig,
} from "../../../../data/cloud";
import memoizeOne from "memoize-one";
import {
generateFilter,
isEmptyFilter,
EntityFilter,
} from "../../../../common/entity/entity_filter";
import { compare } from "../../../../common/string/compare";
import computeStateName from "../../../../common/entity/compute_state_name";
import { fireEvent } from "../../../../common/dom/fire_event";
import { showToast } from "../../../../util/toast";
import { PolymerChangedEvent } from "../../../../polymer-types";
import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler";
import computeDomain from "../../../../common/entity/compute_domain";
import {
GoogleEntity,
fetchCloudGoogleEntities,
} from "../../../../data/google_assistant";
// tslint:disable-next-line: no-duplicate-imports
import { HaSwitch } from "../../../../components/ha-switch";
import computeStateName from "../../../../common/entity/compute_state_name";
import computeDomain from "../../../../common/entity/compute_domain";
const DEFAULT_CONFIG_EXPOSE = true;
@ -122,23 +126,23 @@ class CloudGoogleAssistant extends LitElement {
.map((trait) => trait.substr(trait.lastIndexOf(".") + 1))
.join(", ")}
</state-info>
<paper-toggle-button
<ha-switch
.entityId=${entity.entity_id}
.disabled=${!emptyFilter}
.checked=${isExposed}
@checked-changed=${this._exposeChanged}
@change=${this._exposeChanged}
>
Expose to Google Assistant
</paper-toggle-button>
</ha-switch>
${entity.might_2fa
? html`
<paper-toggle-button
<ha-switch
.entityId=${entity.entity_id}
.checked=${Boolean(config.disable_2fa)}
@checked-changed=${this._disable2FAChanged}
@change=${this._disable2FAChanged}
>
Disable two factor authentication
</paper-toggle-button>
</ha-switch>
`
: ""}
</div>
@ -234,9 +238,9 @@ class CloudGoogleAssistant extends LitElement {
fireEvent(this, "hass-more-info", { entityId });
}
private async _exposeChanged(ev: PolymerChangedEvent<boolean>) {
private async _exposeChanged(ev: Event) {
const entityId = (ev.currentTarget as any).entityId;
const newExposed = ev.detail.value;
const newExposed = (ev.target as HaSwitch).checked;
await this._updateExposed(entityId, newExposed);
}
@ -251,9 +255,9 @@ class CloudGoogleAssistant extends LitElement {
this._ensureEntitySync();
}
private async _disable2FAChanged(ev: PolymerChangedEvent<boolean>) {
private async _disable2FAChanged(ev: Event) {
const entityId = (ev.currentTarget as any).entityId;
const newDisable2FA = ev.detail.value;
const newDisable2FA = (ev.target as HaSwitch).checked;
const curDisable2FA = Boolean(
(this._entityConfigs[entityId] || {}).disable_2fa
);
@ -348,7 +352,6 @@ class CloudGoogleAssistant extends LitElement {
display: flex;
flex-wrap: wrap;
padding: 4px;
--paper-toggle-button-label-spacing: 16px;
}
ha-card {
margin: 4px;
@ -361,7 +364,7 @@ class CloudGoogleAssistant extends LitElement {
state-info {
cursor: pointer;
}
paper-toggle-button {
ha-switch {
padding: 8px 0;
}

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

@ -8,16 +8,19 @@ import {
} from "lit-element";
import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-toggle-button/paper-toggle-button";
import "../../../components/dialog/ha-paper-dialog";
import "../../../components/ha-switch";
import { EntityRegistryDetailDialogParams } from "./show-dialog-entity-registry-detail";
import { PolymerChangedEvent } from "../../../polymer-types";
import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import computeDomain from "../../../common/entity/compute_domain";
import { HassEntity } from "home-assistant-js-websocket";
// tslint:disable-next-line: no-duplicate-imports
import { HaSwitch } from "../../../components/ha-switch";
import computeDomain from "../../../common/entity/compute_domain";
import computeStateName from "../../../common/entity/compute_state_name";
class DialogEntityRegistryDetail extends LitElement {
@ -95,9 +98,9 @@ class DialogEntityRegistryDetail extends LitElement {
.disabled=${this._submitting}
></paper-input>
<div class="row">
<paper-toggle-button
<ha-switch
.checked=${!this._disabledBy}
@checked-changed=${this._disabledByChanged}
@change=${this._disabledByChanged}
>
<div>
<div>
@ -121,7 +124,7 @@ class DialogEntityRegistryDetail extends LitElement {
<br />Note: this might not work yet with all integrations.
</div>
</div>
</paper-toggle-button>
</ha-switch>
</div>
</div>
</paper-dialog-scrollable>
@ -190,8 +193,8 @@ class DialogEntityRegistryDetail extends LitElement {
this._params = undefined;
}
}
private _disabledByChanged(ev: PolymerChangedEvent<boolean>): void {
this._disabledBy = ev.detail.value ? null : "user";
private _disabledByChanged(ev: Event): void {
this._disabledBy = (ev.target as HaSwitch).checked ? null : "user";
}
static get styles(): CSSResult[] {

15
src/panels/lovelace/components/hui-entities-toggle.ts
View File

@ -8,8 +8,11 @@ import {
css,
CSSResult,
} from "lit-element";
import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
import "../../../components/ha-switch";
// tslint:disable-next-line: no-duplicate-imports
import { HaSwitch } from "../../../components/ha-switch";
import { DOMAINS_TOGGLE } from "../../../common/const";
import { turnOnOffEntities } from "../common/entity/turn-on-off-entities";
import { HomeAssistant } from "../../../types";
@ -40,14 +43,14 @@ class HuiEntitiesToggle extends LitElement {
}
return html`
<paper-toggle-button
<ha-switch
aria-label="Toggle entities."
?checked="${this._toggleEntities!.some((entityId) => {
const stateObj = this.hass!.states[entityId];
return stateObj && stateObj.state === "on";
})}"
@change="${this._callService}"
></paper-toggle-button>
></ha-switch>
`;
}
@ -57,9 +60,7 @@ class HuiEntitiesToggle extends LitElement {
width: 38px;
display: block;
}
paper-toggle-button {
cursor: pointer;
--paper-toggle-button-label-spacing: 0;
ha-switch {
padding: 13px 5px;
margin: -4px -5px;
}
@ -68,7 +69,7 @@ class HuiEntitiesToggle extends LitElement {
private _callService(ev: MouseEvent): void {
forwardHaptic("light");
const turnOn = (ev.target as PaperToggleButtonElement).checked;
const turnOn = (ev.target as HaSwitch).checked;
turnOnOffEntities(this.hass!, this._toggleEntities!, turnOn!);
}
}

2
src/panels/lovelace/components/hui-image.ts
View File

@ -1,5 +1,3 @@
import "@polymer/paper-toggle-button/paper-toggle-button";
import { STATES_OFF } from "../../../common/const";
import parseAspectRatio from "../../../common/util/parse-aspect-ratio";

2
src/panels/lovelace/editor/config-elements/config-elements-style.ts
View File

@ -2,7 +2,7 @@ import { html } from "lit-element";
export const configElementStyle = html`
<style>
paper-toggle-button {
ha-switch {
padding-top: 16px;
}
.side-by-side {

6
src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
View File

@ -8,13 +8,13 @@ import {
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-toggle-button/paper-toggle-button";
import "../../../../components/entity/state-badge";
import "../../components/hui-theme-select-editor";
import "../../components/hui-entity-editor";
import "../../../../components/ha-card";
import "../../../../components/ha-icon";
import "../../../../components/ha-switch";
import { processEditorEntities } from "../process-editor-entities";
import { struct } from "../../common/structs/struct";
@ -88,11 +88,11 @@ export class HuiEntitiesCardEditor extends LitElement
.configValue="${"theme"}"
@theme-changed="${this._valueChanged}"
></hui-theme-select-editor>
<paper-toggle-button
<ha-switch
?checked="${this._config!.show_header_toggle !== false}"
.configValue="${"show_header_toggle"}"
@change="${this._valueChanged}"
>Show Header Toggle?</paper-toggle-button
>Show Header Toggle?</ha-switch
>
</div>
<hui-entity-editor

8
src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts
View File

@ -119,17 +119,17 @@ export class HuiEntityButtonCardEditor extends LitElement
></paper-input>
</div>
<div class="side-by-side">
<paper-toggle-button
<ha-switch
?checked="${this._config!.show_name !== false}"
.configValue="${"show_name"}"
@change="${this._valueChanged}"
>Show Name?</paper-toggle-button
>Show Name?</ha-switch
>
<paper-toggle-button
<ha-switch
?checked="${this._config!.show_icon !== false}"
.configValue="${"show_icon"}"
@change="${this._valueChanged}"
>Show Icon?</paper-toggle-button
>Show Icon?</ha-switch
>
</div>
<div class="side-by-side">

8
src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
View File

@ -8,10 +8,10 @@ import {
CSSResult,
} from "lit-element";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-toggle-button/paper-toggle-button";
import "../../components/hui-theme-select-editor";
import "../../components/hui-entity-editor";
import "../../../../components/ha-switch";
import { struct } from "../../common/structs/struct";
import { EntitiesEditorEvent, EditorTarget } from "../types";
@ -130,10 +130,10 @@ export class HuiGaugeCardEditor extends LitElement
></paper-input>
</div>
<div class="side-by-side">
<paper-toggle-button
<ha-switch
?checked="${this._useSeverity !== false}"
@change="${this._toggleSeverity}"
>Define Severity?</paper-toggle-button
>Define Severity?</ha-switch
>
<div class="severity">
<paper-input
@ -176,7 +176,7 @@ export class HuiGaugeCardEditor extends LitElement
flex: 1 0 30%;
padding-right: 4px;
}
paper-toggle-button[checked] ~ .severity {
ha-switch[checked] ~ .severity {
display: flex;
}
`;

14
src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
View File

@ -8,13 +8,13 @@ import {
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-toggle-button/paper-toggle-button";
import "../../../../components/entity/state-badge";
import "../../components/hui-theme-select-editor";
import "../../components/hui-entity-editor";
import "../../../../components/ha-card";
import "../../../../components/ha-icon";
import "../../../../components/ha-switch";
import { struct } from "../../common/structs/struct";
import { processEditorEntities } from "../process-editor-entities";
@ -114,23 +114,23 @@ export class HuiGlanceCardEditor extends LitElement
></paper-input>
</div>
<div class="side-by-side">
<paper-toggle-button
<ha-switch
?checked="${this._show_name !== false}"
.configValue="${"show_name"}"
@change="${this._valueChanged}"
>Show Name?</paper-toggle-button
>Show Name?</ha-switch
>
<paper-toggle-button
<ha-switch
?checked="${this._show_icon !== false}"
.configValue="${"show_icon"}"
@change="${this._valueChanged}"
>Show Icon?</paper-toggle-button
>Show Icon?</ha-switch
>
<paper-toggle-button
<ha-switch
?checked="${this._show_state !== false}"
.configValue="${"show_state"}"
@change="${this._valueChanged}"
>Show State?</paper-toggle-button
>Show State?</ha-switch
>
</div>
</div>

4
src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
View File

@ -105,11 +105,11 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
@value-changed="${this._valueChanged}"
></paper-input>
</div>
<paper-toggle-button
<ha-switch
?checked="${this._dark_mode !== false}"
.configValue="${"dark_mode"}"
@change="${this._valueChanged}"
>Dark Mode?</paper-toggle-button
>Dark Mode?</ha-switch
>
<hui-entity-editor
.hass="${this.hass}"

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

@ -6,17 +6,17 @@ import {
property,
} from "lit-element";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-toggle-button/paper-toggle-button";
import { EditorTarget } from "../types";
import { HomeAssistant } from "../../../../types";
import { fireEvent } from "../../../../common/dom/fire_event";
import { configElementStyle } from "../config-elements/config-elements-style";
import "../../components/hui-theme-select-editor";
import { LovelaceViewConfig } from "../../../../data/lovelace";
import { slugify } from "../../../../common/string/slugify";
import "../../components/hui-theme-select-editor";
import "../../../../components/ha-switch";
declare global {
interface HASSDomEvents {
"view-config-changed": {
@ -104,11 +104,11 @@ export class HuiViewEditor extends LitElement {
.configValue=${"theme"}
@theme-changed=${this._valueChanged}
></hui-theme-select-editor>
<paper-toggle-button
<ha-switch
?checked=${this._panel !== false}
.configValue=${"panel"}
@change=${this._valueChanged}
>Panel Mode?</paper-toggle-button
>Panel Mode?</ha-switch
>
</div>
`;

4
src/panels/profile/ha-advanced-mode-card.ts
View File

@ -24,11 +24,11 @@ class AdvancedModeCard extends LitElement {
<ha-card>
<div class="card-header">
<div class="title">Advanced mode</div>
<paper-toggle-button
<ha-switch
.checked=${this.coreUserData && this.coreUserData.showAdvanced}
.disabled=${this.coreUserData === undefined}
@change=${this._advancedToggled}
></paper-toggle-button>
></ha-switch>
</div>
<div class="card-content">
Home Assistant hides advanced features and options by default. You can

16
src/panels/profile/ha-force-narrow-row.ts
View File

@ -5,12 +5,14 @@ import {
property,
customElement,
} from "lit-element";
import "@polymer/paper-toggle-button/paper-toggle-button";
import "./ha-settings-row";
import "../../components/ha-switch";
import { HomeAssistant } from "../../types";
import { fireEvent } from "../../common/dom/fire_event";
import { PolymerChangedEvent } from "../../polymer-types";
// tslint:disable-next-line: no-duplicate-imports
import { HaSwitch } from "../../components/ha-switch";
@customElement("ha-force-narrow-row")
class HaPushNotificationsRow extends LitElement {
@ -26,16 +28,16 @@ class HaPushNotificationsRow extends LitElement {
<span slot="description">
${this.hass.localize("ui.panel.profile.force_narrow.description")}
</span>
<paper-toggle-button
<ha-switch
.checked=${this.hass.dockedSidebar === "always_hidden"}
@checked-changed=${this._checkedChanged}
></paper-toggle-button>
@change=${this._checkedChanged}
></ha-switch>
</ha-settings-row>
`;
}
private async _checkedChanged(ev: PolymerChangedEvent<boolean>) {
const newValue = ev.detail.value;
private async _checkedChanged(ev: Event) {
const newValue = (ev.target as HaSwitch).checked;
if (newValue === (this.hass.dockedSidebar === "always_hidden")) {
return;
}

2
src/resources/ha-style.ts
View File

@ -72,7 +72,7 @@ documentContainer.innerHTML = `<custom-style>
from paper-styles/color.html to here.
*/
--paper-grey-50: #fafafa; /* default for: --paper-toggle-button-unchecked-button-color */
--paper-grey-50: #fafafa; /* default for: --mwc-switch-unchecked-button-color */
--paper-grey-200: #eeeeee; /* for ha-date-picker-style */
--paper-grey-500: #9e9e9e; /* --label-badge-grey */

35
yarn.lock
View File

@ -661,6 +661,16 @@
lit-html "^1.0.0"
tslib "^1.10.0"
"@material/mwc-switch@^0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@material/mwc-switch/-/mwc-switch-0.8.0.tgz#5a2afc95e5f65ad077781fe16b6231cf5caddc9b"
integrity sha512-q6VWrtOJIOjyl35xo6G2npq0guac0avqUH+gR8TvQXSO0E2+pB+2GX+PhSryVBbFxgJRiVmfRlWBeIzlYtI4mg==
dependencies:
"@material/mwc-base" "^0.8.0"
"@material/mwc-ripple" "^0.8.0"
"@material/switch" "^3.0.0"
tslib "^1.10.0"
"@material/ripple@^3.0.0", "@material/ripple@^3.1.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-3.1.0.tgz#5cb581e9a70415c50c8b92ecd8628d5eeae34c74"
@ -685,6 +695,21 @@
dependencies:
"@material/feature-targeting" "^3.1.0"
"@material/switch@^3.0.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@material/switch/-/switch-3.1.0.tgz#6a610b05339ce4d145f7791debb37302b8f2ef70"
integrity sha512-DhxFN3aRrShkkiDG1fFLp1TZZCinnkLlCoxhhyCKEdCl+jaCaTl2Ii3SIw2SvN1KwMLHBX33jIzm+odOLsz7/Q==
dependencies:
"@material/animation" "^3.1.0"
"@material/base" "^3.1.0"
"@material/dom" "^3.1.0"
"@material/elevation" "^3.1.0"
"@material/feature-targeting" "^3.1.0"
"@material/ripple" "^3.1.0"
"@material/rtl" "^3.1.0"
"@material/theme" "^3.1.0"
tslib "^1.9.3"
"@material/theme@^3.1.0":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@material/theme/-/theme-3.1.0.tgz#d31147bbc9e20bdaa3e322c9e898e4fc98807d8c"
@ -1222,16 +1247,6 @@
"@polymer/iron-overlay-behavior" "^3.0.0-pre.27"
"@polymer/polymer" "^3.0.0"
"@polymer/paper-toggle-button@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@polymer/paper-toggle-button/-/paper-toggle-button-3.0.1.tgz#7d855420f0df96e7f812a9f1bdcfbc5ab082e819"
integrity sha512-jadZB60fycT7YnSAH0H23LYo6/2HYmMZTtNr9LpdSIRFPLX6mqqxewex92cFz019bMKaRJgORn308hRlJo2u6A==
dependencies:
"@polymer/iron-checked-element-behavior" "^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-tooltip@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@polymer/paper-tooltip/-/paper-tooltip-3.0.1.tgz#cdbb06442737513f081437c6302842170ce714dc"