From b1339d6568b03c1a04f8bca95bbe0966e1c11cc8 Mon Sep 17 00:00:00 2001 From: Simon Lamon <32477463+silamon@users.noreply.github.com> Date: Tue, 29 Aug 2023 10:40:32 +0000 Subject: [PATCH 1/7] experiment --- package.json | 2 - src/components/ha-slider.js | 117 ------------------------------------ src/components/ha-slider.ts | 21 +++++++ yarn.lock | 74 +---------------------- 4 files changed, 22 insertions(+), 192 deletions(-) delete mode 100644 src/components/ha-slider.js create mode 100644 src/components/ha-slider.ts diff --git a/package.json b/package.json index 7251637e8dde..fbba8d2e41c4 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,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", diff --git a/src/components/ha-slider.js b/src/components/ha-slider.js deleted file mode 100644 index 11cda48db133..000000000000 --- a/src/components/ha-slider.js +++ /dev/null @@ -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); diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts new file mode 100644 index 000000000000..2680c74ed7cc --- /dev/null +++ b/src/components/ha-slider.ts @@ -0,0 +1,21 @@ +import { customElement } from "lit/decorators"; +import { MdSlider } from "@material/web/slider/slider"; +import { css } from "lit"; + +@customElement("ha-slider") +export class HaSlider extends MdSlider { + static override styles = [ + css` + :host { + --md-sys-color-primary: var(--primary-color); + --md-sys-color-outline: var(--divider-color); + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-slider": HaSlider; + } +} diff --git a/yarn.lock b/yarn.lock index 1a94c69db12c..4d77dfc14379 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2725,20 +2725,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" @@ -2965,24 +2951,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" @@ -3583,15 +3551,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" @@ -3653,7 +3612,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: @@ -3692,18 +3651,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" @@ -3714,23 +3661,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" @@ -9654,7 +9584,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 @@ -9677,7 +9606,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 From ca590c58f911b16698529e3078d84a697cd43a53 Mon Sep 17 00:00:00 2001 From: Simon Lamon <32477463+silamon@users.noreply.github.com> Date: Sun, 8 Oct 2023 15:20:12 +0000 Subject: [PATCH 2/7] finish --- .../components/ha-control-circular-slider.ts | 2 +- .../pages/components/ha-hs-color-picker.ts | 6 +- src/components/ha-form/ha-form-integer.ts | 3 +- src/components/ha-labeled-slider.js | 90 ----------------- src/components/ha-labeled-slider.ts | 96 +++++++++++++++++++ .../ha-selector/ha-selector-color-temp.ts | 4 +- .../ha-selector/ha-selector-number.ts | 3 +- src/components/ha-slider.ts | 7 +- .../lights/light-color-rgb-picker.ts | 20 ++-- .../controls/more-info-media_player.ts | 3 +- .../hui-input-number-entity-row.ts | 5 +- .../hui-media-player-entity-row.ts | 3 +- .../entity-rows/hui-number-entity-row.ts | 3 +- .../media-browser/ha-bar-media-player.ts | 1 + src/state-summary/state-card-input_number.ts | 5 +- src/state-summary/state-card-number.js | 3 +- 16 files changed, 130 insertions(+), 124 deletions(-) delete mode 100644 src/components/ha-labeled-slider.js create mode 100644 src/components/ha-labeled-slider.ts diff --git a/gallery/src/pages/components/ha-control-circular-slider.ts b/gallery/src/pages/components/ha-control-circular-slider.ts index f85f210dd028..4a856fe31b15 100644 --- a/gallery/src/pages/components/ha-control-circular-slider.ts +++ b/gallery/src/pages/components/ha-control-circular-slider.ts @@ -49,11 +49,11 @@ export class DemoHaCircularSlider extends LitElement {

Current

${this.current} °C

