github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Use new round sliders for light card (#3634) 

* Use new round sliders for light card

* Remove _roundSliderstyle
This commit is contained in:
Thomas Lovén 2019-09-08 20:47:36 +02:00 committed by Paulus Schoutsen
parent 44ca37c1dc
commit cdfc3f8faf
3 changed files with 48 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -64,6 +64,7 @@
"@polymer/paper-toggle-button": "^3.0.1",
"@polymer/paper-tooltip": "^3.0.1",
"@polymer/polymer": "3.1.0",
"@thomasloven/round-slider": "^0.2.2",
"@vaadin/vaadin-combo-box": "^4.2.8",
"@vaadin/vaadin-date-picker": "^3.3.3",
"@webcomponents/shadycss": "^1.9.0",

130
src/panels/lovelace/cards/hui-light-card.ts
View File

@ -7,6 +7,7 @@ import {
customElement,
} from "lit-element";
import "@polymer/paper-icon-button/paper-icon-button";
import "@thomasloven/round-slider";
import stateIcon from "../../../common/entity/state_icon";
import computeStateName from "../../../common/entity/compute_state_name";
@ -22,25 +23,9 @@ import { styleMap } from "lit-html/directives/style-map";
import { HomeAssistant, LightEntity } from "../../../types";
import { LovelaceCard, LovelaceCardEditor } from "../types";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { loadRoundslider } from "../../../resources/jquery.roundslider.ondemand";
import { toggleEntity } from "../common/entity/toggle-entity";
import { LightCardConfig } from "./types";
const lightConfig = {
radius: 80,
step: 1,
circleShape: "pie",
startAngle: 315,
width: 5,
min: 1,
max: 100,
sliderType: "min-range",
lineCap: "round",
handleSize: "+12",
showTooltip: false,
animation: false,
};
@customElement("hui-light-card")
export class HuiLightCard extends LitElement implements LovelaceCard {
public static async getConfigElement(): Promise<LovelaceCardEditor> {
@ -55,10 +40,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
@property() private _config?: LightCardConfig;
@property() private _roundSliderStyle?: TemplateResult;
@property() private _jQuery?: any;
private _brightnessTimout?: number;
public getCardSize(): number {
@ -79,6 +60,8 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
}
const stateObj = this.hass.states[this._config!.entity] as LightEntity;
const brightness =
Math.round((stateObj.attributes.brightness / 254) * 100) || 0;
if (!stateObj) {
return html`
@ -107,7 +90,13 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
class="more-info"
@click="${this._handleMoreInfo}"
></paper-icon-button>
<div id="light"></div>
<div id="light">
<round-slider
.value=${brightness}
@value-changing=${this._dragEvent}
@value-changed=${this._setBrightness}
></round-slider>
</div>
<div id="tooltip">
<div class="icon-state">
<ha-icon
@ -120,7 +109,9 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
})}"
@click="${this._handleTap}"
></ha-icon>
<div class="brightness" @ha-click="${this._handleTap}"></div>
<div class="brightness" @ha-click="${this._handleTap}">
${brightness} %
</div>
<div class="name">
${this._config.name || computeStateName(stateObj)}
</div>
@ -134,35 +125,9 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
return hasConfigOrEntityChanged(this, changedProps);
}
protected async firstUpdated(): Promise<void> {
const loaded = await loadRoundslider();
this._roundSliderStyle = loaded.roundSliderStyle;
this._jQuery = loaded.jQuery;
const stateObj = this.hass!.states[this._config!.entity] as LightEntity;
if (!stateObj) {
// Card will require refresh to work again
return;
}
const brightness = stateObj.attributes.brightness || 0;
this._jQuery("#light", this.shadowRoot).roundSlider({
...lightConfig,
change: (value) => this._setBrightness(value),
drag: (value) => this._dragEvent(value),
start: () => this._showBrightness(),
stop: () => this._hideBrightness(),
});
this.shadowRoot!.querySelector(".brightness")!.innerHTML =
(Math.round((brightness / 254) * 100) || 0) + "%";
}
protected updated(changedProps: PropertyValues): void {
super.updated(changedProps);
if (!this._config || !this.hass || !this._jQuery) {
if (!this._config || !this.hass) {
return;
}
@ -172,12 +137,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
return;
}
const attrs = stateObj.attributes;
this._jQuery("#light", this.shadowRoot).roundSlider({
value: Math.round((attrs.brightness / 254) * 100) || 0,
});
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.themes !== this.hass.themes) {
applyThemesOnElement(this, this.hass.themes, this._config.theme);
@ -186,7 +145,6 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
private renderStyle(): TemplateResult {
return html`
${this._roundSliderStyle}
<style>
:host {
display: block;
@ -220,45 +178,20 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
#light {
margin: 0 auto;
padding-top: 16px;
padding-bottom: 16px;
padding-top: 0;
padding-bottom: 32px;
display: flex;
justify-content: center;
align-items: center;
height: 160px;
width: 160px;
}
#light .rs-bar.rs-transition.rs-first,
.rs-bar.rs-transition.rs-second {
#light round-slider {
z-index: 20 !important;
}
#light .rs-range-color {
background-color: var(--primary-color);
}
#light .rs-path-color {
background-color: var(--disabled-text-color);
}
#light .rs-handle {
background-color: var(--paper-card-background-color, white);
padding: 7px;
border: 2px solid var(--disabled-text-color);
}
#light .rs-handle.rs-focus {
border-color: var(--primary-color);
}
#light .rs-handle:after {
border-color: var(--primary-color);
background-color: var(--primary-color);
}
#light .rs-border {
border-color: var(--rail-border-color);
}
#light .rs-inner.rs-bg-color.rs-border,
#light .rs-overlay.rs-transition.rs-bg-color {
background-color: var(--paper-card-background-color, white);
margin: 0 auto;
display: inline-block;
--round-slider-path-color: var(--disabled-text-color);
--round-slider-bar-color: var(--primary-color);
}
.light-icon {
@ -278,7 +211,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
}
.name {
padding-top: 40px;
padding-top: 32px;
font-size: var(--name-font-size);
}
@ -287,7 +220,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
position: absolute;
margin: 0 auto;
left: 50%;
top: 50%;
top: 45%;
transform: translate(-50%);
opacity: 0;
transition: opacity 0.5s ease-in-out;
@ -314,7 +247,10 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
}
private _dragEvent(e: any): void {
this.shadowRoot!.querySelector(".brightness")!.innerHTML = e.value + "%";
this.shadowRoot!.querySelector(".brightness")!.innerHTML =
e.detail.value + "%";
this._showBrightness();
this._hideBrightness();
}
private _showBrightness(): void {
@ -335,7 +271,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
private _setBrightness(e: any): void {
this.hass!.callService("light", "turn_on", {
entity_id: this._config!.entity,
brightness_pct: e.value,
brightness_pct: e.detail.value,
});
}

14
yarn.lock
View File

@ -1509,6 +1509,13 @@
resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz#8da5c6530915653f3a1f38fd5f101d8c3f8079c5"
integrity sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==
"@thomasloven/round-slider@^0.2.2":
version "0.2.2"
resolved "https://registry.yarnpkg.com/@thomasloven/round-slider/-/round-slider-0.2.2.tgz#498e2d0b545cefd457c1249e3f90dec9b91dd91b"
integrity sha512-nh4Um3srnTnWaOWkq6sMaXsSgn07MfV/u5rjFZAoSETJrLCBkwWM5IToN3Tqy9SSQk6Zonk1/wpcY5tdACq2lg==
dependencies:
lit-element "^2.2.1"
"@types/babel-generator@^6.25.1":
version "6.25.3"
resolved "https://registry.yarnpkg.com/@types/babel-generator/-/babel-generator-6.25.3.tgz#8f06caa12d0595a0538560abe771966d77d29286"
@ -8588,6 +8595,13 @@ lit-element@^2.0.1, lit-element@^2.2.0:
dependencies:
lit-html "^1.0.0"
lit-element@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.2.1.tgz#79c94d8cfdc2d73b245656e37991bd1e4811d96f"
integrity sha512-ipDcgQ1EpW6Va2Z6dWm79jYdimVepO5GL0eYkZrFvdr0OD/1N260Q9DH+K5HXHFrRoC7dOg+ZpED2XE0TgGdXw==
dependencies:
lit-html "^1.0.0"
lit-html@^1.0.0, lit-html@^1.1.0, lit-html@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.1.2.tgz#2e3560a7075210243649c888ad738eaf0daa8374"