More Material

src/cards/ha-camera-card.html

@@ -17,6 +17,7 @@
       border-radius: 2px;
     }
     .caption {
+      @apply(--paper-font-common-nowrap);
       position: absolute;
       left: 0px;
       right: 0px;
@@ -32,9 +33,6 @@
       font-weight: 500;
       line-height: 16px;
       color: white;
-      white-space: nowrap;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
     }
   </style>
   <template>

src/cards/ha-entities-card.html

@@ -15,13 +15,13 @@
       cursor: pointer;
     }
     .header {
-      font-size: 24px;
+      @apply(--paper-font-headline);
+      color: var(--primary-text-color);
       padding: 24px 16px 16px;
       text-transform: capitalize;
     }
     .header .name {
-      overflow: hidden;
+      @apply(--paper-font-common-nowrap);
-      text-overflow: ellipsis;
     }
     ha-entity-toggle {
       margin-left: 16px;

src/cards/ha-introduction-card.html

@@ -5,7 +5,7 @@
 <dom-module id='ha-introduction-card'>
   <style>
     :host {
-      font-size: 14px;
+      @apply(--paper-font-body1)
     }
     a {
       color: var(--dark-primary-color);

src/components/entity/ha-entity-toggle.html

@@ -5,6 +5,7 @@
 <dom-module id="ha-entity-toggle">
   <style>
     paper-icon-button {
+      color: var(--primary-text-color);
       transition: color .5s;
     }
     paper-icon-button[state-active] {
@@ -13,6 +14,7 @@
     paper-toggle-button {
       cursor: pointer;
       --paper-toggle-button-label-spacing: 0;
+      padding: 9px 0;
     }
   </style>
   <template>

src/components/entity/ha-entity-toggle.js

@@ -25,6 +25,14 @@ export default new Polymer({
     },
   },
 
+  listeners: {
+    tap: 'onTap',
+  },
+
+  onTap(ev) {
+    ev.stopPropagation();
+  },
+
   ready() {
     this.forceStateChange();
   },

src/components/ha-card.html

@@ -11,7 +11,9 @@
       background-color: white;
     }
     .header {
-      font-size: 24px;
+      @apply(--paper-font-headline);
+      @apply(--paper-font-common-expensive-kerning);
+      opacity: var(--dark-primary-opacity);
       padding: 24px 16px 16px;
       text-transform: capitalize;
     }

src/components/logbook-entry.html

@@ -8,6 +8,8 @@
   <style is="custom-style" include="iron-flex"></style>
   <style>
     :host {
+      @apply(--paper-font-body1);
+
       display: block;
       line-height: 2em;
     }
@@ -32,7 +34,7 @@
     }
 
     a {
-      color: var(--accent-color);
+      color: var(--primary-color);
     }
   </style>
   <template>

src/components/state-cards.html

@@ -1,62 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../state-summary/state-card.html">
-
-<dom-module id="state-cards">
-  <style is="custom-style" include="iron-flex"></style>
-  <style>
-  :host {
-    display: block;
-  }
-
-  @media all and (min-width: 1020px) {
-    .state-card {
-      width: calc(50% - 44px);
-      margin: 8px 0 0 8px;
-    }
-  }
-
-  @media all and (min-width: 1356px) {
-    .state-card {
-      width: calc(33% - 38px);
-    }
-  }
-
-  @media all and (min-width: 1706px) {
-    .state-card {
-      width: calc(25% - 42px);
-    }
-  }
-
-  .no-states-content {
-    max-width: 500px;
-    background-color: #fff;
-    border-radius: 2px;
-    box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
-    padding: 0 16px 8px;
-    margin: 16px;
-  }
-  </style>
-
-  <template>
-    <div class='horizontal layout wrap'>
-
-      <template is='dom-repeat' items="{{states}}">
-        <state-card class="state-card" state-obj="[[item]]"></state-card>
-      </template>
-
-      <template is='dom-if' if="[[computeEmptyStates(states)]]">
-        <div class='no-states-content'>
-          <h3>Hi there!</h3>
-          <p>
-            It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet.
-          </p>
-          <p>
-            Please see the <a href='https://home-assistant.io/getting-started/' target='_blank'>Getting Started</a> section on how to setup your devices.
-          </p>
-        </div>
-      </template>
-
-    </div>
-  </template>
-</dom-module>

src/components/state-cards.js

@@ -1,18 +0,0 @@
-import Polymer from '../polymer';
-
-require('../state-summary/state-card');
-
-export default new Polymer({
-  is: 'state-cards',
-
-  properties: {
-    states: {
-      type: Array,
-      value: [],
-    },
-  },
-
-  computeEmptyStates(states) {
-    return states.length === 0;
-  },
-});

src/components/state-info.html

@@ -6,7 +6,7 @@
 <dom-module id="state-info">
   <style>
   :host {
-    line-height: 1.5;
+    @apply(--paper-font-body1);
     min-width: 150px;
     white-space: nowrap;
   }
@@ -20,17 +20,19 @@
   }
 
   .name {
+    @apply(--paper-font-common-nowrap);
     text-transform: capitalize;
-    font-weight: 400;
+    color: var(--primary-text-color);
-    text-overflow: ellipsis;
+    line-height: 40px;
-    overflow-x: hidden;
+  }
+
+  .name[in-dialog] {
+    line-height: 20px;
   }
 
   .time-ago {
+    @apply(--paper-font-common-nowrap);
     color: var(--secondary-text-color);
-    margin-top: -2px;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
   }
   </style>
 
