jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-07 09:59:42 +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
Download Patch File Download Diff File Expand all files Collapse all files

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