mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Merge ha-paper-slider into ha-slider (#7114)
This commit is contained in:
parent
f822fa0d57
commit
b2e2dbe0c2
@ -24,7 +24,6 @@
|
||||
"filesToIgnore": [
|
||||
"**/*.html",
|
||||
"**/src/panels/config/js/**/*.js",
|
||||
"**/ha-paper-slider.js",
|
||||
"**/ha-iconset-svg.js",
|
||||
"**/ha-script-editor.js",
|
||||
"**/ha-automation-editor.js",
|
||||
|
@ -14,7 +14,7 @@ import {
|
||||
} from "lit-element";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { HaCheckbox } from "../ha-checkbox";
|
||||
import "../ha-paper-slider";
|
||||
import "../ha-slider";
|
||||
import {
|
||||
HaFormElement,
|
||||
HaFormIntegerData,
|
||||
@ -31,7 +31,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
|
||||
|
||||
@property() public suffix?: string;
|
||||
|
||||
@query("paper-input ha-paper-slider") private _input?: HTMLElement;
|
||||
@query("paper-input ha-slider") private _input?: HTMLElement;
|
||||
|
||||
public focus() {
|
||||
if (this._input) {
|
||||
@ -53,7 +53,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
|
||||
></ha-checkbox>
|
||||
`
|
||||
: ""}
|
||||
<ha-paper-slider
|
||||
<ha-slider
|
||||
pin
|
||||
editable
|
||||
.value=${this._value}
|
||||
@ -63,7 +63,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
|
||||
this.schema.optional &&
|
||||
this.schema.default === undefined}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-paper-slider>
|
||||
></ha-slider>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
@ -112,7 +112,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
ha-paper-slider {
|
||||
ha-slider {
|
||||
width: 100%;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
@ -2,7 +2,7 @@ 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-paper-slider";
|
||||
import "./ha-slider";
|
||||
|
||||
class HaLabeledSlider extends PolymerElement {
|
||||
static get template() {
|
||||
@ -27,7 +27,7 @@ class HaLabeledSlider extends PolymerElement {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
ha-paper-slider {
|
||||
ha-slider {
|
||||
flex-grow: 1;
|
||||
background-image: var(--ha-slider-background);
|
||||
}
|
||||
@ -37,7 +37,7 @@ class HaLabeledSlider extends PolymerElement {
|
||||
<div class="extra-container"><slot name="extra"></slot></div>
|
||||
<div class="slider-container">
|
||||
<ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
|
||||
<ha-paper-slider
|
||||
<ha-slider
|
||||
min="[[min]]"
|
||||
max="[[max]]"
|
||||
step="[[step]]"
|
||||
@ -45,7 +45,7 @@ class HaLabeledSlider extends PolymerElement {
|
||||
disabled="[[disabled]]"
|
||||
disabled="[[disabled]]"
|
||||
value="{{value}}"
|
||||
></ha-paper-slider>
|
||||
></ha-slider>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
@ -1,80 +0,0 @@
|
||||
import "@polymer/paper-slider/paper-slider";
|
||||
|
||||
/**
|
||||
* @polymer
|
||||
* @customElement
|
||||
* @appliesMixin paper-slider
|
||||
*/
|
||||
const PaperSliderClass = customElements.get("paper-slider");
|
||||
|
||||
class HaPaperSlider extends PaperSliderClass {
|
||||
static get template() {
|
||||
const tpl = document.createElement("template");
|
||||
tpl.innerHTML = PaperSliderClass.template.innerHTML;
|
||||
const styleEl = document.createElement("style");
|
||||
styleEl.innerHTML = `
|
||||
.pin > .slider-knob > .slider-knob-inner {
|
||||
font-size: var(--ha-paper-slider-pin-font-size, 10px);
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.disabled.ring > .slider-knob > .slider-knob-inner {
|
||||
background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
|
||||
border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
|
||||
}
|
||||
|
||||
.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.2em;
|
||||
height: 2.2em;
|
||||
|
||||
-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.1em;
|
||||
width: 2.2em;
|
||||
height: 2.1em;
|
||||
|
||||
-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);
|
||||
}
|
||||
|
||||
:host([dir="rtl"]) .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;
|
||||
}
|
||||
|
||||
.slider-input {
|
||||
width: 54px;
|
||||
}
|
||||
`;
|
||||
tpl.content.appendChild(styleEl);
|
||||
return tpl;
|
||||
}
|
||||
}
|
||||
customElements.define("ha-paper-slider", HaPaperSlider);
|
@ -17,6 +17,61 @@ class HaSlider extends PaperSliderClass {
|
||||
-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, 10px);
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.disabled.ring > .slider-knob > .slider-knob-inner {
|
||||
background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
|
||||
border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
|
||||
}
|
||||
|
||||
.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.2em;
|
||||
height: 2.2em;
|
||||
|
||||
-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.1em;
|
||||
width: 2.2em;
|
||||
height: 2.1em;
|
||||
|
||||
-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;
|
||||
}
|
||||
`)
|
||||
);
|
||||
}
|
||||
|
@ -16,7 +16,7 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
|
||||
import { computeRTLDirection } from "../../../common/util/compute_rtl";
|
||||
import "../../../components/ha-climate-control";
|
||||
import "../../../components/ha-paper-dropdown-menu";
|
||||
import "../../../components/ha-paper-slider";
|
||||
import "../../../components/ha-slider";
|
||||
import "../../../components/ha-switch";
|
||||
import {
|
||||
ClimateEntity,
|
||||
@ -148,7 +148,7 @@ class MoreInfoClimate extends LitElement {
|
||||
<div class="target-humidity">
|
||||
${stateObj.attributes.humidity} %
|
||||
</div>
|
||||
<ha-paper-slider
|
||||
<ha-slider
|
||||
class="humidity"
|
||||
step="1"
|
||||
pin
|
||||
@ -160,7 +160,7 @@ class MoreInfoClimate extends LitElement {
|
||||
.value=${stateObj.attributes.humidity}
|
||||
@change=${this._targetHumiditySliderChanged}
|
||||
>
|
||||
</ha-paper-slider>
|
||||
</ha-slider>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
@ -451,7 +451,7 @@ class MoreInfoClimate extends LitElement {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ha-paper-slider {
|
||||
ha-slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
@ -15,7 +15,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { supportsFeature } from "../../../common/entity/supports-feature";
|
||||
import { computeRTLDirection } from "../../../common/util/compute_rtl";
|
||||
import "../../../components/ha-paper-dropdown-menu";
|
||||
import "../../../components/ha-paper-slider";
|
||||
import "../../../components/ha-slider";
|
||||
import "../../../components/ha-switch";
|
||||
import {
|
||||
HumidifierEntity,
|
||||
@ -54,7 +54,7 @@ class MoreInfoHumidifier extends LitElement {
|
||||
<div class="target-humidity">
|
||||
${stateObj.attributes.humidity} %
|
||||
</div>
|
||||
<ha-paper-slider
|
||||
<ha-slider
|
||||
class="humidity"
|
||||
step="1"
|
||||
pin
|
||||
@ -66,7 +66,7 @@ class MoreInfoHumidifier extends LitElement {
|
||||
.value=${stateObj.attributes.humidity}
|
||||
@change=${this._targetHumiditySliderChanged}
|
||||
>
|
||||
</ha-paper-slider>
|
||||
</ha-slider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -187,7 +187,7 @@ class MoreInfoHumidifier extends LitElement {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ha-paper-slider {
|
||||
ha-slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
@ -9,7 +9,6 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
import { featureClassNames } from "../../../common/entity/feature_class_names";
|
||||
import { supportsFeature } from "../../../common/entity/supports-feature";
|
||||
import "../../../components/ha-paper-dropdown-menu";
|
||||
import "../../../components/ha-paper-slider";
|
||||
import "../../../components/ha-switch";
|
||||
import "../../../components/ha-water_heater-control";
|
||||
import { EventsMixin } from "../../../mixins/events-mixin";
|
||||
@ -36,10 +35,6 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ha-paper-slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ha-water_heater-control.range-control-left,
|
||||
ha-water_heater-control.range-control-right {
|
||||
float: left;
|
||||
|
@ -82,7 +82,7 @@ documentContainer.innerHTML = `<custom-style>
|
||||
--light-primary-opacity: 1.0;
|
||||
|
||||
/* set our slider style */
|
||||
--ha-paper-slider-pin-font-size: 15px;
|
||||
--ha-slider-pin-font-size: 15px;
|
||||
|
||||
/* rgb */
|
||||
--rgb-primary-color: 3, 169, 244;
|
||||
|
Loading…
x
Reference in New Issue
Block a user