tweak demo cards layout (#1479)

* tweak demo cards layout

* Lint
This commit is contained in:
Paulus Schoutsen 2018-07-19 23:44:12 +02:00 committed by GitHub
parent 54860d7762
commit 1b039aee50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 42 deletions

View File

@ -2,59 +2,65 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import JsYaml from 'js-yaml'; import JsYaml from 'js-yaml';
import '../../../src/panels/lovelace/cards/hui-glance-card.js';
import '../../../src/panels/lovelace/cards/hui-picture-entity-card.js';
import '../../../src/panels/lovelace/cards/hui-picture-glance-card.js';
import HomeAssistant from '../data/hass.js'; import HomeAssistant from '../data/hass.js';
import demoStates from '../data/demo_dump.js'; import demoStates from '../data/demo_dump.js';
import createCardElement from '../../../src/panels/lovelace/common/create-card-element.js';
class DemoCard extends PolymerElement { class DemoCard extends PolymerElement {
static get template() { static get template() {
return html` return html`
<style> <style>
#root { .root {
padding: 8px 8px 32px 8px; display: flex;
} }
h2 { h2 {
margin: 0; margin: 0;
color: var(--primary-color); color: var(--primary-color);
margin-bottom: 20px; margin-bottom: 20px;
} }
#card {
max-width: 400px;
}
pre {
margin-left: 16px;
}
</style> </style>
<div id="root"></div> <h2>[[config.heading]]</h2>
<div class='root'>
<div id="card"></div>
<template is='dom-if' if='[[showConfig]]'>
<pre>[[_trim(config.config)]]</pre>
</template>
</div>
`; `;
} }
static get properties() { static get properties() {
return { return {
type: String,
config: { config: {
type: Object, type: Object,
observer: '_configChanged' observer: '_configChanged'
} },
showConfig: Boolean,
}; };
} }
_configChanged(config) { _configChanged(config) {
const root = this.$.root; const card = this.$.card;
while (root.lastChild) { while (card.lastChild) {
root.removeChild(root.lastChild); card.removeChild(card.lastChild);
} }
const hass = new HomeAssistant(); const hass = new HomeAssistant();
hass.states = demoStates; hass.states = demoStates;
const heading = document.createElement('h2'); const el = createCardElement(JsYaml.safeLoad(config.config)[0]);
heading.innerText = config.heading;
root.appendChild(heading);
const el = document.createElement(this.type);
el.setConfig(JsYaml.safeLoad(config.config)[0]);
el.hass = hass; el.hass = hass;
root.appendChild(el); card.appendChild(el);
const yaml = document.createElement('pre'); }
yaml.innerText = config.config.trim();
root.appendChild(yaml); _trim(config) {
return config.trim();
} }
} }

View File

@ -1,5 +1,7 @@
import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/paper-toggle-button/paper-toggle-button.js';
import './demo-card.js'; import './demo-card.js';
@ -7,41 +9,52 @@ class DemoCards extends PolymerElement {
static get template() { static get template() {
return html` return html`
<style> <style>
#root { .cards {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center;
} }
#root > * { demo-card {
flex-basis: 600px; display: block;
margin: 16px 16px 32px;
}
app-toolbar {
background-color: var(--light-primary-color);
}
.filters {
margin-left: 60px;
} }
</style> </style>
<div id="root"></div> <app-toolbar>
<div class='filters'>
<paper-toggle-button
checked='{{showConfig}}'
>Show config</paper-toggle-button>
</div>
</app-toolbar>
<div class='cards'>
<template is='dom-repeat' items='[[configs]]'>
<demo-card
config='[[item]]'
type='[[type]]'
show-config='[[showConfig]]'
></demo-card>
</template>
</div>
`; `;
} }
static get properties() { static get properties() {
return { return {
type: String,
configs: { configs: {
type: Object, type: Object,
observer: '_configsChanged' },
showConfig: {
type: Boolean,
value: false,
} }
}; };
} }
_configsChanged(configs) {
const root = this.$.root;
while (root.lastChild) {
root.removeChild(root.lastChild);
}
configs.forEach((config) => {
const el = document.createElement('demo-card');
el.config = config;
el.type = this.type;
root.appendChild(el);
});
}
} }
customElements.define('demo-cards', DemoCards); customElements.define('demo-cards', DemoCards);

View File

@ -130,7 +130,7 @@ const CONFIGS = [
class DemoPicEntity extends PolymerElement { class DemoPicEntity extends PolymerElement {
static get template() { static get template() {
return html` return html`
<demo-cards type="hui-glance-card" configs="[[_configs]]"></demo-cards> <demo-cards configs="[[_configs]]"></demo-cards>
`; `;
} }