mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-16 05:46:35 +00:00
Fix paper-slider pin style (#1022)
* ha-paper-slider extends and copies paper-slider * paper-slider -> ha-paper-slider * remove promise * this.is -> HaPaperSlider.is * jsdoc to instruct linter * suppress missing props * fix linter * more lint
This commit is contained in:
parent
cd3136908c
commit
0a60ec2298
@ -1,13 +1,14 @@
|
||||
<link rel="import" href='../../../bower_components/polymer/polymer-element.html'>
|
||||
|
||||
<link rel="import" href='../../../bower_components/paper-input/paper-input.html'>
|
||||
<link rel="import" href='../../../bower_components/paper-slider/paper-slider.html'>
|
||||
<link rel="import" href='../../../bower_components/paper-checkbox/paper-checkbox.html'>
|
||||
<link rel='import' href='../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
|
||||
<link rel='import' href='../../../bower_components/paper-listbox/paper-listbox.html'>
|
||||
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
|
||||
|
||||
<link rel='import' href='../../../src/util/hass-mixins.html'>
|
||||
<link rel="import" href='../../../src/components/ha-paper-slider.html'>
|
||||
|
||||
|
||||
<dom-module id="ha-form">
|
||||
<template>
|
||||
@ -44,12 +45,12 @@
|
||||
<template is='dom-if' if='[[_isRange(schema)]]' restamp>
|
||||
<div>
|
||||
[[computeLabel(schema)]]
|
||||
<paper-slider
|
||||
<ha-paper-slider
|
||||
pin
|
||||
value='{{data}}'
|
||||
min='[[schema.valueMin]]'
|
||||
max='[[schema.valueMax]]'
|
||||
></paper-slider>
|
||||
></ha-paper-slider>
|
||||
</div>
|
||||
</template>
|
||||
<template is='dom-if' if='[[!_isRange(schema)]]' restamp>
|
||||
|
@ -2,7 +2,6 @@
|
||||
|
||||
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
||||
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
|
||||
|
||||
<link rel='import' href='../util/cover-model.html'>
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
|
||||
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
|
||||
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
|
||||
<link rel="import" href='./ha-paper-slider.html'>
|
||||
|
||||
<dom-module id='ha-labeled-slider'>
|
||||
<template>
|
||||
@ -25,7 +25,7 @@
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
paper-slider {
|
||||
ha-paper-slider {
|
||||
background-image: var(--ha-slider-background);
|
||||
}
|
||||
</style>
|
||||
@ -33,8 +33,8 @@
|
||||
<div class='title'>[[caption]]</div>
|
||||
<iron-icon icon='[[icon]]'></iron-icon>
|
||||
<div class='slider-container'>
|
||||
<paper-slider min='[[min]]' max='[[max]]' value='{{value}}' ignore-bar-touch='[[ignoreBarTouch]]'>
|
||||
</paper-slider>
|
||||
<ha-paper-slider min='[[min]]' max='[[max]]' value='{{value}}' ignore-bar-touch='[[ignoreBarTouch]]'>
|
||||
</ha-paper-slider>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
88
src/components/ha-paper-slider.html
Normal file
88
src/components/ha-paper-slider.html
Normal file
@ -0,0 +1,88 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../../bower_components/paper-slider/paper-slider.html">
|
||||
|
||||
|
||||
<dom-module id="ha-paper-slider">
|
||||
<template strip-whitespace>
|
||||
<style include="paper-slider">
|
||||
.pin > .slider-knob > .slider-knob-inner {
|
||||
font-size: var(--ha-paper-slider-pin-font-size, 10px);
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.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.4em;
|
||||
|
||||
-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);
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
{
|
||||
/**
|
||||
* @polymer
|
||||
* @customElement
|
||||
* @appliesMixin paper-slider
|
||||
*/
|
||||
const PaperSliderClass = customElements.get('paper-slider');
|
||||
let myTemplate;
|
||||
|
||||
class HaPaperSlider extends PaperSliderClass {
|
||||
static get is() { return 'ha-paper-slider'; }
|
||||
|
||||
static get template() {
|
||||
if (!myTemplate) {
|
||||
// Retrieve this element's dom-module template
|
||||
myTemplate = Polymer.DomModule.import(HaPaperSlider.is, 'template');
|
||||
// Clone the contents of the superclass template
|
||||
const superTemplateContents = document.importNode(PaperSliderClass.template.content, true);
|
||||
// Remove the style from superclass contents, we already included them in our own <style>
|
||||
superTemplateContents.querySelector('style').remove();
|
||||
// Insert the superclass contents
|
||||
myTemplate.content.append(superTemplateContents);
|
||||
}
|
||||
return myTemplate;
|
||||
}
|
||||
}
|
||||
customElements.define(HaPaperSlider.is, HaPaperSlider);
|
||||
}
|
||||
</script>
|
||||
</dom-module>
|
@ -3,7 +3,6 @@
|
||||
|
||||
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
||||
|
||||
<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
|
||||
<link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
|
||||
<link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
|
||||
<link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
|
||||
@ -12,6 +11,7 @@
|
||||
<link rel='import' href='../../../../src/util/hass-mixins.html'>
|
||||
|
||||
<link rel="import" href='../../../components/ha-climate-control.html'>
|
||||
<link rel="import" href='../../../components/ha-paper-slider.html'>
|
||||
|
||||
<dom-module id='more-info-climate'>
|
||||
<template>
|
||||
@ -64,7 +64,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
paper-slider {
|
||||
ha-paper-slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -164,7 +164,7 @@
|
||||
<div>Target Humidity</div>
|
||||
<div class="single-row">
|
||||
<div class="target-humidity">[[stateObj.attributes.humidity]] %</div>
|
||||
<paper-slider
|
||||
<ha-paper-slider
|
||||
class='humidity'
|
||||
min='[[stateObj.attributes.min_humidity]]'
|
||||
max='[[stateObj.attributes.max_humidity]]'
|
||||
@ -173,7 +173,7 @@
|
||||
value='[[stateObj.attributes.humidity]]'
|
||||
on-change='targetHumiditySliderChanged'
|
||||
ignore-bar-touch>
|
||||
</paper-slider>
|
||||
</ha-paper-slider>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -2,8 +2,8 @@
|
||||
|
||||
<link rel="import" href="../../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
||||
<link rel="import" href="../../../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
|
||||
|
||||
<link rel="import" href='../../../components/ha-paper-slider.html'>
|
||||
<link rel='import' href='../../../util/cover-model.html'>
|
||||
<link rel='import' href='../../../components/ha-cover-tilt-controls.html'>
|
||||
|
||||
@ -30,13 +30,13 @@
|
||||
|
||||
<div class='current_position'>
|
||||
<div>Position</div>
|
||||
<paper-slider
|
||||
<ha-paper-slider
|
||||
min='0' max='100'
|
||||
value='{{coverPositionSliderValue}}'
|
||||
step='1' pin
|
||||
disabled='[[!entityObj.supportsSetPosition]]'
|
||||
on-change='coverPositionSliderChanged'
|
||||
ignore-bar-touch></paper-slider>
|
||||
ignore-bar-touch></ha-paper-slider>
|
||||
</div>
|
||||
|
||||
<div class='tilt'>
|
||||
@ -45,13 +45,13 @@
|
||||
<ha-cover-tilt-controls hidden$="[[entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]">
|
||||
</ha-cover-tilt-controls>
|
||||
</div>
|
||||
<paper-slider
|
||||
<ha-paper-slider
|
||||
min='0' max='100'
|
||||
value='{{coverTiltPositionSliderValue}}'
|
||||
step='1' pin
|
||||
disabled='[[!entityObj.supportsSetTiltPosition]]'
|
||||
on-change='coverTiltPositionSliderChanged'
|
||||
ignore-bar-touch></paper-slider>
|
||||
ignore-bar-touch></ha-paper-slider>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
@ -5,11 +5,11 @@
|
||||
<link rel='import' href='../../../../bower_components/iron-icon/iron-icon.html'>
|
||||
|
||||
<link rel='import' href='../../../../bower_components/paper-icon-button/paper-icon-button.html'>
|
||||
<link rel='import' href='../../../../bower_components/paper-slider/paper-slider.html'>
|
||||
<link rel='import' href='../../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
|
||||
<link rel='import' href='../../../../bower_components/paper-listbox/paper-listbox.html'>
|
||||
<link rel='import' href='../../../../bower_components/paper-item/paper-item.html'>
|
||||
|
||||
<link rel="import" href='../../../../src/components/ha-paper-slider.html'>
|
||||
<link rel='import' href='../../../../src/util/hass-mixins.html'>
|
||||
<link rel='import' href='../../../../src/util/hass-media-player-model.html'>
|
||||
|
||||
@ -91,11 +91,11 @@
|
||||
<paper-icon-button on-click="handleVolumeTap"
|
||||
hidden$="[[playerObj.supportsVolumeButtons]]"
|
||||
icon="[[computeMuteVolumeIcon(playerObj)]]"></paper-icon-button>
|
||||
<paper-slider disabled$='[[playerObj.isMuted]]'
|
||||
<ha-paper-slider disabled$='[[playerObj.isMuted]]'
|
||||
min='0' max='100' value='[[playerObj.volumeSliderValue]]'
|
||||
on-change='volumeSliderChanged' class='flex'
|
||||
ignore-bar-touch>
|
||||
</paper-slider>
|
||||
</ha-paper-slider>
|
||||
</div>
|
||||
<!-- SOURCE PICKER -->
|
||||
<div class='controls layout horizontal justified'
|
||||
|
@ -115,6 +115,7 @@
|
||||
--paper-slider-active-color: var(--slider-color);
|
||||
--paper-slider-secondary-color: var(--slider-secondary-color);
|
||||
--paper-slider-container-color: var(--slider-bar-color);
|
||||
--ha-paper-slider-pin-font-size: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user