Hassio show changelogs (#969)

* Hassio show changelogs

* wip

* update

* Travis

* Travis2

hassio/addon-view/hassio-addon-info.html

@@ -10,6 +10,8 @@
 <link rel='import' href='../../src/resources/ha-style.html'>
 <link rel='import' href='../../src/components/hassio-card-content.html'>
 
+<link rel='import' href='./hassio-addon-more-info.html'>
+
 <dom-module id="hassio-addon-info">
   <template>
     <style include='ha-style'>
@@ -75,8 +77,15 @@
             hass='[[hass]]'
             path='hassio/addons/[[addonSlug]]/update'
           >Update</ha-call-api-button>
+          <template is='dom-if' if='[[addon.changelog]]'>
+            <paper-button on-click='openChangelog'>Changelog</paper-button>
+          </template>
         </div>
       </paper-card>
+      <hassio-addon-more-info
+        title='Changelog'
+        content='[[changelog]]'
+      ></hassio-addon-more-info>
     </template>
 
     <paper-card>
@@ -199,6 +208,7 @@ class HassioAddonInfo extends Polymer.Element {
       hass: Object,
       addon: Object,
       addonSlug: String,
+      changelog: String,
       isRunning: {
         type: Boolean,
         computed: 'computeIsRunning(addon)',
@@ -235,6 +245,16 @@ class HassioAddonInfo extends Polymer.Element {
     const data = { auto_update: !this.addon.auto_update };
     this.hass.callApi('POST', `hassio/addons/${this.addonSlug}/options`, data);
   }
+
+  openChangelog() {
+    this.hass.callApi('get', `hassio/addons/${this.addonSlug}/changelog`)
+      .then((data) => {
+        this.changelog = data;
+      }, () => {
+        this.changelog = 'Error getting changelog';
+      });
+    this.shadowRoot.querySelector('hassio-addon-more-info').openDialog();
+  }
 }
 customElements.define(HassioAddonInfo.is, HassioAddonInfo);
 </script>

hassio/addon-view/hassio-addon-more-info.html

@@ -0,0 +1,90 @@
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+<link rel='import' href='../../bower_components/paper-dialog/paper-dialog.html'>
+<link rel='import' href='../../bower_components/app-layout/app-toolbar/app-toolbar.html'>
+<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
+<link rel='import' href='../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html'>
+
+<link rel='import' href='../../src/components/ha-markdown.html'>
+<link rel='import' href='../../src/resources/ha-style.html'>
+
+<dom-module id='hassio-addon-more-info'>
+  <template>
+    <style include='ha-style-dialog'>
+      paper-dialog {
+        font-size: 14px;
+        border-radius: 2px;
+        --paper-dialog-scrollable: {
+          -webkit-overflow-scrolling: auto;
+        }
+        --more-info-header-background: var(--secondary-background-color);
+        --more-info-header-color: var(--primary-text-color);
+      }
+      /* overrule the ha-style-dialog max-height on small screens */
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        paper-dialog {
+          max-height: 100%;
+          height: 100%;
+          --more-info-header-background: var(--primary-color);
+          --more-info-header-color: var(--text-primary-color);
+        }
+      }
+      app-toolbar {
+        margin-top: 0;
+        color: var(--more-info-header-color);
+        background-color: var(--more-info-header-background);
+      }
+      app-toolbar [main-title] {
+        /* Design guideline states 24px, changed to 16 to align with state info */
+        margin-left: 16px;
+      }
+      paper-dialog-scrollable {
+        margin-bottom: 16px;
+      }
+    </style>
+    <paper-dialog
+      id='dialog'
+      with-backdrop
+    >
+      <app-toolbar>
+        <paper-icon-button
+          icon='mdi:close'
+          dialog-dismiss
+        ></paper-icon-button>
+        <div main-title>[[title]]</div>
+      </app-toolbar>
+      <paper-dialog-scrollable>
+        <ha-markdown content='[[content]]'></ha-markdown>
+      </paper-dialog-scrollable>
+    </paper-dialog>
+  </template>
+</dom-module>
+
+<script>
+class HassioAddonMoreInfo extends Polymer.Element {
+  static get is() { return 'hassio-addon-more-info'; }
+
+  static get properties() {
+    return {
+      title: String,
+      content: {
+        type: String,
+        value: '',
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.$.dialog.addEventListener('iron-overlay-opened', (ev) => {
+      if (ev.target.withBackdrop) {
+        ev.target.parentNode.insertBefore(ev.target.backdropElement, ev.target);
+      }
+    });
+  }
+
+  openDialog() {
+    this.$.dialog.open();
+  }
+}
+customElements.define(HassioAddonMoreInfo.is, HassioAddonMoreInfo);
+</script>

hassio/dashboard/hassio-hass-update.html

@@ -1,5 +1,6 @@
 <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-button/paper-button.html">
 
 <link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
 <link rel='import' href='../../src/components/hassio-card-content.html'>
@@ -38,7 +39,11 @@
               <ha-call-api-button
                 hass='[[hass]]'
                 path='hassio/homeassistant/update'
-              >Update</ha-call-api-button>  
+              >Update</ha-call-api-button>
+              <a
+                href='https://github.com/home-assistant/home-assistant/releases'
+                target='_blank'
+              ><paper-button>Release notes</paper-button></a>
             </div>
           </paper-card>
         </div>