mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Control modification for cover (#298)
* modifying cover to optionally have up/down and tilt controls in regular state card * missed these * linting * making only one set of controls show up with preference to up/down * DRYing things up * appeasing Travis * DRYer still * reusing utility functions * appeasing the build master
This commit is contained in:
parent
81ab4ff8a8
commit
37098f805d
74
src/components/ha-cover-tilt-controls.html
Normal file
74
src/components/ha-cover-tilt-controls.html
Normal file
@ -0,0 +1,74 @@
|
||||
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
||||
|
||||
<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'>
|
||||
|
||||
<dom-module id='ha-cover-tilt-controls'>
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex"></style>
|
||||
<style>
|
||||
:host {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[invisible] {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
</style>
|
||||
<paper-icon-button icon="mdi:arrow-top-right"
|
||||
on-tap='onOpenTiltTap' title='Open tilt'
|
||||
invisible$='[[!entityObj.supportsOpenTilt]]'
|
||||
disabled='[[entityObj.isFullyOpenTilt]]'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:stop" on-tap='onStopTiltTap'
|
||||
invisible$='[[!entityObj.supportsStopTilt]]'
|
||||
title='Stop tilt'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:arrow-bottom-left"
|
||||
on-tap='onCloseTiltTap' title='Close tilt'
|
||||
invisible$='[[!entityObj.supportsCloseTilt]]'
|
||||
disabled='[[entityObj.isFullyClosedTilt]]'></paper-icon-button>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'ha-cover-tilt-controls',
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
stateObj: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
entityObj: {
|
||||
type: Object,
|
||||
computed: 'computeEntityObj(hass, stateObj)',
|
||||
},
|
||||
},
|
||||
|
||||
computeEntityObj: function (hass, stateObj) {
|
||||
var entity = new window.CoverEntity(hass, stateObj);
|
||||
return entity;
|
||||
},
|
||||
|
||||
onOpenTiltTap: function (ev) {
|
||||
ev.stopPropagation();
|
||||
this.entityObj.openCoverTilt();
|
||||
},
|
||||
|
||||
onCloseTiltTap: function (ev) {
|
||||
ev.stopPropagation();
|
||||
this.entityObj.closeCoverTilt();
|
||||
},
|
||||
|
||||
onStopTiltTap: function (ev) {
|
||||
ev.stopPropagation();
|
||||
this.entityObj.stopCoverTilt();
|
||||
},
|
||||
});
|
||||
</script>
|
32
src/more-infos/more-info-cover.html
Executable file → Normal file
32
src/more-infos/more-info-cover.html
Executable file → Normal file
@ -15,9 +15,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
.has-current_position .current_position,
|
||||
.has-open_tilt .tilt,
|
||||
.has-close_tilt .tilt,
|
||||
.has-stop_tilt .tilt,
|
||||
.has-set_tilt_position .tilt,
|
||||
.has-current_tilt_position .tilt
|
||||
{
|
||||
@ -42,17 +39,10 @@
|
||||
|
||||
<div class='tilt'>
|
||||
<div>Tilt position</div>
|
||||
<paper-icon-button icon="mdi:arrow-top-right"
|
||||
on-tap='onOpenTiltTap' title='Open tilt'
|
||||
invisible$='[[!entityObj.supportsOpenTilt]]'
|
||||
disabled='[[entityObj.isFullyOpenTilt]]'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:stop" on-tap='onStopTiltTap'
|
||||
invisible$='[[!entityObj.supportsStopTilt]]'
|
||||
title='Stop tilt'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:arrow-bottom-left"
|
||||
on-tap='onCloseTiltTap' title='Close tilt'
|
||||
invisible$='[[!entityObj.supportsCloseTilt]]'
|
||||
disabled='[[entityObj.isFullyClosedTilt]]'></paper-icon-button>
|
||||
<div>
|
||||
<ha-cover-tilt-controls hidden$="[[entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]">
|
||||
</ha-cover-tilt-controls>
|
||||
</div>
|
||||
<paper-slider
|
||||
min='0' max='100'
|
||||
value='{{coverTiltPositionSliderValue}}'
|
||||
@ -104,9 +94,6 @@ Polymer({
|
||||
},
|
||||
|
||||
featureClassNames: {
|
||||
16: 'has-open_tilt',
|
||||
32: 'has-close_tilt',
|
||||
64: 'has-stop_tilt',
|
||||
128: 'has-set_tilt_position',
|
||||
},
|
||||
|
||||
@ -126,16 +113,5 @@ Polymer({
|
||||
this.entityObj.setCoverTiltPosition(ev.target.value);
|
||||
},
|
||||
|
||||
onOpenTiltTap: function () {
|
||||
this.entityObj.openCoverTilt();
|
||||
},
|
||||
|
||||
onCloseTiltTap: function () {
|
||||
this.entityObj.closeCoverTilt();
|
||||
},
|
||||
|
||||
onStopTiltTap: function () {
|
||||
this.entityObj.stopCoverTilt();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
@ -5,6 +5,7 @@
|
||||
<link rel="import" href="../components/entity/state-info.html">
|
||||
|
||||
<link rel="import" href="../components/ha-cover-controls.html">
|
||||
<link rel="import" href="../components/ha-cover-tilt-controls.html">
|
||||
|
||||
<dom-module id="state-card-cover">
|
||||
<template>
|
||||
@ -17,7 +18,10 @@
|
||||
|
||||
<div class='horizontal justified layout'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<ha-cover-controls hass="[[hass]]" state-obj="[[stateObj]]"></ha-cover-controls>
|
||||
<div class='horizontal layout'>
|
||||
<ha-cover-controls hidden$="[[entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]"></ha-cover-controls>
|
||||
<ha-cover-tilt-controls hidden$="[[!entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]"></ha-cover-tilt-controls>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
@ -39,6 +43,18 @@ Polymer({
|
||||
stateObj: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
entityObj: {
|
||||
type: Object,
|
||||
computed: 'computeEntityObj(hass, stateObj)',
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
computeEntityObj: function (hass, stateObj) {
|
||||
var entity = new window.CoverEntity(hass, stateObj);
|
||||
return entity;
|
||||
},
|
||||
|
||||
});
|
||||
</script>
|
||||
|
@ -66,6 +66,12 @@
|
||||
return (this.stateObj.attributes.supported_features & 128) !== 0;
|
||||
});
|
||||
|
||||
addGetter('isTiltOnly', function () {
|
||||
var supportsCover = this.supportsOpen || this.supportsClose || this.supportsStop;
|
||||
var supportsTilt = this.supportsOpenTilt || this.supportsCloseTilt || this.supportsStopTilt;
|
||||
return supportsTilt && !supportsCover;
|
||||
});
|
||||
|
||||
/* eslint-enable no-bitwise */
|
||||
|
||||
Object.assign(window.CoverEntity.prototype, {
|
||||
|
Loading…
x
Reference in New Issue
Block a user