mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 23:36:36 +00:00
Refactor cover controls into a separate component. (#233)
* Refactor cover controls into a separate component. * Remove extra include * Remove unneeded css rules
This commit is contained in:
parent
fa0f91095d
commit
bdbeb1ca39
58
src/components/ha-cover-controls.html
Normal file
58
src/components/ha-cover-controls.html
Normal file
@ -0,0 +1,58 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
|
||||
<link rel="import" href="../util/cover-model.html">
|
||||
|
||||
<dom-module id="ha-cover-controls">
|
||||
<template>
|
||||
<style>
|
||||
.state {
|
||||
white-space: nowrap;
|
||||
}
|
||||
[invisible] {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='state'>
|
||||
<paper-icon-button icon="mdi:arrow-up" on-tap='onOpenTap'
|
||||
invisible$='[[!entityObj.supportsOpen]]'
|
||||
disabled='[[entityObj.isFullyOpen]]'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:stop" on-tap='onStopTap'
|
||||
invisible$='[[!entityObj.supportsStop]]'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:arrow-down" on-tap='onCloseTap'
|
||||
invisible$='[[!entityObj.supportsClose]]'
|
||||
disabled='[[entityObj.isFullyClosed]]'></paper-icon-button>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'ha-cover-controls',
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
stateObj: {
|
||||
type: Object,
|
||||
},
|
||||
entityObj: {
|
||||
type: Object,
|
||||
computed: 'computeEntityObj(hass, stateObj)',
|
||||
},
|
||||
},
|
||||
computeEntityObj: function (hass, stateObj) {
|
||||
return new window.CoverEntity(hass, stateObj);
|
||||
},
|
||||
onOpenTap: function () {
|
||||
this.entityObj.openCover();
|
||||
},
|
||||
onCloseTap: function () {
|
||||
this.entityObj.closeCover();
|
||||
},
|
||||
onStopTap: function () {
|
||||
this.entityObj.stopCover();
|
||||
},
|
||||
});
|
||||
</script>
|
@ -2,11 +2,9 @@
|
||||
|
||||
<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="../components/entity/state-info.html">
|
||||
|
||||
<link rel='import' href='../util/cover-model.html'>
|
||||
<link rel="import" href="../components/ha-cover-controls.html">
|
||||
|
||||
<dom-module id="state-card-cover">
|
||||
<template>
|
||||
@ -15,30 +13,11 @@
|
||||
:host {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.state {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
width: 127px;
|
||||
}
|
||||
|
||||
[invisible] {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='horizontal justified layout'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<div class='state'>
|
||||
<paper-icon-button icon="mdi:arrow-up" on-tap='onOpenTap'
|
||||
invisible$='[[!entityObj.supportsOpen]]'
|
||||
disabled='[[entityObj.isFullyOpen]]'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:stop" on-tap='onStopTap'
|
||||
invisible$='[[!entityObj.supportsStop]]'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:arrow-down" on-tap='onCloseTap'
|
||||
invisible$='[[!entityObj.supportsClose]]'
|
||||
disabled='[[entityObj.isFullyClosed]]'></paper-icon-button>
|
||||
</div>
|
||||
<ha-cover-controls hass="[[hass]]" state-obj="[[stateObj]]"></ha-cover-controls>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
@ -60,27 +39,6 @@ Polymer({
|
||||
stateObj: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
entityObj: {
|
||||
type: Object,
|
||||
computed: 'computeEntityObj(hass, stateObj)',
|
||||
},
|
||||
},
|
||||
|
||||
computeEntityObj: function (hass, stateObj) {
|
||||
return new window.CoverEntity(hass, stateObj);
|
||||
},
|
||||
|
||||
onOpenTap: function () {
|
||||
this.entityObj.openCover();
|
||||
},
|
||||
|
||||
onCloseTap: function () {
|
||||
this.entityObj.closeCover();
|
||||
},
|
||||
|
||||
onStopTap: function () {
|
||||
this.entityObj.stopCover();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
Loading…
x
Reference in New Issue
Block a user