Add about page

src/components/ha-sidebar.html

@@ -113,6 +113,9 @@
           <paper-icon-button
             icon='mdi:nfc' data-panel='devEvent'
             on-click='handleDevClick'></paper-icon-button>
+          <paper-icon-button
+            icon='mdi:information-outline' data-panel='devInfo'
+            on-click='handleDevClick'></paper-icon-button>
         </div>
       </div>
     </paper-header-panel>

src/layouts/home-assistant-main.html

@@ -8,6 +8,7 @@
 <link rel='import' href='../layouts/partial-dev-call-service.html'>
 <link rel='import' href='../layouts/partial-dev-fire-event.html'>
 <link rel='import' href='../layouts/partial-dev-set-state.html'>
+<link rel='import' href='../layouts/partial-dev-info.html'>
 <link rel='import' href='../managers/notification-manager.html'>
 <link rel="import" href="../dialogs/more-info-dialog.html">
 <link rel="import" href="../dialogs/ha-voice-command-dialog.html">
@@ -49,6 +50,9 @@
       <template is='dom-if' if='[[isSelectedDevState]]'>
         <partial-dev-set-state main narrow='[[narrow]]' show-menu='[[showSidebar]]'></partial-dev-set-state>
       </template>
+      <template is='dom-if' if='[[isSelectedDevInfo]]'>
+        <partial-dev-info main narrow='[[narrow]]' show-menu='[[showSidebar]]'></partial-dev-info>
+      </template>
     </paper-drawer-panel>
 
   </template>

src/layouts/home-assistant-main.js

@@ -16,6 +16,7 @@ require('../layouts/partial-map');
 require('../layouts/partial-dev-call-service');
 require('../layouts/partial-dev-fire-event');
 require('../layouts/partial-dev-set-state');
+require('../layouts/partial-dev-info');
 require('../managers/notification-manager');
 require('../dialogs/more-info-dialog');
 require('../dialogs/ha-voice-command-dialog');
@@ -72,6 +73,11 @@ export default new Polymer({
       bindNuclear: navigationGetters.isActivePane('devService'),
     },
 
+    isSelectedDevInfo: {
+      type: Boolean,
+      bindNuclear: navigationGetters.isActivePane('devInfo'),
+    },
+
     showSidebar: {
       type: Boolean,
       bindNuclear: navigationGetters.showSidebar,

src/layouts/partial-dev-call-service.html

@@ -13,6 +13,7 @@
     .form {
       padding: 24px;
       background-color: white;
+      margin-top: 64px;
     }
 
     .ha-form {

src/layouts/partial-dev-fire-event.html

@@ -13,6 +13,7 @@
     .form {
       padding: 24px;
       background-color: white;
+      margin-top: 64px;
     }
 
     .ha-form {

src/layouts/partial-dev-info.html

@@ -0,0 +1,90 @@
+<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="./partial-base.html">
+
+<link rel="import" href="../components/services-list.html">
+
+<dom-module id="partial-dev-info">
+  <style>
+    .content {
+      margin-top: 64px;
+      padding: 24px;
+      background-color: white;
+      -ms-user-select: initial;
+      -webkit-user-select: initial;
+      -moz-user-select: initial;
+    }
+
+    .about {
+      text-align: center;
+      line-height: 2em;
+    }
+
+    .version {
+      font-size: 24px;
+    }
+
+    .develop {
+      font-size: 18px;
+    }
+
+    .about a {
+      color: var(--dark-primary-color);
+    }
+
+    .error-log-intro {
+      margin-top: 16px;
+      border-top: 1px solid var(--light-primary-color);
+      padding-top: 16px;
+    }
+
+    paper-icon-button {
+      float: right;
+    }
+
+    .error-log {
+      clear: both;
+      white-space: pre-wrap;
+    }
+  </style>
+  <template>
+    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+      <span header-title>About</span>
+
+      <div class='content fit'>
+        <div class='about'>
+          <p class='version'>
+            <a href='https://home-assistant.io'><img src="/static/splash.png" height="230" /></a><br />
+            [[hassVersion]]
+          </p>
+          <p class='develop'>
+            <a href='https://home-assistant.io/developers/credits/' target='_blank'>
+              Developed by a bunch of awesome people.
+            </a>
+          </p>
+          <p>
+            Published under the MIT license<br />
+            Source:
+            <a href='https://github.com/balloob/home-assistant' target='_blank'>server</a> &mdash;
+            <a href='https://github.com/balloob/home-assistant-polymer' target='_blank'>frontend-ui</a> &mdash;
+            <a href='https://github.com/balloob/home-assistant-js' target='_blank'>frontend-core</a>
+          </p>
+          <p>
+            Built using
+            <a href='https://www.python.org'>Python 3</a>,
+            <a href='https://www.polymer-project.org' target='_blank'>Polymer [[polymerVersion]]</a>,
+            <a href='https://optimizely.github.io/nuclear-js/' target='_blank'>NuclearJS [[nuclearVersion]]</a><br />
+            Icons by <a href='https://www.google.com/design/icons/' target='_blank'>Google</a> and <a href='https://MaterialDesignIcons.com' target='_blank'>MaterialDesignIcons.com</a>.
+          </p>
+        </div>
+        <p class='error-log-intro'>
+          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>
+    </partial-base>
+  </template>
+</dom-module>

src/layouts/partial-dev-info.js

@@ -0,0 +1,60 @@
+import {
+  configGetters,
+  errorLogActions,
+} from '../util/home-assistant-js-instance';
+
+import Polymer from '../polymer';
+import nuclearObserver from '../util/bound-nuclear-behavior';
+
+require('./partial-base');
+
+export default new Polymer({
+  is: 'partial-dev-info',
+
+  behaviors: [nuclearObserver],
+
+  properties: {
+    narrow: {
+      type: Boolean,
+      value: false,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    hassVersion: {
+      type: String,
+      bindNuclear: configGetters.serverVersion,
+    },
+
+    polymerVersion: {
+      type: String,
+      value: Polymer.version,
+    },
+
+    nuclearVersion: {
+      type: String,
+      value: '1.2.1',
+    },
+
+    errorLog: {
+      type: String,
+      value: '',
+    },
+  },
+
+  attached() {
+    this.refreshErrorLog();
+  },
+
+  refreshErrorLog(ev) {
+    if (ev) ev.preventDefault();
+
+    this.errorLog = 'Loading error log…';
+
+    errorLogActions.fetchErrorLog().then(
+      log => this.errorLog = log || 'No errors have been reported.');
+  },
+});

src/layouts/partial-dev-set-state.html

@@ -13,6 +13,7 @@
     .form {
       padding: 24px;
       background-color: white;
+      margin-top: 64px;
     }
 
     .ha-form {

src/layouts/partial-zone.html

@@ -10,21 +10,6 @@
       display: block;
       background-color: #E5E5E5;
     }
-
-    .content .listening {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 1;
-
-      border-radius: 2px;
-      box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
-      padding: 16px;
-      background-color: rgba(255, 255, 255, 0.95);
-      line-height: 2em;
-      cursor: pointer;
-    }
   </style>
 
   <template>