HASSIO Improved addon view (#869)

* Improved addon view
Moved files to avoid conflicts with @c727
Modified data to addons
Removed unused properties
Removed blank line and unused class
Added link to polymer-element
Redone grouping

* Changes based on feedback

* Revert flex box

Maybe someone else can help to center the icon and text

* Display timestamp in new line

* Update hassio-card-content.html

hassio/dashboard/hassio-addons.html

@@ -1,40 +1,41 @@
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
-<link rel="import" href="../../bower_components/paper-card/paper-card.html">
+<link rel='import' href='../../bower_components/paper-card/paper-card.html'>
-<link rel="import" href="../../bower_components/paper-item/paper-item.html">
-<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
 
 <link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel='import' href='../../src/components/hassio-card-content.html'>
+<link rel='import' href='../../src/resources/hassio-style.html'>
 
-<dom-module id="hassio-addons">
+<dom-module id='hassio-addons'>
   <template>
-    <style include="ha-style">
+    <style include='ha-style hassio-style'>
       paper-card {
-        display: block;
-        padding-top: 16px;
-        padding-right: 16px;
-      }
-
-      paper-item {
         cursor: pointer;
       }
     </style>
-    <paper-card heading="Installed Add-ons">
+    <div class='content card-group'>
-      <template is='dom-if' if='[[!data.length]]'>
+      <div class='title'>Add-ons</div>
+      <template is='dom-if' if='[[!addons.length]]'>
+        <paper-card>
           <div class='card-content'>
-          Looks like you don't have any add-ons installed yet. Head over to <a href='#' on-tap='openStore'>the add-on store</a> to get started!
+            You don't have any add-ons installed yet. Head over to <a href='#' on-tap='openStore'>the add-on store</a> to get started!
           </div>
-      </template>
-      <template is='dom-repeat' items='[[data]]' as='addon'>
-        <paper-item>
-          <paper-item-body two-line on-tap='addonTapped'>
-            <div>[[addon.name]]</div>
-            <div secondary>[[addon.description]]</div>
-          </paper-item-body>
-          [[addon.installed]]
-        </paper-item>
-      </template>
         </paper-card>
       </template>
+      <template is='dom-repeat' items='[[addons]]' as='addon'>
+        <paper-card on-tap='addonTapped'>
+          <div class='card-content'>
+            <hassio-card-content
+              title='[[addon.name]]'
+              description='[[addon.description]]'
+              icon='[[computeIcon(addon)]]'
+              icon-title='[[computeIconTitle(addon)]]'
+              icon-class='[[computeIconClass(addon)]]'
+            ></hassio-card-content>
+          </div>
+        </paper-card>
+      </template>
+    </div>
+  </template>
 </dom-module>
 
 <script>
@@ -43,28 +44,27 @@ class HassioAddons extends window.hassMixins.EventsMixin(Polymer.Element) {
 
   static get properties() {
     return {
-      hass: {
+      hass: Object,
-        type: Object,
+      addons: Array,
-      },
-
-      narrow: {
-        type: Boolean,
-      },
-
-      showMenu: {
-        type: Boolean,
-        value: false,
-      },
-
-      data: {
-        type: Object,
-        value: [],
-      },
     };
   }
 
+  computeIcon(addon) {
+    return addon.installed !== addon.version ? 'mdi:arrow-up-bold-circle' : 'mdi:puzzle';
+  }
+
+  computeIconTitle(addon) {
+    if (addon.installed !== addon.version) return 'New version available';
+    return addon.state === 'started' ? 'Add-on is running' : 'Add-on is stopped';
+  }
+
+  computeIconClass(addon) {
+    if (addon.installed !== addon.version) return 'update';
+    return addon.state === 'started' ? 'running' : '';
+  }
+
   addonTapped(ev) {
-    history.pushState(null, null, '/hassio/addon/' + this.data[ev.model.index].slug);
+    history.pushState(null, null, '/hassio/addon/' + ev.model.addon.slug);
     this.fire('location-changed');
     ev.target.blur();
   }

hassio/dashboard/hassio-dashboard.html

@@ -20,8 +20,6 @@
   <template>
     <style include="iron-flex ha-style">
       .content {
-        padding: 24px 0 32px;
-        max-width: 600px;
         margin: 0 auto;
       }
       .status {
@@ -79,7 +77,7 @@
         ></hassio-hass-update>
         <hassio-addons
           hass='[[hass]]'
-          data='[[supervisorInfo.addons]]'
+          addons='[[supervisorInfo.addons]]'
         ></hassio-addons>
       </div>
     </app-header-layout>

src/components/hassio-card-content.html

@@ -0,0 +1,77 @@
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
+
+<link rel='import' href='./ha-relative-time.html'>
+<link rel='import' href='../util/hass-util.html'>
+
+<dom-module id='hassio-card-content'>
+  <template>
+    <style>
+      iron-icon {
+        margin-right: 16px;
+        margin-top: 16px;
+        float: left;
+        color: var(--secondary-text-color);
+      }
+      iron-icon.update {
+        color: var(--paper-orange-400);
+      }
+      iron-icon.running,
+      iron-icon.installed {
+        color: var(--paper-green-400);
+      }
+      iron-icon.hassupdate,
+      iron-icon.snapshot {
+        color: var(--primary-color);
+      }
+      .title {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+      .addition {
+        color: var(--secondary-text-color);
+        overflow: hidden;
+        position: relative; 
+        height: 2.4em;
+        line-height: 1.2em;
+      }
+      ha-relative-time {
+        display: block;
+      }
+    </style>
+    <iron-icon icon='[[icon]]' class$='[[iconClass]]' title='[[iconTitle]]'></iron-icon>
+    <div>
+      <div class='title'>[[title]]</div>
+      <div class='addition'>
+        <template is='dom-if' if='[[description]]'>
+          [[description]]
+        </template>
+        <template is='dom-if' if='[[datetime]]'>
+          <ha-relative-time class='addition' datetime='[[datetime]]'></ha-relative-time>
+        </template>
+      </div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+class HassioCardContent extends window.hassMixins.EventsMixin(Polymer.Element) {
+  static get is() { return 'hassio-card-content'; }
+
+  static get properties() {
+    return {
+      title: String,
+      description: String,
+      datetime: String,
+      icon: {
+        type: String,
+        value: 'mdi:help-circle'
+      },
+      iconTitle: String,
+      iconClass: String,
+    };
+  }
+}
+customElements.define(HassioCardContent.is, HassioCardContent);
+</script>

src/resources/hassio-style.html

@@ -0,0 +1,52 @@
+<dom-module id='hassio-style'>
+  <template>
+    <style>
+      .card-group {
+        margin-top: 24px;
+      }
+      .card-group .title {
+        color: var(--primary-text-color);
+        font-size: 2em;
+        padding-left: 8px;
+        margin-bottom: 8px;
+      }
+      .card-group .description {
+        font-size: 0.5em;
+        font-weight: 500;
+        margin-top: 4px;
+      }
+      .card-group paper-card {
+        --card-group-columns: 4;
+        width: calc((100% - 12px * var(--card-group-columns)) / var(--card-group-columns));
+        margin: 4px;
+      }
+      @media screen and (max-width: 1200px) and (min-width: 901px) {
+        .card-group paper-card {
+          --card-group-columns: 3;
+        }
+      }
+      @media screen and (max-width: 900px) and (min-width: 601px) {
+        .card-group paper-card {
+          --card-group-columns: 2;
+        }
+      }
+      @media screen and (max-width: 600px) and (min-width: 0) {
+        .card-group paper-card {
+          width: 100%;
+          margin: 4px 0;
+        }
+        .content {
+          padding: 0;
+        }
+      }
+      ha-call-api-button {
+        font-weight: 500;
+        color: var(--primary-color);
+      }
+      .error {
+        color: var(--google-red-500);
+        margin-top: 16px;
+      }
+    </style>
+  </template>
+</dom-module>