diff --git a/gallery/src/pages/components/ha-hs-color-picker.ts b/gallery/src/pages/components/ha-hs-color-picker.ts index 53eaf2187687..7092c399e8fc 100644 --- a/gallery/src/pages/components/ha-hs-color-picker.ts +++ b/gallery/src/pages/components/ha-hs-color-picker.ts @@ -57,8 +57,8 @@ export class DemoHaHsColorPicker extends LitElement { >

Hue : ${this.value[0]}

Saturation : ${this.value[1]}

Color Brighness : ${this.brightness}

- :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; - } - - -
[[_getTitle()]]
-
-
- - -
- - `; - } - - _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); diff --git a/src/components/ha-labeled-slider.ts b/src/components/ha-labeled-slider.ts new file mode 100644 index 000000000000..5261889ca149 --- /dev/null +++ b/src/components/ha-labeled-slider.ts @@ -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` +
${this._getTitle()}
+
+
+ ${this.icon ? html`` : nothing} + +
+ ${this.helper + ? html` ${this.helper} ` + : 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; + } +} diff --git a/src/components/ha-selector/ha-selector-color-temp.ts b/src/components/ha-selector/ha-selector-color-temp.ts index 7a99a61261d8..6b174fb53a67 100644 --- a/src/components/ha-selector/ha-selector-color-temp.ts +++ b/src/components/ha-selector/ha-selector-color-temp.ts @@ -24,7 +24,7 @@ export class HaColorTempSelector extends LitElement { protected render() { return html` `; } diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts index 8c569e4d0740..eb274b13e6f4 100644 --- a/src/components/ha-selector/ha-selector-number.ts +++ b/src/components/ha-selector/ha-selector-number.ts @@ -37,6 +37,7 @@ export class HaNumberSelector extends LitElement { ? html`${this.label}${this.required ? "*" : ""}` : ""} diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts index 2680c74ed7cc..510e426c8cff 100644 --- a/src/components/ha-slider.ts +++ b/src/components/ha-slider.ts @@ -1,14 +1,17 @@ import { customElement } from "lit/decorators"; import { MdSlider } from "@material/web/slider/slider"; -import { css } from "lit"; +import { CSSResult, css } from "lit"; @customElement("ha-slider") export class HaSlider extends MdSlider { - static override styles = [ + static override styles: CSSResult[] = [ + ...MdSlider.styles, css` :host { --md-sys-color-primary: var(--primary-color); --md-sys-color-outline: var(--divider-color); + + min-inline-size: 100px; } `, ]; diff --git a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts index 2bf8a5b44b40..dc35a17c67e1 100644 --- a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts +++ b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts @@ -115,46 +115,50 @@ class LightRgbColorPicker extends LitElement { ${supportsRgbw || supportsRgbww ? html`` : nothing} ${supportsRgbw ? html` ` : nothing} ${supportsRgbww ? html` ` : nothing} diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index 044745d78dd4..ba4ab4364078 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -128,9 +128,8 @@ class MoreInfoMediaPlayer extends LitElement { ${supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET) ? html` ${this.hass.formatEntityState(stateObj)} diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts index 36bc2bb76a39..4bb1f65cfb6c 100644 --- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts @@ -252,11 +252,10 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET) ? html` ` diff --git a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts index 83fabc5f5be8..d6f41ef34a67 100644 --- a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts @@ -89,15 +89,14 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow { ? html`
${this.hass.formatEntityState(stateObj)} diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts index a365bb97200e..3e0b312f50d3 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -293,6 +293,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { .path=${mdiVolumeHigh} > ${this.hass.formatEntityState(this.stateObj)} diff --git a/src/state-summary/state-card-number.js b/src/state-summary/state-card-number.js index be4349be64e9..c1198c3509fa 100644 --- a/src/state-summary/state-card-number.js +++ b/src/state-summary/state-card-number.js @@ -42,16 +42,15 @@ class StateCardNumber extends mixinBehaviors(
${this.stateInfoTemplate} Date: Mon, 9 Oct 2023 18:20:41 +0000 Subject: [PATCH 3/7] Clean up polymer-paper styles --- demo/src/configs/jimpower/theme.ts | 9 --------- demo/src/configs/kernehed/theme.ts | 9 --------- demo/src/configs/teachingbirds/theme.ts | 5 ----- src/components/ha-selector/ha-selector-color-temp.ts | 6 ++---- src/resources/styles-data.ts | 7 ------- 5 files changed, 2 insertions(+), 34 deletions(-) diff --git a/demo/src/configs/jimpower/theme.ts b/demo/src/configs/jimpower/theme.ts index 7e304eb6c6b1..246b3b22bde4 100644 --- a/demo/src/configs/jimpower/theme.ts +++ b/demo/src/configs/jimpower/theme.ts @@ -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", diff --git a/demo/src/configs/kernehed/theme.ts b/demo/src/configs/kernehed/theme.ts index ffb2f0edfe13..28433aba5de1 100644 --- a/demo/src/configs/kernehed/theme.ts +++ b/demo/src/configs/kernehed/theme.ts @@ -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", diff --git a/demo/src/configs/teachingbirds/theme.ts b/demo/src/configs/teachingbirds/theme.ts index 34687a23f104..f61654406c5d 100644 --- a/demo/src/configs/teachingbirds/theme.ts +++ b/demo/src/configs/teachingbirds/theme.ts @@ -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", diff --git a/src/components/ha-selector/ha-selector-color-temp.ts b/src/components/ha-selector/ha-selector-color-temp.ts index 6b174fb53a67..c37805b620d1 100644 --- a/src/components/ha-selector/ha-selector-color-temp.ts +++ b/src/components/ha-selector/ha-selector-color-temp.ts @@ -46,14 +46,12 @@ export class HaColorTempSelector extends LitElement { static styles = css` ha-labeled-slider { - --ha-slider-background: -webkit-linear-gradient( - var(--float-end), + --ha-slider-background: linear-gradient( + to right, 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); } `; } diff --git a/src/resources/styles-data.ts b/src/resources/styles-data.ts index 1b295c5e147e..d9fb95bd5d6b 100644 --- a/src/resources/styles-data.ts +++ b/src/resources/styles-data.ts @@ -78,13 +78,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)", From e2107c16e16e1d57ef375c214f53b0535e447848 Mon Sep 17 00:00:00 2001 From: Simon Lamon <32477463+silamon@users.noreply.github.com> Date: Tue, 10 Oct 2023 17:37:26 +0000 Subject: [PATCH 4/7] Fixes --- src/components/ha-slider.ts | 3 ++- src/dialogs/more-info/controls/more-info-media_player.ts | 3 +-- src/state-summary/state-card-number.js | 7 ++++--- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts index 510e426c8cff..bc6db708d19c 100644 --- a/src/components/ha-slider.ts +++ b/src/components/ha-slider.ts @@ -11,7 +11,8 @@ export class HaSlider extends MdSlider { --md-sys-color-primary: var(--primary-color); --md-sys-color-outline: var(--divider-color); - min-inline-size: 100px; + min-width: 100px; + max-width: 200px; } `, ]; diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index ba4ab4364078..c779299333b8 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -282,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, }); } diff --git a/src/state-summary/state-card-number.js b/src/state-summary/state-card-number.js index c1198c3509fa..dc59854da25c 100644 --- a/src/state-summary/state-card-number.js +++ b/src/state-summary/state-card-number.js @@ -18,6 +18,7 @@ class StateCardNumber extends mixinBehaviors(