Skip to content

Commit

Permalink
Fix paper-slider pin style (#1022)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
NovapaX authored and balloob committed Apr 17, 2018
1 parent cd31369 commit 0a60ec2
Show file tree
Hide file tree
Showing 8 changed files with 109 additions and 20 deletions.
7 changes: 4 additions & 3 deletions panels/config/config-entries/ha-form.html
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion src/components/ha-cover-tilt-controls.html
Original file line number Diff line number Diff line change
Expand Up @@ -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'>

Expand Down
8 changes: 4 additions & 4 deletions src/components/ha-labeled-slider.html
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -25,16 +25,16 @@
margin-left: 24px;
}

paper-slider {
ha-paper-slider {
background-image: var(--ha-slider-background);
}
</style>

<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>
Expand Down
88 changes: 88 additions & 0 deletions src/components/ha-paper-slider.html
Original file line number Diff line number Diff line change
@@ -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 changes: 4 additions & 4 deletions src/dialogs/more-info/controls/more-info-climate.html
Original file line number Diff line number Diff line change
Expand Up @@ -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'>
Expand All @@ -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>
Expand Down Expand Up @@ -64,7 +64,7 @@
cursor: pointer;
}

paper-slider {
ha-paper-slider {
width: 100%;
}

Expand Down Expand Up @@ -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]]'
Expand All @@ -173,7 +173,7 @@
value='[[stateObj.attributes.humidity]]'
on-change='targetHumiditySliderChanged'
ignore-bar-touch>
</paper-slider>
</ha-paper-slider>
</div>
</div>
</template>
Expand Down
10 changes: 5 additions & 5 deletions src/dialogs/more-info/controls/more-info-cover.html
Original file line number Diff line number Diff line change
Expand Up @@ -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'>

Expand All @@ -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'>
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/dialogs/more-info/controls/more-info-media_player.html
Original file line number Diff line number Diff line change
Expand Up @@ -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'>

Expand Down Expand Up @@ -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'
Expand Down
1 change: 1 addition & 0 deletions src/resources/ha-style.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down

0 comments on commit 0a60ec2

Please sign in to comment.