jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge ha-paper-slider into ha-slider (#7114)

Browse Source
This commit is contained in:
Thomas Lovén 2020-09-24 14:16:28 +02:00 committed by GitHub
parent f822fa0d57
commit b2e2dbe0c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 73 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
polymer.json
View File

@ -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",

10
src/components/ha-form/ha-form-integer.ts
View File

@ -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;
}

8
src/components/ha-labeled-slider.js
View File

@ -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>
`;
}

80
src/components/ha-paper-slider.js
View File

@ -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);

55
src/components/ha-slider.js
View File

@ -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;
}
`)
);
}

8
src/dialogs/more-info/controls/more-info-climate.ts
View File

@ -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%;
}

8
src/dialogs/more-info/controls/more-info-humidifier.ts
View File

@ -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%;
}

5
src/dialogs/more-info/controls/more-info-water_heater.js
View File

@ -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;

2
src/resources/ha-style.ts
View File

@ -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;