mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 07:16:39 +00:00
Add more features to gallery (#1477)
* Add more features to gallery * Feedback * Fix margin * Use array-style config * Split into DemoCards and DemoCard * Move padding * Use min-height
This commit is contained in:
c727
Paulus Schoutsen
parent
5c74e31629
commit
54860d7762
61
gallery/src/components/demo-card.js
Normal file
61
gallery/src/components/demo-card.js
Normal file
@ -0,0 +1,61 @@
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
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 demoStates from '../data/demo_dump.js';
|
||||
|
||||
class DemoCard extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
#root {
|
||||
padding: 8px 8px 32px 8px;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id="root"></div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
type: String,
|
||||
config: {
|
||||
type: Object,
|
||||
observer: '_configChanged'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
_configChanged(config) {
|
||||
const root = this.$.root;
|
||||
while (root.lastChild) {
|
||||
root.removeChild(root.lastChild);
|
||||
}
|
||||
|
||||
const hass = new HomeAssistant();
|
||||
hass.states = demoStates;
|
||||
|
||||
const heading = document.createElement('h2');
|
||||
heading.innerText = config.heading;
|
||||
root.appendChild(heading);
|
||||
const el = document.createElement(this.type);
|
||||
el.setConfig(JsYaml.safeLoad(config.config)[0]);
|
||||
el.hass = hass;
|
||||
root.appendChild(el);
|
||||
const yaml = document.createElement('pre');
|
||||
yaml.innerText = config.config.trim();
|
||||
root.appendChild(yaml);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('demo-card', DemoCard);
|
||||
47
gallery/src/components/demo-cards.js
Normal file
47
gallery/src/components/demo-cards.js
Normal file
@ -0,0 +1,47 @@
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import './demo-card.js';
|
||||
|
||||
class DemoCards extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
#root {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#root > * {
|
||||
flex-basis: 600px;
|
||||
}
|
||||
</style>
|
||||
<div id="root"></div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
type: String,
|
||||
configs: {
|
||||
type: Object,
|
||||
observer: '_configsChanged'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
_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);
|
||||
@ -1,77 +1,146 @@
|
||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import '../../../src/panels/lovelace/cards/hui-glance-card.js';
|
||||
|
||||
import HomeAssistant from '../data/hass.js';
|
||||
import demoStates from '../data/demo_dump.js';
|
||||
import '../components/demo-cards.js';
|
||||
|
||||
const CONFIGS = [
|
||||
{
|
||||
entities: [
|
||||
'binary_sensor.movement_backyard',
|
||||
'light.bed_light',
|
||||
'binary_sensor.basement_floor_wet',
|
||||
'sensor.outside_temperature',
|
||||
'light.ceiling_lights',
|
||||
'switch.ac',
|
||||
'lock.kitchen_door'
|
||||
],
|
||||
type: 'glance',
|
||||
title: 'Glance card sample'
|
||||
heading: 'Basic example',
|
||||
config: `
|
||||
- type: glance
|
||||
entities:
|
||||
- device_tracker.demo_paulus
|
||||
- media_player.living_room
|
||||
- sun.sun
|
||||
- cover.kitchen_window
|
||||
- light.kitchen_lights
|
||||
- lock.kitchen_door
|
||||
- light.ceiling_lights
|
||||
`
|
||||
},
|
||||
{
|
||||
entities: [
|
||||
'binary_sensor.movement_backyard',
|
||||
'light.bed_light',
|
||||
'binary_sensor.basement_floor_wet',
|
||||
'sensor.outside_temperature',
|
||||
'light.ceiling_lights',
|
||||
'switch.ac',
|
||||
'lock.kitchen_door'
|
||||
],
|
||||
type: 'glance',
|
||||
heading: 'With title',
|
||||
config: `
|
||||
- type: glance
|
||||
title: This is glance
|
||||
entities:
|
||||
- device_tracker.demo_paulus
|
||||
- media_player.living_room
|
||||
- sun.sun
|
||||
- cover.kitchen_window
|
||||
- light.kitchen_lights
|
||||
- lock.kitchen_door
|
||||
- light.ceiling_lights
|
||||
`
|
||||
},
|
||||
{
|
||||
entities: [
|
||||
'lock.kitchen_door'
|
||||
],
|
||||
type: 'glance',
|
||||
heading: 'Custom column width',
|
||||
config: `
|
||||
- type: glance
|
||||
column_width: calc(100% / 7)
|
||||
entities:
|
||||
- device_tracker.demo_paulus
|
||||
- media_player.living_room
|
||||
- sun.sun
|
||||
- cover.kitchen_window
|
||||
- light.kitchen_lights
|
||||
- lock.kitchen_door
|
||||
- light.ceiling_lights
|
||||
`
|
||||
},
|
||||
{
|
||||
heading: 'No name',
|
||||
config: `
|
||||
- type: glance
|
||||
show_name: false
|
||||
entities:
|
||||
- device_tracker.demo_paulus
|
||||
- media_player.living_room
|
||||
- sun.sun
|
||||
- cover.kitchen_window
|
||||
- light.kitchen_lights
|
||||
- lock.kitchen_door
|
||||
- light.ceiling_lights
|
||||
`
|
||||
},
|
||||
{
|
||||
heading: 'No state',
|
||||
config: `
|
||||
- type: glance
|
||||
show_state: false
|
||||
entities:
|
||||
- device_tracker.demo_paulus
|
||||
- media_player.living_room
|
||||
- sun.sun
|
||||
- cover.kitchen_window
|
||||
- light.kitchen_lights
|
||||
- lock.kitchen_door
|
||||
- light.ceiling_lights
|
||||
`
|
||||
},
|
||||
{
|
||||
heading: 'No name and no state',
|
||||
config: `
|
||||
- type: glance
|
||||
show_name: false
|
||||
show_state: false
|
||||
entities:
|
||||
- device_tracker.demo_paulus
|
||||
- media_player.living_room
|
||||
- sun.sun
|
||||
- cover.kitchen_window
|
||||
- light.kitchen_lights
|
||||
- lock.kitchen_door
|
||||
- light.ceiling_lights
|
||||
`
|
||||
},
|
||||
{
|
||||
heading: 'Custom name',
|
||||
config: `
|
||||
- type: glance
|
||||
entities:
|
||||
- entity: device_tracker.demo_paulus
|
||||
name: ¯\\_(ツ)_/¯
|
||||
- media_player.living_room
|
||||
- sun.sun
|
||||
- cover.kitchen_window
|
||||
- light.kitchen_lights
|
||||
- lock.kitchen_door
|
||||
- light.ceiling_lights
|
||||
`
|
||||
},
|
||||
{
|
||||
heading: 'Custom tap action',
|
||||
config: `
|
||||
- type: glance
|
||||
entities:
|
||||
- entity: lock.kitchen_door
|
||||
tap_action: toggle
|
||||
- entity: light.ceiling_lights
|
||||
tap_action: turn-on
|
||||
- device_tracker.demo_paulus
|
||||
- media_player.living_room
|
||||
- sun.sun
|
||||
- cover.kitchen_window
|
||||
- light.kitchen_lights
|
||||
`
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
class DemoPicEntity extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
#root {
|
||||
}
|
||||
hui-glance-card {
|
||||
width: 400px;
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id='root'>
|
||||
</div>
|
||||
<demo-cards type="hui-glance-card" configs="[[_configs]]"></demo-cards>
|
||||
`;
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
|
||||
const root = this.$.root;
|
||||
const hass = new HomeAssistant();
|
||||
hass.states = demoStates;
|
||||
console.log(demoStates);
|
||||
CONFIGS.forEach((config) => {
|
||||
const el = document.createElement('hui-glance-card');
|
||||
el.setConfig(config);
|
||||
el.hass = hass;
|
||||
root.appendChild(el);
|
||||
});
|
||||
static get properties() {
|
||||
return {
|
||||
_configs: {
|
||||
type: Object,
|
||||
value: CONFIGS
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ class HaGallery extends PolymerElement {
|
||||
-moz-user-select: initial;
|
||||
}
|
||||
app-header-layout {
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
paper-icon-button.invisible {
|
||||
visibility: hidden;
|
||||
|
||||
@ -70,6 +70,7 @@
|
||||
"fecha": "^2.3.3",
|
||||
"home-assistant-js-websocket": "2.0.1",
|
||||
"intl-messageformat": "^2.2.0",
|
||||
"js-yaml": "^3.12.0",
|
||||
"leaflet": "^1.3.1",
|
||||
"marked": "^0.4.0",
|
||||
"mdn-polyfills": "^5.8.0",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user