mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 01:36:49 +00:00
Replace polymer paper-slider (#18168)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
434b9595c0
commit
62d21bea4f
@ -4,16 +4,11 @@ export const demoThemeJimpower = () => ({
|
||||
"primary-color": "#5294E2",
|
||||
"label-badge-red": "var(--accent-color)",
|
||||
"paper-tabs-selection-bar-color": "green",
|
||||
"paper-slider-knob-color": "var(--accent-color)",
|
||||
"light-primary-color": "var(--accent-color)",
|
||||
"primary-background-color": "#383C45",
|
||||
"primary-text-color": "#FFFFFF",
|
||||
"paper-item-selected_-_background-color": "#434954",
|
||||
"paper-slider-active-color": "var(--accent-color)",
|
||||
"secondary-background-color": "#383C45",
|
||||
"paper-slider-container-color":
|
||||
"linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
|
||||
"paper-slider-disabled-active-color": "var(--disabled-text-color)",
|
||||
"disabled-text-color": "#7F848E",
|
||||
"paper-item-icon_-_color": "green",
|
||||
"paper-grey-200": "#414A59",
|
||||
@ -32,14 +27,10 @@ export const demoThemeJimpower = () => ({
|
||||
"switch-unchecked-button-color": "var(--disabled-text-color)",
|
||||
"label-badge-border-color": "green",
|
||||
"paper-listbox-color": "var(--primary-color)",
|
||||
"paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
|
||||
"card-background-color": "#434954",
|
||||
"label-badge-text-color": "var(--primary-text-color)",
|
||||
"paper-slider-knob-start-color": "var(--accent-color)",
|
||||
"switch-unchecked-track-color": "var(--disabled-text-color)",
|
||||
"dark-primary-color": "var(--accent-color)",
|
||||
"paper-slider-secondary-color": "var(--secondary-background-color)",
|
||||
"paper-slider-pin-color": "var(--accent-color)",
|
||||
"paper-item-icon-active-color": "#F9C536",
|
||||
"accent-color": "#E45E65",
|
||||
"table-row-alternative-background-color": "#3E424B",
|
||||
|
@ -5,17 +5,12 @@ export const demoThemeKernehed = () => ({
|
||||
"primary-color": "#2980b9",
|
||||
"label-badge-red": "var(--accent-color)",
|
||||
"paper-tabs-selection-bar-color": "green",
|
||||
"paper-slider-knob-color": "var(--accent-color)",
|
||||
"primary-text-color": "#FFFFFF",
|
||||
"light-primary-color": "var(--accent-color)",
|
||||
"primary-background-color": "#222222",
|
||||
"sidebar-icon-color": "#777777",
|
||||
"paper-item-selected_-_background-color": "#292929",
|
||||
"paper-slider-active-color": "var(--accent-color)",
|
||||
"secondary-background-color": "#222222",
|
||||
"paper-slider-container-color":
|
||||
"linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
|
||||
"paper-slider-disabled-active-color": "var(--disabled-text-color)",
|
||||
"disabled-text-color": "#777777",
|
||||
"paper-item-icon_-_color": "green",
|
||||
"paper-grey-200": "#222222",
|
||||
@ -33,14 +28,10 @@ export const demoThemeKernehed = () => ({
|
||||
"switch-unchecked-button-color": "var(--disabled-text-color)",
|
||||
"label-badge-border-color": "green",
|
||||
"paper-listbox-color": "#777777",
|
||||
"paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
|
||||
"card-background-color": "#292929",
|
||||
"label-badge-text-color": "var(--primary-text-color)",
|
||||
"paper-slider-knob-start-color": "var(--accent-color)",
|
||||
"switch-unchecked-track-color": "var(--disabled-text-color)",
|
||||
"dark-primary-color": "var(--accent-color)",
|
||||
"paper-slider-secondary-color": "var(--secondary-background-color)",
|
||||
"paper-slider-pin-color": "var(--accent-color)",
|
||||
"paper-item-icon-active-color": "#b58e31",
|
||||
"accent-color": "#2980b9",
|
||||
"table-row-alternative-background-color": "#292929",
|
||||
|
@ -1,6 +1,5 @@
|
||||
export const demoThemeTeachingbirds = () => ({
|
||||
"paper-card-header-color": "var(--paper-item-icon-color)",
|
||||
"paper-slider-pin-color": "var(--primary-color)",
|
||||
"paper-listbox-background-color": "#202020",
|
||||
"paper-grey-50": "var(--primary-text-color)",
|
||||
"paper-item-icon-color": "#d3d3d3",
|
||||
@ -8,8 +7,6 @@ export const demoThemeTeachingbirds = () => ({
|
||||
"primary-color": "#389638",
|
||||
"light-primary-color": "#6f956f",
|
||||
"label-badge-red": "var(--primary-color)",
|
||||
"paper-slider-secondary-color": "var(--light-primary-color)",
|
||||
"paper-slider-knob-color": "var(--primary-color)",
|
||||
"paper-listbox-color": "#FFFFFF",
|
||||
"paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
|
||||
"switch-unchecked-track-color": "var(--primary-text-color)",
|
||||
@ -17,9 +14,7 @@ export const demoThemeTeachingbirds = () => ({
|
||||
"label-badge-text-color": "var(--text-primary-color)",
|
||||
"primary-background-color": "#303030",
|
||||
"sidebar-icon-color": "var(--paper-item-icon-color)",
|
||||
"paper-slider-active-color": "#d8bf50",
|
||||
"secondary-background-color": "#2b2b2b",
|
||||
"paper-slider-knob-start-color": "var(--primary-color)",
|
||||
"paper-item-icon-active-color": "#d8bf50",
|
||||
"switch-checked-color": "var(--primary-color)",
|
||||
"secondary-text-color": "#389638",
|
||||
|
@ -49,11 +49,11 @@ export class DemoHaCircularSlider extends LitElement {
|
||||
<div class="field">
|
||||
<p>Current</p>
|
||||
<ha-slider
|
||||
labeled
|
||||
min="10"
|
||||
max="30"
|
||||
.value=${this.current}
|
||||
@change=${this._currentChanged}
|
||||
pin
|
||||
></ha-slider>
|
||||
<p>${this.current} °C</p>
|
||||
</div>
|
||||
|
@ -57,8 +57,8 @@ export class DemoHaHsColorPicker extends LitElement {
|
||||
></ha-hs-color-picker>
|
||||
<p>Hue : ${this.value[0]}</p>
|
||||
<ha-slider
|
||||
labeled
|
||||
step="1"
|
||||
pin
|
||||
min="0"
|
||||
max="360"
|
||||
.value=${this.value[0]}
|
||||
@ -67,8 +67,8 @@ export class DemoHaHsColorPicker extends LitElement {
|
||||
</ha-slider>
|
||||
<p>Saturation : ${this.value[1]}</p>
|
||||
<ha-slider
|
||||
labeled
|
||||
step="0.01"
|
||||
pin
|
||||
min="0"
|
||||
max="1"
|
||||
.value=${this.value[1]}
|
||||
@ -77,8 +77,8 @@ export class DemoHaHsColorPicker extends LitElement {
|
||||
</ha-slider>
|
||||
<p>Color Brighness : ${this.brightness}</p>
|
||||
<ha-slider
|
||||
labeled
|
||||
step="1"
|
||||
pin
|
||||
min="0"
|
||||
max="255"
|
||||
.value=${this.brightness}
|
||||
|
@ -71,7 +71,6 @@
|
||||
"@material/mwc-radio": "0.27.0",
|
||||
"@material/mwc-ripple": "0.27.0",
|
||||
"@material/mwc-select": "0.27.0",
|
||||
"@material/mwc-slider": "0.27.0",
|
||||
"@material/mwc-switch": "0.27.0",
|
||||
"@material/mwc-tab": "0.27.0",
|
||||
"@material/mwc-tab-bar": "0.27.0",
|
||||
@ -89,7 +88,6 @@
|
||||
"@polymer/paper-input": "3.2.1",
|
||||
"@polymer/paper-item": "3.0.1",
|
||||
"@polymer/paper-listbox": "3.0.1",
|
||||
"@polymer/paper-slider": "3.0.1",
|
||||
"@polymer/paper-tabs": "3.1.0",
|
||||
"@polymer/paper-toast": "3.0.1",
|
||||
"@polymer/polymer": "3.5.1",
|
||||
|
@ -57,8 +57,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
|
||||
`
|
||||
: ""}
|
||||
<ha-slider
|
||||
pin
|
||||
ignore-bar-touch
|
||||
labeled
|
||||
.value=${this._value}
|
||||
.min=${this.schema.valueMin}
|
||||
.max=${this.schema.valueMax}
|
||||
|
@ -1,90 +0,0 @@
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import "./ha-icon";
|
||||
import "./ha-slider";
|
||||
|
||||
class HaLabeledSlider extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 5px 0 8px;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
ha-icon {
|
||||
margin-top: 4px;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
ha-slider {
|
||||
flex-grow: 1;
|
||||
background-image: var(--ha-slider-background);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="title">[[_getTitle()]]</div>
|
||||
<div class="extra-container"><slot name="extra"></slot></div>
|
||||
<div class="slider-container">
|
||||
<ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
|
||||
<ha-slider
|
||||
min="[[min]]"
|
||||
max="[[max]]"
|
||||
step="[[step]]"
|
||||
pin="[[pin]]"
|
||||
disabled="[[disabled]]"
|
||||
value="{{value}}"
|
||||
></ha-slider>
|
||||
</div>
|
||||
<template is="dom-if" if="[[helper]]">
|
||||
<ha-input-helper-text>[[helper]]</ha-input-helper-text>
|
||||
</template>
|
||||
`;
|
||||
}
|
||||
|
||||
_getTitle() {
|
||||
return `${this.caption}${this.caption && this.required ? " *" : ""}`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
caption: String,
|
||||
disabled: Boolean,
|
||||
required: Boolean,
|
||||
min: Number,
|
||||
max: Number,
|
||||
pin: Boolean,
|
||||
step: Number,
|
||||
helper: String,
|
||||
|
||||
extra: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
ignoreBarTouch: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
value: "",
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
notify: true,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-labeled-slider", HaLabeledSlider);
|
96
src/components/ha-labeled-slider.ts
Normal file
96
src/components/ha-labeled-slider.ts
Normal file
@ -0,0 +1,96 @@
|
||||
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import "./ha-icon";
|
||||
import "./ha-slider";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
|
||||
@customElement("ha-labeled-slider")
|
||||
class HaLabeledSlider extends LitElement {
|
||||
@property() public labeled? = false;
|
||||
|
||||
@property() public caption?: string;
|
||||
|
||||
@property() public disabled?: boolean;
|
||||
|
||||
@property() public required?: boolean;
|
||||
|
||||
@property() public min: number = 0;
|
||||
|
||||
@property() public max: number = 100;
|
||||
|
||||
@property() public step: number = 1;
|
||||
|
||||
@property() public helper?: string;
|
||||
|
||||
@property() public extra = false;
|
||||
|
||||
@property() public icon?: string;
|
||||
|
||||
@property() public value?: number;
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<div class="title">${this._getTitle()}</div>
|
||||
<div class="extra-container"><slot name="extra"></slot></div>
|
||||
<div class="slider-container">
|
||||
${this.icon ? html`<ha-icon icon=${this.icon}></ha-icon>` : nothing}
|
||||
<ha-slider
|
||||
.min=${this.min}
|
||||
.max=${this.max}
|
||||
.step=${this.step}
|
||||
labeled=${this.labeled}
|
||||
.disabled=${this.disabled}
|
||||
.value=${this.value}
|
||||
@change=${this._inputChanged}
|
||||
></ha-slider>
|
||||
</div>
|
||||
${this.helper
|
||||
? html`<ha-input-helper-text> ${this.helper} </ha-input-helper-text>`
|
||||
: nothing}
|
||||
`;
|
||||
}
|
||||
|
||||
private _getTitle(): string {
|
||||
return `${this.caption}${this.caption && this.required ? " *" : ""}`;
|
||||
}
|
||||
|
||||
private _inputChanged(ev) {
|
||||
fireEvent(this, "value-changed", {
|
||||
value: Number((ev.target as any).value),
|
||||
});
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 5px 0 8px;
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
ha-icon {
|
||||
margin-top: 8px;
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
ha-slider {
|
||||
flex-grow: 1;
|
||||
background-image: var(--ha-slider-background);
|
||||
border-radius: 4px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-labeled-slider": HaLabeledSlider;
|
||||
}
|
||||
}
|
@ -24,7 +24,7 @@ export class HaColorTempSelector extends LitElement {
|
||||
protected render() {
|
||||
return html`
|
||||
<ha-labeled-slider
|
||||
pin
|
||||
labeled
|
||||
icon="hass:thermometer"
|
||||
.caption=${this.label || ""}
|
||||
.min=${this.selector.color_temp?.min_mireds ?? 153}
|
||||
@ -33,27 +33,25 @@ export class HaColorTempSelector extends LitElement {
|
||||
.disabled=${this.disabled}
|
||||
.helper=${this.helper}
|
||||
.required=${this.required}
|
||||
@change=${this._valueChanged}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-labeled-slider>
|
||||
`;
|
||||
}
|
||||
|
||||
private _valueChanged(ev: CustomEvent) {
|
||||
fireEvent(this, "value-changed", {
|
||||
value: Number((ev.target as any).value),
|
||||
value: Number((ev.detail as any).value),
|
||||
});
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
ha-labeled-slider {
|
||||
--ha-slider-background: -webkit-linear-gradient(
|
||||
var(--float-end),
|
||||
--ha-slider-background: linear-gradient(
|
||||
to var(--float-end),
|
||||
rgb(255, 160, 0) 0%,
|
||||
white 50%,
|
||||
rgb(166, 209, 255) 100%
|
||||
);
|
||||
/* The color temp minimum value shouldn't be rendered differently. It's not "off". */
|
||||
--paper-slider-knob-start-border-color: var(--primary-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@ -48,6 +48,7 @@ export class HaNumberSelector extends LitElement {
|
||||
? html`${this.label}${this.required ? "*" : ""}`
|
||||
: ""}
|
||||
<ha-slider
|
||||
labeled
|
||||
.min=${this.selector.number?.min}
|
||||
.max=${this.selector.number?.max}
|
||||
.value=${this.value ?? ""}
|
||||
@ -56,8 +57,6 @@ export class HaNumberSelector extends LitElement {
|
||||
: this.selector.number?.step ?? 1}
|
||||
.disabled=${this.disabled}
|
||||
.required=${this.required}
|
||||
pin
|
||||
ignore-bar-touch
|
||||
@change=${this._handleSliderChange}
|
||||
>
|
||||
</ha-slider>
|
||||
|
@ -1,117 +0,0 @@
|
||||
import "@polymer/paper-slider";
|
||||
|
||||
const PaperSliderClass = customElements.get("paper-slider");
|
||||
let subTemplate;
|
||||
|
||||
export class HaSlider extends PaperSliderClass {
|
||||
static get template() {
|
||||
if (!subTemplate) {
|
||||
subTemplate = PaperSliderClass.template.cloneNode(true);
|
||||
|
||||
const superStyle = subTemplate.content.querySelector("style");
|
||||
|
||||
// append style to add mirroring of pin in RTL
|
||||
superStyle.appendChild(
|
||||
document.createTextNode(`
|
||||
:host([dir="rtl"]) #sliderContainer.pin.expand > .slider-knob > .slider-knob-inner::after {
|
||||
-webkit-transform: scale(1) translate(0, -17px) scaleX(-1) !important;
|
||||
transform: scale(1) translate(0, -17px) scaleX(-1) !important;
|
||||
}
|
||||
|
||||
.pin > .slider-knob > .slider-knob-inner {
|
||||
font-size: var(--ha-slider-pin-font-size, 15px);
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.disabled.ring > .slider-knob > .slider-knob-inner {
|
||||
background-color: var(--paper-slider-disabled-knob-color, var(--disabled-text-color));
|
||||
border: 2px solid var(--paper-slider-disabled-knob-color, var(--disabled-text-color));
|
||||
}
|
||||
|
||||
.pin > .slider-knob > .slider-knob-inner::before {
|
||||
top: unset;
|
||||
margin-left: unset;
|
||||
|
||||
bottom: calc(15px + var(--calculated-paper-slider-height)/2);
|
||||
left: 50%;
|
||||
width: 2.6em;
|
||||
height: 2.6em;
|
||||
|
||||
-webkit-transform-origin: left bottom;
|
||||
transform-origin: left bottom;
|
||||
-webkit-transform: rotate(-45deg) scale(0) translate(0);
|
||||
transform: rotate(-45deg) scale(0) translate(0);
|
||||
}
|
||||
|
||||
.pin.expand > .slider-knob > .slider-knob-inner::before {
|
||||
-webkit-transform: rotate(-45deg) scale(1) translate(7px, -7px);
|
||||
transform: rotate(-45deg) scale(1) translate(7px, -7px);
|
||||
}
|
||||
|
||||
.pin > .slider-knob > .slider-knob-inner::after {
|
||||
top: unset;
|
||||
font-size: unset;
|
||||
|
||||
bottom: calc(15px + var(--calculated-paper-slider-height)/2);
|
||||
left: 50%;
|
||||
margin-left: -1.3em;
|
||||
width: 2.6em;
|
||||
height: 2.5em;
|
||||
|
||||
-webkit-transform-origin: center bottom;
|
||||
transform-origin: center bottom;
|
||||
-webkit-transform: scale(0) translate(0);
|
||||
transform: scale(0) translate(0);
|
||||
}
|
||||
|
||||
.pin.expand > .slider-knob > .slider-knob-inner::after {
|
||||
-webkit-transform: scale(1) translate(0, -10px);
|
||||
transform: scale(1) translate(0, -10px);
|
||||
}
|
||||
|
||||
.slider-input {
|
||||
width: 54px;
|
||||
}
|
||||
`)
|
||||
);
|
||||
}
|
||||
return subTemplate;
|
||||
}
|
||||
|
||||
_setImmediateValue(newImmediateValue) {
|
||||
super._setImmediateValue(
|
||||
this.step >= 1
|
||||
? Math.round(newImmediateValue)
|
||||
: Math.round(newImmediateValue * 100) / 100
|
||||
);
|
||||
}
|
||||
|
||||
_calcStep(value) {
|
||||
if (!this.step) {
|
||||
return parseFloat(value);
|
||||
}
|
||||
|
||||
const numSteps = Math.round((value - this.min) / this.step);
|
||||
const stepStr = this.step.toString();
|
||||
const stepPointAt = stepStr.indexOf(".");
|
||||
if (stepPointAt !== -1) {
|
||||
/**
|
||||
* For small values of this.step, if we calculate the step using
|
||||
* For non-integer values of this.step, if we calculate the step using
|
||||
* `Math.round(value / step) * step` we may hit a precision point issue
|
||||
* eg. 0.1 * 0.2 = 0.020000000000000004
|
||||
* http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
|
||||
*
|
||||
* as a work around we can round with the decimal precision of `step`
|
||||
*/
|
||||
const precision = 10 ** (stepStr.length - stepPointAt - 1);
|
||||
return (
|
||||
Math.round((numSteps * this.step + this.min) * precision) / precision
|
||||
);
|
||||
}
|
||||
|
||||
return numSteps * this.step + this.min;
|
||||
}
|
||||
}
|
||||
customElements.define("ha-slider", HaSlider);
|
26
src/components/ha-slider.ts
Normal file
26
src/components/ha-slider.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import { customElement } from "lit/decorators";
|
||||
import { MdSlider } from "@material/web/slider/slider";
|
||||
import { CSSResult, css } from "lit";
|
||||
|
||||
@customElement("ha-slider")
|
||||
export class HaSlider extends MdSlider {
|
||||
static override styles: CSSResult[] = [
|
||||
...MdSlider.styles,
|
||||
css`
|
||||
:host {
|
||||
--md-sys-color-primary: var(--primary-color);
|
||||
--md-sys-color-outline: var(--outline-color);
|
||||
|
||||
min-width: 100px;
|
||||
min-inline-size: 100px;
|
||||
width: 200px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-slider": HaSlider;
|
||||
}
|
||||
}
|
@ -115,46 +115,50 @@ class LightRgbColorPicker extends LitElement {
|
||||
</div>
|
||||
${supportsRgbw || supportsRgbww
|
||||
? html`<ha-labeled-slider
|
||||
labeled
|
||||
.caption=${this.hass.localize("ui.card.light.color_brightness")}
|
||||
icon="hass:brightness-7"
|
||||
min="0"
|
||||
max="100"
|
||||
.value=${this._colorBrightnessSliderValue}
|
||||
@change=${this._colorBrightnessSliderChanged}
|
||||
pin
|
||||
@value-changed=${this._colorBrightnessSliderChanged}
|
||||
></ha-labeled-slider>`
|
||||
: nothing}
|
||||
${supportsRgbw
|
||||
? html`
|
||||
<ha-labeled-slider
|
||||
labeled
|
||||
.caption=${this.hass.localize("ui.card.light.white_value")}
|
||||
icon="hass:file-word-box"
|
||||
min="0"
|
||||
max="100"
|
||||
.name=${"wv"}
|
||||
.value=${this._wvSliderValue}
|
||||
@change=${this._wvSliderChanged}
|
||||
pin
|
||||
@value-changed=${this._wvSliderChanged}
|
||||
></ha-labeled-slider>
|
||||
`
|
||||
: nothing}
|
||||
${supportsRgbww
|
||||
? html`
|
||||
<ha-labeled-slider
|
||||
labeled
|
||||
.caption=${this.hass.localize("ui.card.light.cold_white_value")}
|
||||
icon="hass:file-word-box-outline"
|
||||
min="0"
|
||||
max="100"
|
||||
.name=${"cw"}
|
||||
.value=${this._cwSliderValue}
|
||||
@change=${this._wvSliderChanged}
|
||||
pin
|
||||
@value-changed=${this._wvSliderChanged}
|
||||
></ha-labeled-slider>
|
||||
<ha-labeled-slider
|
||||
labeled
|
||||
.caption=${this.hass.localize("ui.card.light.warm_white_value")}
|
||||
icon="hass:file-word-box"
|
||||
min="0"
|
||||
max="100"
|
||||
.name=${"ww"}
|
||||
.value=${this._wwSliderValue}
|
||||
@change=${this._wvSliderChanged}
|
||||
pin
|
||||
@value-changed=${this._wvSliderChanged}
|
||||
></ha-labeled-slider>
|
||||
`
|
||||
: nothing}
|
||||
@ -302,9 +306,9 @@ class LightRgbColorPicker extends LitElement {
|
||||
}
|
||||
|
||||
private _wvSliderChanged(ev: CustomEvent) {
|
||||
const target = ev.target as any;
|
||||
const target = ev.detail as any;
|
||||
let wv = Number(target.value);
|
||||
const name = target.name;
|
||||
const name = (ev.target as any).name;
|
||||
|
||||
if (isNaN(wv)) {
|
||||
return;
|
||||
@ -351,7 +355,7 @@ class LightRgbColorPicker extends LitElement {
|
||||
}
|
||||
|
||||
private _colorBrightnessSliderChanged(ev: CustomEvent) {
|
||||
const target = ev.target as any;
|
||||
const target = ev.detail as any;
|
||||
let value = Number(target.value);
|
||||
|
||||
if (isNaN(value)) {
|
||||
|
@ -128,9 +128,8 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
${supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET)
|
||||
? html`
|
||||
<ha-slider
|
||||
labeled
|
||||
id="input"
|
||||
pin
|
||||
ignore-bar-touch
|
||||
.dir=${computeRTLDirection(this.hass!)}
|
||||
.value=${Number(stateObj.attributes.volume_level) * 100}
|
||||
@change=${this._selectedValueChanged}
|
||||
@ -283,8 +282,7 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
private _selectedValueChanged(e: Event): void {
|
||||
this.hass!.callService("media_player", "volume_set", {
|
||||
entity_id: this.stateObj!.entity_id,
|
||||
volume_level:
|
||||
Number((e.currentTarget! as HTMLElement).getAttribute("value")!) / 100,
|
||||
volume_level: (e.target as any).value / 100,
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -85,15 +85,14 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
|
||||
? html`
|
||||
<div class="flex">
|
||||
<ha-slider
|
||||
.disabled=${isUnavailableState(stateObj.state)}
|
||||
labeled
|
||||
.dir=${computeRTLDirection(this.hass)}
|
||||
.disabled=${isUnavailableState(stateObj.state)}
|
||||
.step=${Number(stateObj.attributes.step)}
|
||||
.min=${Number(stateObj.attributes.min)}
|
||||
.max=${Number(stateObj.attributes.max)}
|
||||
.value=${stateObj.state}
|
||||
pin
|
||||
@change=${this._selectedValueChanged}
|
||||
ignore-bar-touch
|
||||
></ha-slider>
|
||||
<span class="state">
|
||||
${this.hass.formatEntityState(stateObj)}
|
||||
|
@ -252,11 +252,10 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
|
||||
supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET)
|
||||
? html`
|
||||
<ha-slider
|
||||
labeled
|
||||
.dir=${computeRTLDirection(this.hass!)}
|
||||
.value=${Number(stateObj.attributes.volume_level) * 100}
|
||||
pin
|
||||
@change=${this._selectedValueChanged}
|
||||
ignore-bar-touch
|
||||
id="input"
|
||||
></ha-slider>
|
||||
`
|
||||
|
@ -89,15 +89,14 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
|
||||
? html`
|
||||
<div class="flex">
|
||||
<ha-slider
|
||||
labeled
|
||||
.disabled=${stateObj.state === UNAVAILABLE}
|
||||
.dir=${computeRTLDirection(this.hass)}
|
||||
.step=${Number(stateObj.attributes.step)}
|
||||
.min=${Number(stateObj.attributes.min)}
|
||||
.max=${Number(stateObj.attributes.max)}
|
||||
.value=${Number(stateObj.state)}
|
||||
pin
|
||||
@change=${this._selectedValueChanged}
|
||||
ignore-bar-touch
|
||||
></ha-slider>
|
||||
<span class="state">
|
||||
${this.hass.formatEntityState(stateObj)}
|
||||
|
@ -293,6 +293,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
|
||||
.path=${mdiVolumeHigh}
|
||||
></ha-icon-button>
|
||||
<ha-slider
|
||||
labeled
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
|
@ -47,7 +47,7 @@ documentContainer.innerHTML = `<custom-style>
|
||||
--primary-background-color: #fafafa;
|
||||
--secondary-background-color: #e5e5e5; /* behind the cards on state */
|
||||
--clear-background-color: #ffffff;
|
||||
|
||||
|
||||
/* for header */
|
||||
--header-height: 56px;
|
||||
|
||||
@ -418,6 +418,11 @@ documentContainer.innerHTML = `<custom-style>
|
||||
line-height: 20px;
|
||||
};
|
||||
|
||||
direction: ltr;
|
||||
--direction: ltr;
|
||||
--float-start: left;
|
||||
--float-end: right;
|
||||
|
||||
${Object.entries(derivedStyles)
|
||||
.map(([key, value]) => `--${key}: ${value};`)
|
||||
.join("")}
|
||||
|
@ -79,13 +79,6 @@ export const derivedStyles = {
|
||||
"table-header-background-color": "var(--input-fill-color)",
|
||||
"table-row-background-color": "var(--primary-background-color)",
|
||||
"table-row-alternative-background-color": "var(--secondary-background-color)",
|
||||
"paper-slider-knob-color": "var(--slider-color)",
|
||||
"paper-slider-knob-start-color": "var(--slider-color)",
|
||||
"paper-slider-pin-color": "var(--slider-color)",
|
||||
"paper-slider-pin-start-color": "var(--slider-color)",
|
||||
"paper-slider-active-color": "var(--slider-color)",
|
||||
"paper-slider-secondary-color": "var(--slider-secondary-color)",
|
||||
"paper-slider-container-color": "var(--slider-track-color)",
|
||||
"data-table-background-color": "var(--card-background-color)",
|
||||
"markdown-code-background-color": "var(--primary-background-color)",
|
||||
|
||||
|
@ -57,15 +57,14 @@ class StateCardInputNumber extends LitElement {
|
||||
? html`
|
||||
<div class="flex">
|
||||
<ha-slider
|
||||
.disabled=${isUnavailableState(this.stateObj.state)}
|
||||
labeled
|
||||
.dir=${computeRTLDirection(this.hass)}
|
||||
.disabled=${isUnavailableState(this.stateObj.state)}
|
||||
.step=${Number(this.stateObj.attributes.step)}
|
||||
.min=${Number(this.stateObj.attributes.min)}
|
||||
.max=${Number(this.stateObj.attributes.max)}
|
||||
.value=${this.stateObj.state}
|
||||
pin
|
||||
@change=${this._selectedValueChanged}
|
||||
ignore-bar-touch
|
||||
></ha-slider>
|
||||
<span class="state">
|
||||
${this.hass.formatEntityState(this.stateObj)}
|
||||
|
@ -18,6 +18,7 @@ class StateCardNumber extends mixinBehaviors(
|
||||
<style>
|
||||
ha-slider {
|
||||
margin-left: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.state {
|
||||
@apply --paper-font-body1;
|
||||
@ -42,16 +43,15 @@ class StateCardNumber extends mixinBehaviors(
|
||||
<div class="horizontal justified layout" id="number_card">
|
||||
${this.stateInfoTemplate}
|
||||
<ha-slider
|
||||
labeled
|
||||
min="[[min]]"
|
||||
max="[[max]]"
|
||||
value="{{value}}"
|
||||
step="[[step]]"
|
||||
hidden="[[hiddenslider]]"
|
||||
pin
|
||||
on-change="selectedValueChanged"
|
||||
on-click="stopPropagation"
|
||||
id="slider"
|
||||
ignore-bar-touch=""
|
||||
>
|
||||
</ha-slider>
|
||||
<ha-textfield
|
||||
@ -183,12 +183,12 @@ class StateCardNumber extends mixinBehaviors(
|
||||
this.value = ev.target.value;
|
||||
}
|
||||
|
||||
selectedValueChanged() {
|
||||
if (this.value === Number(this.stateObj.state)) {
|
||||
selectedValueChanged(ev) {
|
||||
if (ev.target.value === Number(this.stateObj.state)) {
|
||||
return;
|
||||
}
|
||||
this.hass.callService("number", "set_value", {
|
||||
value: this.value,
|
||||
value: ev.target.value,
|
||||
entity_id: this.stateObj.entity_id,
|
||||
});
|
||||
}
|
||||
|
74
yarn.lock
74
yarn.lock
@ -2748,20 +2748,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@material/mwc-slider@npm:0.27.0":
|
||||
version: 0.27.0
|
||||
resolution: "@material/mwc-slider@npm:0.27.0"
|
||||
dependencies:
|
||||
"@material/dom": =14.0.0-canary.53b3cad2f.0
|
||||
"@material/mwc-base": ^0.27.0
|
||||
"@material/mwc-ripple": ^0.27.0
|
||||
"@material/slider": =14.0.0-canary.53b3cad2f.0
|
||||
lit: ^2.0.0
|
||||
tslib: ^2.0.1
|
||||
checksum: 0e7f9d0d418731fb9ba1ffe99cc88e79a4116e92d048476dc24fa87688f13335945fcdc9fef6d6f699e0c6b16fea5ed7527f71193bcf1365177e7ba7a865b140
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@material/mwc-switch@npm:0.27.0":
|
||||
version: 0.27.0
|
||||
resolution: "@material/mwc-switch@npm:0.27.0"
|
||||
@ -2988,24 +2974,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@material/slider@npm:=14.0.0-canary.53b3cad2f.0":
|
||||
version: 14.0.0-canary.53b3cad2f.0
|
||||
resolution: "@material/slider@npm:14.0.0-canary.53b3cad2f.0"
|
||||
dependencies:
|
||||
"@material/animation": 14.0.0-canary.53b3cad2f.0
|
||||
"@material/base": 14.0.0-canary.53b3cad2f.0
|
||||
"@material/dom": 14.0.0-canary.53b3cad2f.0
|
||||
"@material/elevation": 14.0.0-canary.53b3cad2f.0
|
||||
"@material/feature-targeting": 14.0.0-canary.53b3cad2f.0
|
||||
"@material/ripple": 14.0.0-canary.53b3cad2f.0
|
||||
"@material/rtl": 14.0.0-canary.53b3cad2f.0
|
||||
"@material/theme": 14.0.0-canary.53b3cad2f.0
|
||||
"@material/typography": 14.0.0-canary.53b3cad2f.0
|
||||
tslib: ^2.1.0
|
||||
checksum: 136d6c6f77e4fa586ac375b5a108be06a394f0c55fbb10e73eaa990cd6cb38d2787e278911705571b5336402690e0b88b5fe9de9916704db948247a6b6b0c1fb
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@material/switch@npm:=14.0.0-canary.53b3cad2f.0":
|
||||
version: 14.0.0-canary.53b3cad2f.0
|
||||
resolution: "@material/switch@npm:14.0.0-canary.53b3cad2f.0"
|
||||
@ -3600,15 +3568,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polymer/iron-range-behavior@npm:^3.0.0-pre.26":
|
||||
version: 3.0.1
|
||||
resolution: "@polymer/iron-range-behavior@npm:3.0.1"
|
||||
dependencies:
|
||||
"@polymer/polymer": ^3.0.0
|
||||
checksum: da2405650bccc2071bebfd30f379e92d930bd95d306e2626da9d92a07b849f0e5cdc08430bfb03a6ae8f5644ab9364ff64252892da1b1ddc01d2f5f1f026e808
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polymer/iron-resizable-behavior@npm:3.0.1, @polymer/iron-resizable-behavior@npm:^3.0.0-pre.26":
|
||||
version: 3.0.1
|
||||
resolution: "@polymer/iron-resizable-behavior@npm:3.0.1"
|
||||
@ -3661,7 +3620,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polymer/paper-input@npm:3.2.1, @polymer/paper-input@npm:^3.0.0-pre.26":
|
||||
"@polymer/paper-input@npm:3.2.1":
|
||||
version: 3.2.1
|
||||
resolution: "@polymer/paper-input@npm:3.2.1"
|
||||
dependencies:
|
||||
@ -3700,18 +3659,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polymer/paper-progress@npm:^3.0.0-pre.26":
|
||||
version: 3.0.1
|
||||
resolution: "@polymer/paper-progress@npm:3.0.1"
|
||||
dependencies:
|
||||
"@polymer/iron-flex-layout": ^3.0.0-pre.26
|
||||
"@polymer/iron-range-behavior": ^3.0.0-pre.26
|
||||
"@polymer/paper-styles": ^3.0.0-pre.26
|
||||
"@polymer/polymer": ^3.0.0
|
||||
checksum: 5ae0ce84d05ed777c40c27c82559cedc44f1b4ed523a675932cce4a4d6a82f772ee414b21c67db528ea316686c1ed84b53e1850bbb3a6f5c3964339e2c20289b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polymer/paper-ripple@npm:^3.0.0-pre.26":
|
||||
version: 3.0.2
|
||||
resolution: "@polymer/paper-ripple@npm:3.0.2"
|
||||
@ -3722,23 +3669,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polymer/paper-slider@npm:3.0.1":
|
||||
version: 3.0.1
|
||||
resolution: "@polymer/paper-slider@npm:3.0.1"
|
||||
dependencies:
|
||||
"@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
|
||||
"@polymer/iron-behaviors": ^3.0.0-pre.26
|
||||
"@polymer/iron-flex-layout": ^3.0.0-pre.26
|
||||
"@polymer/iron-form-element-behavior": ^3.0.0-pre.26
|
||||
"@polymer/paper-behaviors": ^3.0.0-pre.27
|
||||
"@polymer/paper-input": ^3.0.0-pre.26
|
||||
"@polymer/paper-progress": ^3.0.0-pre.26
|
||||
"@polymer/paper-styles": ^3.0.0-pre.26
|
||||
"@polymer/polymer": ^3.0.0
|
||||
checksum: ab915606df8150f77ad9e03c845ce5f600882cd7c0b3bb6a6ea77816ee1b40d01d5b3f72f0d8df6ce5e46fa9f0335d3930c8cc46a23cf8d8dfdbc0aeb9c181a4
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polymer/paper-styles@npm:^3.0.0-pre.26":
|
||||
version: 3.0.1
|
||||
resolution: "@polymer/paper-styles@npm:3.0.1"
|
||||
@ -9690,7 +9620,6 @@ __metadata:
|
||||
"@material/mwc-radio": 0.27.0
|
||||
"@material/mwc-ripple": 0.27.0
|
||||
"@material/mwc-select": 0.27.0
|
||||
"@material/mwc-slider": 0.27.0
|
||||
"@material/mwc-switch": 0.27.0
|
||||
"@material/mwc-tab": 0.27.0
|
||||
"@material/mwc-tab-bar": 0.27.0
|
||||
@ -9712,7 +9641,6 @@ __metadata:
|
||||
"@polymer/paper-input": 3.2.1
|
||||
"@polymer/paper-item": 3.0.1
|
||||
"@polymer/paper-listbox": 3.0.1
|
||||
"@polymer/paper-slider": 3.0.1
|
||||
"@polymer/paper-tabs": 3.1.0
|
||||
"@polymer/paper-toast": 3.0.1
|
||||
"@polymer/polymer": 3.5.1
|
||||
|
Loading…
x
Reference in New Issue
Block a user