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

src/components/ha-cover-tilt-controls.html

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

src/more-infos/more-info-cover.html

@@ -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" 
+        <div>
-          on-tap='onOpenTiltTap' title='Open tilt'
+          <ha-cover-tilt-controls hidden$="[[entityObj.isTiltOnly]]" hass="[[hass]]" state-obj="[[stateObj]]">
-          invisible$='[[!entityObj.supportsOpenTilt]]'
+          </ha-cover-tilt-controls>
-          disabled='[[entityObj.isFullyOpenTilt]]'></paper-icon-button>
+        </div>
-        <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>
         <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>

src/state-summary/state-card-cover.html

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

src/util/cover-model.html

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