Add introduction card

This commit is contained in:
Paulus Schoutsen 2015-08-27 00:55:03 -07:00
parent ee8492df46
commit 1c82a53631
7 changed files with 98 additions and 3 deletions

View File

@ -0,0 +1,47 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel='import' href='../components/ha-card.html'>
<dom-module id='ha-introduction-card'>
<style>
:host {
font-size: 14px;
}
a {
color: var(--dark-primary-color);
}
ul {
margin: 8px;
padding-left: 16px;
}
li {
margin-bottom: 8px;
}
.content {
padding: 0 16px 16px;
}
</style>
<template>
<ha-card header="Welcome to Home Assistant!">
<div class='content'>
Here are some resources to get started.
<ul>
<li><a href='https://home-assistant.io/getting-started/configuration.html' 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://gitter.im/balloob/home-assistant' target='_blank'>
Chat room
</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>

View File

@ -0,0 +1,14 @@
import Polymer from '../polymer';
require('../components/ha-card');
export default new Polymer({
is: 'ha-introduction-card',
properties: {
showHideInstruction: {
type: Boolean,
value: true,
},
},
});

View File

@ -2,6 +2,7 @@
<link rel="import" href="../cards/ha-badges-card.html">
<link rel="import" href="../cards/ha-domain-card.html">
<link rel="import" href="../cards/ha-introduction-card.html">
<dom-module id="ha-zone-cards">
<style>
@ -10,6 +11,10 @@
padding-right: 8px;
}
.no-badges {
height: 8px;
}
.badges {
margin-top: 16px;
margin-left: 8px;
@ -25,13 +30,21 @@
<template>
<div class='main'>
<template is='dom-if' if='domains.badges'>
<template is='dom-if' if='[[cards._badges]]'>
<div class='badges'>
<ha-badges-card states='[[cards._badges]]'></ha-badges-card>
</div>
</template>
<template is='dom-if' if='[[!cards._badges]]'>
<div class='no-badges'> </div>
</template>
<div class='horizontal layout'>
<div class='column flex-1'>
<template is='dom-if' if='[[showIntroduction]]'>
<div class='zone-card'>
<ha-introduction-card show-hide-instruction='[[computeShowHideInstruction(states)]]'></ha-introduction-card>
</div>
</template>
<template is='dom-repeat' items='[[cards._columns.0]]'>
<div class='zone-card'>
<ha-domain-card domain='[[item]]'

View File

@ -3,6 +3,7 @@ import { util } from '../util/home-assistant-js-instance';
require('../cards/ha-badges-card');
require('../cards/ha-domain-card');
require('../cards/ha-introduction-card');
const PRIORITY = {
a: -1,
@ -30,6 +31,11 @@ export default new Polymer({
is: 'ha-zone-cards',
properties: {
showIntroduction: {
type: Boolean,
value: false,
},
columns: {
type: Number,
value: 2,
@ -94,6 +100,10 @@ export default new Polymer({
return cards;
},
computeShowHideInstruction(states) {
return states.size > 0 && !__DEMO__;
},
computeStatesOfCard(cards, card) {
return cards[card];
},

View File

@ -51,7 +51,9 @@
<ha-voice-command-progress></ha-voice-command-progress>
</div>
<ha-zone-cards states='[[states]]' columns='[[columns]]'></ha-zone-cards>
<ha-zone-cards
show-introduction='[[computeShowIntroduction(introductionLoaded, states)]]'
states='[[states]]' columns='[[columns]]'></ha-zone-cards>
</div>
</paper-header-panel>
</template>

View File

@ -59,6 +59,11 @@ export default new Polymer({
],
},
introductionLoaded: {
type: Boolean,
bindNuclear: configGetters.isComponentLoaded('introduction'),
},
states: {
type: Object,
bindNuclear: entityGetters.visibleEntityMap,
@ -124,6 +129,10 @@ export default new Polymer({
}
},
computeShowIntroduction(introductionLoaded, states) {
return introductionLoaded || states.size === 0;
},
toggleMenu() {
this.fire('open-menu');
},

View File

@ -5,7 +5,7 @@
<dom-module id="more-info-sun">
<template>
<template is='dom-repeat' items='[[computeOrder(risingDate, settingDate)]]'>
<div class='data-entry layout justified horizontal' id='rising'>
<div class='data-entry layout justified horizontal'>
<div class='key'>
<span>[[itemCaption(item)]]</span>
<relative-ha-datetime datetime-obj="[[itemDate(item)]]"></relative-ha-datetime>