From 7a7ede22eaeedc2109ef042e8d8e8f6935f24016 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 28 Jun 2015 20:10:35 -0700
Subject: [PATCH] Frontend: extract voice command status component

---
 .../components/ha-voice-command-progress.html | 61 +++++++++++++++++++
 .../polymer/layouts/partial-states.html       | 21 +------
 2 files changed, 63 insertions(+), 19 deletions(-)
 create mode 100644 homeassistant/components/frontend/www_static/polymer/components/ha-voice-command-progress.html

diff --git a/homeassistant/components/frontend/www_static/polymer/components/ha-voice-command-progress.html b/homeassistant/components/frontend/www_static/polymer/components/ha-voice-command-progress.html
new file mode 100644
index 00000000000..44d29a0151c
--- /dev/null
+++ b/homeassistant/components/frontend/www_static/polymer/components/ha-voice-command-progress.html
@@ -0,0 +1,61 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
+
+<dom-module id="ha-voice-command-progress">
+  <style>
+    :host {
+      display: block;
+    }
+
+    iron-icon {
+      margin-right: 8px;
+    }
+
+    .interimTranscript {
+      color: darkgrey;
+    }
+
+    .listening paper-spinner {
+      float: right;
+    }
+  </style>
+
+  <template>
+    <iron-icon icon="av:hearing"></iron-icon>
+    <span>{{finalTranscript}}</span>
+    <span class='interimTranscript'>[[interimTranscript]]</span>
+    <paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
+  </template>
+
+</dom-module>
+
+<script>
+(function(){
+  var voiceGetters = window.hass.voiceGetters;
+
+  Polymer({
+    is: 'ha-voice-command-progress',
+
+    behaviors: [nuclearObserver],
+
+    properties: {
+      isTransmitting: {
+        type: Boolean,
+        bindNuclear: voiceGetters.isTransmitting,
+      },
+
+      interimTranscript: {
+        type: String,
+        bindNuclear: voiceGetters.extraInterimTranscript,
+      },
+
+      finalTranscript: {
+        type: String,
+        bindNuclear: voiceGetters.finalTranscript,
+      },
+    },
+  });
+})();
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html b/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
index 57f43adf08d..ed40a218a89 100644
--- a/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
+++ b/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
@@ -1,11 +1,11 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
-<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="./partial-base.html">
 
 <link rel="import" href="../components/state-cards.html">
+<link rel="import" href="../components/ha-voice-command-progress.html">
 
 <dom-module id="partial-states">
   <style>
@@ -58,9 +58,7 @@
       <div class='content-wrapper'>
         <div class='listening' hidden$="[[!showListenInterface]]"
           on-click="handleListenClick">
-          <iron-icon icon="av:hearing"></iron-icon> <span>{{finalTranscript}}</span>
-          <span class='interimTranscript'>[[interimTranscript]]</span>
-          <paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
+          <ha-voice-command-progress></ha-voice-command-progress>
         </div>
 
         <state-cards states="[[states]]">
@@ -134,21 +132,6 @@
         bindNuclear: voiceGetters.isListening,
       },
 
-      isTransmitting: {
-        type: Boolean,
-        bindNuclear: voiceGetters.isTransmitting,
-      },
-
-      interimTranscript: {
-        type: String,
-        bindNuclear: voiceGetters.extraInterimTranscript,
-      },
-
-      finalTranscript: {
-        type: String,
-        bindNuclear: voiceGetters.finalTranscript,
-      },
-
       showListenInterface: {
         type: Boolean,
         bindNuclear: [