mirror of
https://github.com/home-assistant/frontend.git
synced 2025-04-25 05:47:20 +00:00
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
Paulus Schoutsen
parent
44ca37c1dc
commit
cdfc3f8faf
@ -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",
|
||||
|
||||
@ -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
14
yarn.lock
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user