More re-org

src/components/entity/state-info.html

@@ -0,0 +1,75 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="./state-badge.html">
+<link rel="import" href="../relative-ha-datetime.html">
+
+<dom-module id="state-info">
+  <template>
+    <style>
+    :host {
+      @apply(--paper-font-body1);
+      min-width: 150px;
+      white-space: nowrap;
+    }
+
+    state-badge {
+      float: left;
+    }
+
+    .info {
+      margin-left: 56px;
+    }
+
+    .name {
+      @apply(--paper-font-common-nowrap);
+      color: var(--primary-text-color);
+      line-height: 40px;
+    }
+
+    .name[in-dialog] {
+      line-height: 20px;
+    }
+
+    .time-ago {
+      @apply(--paper-font-common-nowrap);
+      color: var(--secondary-text-color);
+    }
+    </style>
+
+    <div>
+      <state-badge state-obj='[[stateObj]]'></state-badge>
+
+      <div class='info'>
+        <div class='name' in-dialog$='[[inDialog]]'>[[stateObj.entityDisplay]]</div>
+
+        <template is='dom-if' if='[[inDialog]]'>
+          <div class='time-ago'>
+            <relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
+          </div>
+        </template>
+
+      </div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'state-info',
+
+  properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+
+    inDialog: {
+      type: Boolean,
+    },
+  },
+});
+</script>