@@ -39,11 +41,13 @@
       <state-badge state-obj='[[stateObj]]'></state-badge>
 
       <div class='info'>
-        <div class='name'>[[stateObj.entityDisplay]]</div>
+        <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>

src/components/state-info.js

@@ -7,6 +7,11 @@ export default new Polymer({
   is: 'state-info',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },

src/dialogs/more-info-dialog.html

@@ -37,7 +37,7 @@
   <template>
     <!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
     <paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
-      <h2><state-card-content state-obj="[[stateObj]]"></state-card-content></h2>
+      <h2><state-card-content state-obj="[[stateObj]]" in-dialog></state-card-content></h2>
       <paper-dialog-scrollable>
       <template is='dom-if' if="[[showHistoryComponent]]">
         <state-history-charts state-history="[[stateHistory]]"

src/layouts/partial-dev-info.html

@@ -22,11 +22,11 @@
     }
 
     .version {
-      font-size: 24px;
+      @apply(--paper-font-headline);
     }
 
     .develop {
-      font-size: 18px;
+      @apply(--paper-font-subhead);
     }
 
     .about a {
@@ -44,6 +44,7 @@
     }
 
     .error-log {
+      @apply(--paper-font-code1)
       clear: both;
       white-space: pre-wrap;
     }
@@ -83,7 +84,7 @@
           The following errors have been logged this session:
           <paper-icon-button icon='mdi:refresh' on-tap='refreshErrorLog'></paper-icon-button>
         </p>
-        <pre class='error-log'>[[errorLog]]</pre>
+        <div class='error-log'>[[errorLog]]</div>
       </div>
     </partial-base>
   </template>

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

@@ -1,11 +1,26 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+
+<link rel="import" href="../components/state-info.html">
 
-<link rel='import' href='./state-card-display.html'>
 <link rel='import' href='../components/state-info.html'>
 
 <dom-module id='state-card-configurator'>
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+  <style>
+    paper-button {
+      color: var(--default-primary-color);
+      font-weight: 500;
+      top: 3px;
+      height: 37px;
+    }
+  </style>
+
   <template>
-    <state-card-display state-obj='[[stateObj]]'></state-card-display>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
+      <paper-button hidden$='[[inDialog]]'>[[stateObj.state]]</paper-button>
+    </div>
 
     <!-- pre load the image so the dialog is rendered the proper size -->
     <template is='dom-if' if='[[stateObj.attributes.description_image]]'>

src/state-summary/state-card-configurator.js

@@ -7,6 +7,11 @@ export default new Polymer({
   is: 'state-card-configurator',
 
   properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },

src/state-summary/state-card-content.js

@@ -19,16 +19,24 @@ export default new Polymer({
   is: 'state-card-content',
 
   properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
-      observer: 'stateObjChanged',
     },
   },
 
-  stateObjChanged(stateObj) {
+  observers: [
+    'inputChanged(inDialog, stateObj)',
+  ],
+
+  inputChanged(inDialog, stateObj) {
     if (!stateObj) return;
 
     dynamicContentUpdater(
-      this, `STATE-CARD-${stateCardType(stateObj).toUpperCase()}`, { stateObj });
+      this, `STATE-CARD-${stateCardType(stateObj).toUpperCase()}`, { stateObj, inDialog });
   },
 });

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

