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

Fix paper-slider pin style (#1022)

Browse Source 
* 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:
NovapaX 2018-04-17 23:24:09 +02:00 committed by Paulus Schoutsen
parent cd3136908c
commit 0a60ec2298
8 changed files with 109 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
panels/config/config-entries/ha-form.html
View File

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

1
src/components/ha-cover-tilt-controls.html
View File

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

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

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

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

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

10
src/dialogs/more-info/controls/more-info-cover.html
View File

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

6
src/dialogs/more-info/controls/more-info-media_player.html
View File

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

1
src/resources/ha-style.html
View File

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