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

Refactor cover controls into a separate component. (#233)

Browse Source 
* Refactor cover controls into a separate component.

* Remove extra include

* Remove unneeded css rules
This commit is contained in:
Andrey 2017-03-07 06:01:15 +02:00 committed by Paulus Schoutsen
parent fa0f91095d
commit bdbeb1ca39
2 changed files with 60 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/ha-cover-controls.html Normal file
View 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>

46
src/state-summary/state-card-cover.html
View File

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