Remove introduction card (#543)

* Remove introduction card

* Extract ha-markdown component

* Limit image width

* Links in persistent notification should be blue

src/cards/ha-card-chooser.html

@@ -3,7 +3,6 @@
 <link rel='import' href='./ha-camera-card.html'>
 <link rel='import' href='./ha-entities-card.html'>
 <link rel='import' href='./ha-history_graph-card.html'>
-<link rel='import' href='./ha-introduction-card.html'>
 <link rel='import' href='./ha-media_player-card.html'>
 <link rel='import' href='./ha-weather-card.html'>
 <link rel='import' href='./ha-persistent_notification-card.html'>

src/cards/ha-introduction-card.html

@@ -1,83 +0,0 @@
-<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
-
-<link rel='import' href='../components/ha-card.html'>
-
-<dom-module id='ha-introduction-card'>
-  <template>
-    <style>
-      :host {
-        @apply(--paper-font-body1);
-      }
-      a {
-        color: var(--dark-primary-color);
-      }
-      ul {
-        margin: 8px;
-        padding-left: 16px;
-      }
-      li {
-        margin-bottom: 8px;
-      }
-      .content {
-        padding: 0 16px 16px;
-      }
-      .install {
-        display: block;
-        line-height: 1.5em;
-        margin-top: 8px;
-        margin-bottom: 16px;
-      }
-    </style>
-
-    <ha-card header="Welcome Home!">
-      <div class='content'>
-        <template is='dom-if' if='[[hass.demo]]'>
-          To install Home Assistant, run:<br />
-          <code class='install'>
-            pip3 install homeassistant<br />
-            hass --open-ui
-          </code>
-        </template>
-        Here are some resources to get you started.
-        <ul>
-          <template is='dom-if' if='[[hass.demo]]'>
-            <li><a href='https://home-assistant.io/getting-started/'>Home Assistant website</a></li>
-            <li><a href='https://home-assistant.io/getting-started/'>Installation instructions</a></li>
-            <li><a href='https://home-assistant.io/getting-started/troubleshooting/'>Troubleshooting your installation</a></li>
-          </template>
-          <li><a href='https://home-assistant.io/getting-started/configuration/' target='_blank'>
-            Configuring Home Assistant
-          </a></li>
-          <li><a href='https://home-assistant.io/components/' target='_blank'>
-            Available components
-          </a></li>
-          <li><a href='https://home-assistant.io/getting-started/troubleshooting-configuration/' target='_blank'>Troubleshooting your configuration</a></li>
-          <li><a href='https://home-assistant.io/help/' target='_blank'>
-            Ask the community for help
-          </a></li>
-        </ul>
-        <template is='dom-if' if='[[showHideInstruction]]'>
-          To remove this card, edit your config in
-          <code>configuration.yaml</code> and disable the
-          <code>introduction</code> component.
-        </template>
-      </div>
-    </ha-card>
-  </template>
-</dom-module>
-
-<script>
-class HaIntroductionCard extends Polymer.Element {
-  static get is() { return 'ha-introduction-card'; }
-  static get properties() {
-    return {
-      hass: Object,
-      showHideInstruction: {
-        type: Boolean,
-        value: true,
-      },
-    };
-  }
-}
-customElements.define(HaIntroductionCard.is, HaIntroductionCard);
-</script>

src/cards/ha-persistent_notification-card.html

@@ -2,6 +2,7 @@
 <link rel='import' href='../../bower_components/paper-button/paper-button.html'>
 
 <link rel='import' href='../components/ha-card.html'>
+<link rel='import' href='../components/ha-markdown.html'>
 
 <dom-module id='ha-persistent_notification-card'>
   <template>
@@ -9,12 +10,25 @@
       :host {
         @apply(--paper-font-body1);
       }
-      .content {
+      ha-markdown {
-        padding: 0 16px 16px;
+        display: block;
+        padding: 0 16px;
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
       }
+      ha-markdown p:first-child {
+        margin-top: 0;
+      }
+      ha-markdown p:last-child {
+        margin-bottom: 0;
+      }
+      ha-markdown a {
+        color: var(--primary-color);
+      }
+      ha-markdown img {
+        max-width: 100%;
+      }
       paper-button {
         margin: 8px;
         font-weight: 500;
@@ -22,7 +36,7 @@
     </style>
 
     <ha-card header='[[computeTitle(stateObj)]]'>
-      <div id='pnContent' class='content'></div>
+      <ha-markdown content='[[stateObj.attributes.message]]'></ha-markdown>
       <paper-button on-tap='dismissTap'>DISMISS</paper-button>
     </ha-card>
   </template>
@@ -35,44 +49,14 @@ class HaPersistentNotificationCard extends Polymer.Element {
     return {
       hass: Object,
       stateObj: Object,
-      scriptLoaded: {
-        type: Number,
-        // 0 = not loaded, 1 = success, 2 = error
-        value: 0,
-      }
     };
   }
 
-  static get observers() {
-    return [
-      'computeContent(stateObj, scriptLoaded)',
-    ];
-  }
-
   computeTitle(stateObj) {
     return (stateObj.attributes.title ||
             window.hassUtil.computeStateName(stateObj));
   }
 
-  computeContent(stateObj, scriptLoaded) {
-    if (scriptLoaded === 1) {
-      const converter = window.Markdown.getSanitizingConverter();
-      this.$.pnContent.innerHTML = converter.makeHtml(stateObj.attributes.message);
-    } else if (scriptLoaded === 2) {
-      this.$.pnContent.innerText = stateObj.attributes.message;
-    }
-  }
-
-  ready() {
-    super.ready();
-
-    Polymer.importHref(
-      '/static/pagedown-js.html',
-      () => { this.scriptLoaded = 1; },
-      () => { this.scriptLoaded = 2; },
-    );
-  }
-
   dismissTap(ev) {
     ev.preventDefault();
     this.hass.callApi('DELETE', 'states/' + this.stateObj.entity_id);

src/components/ha-cards.html

@@ -149,11 +149,6 @@
       return {
         hass: Object,
 
-        showIntroduction: {
-          type: Boolean,
-          value: false,
-        },
-
         columns: {
           type: Number,
           value: 2,
@@ -175,14 +170,13 @@
 
     static get observers() {
       return [
-        'updateCards(columns, states, showIntroduction, panelVisible, viewVisible, orderedGroups)',
+        'updateCards(columns, states, panelVisible, viewVisible, orderedGroups)',
       ];
     }
 
     updateCards(
       columns,
       states,
-      showIntroduction,
       panelVisible,
       viewVisible,
       orderedGroups
@@ -196,13 +190,13 @@
         () => {
           // Things might have changed since it got scheduled.
           if (this.panelVisible && this.viewVisible) {
-            this.cards = this.computeCards(columns, states, showIntroduction, orderedGroups);
+            this.cards = this.computeCards(columns, states, orderedGroups);
           }
         }
       );
     }
 
-    computeCards(columns, states, showIntroduction, orderedGroups) {
+    computeCards(columns, states, orderedGroups) {
       const hass = this.hass;
 
       const cards = {
@@ -234,14 +228,6 @@
         return minIndex;
       }
 
-      if (showIntroduction) {
-        cards.columns[getIndex(5)].push({
-          hass: hass,
-          cardType: 'introduction',
-          showHideInstruction: Object.keys(states).length > 0 && !window.HASS_DEMO,
-        });
-      }
-
       function addEntitiesCard(name, entities, groupEntity) {
         if (entities.length === 0) return;
 

src/components/ha-markdown.html

@@ -0,0 +1,48 @@
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
+
+<script>
+class HaMarkdown extends Polymer.Element {
+  static get is() { return 'ha-markdown'; }
+
+  static get properties() {
+    return {
+      content: {
+        type: String,
+      },
+
+      scriptLoaded: {
+        type: Number,
+        // 0 = not loaded, 1 = success, 2 = error
+        value: 0,
+      },
+    };
+  }
+
+  static get observers() {
+    return [
+      'updateContent(content, scriptLoaded)',
+    ];
+  }
+
+  updateContent(content, scriptLoaded) {
+    if (scriptLoaded === 1) {
+      const converter = window.Markdown.getSanitizingConverter();
+      this.innerHTML = converter.makeHtml(content);
+    } else if (scriptLoaded === 2) {
+      this.innerText = content;
+    }
+  }
+
+  ready() {
+    super.ready();
+
+    Polymer.importHref(
+      '/static/pagedown-js.html',
+      () => { this.scriptLoaded = 1; },
+      () => { this.scriptLoaded = 2; },
+    );
+  }
+}
+
+customElements.define(HaMarkdown.is, HaMarkdown);
+</script>

src/layouts/partial-cards.html

@@ -108,7 +108,6 @@
       >
         <ha-cards
           data-view=''
-          show-introduction='[[computeShowIntroduction(currentView, introductionLoaded, viewStates)]]'
           states='[[viewStates]]'
           columns='[[_columns]]'
           hass='[[hass]]'
@@ -174,11 +173,6 @@
           value: 1,
         },
 
-        introductionLoaded: {
-          type: Boolean,
-          computed: 'computeIntroductionLoaded(hass)',
-        },
-
         locationName: {
           type: String,
           value: '',
@@ -305,10 +299,6 @@
       return views && views.length > 0 ? 'Home Assistant' : locationName;
     }
 
-    computeShowIntroduction(currentView, introductionLoaded, states) {
-      return currentView === '' && (introductionLoaded || Object.keys(states).length === 0);
-    }
-
     computeStateName(stateObj) {
       if (stateObj.entity_id === DEFAULT_VIEW_ENTITY_ID) {
         if (stateObj.attributes.friendly_name &&
@@ -324,10 +314,6 @@
       return window.hassUtil.computeLocationName(hass);
     }
 
-    computeIntroductionLoaded(hass) {
-      return window.hassUtil.isComponentLoaded(hass, 'introduction');
-    }
-
     hassChanged(hass) {
       if (!hass) return;
       var views = window.HAWS.extractViews(hass.states);