@@ -6,17 +6,19 @@
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   .state {
+    @apply(--paper-font-body1);
+    color: var(--primary-text-color);
+
     margin-left: 16px;
     text-transform: capitalize;
-    font-weight: 400;
     text-align: right;
-    line-height: 1.5;
+    line-height: 40px;
   }
   </style>
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>[[stateObj.stateDisplay]]</div>
     </div>
   </template>

src/state-summary/state-card-display.js

@@ -6,6 +6,11 @@ export default new Polymer({
   is: 'state-card-display',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },

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

@@ -13,7 +13,7 @@
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <paper-dropdown-menu no-label-float selected-item-label='{{selectedOption}}' on-tap='stopPropagation'>
         <paper-menu class="dropdown-content" selected="[[computeSelected(stateObj)]]">
           <template is='dom-repeat' items='[[stateObj.attributes.options]]'>

src/state-summary/state-card-input_select.js

@@ -9,6 +9,11 @@ export default new Polymer({
   is: 'state-card-input_select',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },

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

@@ -13,7 +13,7 @@
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' pin on-change='selectedValueChanged'>
       </paper-slider>
     </div>

src/state-summary/state-card-input_slider.js

@@ -9,6 +9,11 @@ export default new Polymer({
   is: 'state-card-input_slider',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
       observer: 'stateObjectChanged',

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

@@ -10,29 +10,26 @@
   }
 
   .state {
+    @apply(--paper-font-common-nowrap);
+    @apply(--paper-font-body1);
     margin-left: 16px;
     text-align: right;
-    overflow-x: hidden;
   }
 
   .main-text {
-    white-space: nowrap;
+    @apply(--paper-font-common-nowrap);
-    overflow-x: hidden;
+    color: var(--primary-text-color);
-    text-overflow: ellipsis;
     text-transform: capitalize;
-    font-weight: 400;
   }
 
   .secondary-text {
-    white-space: nowrap;
+    @apply(--paper-font-common-nowrap);
-    overflow-x: hidden;
-    text-overflow: ellipsis;
     color: var(--secondary-text-color);
   }
   </style>
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
         <div class='main-text'>[[computePrimaryText(stateObj, isPlaying)]]</div>
         <div class='secondary-text'>[[computeSecondaryText(stateObj)]]</div>

src/state-summary/state-card-media_player.js

@@ -8,6 +8,11 @@ export default new Polymer({
   is: 'state-card-media_player',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },

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

@@ -19,7 +19,7 @@
   </style>
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
         <paper-icon-button icon="mdi:arrow-up" on-tap='onMoveUpTap'
           disabled='[[computeIsFullyClosed(stateObj)]]'></paper-icon-button>

src/state-summary/state-card-rollershutter.js

@@ -10,6 +10,11 @@ export default new Polymer({
   is: 'state-card-rollershutter',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },

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

@@ -1,23 +1,23 @@
 <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="../../bower_components/paper-button/paper-button.html">
 
 <link rel="import" href="../components/state-info.html">
 
 <dom-module id="state-card-scene">
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
-    paper-icon-button {
+    paper-button {
-      border: 1px solid;
-      border-radius: 50%;
       color: var(--default-primary-color);
-      line-height: 24px;
+      font-weight: 500;
+      top: 3px;
+      height: 37px;
     }
   </style>
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
-      <paper-icon-button on-tap='activateScene' icon='mdi:play'></paper-icon-button>
+      <paper-button on-tap='activateScene'>ACTIVATE</paper-button>
     </div>
   </template>
 </dom-module>

src/state-summary/state-card-scene.js

@@ -9,12 +9,18 @@ export default new Polymer({
   is: 'state-card-scene',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
   },
 
-  activateScene() {
+  activateScene(ev) {
+    ev.stopPropagation();
     serviceActions.callTurnOn(this.stateObj.entityId);
   },
 });

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

@@ -1,5 +1,5 @@
 <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="../../bower_components/paper-button/paper-button.html">
 
 <link rel="import" href="../components/state-info.html">
 <link rel="import" href="../components/entity/ha-entity-toggle.html">
@@ -7,22 +7,22 @@
 <dom-module id="state-card-script">
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
-    paper-icon-button {
+    paper-button {
-      border: 1px solid;
-      border-radius: 50%;
       color: var(--default-primary-color);
-      line-height: 24px;
+      font-weight: 500;
+      top: 3px;
+      height: 37px;
     }
   </style>
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <template is='dom-if' if='[[stateObj.attributes.can_cancel]]'>
         <ha-entity-toggle state-obj='[[stateObj]]'></ha-entity-toggle>
       </template>
       <template is='dom-if' if='[[!stateObj.attributes.can_cancel]]'>
-        <paper-icon-button on-tap='fireScript' icon='mdi:play'></paper-icon-button>
+        <paper-button on-tap='fireScript'>ACTIVATE</paper-button>
       </template>
     </div>
   </template>

src/state-summary/state-card-script.js

@@ -10,12 +10,18 @@ export default new Polymer({
   is: 'state-card-script',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
   },
 
-  fireScript() {
+  fireScript(ev) {
+    ev.stopPropagation();
     serviceActions.callTurnOn(this.stateObj.entityId);
   },
 });

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

@@ -6,33 +6,26 @@
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   :host {
+    @apply(--paper-font-body1);
     line-height: 1.5;
   }
 
   .state {
     margin-left: 16px;
     text-align: right;
-    overflow-x: hidden;
   }
 
   .target {
-    text-transform: capitalize;
+    color: var(--primary-text-color);
-    font-weight: 400;
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
   }
 
   .current {
     color: var(--secondary-text-color);
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
   }
   </style>
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
         <div class='target'>[[computeTargetTemperature(stateObj)]]</div>
 

src/state-summary/state-card-thermostat.js

@@ -6,6 +6,11 @@ export default new Polymer({
   is: 'state-card-thermostat',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },

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

@@ -11,8 +11,8 @@
     }
   </style>
   <template>
-    <div class='horizontal justified layout center'>
+    <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <ha-entity-toggle state-obj="[[stateObj]]"></ha-entity-toggle>
     </div>
 

src/state-summary/state-card-toggle.js

@@ -7,6 +7,11 @@ export default new Polymer({
   is: 'state-card-toggle',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },

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

@@ -4,22 +4,22 @@
 
 <dom-module id="state-card-weblink">
   <style>
-  state-badge {
+  :host {
-    float: left;
+    display: block;
   }
-
   .name {
-    margin-left: 56px;
+    @apply(--paper-font-common-nowrap);
+    @apply(--paper-font-body1);
+    color: var(--primary-color);
+
     text-transform: capitalize;
-    font-weight: 400;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
     line-height: 40px;
+    margin-left: 16px;
   }
   </style>
 
   <template>
-    <state-badge state-obj='[[stateObj]]'></state-badge>
+    <state-badge state-obj='[[stateObj]]' in-dialog='[[inDialog]]'></state-badge>
-    <div class='name'>[[stateObj.entityDisplay]]</div>
+    <a href='[[stateObj.entityDisplay]]' target='_blank' class='name' id='link'>[[stateObj.entityDisplay]]</a>
   </template>
 </dom-module>

src/state-summary/state-card-weblink.js

@@ -6,6 +6,11 @@ export default new Polymer({
   is: 'state-card-weblink',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
@@ -17,6 +22,10 @@ export default new Polymer({
 
   onTap(ev) {
     ev.stopPropagation();
+    if (ev.target === this.$.link) {
+      // Only open window if we clicked on card but not the link
+      return;
+    }
     window.open(this.stateObj.state, '_blank');
   },
 });

src/state-summary/state-card.html

@@ -1,29 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="state-card-content.html">
-
-<dom-module id="state-card">
-  <style>
-    :host {
-      border-radius: 2px;
-      box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
-      transition: all 0.30s ease-out;
-
-      position: relative;
-      background-color: white;
-      padding: 16px;
-      width: 100%;
-
-      cursor: pointer;
-      overflow: hidden;
-
-      -ms-user-select: none;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-    }
-  </style>
-
-  <template>
-    <state-card-content state-obj="[[stateObj]]"></state-card-content>
-  </template>
-</dom-module>

src/state-summary/state-card.js

@@ -1,26 +0,0 @@
-import hass from '../util/home-assistant-js-instance';
-
-import Polymer from '../polymer';
-
-require('./state-card-content');
-
-const { moreInfoActions } = hass;
-
-export default new Polymer({
-  is: 'state-card',
-
-  properties: {
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  listeners: {
-    tap: 'cardTapped',
-  },
-
-  cardTapped(ev) {
-    ev.stopPropagation();
-    this.async(() => moreInfoActions.selectEntity(this.stateObj.entityId), 1);
-  },
-});