From a78aba5f508f2809fcb31154ac42ffa91c067b7d Mon Sep 17 00:00:00 2001 From: c727 Date: Fri, 20 Jul 2018 03:22:16 +0200 Subject: [PATCH] Add more gallery cards (#1481) * Add more gallery cards * Lint --- gallery/src/components/demo-card.js | 13 +- gallery/src/components/demo-cards.js | 6 +- gallery/src/demos/demo-hui-entities-card.js | 96 +++++++ .../src/demos/demo-hui-entity-filter-card.js | 61 ++++ gallery/src/demos/demo-hui-iframe-card.js | 57 ++++ gallery/src/demos/demo-hui-map-card.js | 55 ++++ gallery/src/demos/demo-hui-markdown-card.js | 272 ++++++++++++++++++ .../src/demos/demo-hui-picture-entity-card.js | 81 +++--- .../src/demos/demo-hui-picture-glance-card.js | 131 ++++----- gallery/src/demos/demo-hui-stack-card.js | 76 +++++ 10 files changed, 737 insertions(+), 111 deletions(-) create mode 100644 gallery/src/demos/demo-hui-entities-card.js create mode 100644 gallery/src/demos/demo-hui-entity-filter-card.js create mode 100644 gallery/src/demos/demo-hui-iframe-card.js create mode 100644 gallery/src/demos/demo-hui-map-card.js create mode 100644 gallery/src/demos/demo-hui-markdown-card.js create mode 100644 gallery/src/demos/demo-hui-stack-card.js diff --git a/gallery/src/components/demo-card.js b/gallery/src/components/demo-card.js index 86ac0ea766..2dd3cda92f 100644 --- a/gallery/src/components/demo-card.js +++ b/gallery/src/components/demo-card.js @@ -14,16 +14,23 @@ class DemoCard extends PolymerElement { display: flex; } h2 { - margin: 0; + margin: 0 0 20px; color: var(--primary-color); - margin-bottom: 20px; } #card { - max-width: 400px; + width: 400px; } pre { margin-left: 16px; } + @media only screen and (max-width: 800px) { + .root { + flex-direction: column; + } + pre { + margin-left: 0; + } + }

[[config.heading]]

diff --git a/gallery/src/components/demo-cards.js b/gallery/src/components/demo-cards.js index ef628f1aef..e71c2cf8e2 100644 --- a/gallery/src/components/demo-cards.js +++ b/gallery/src/components/demo-cards.js @@ -15,7 +15,6 @@ class DemoCards extends PolymerElement { justify-content: center; } demo-card { - display: block; margin: 16px 16px 32px; } app-toolbar { @@ -36,7 +35,6 @@ class DemoCards extends PolymerElement { @@ -46,9 +44,7 @@ class DemoCards extends PolymerElement { static get properties() { return { - configs: { - type: Object, - }, + configs: Object, showConfig: { type: Boolean, value: false, diff --git a/gallery/src/demos/demo-hui-entities-card.js b/gallery/src/demos/demo-hui-entities-card.js new file mode 100644 index 0000000000..d4c9b3e3fb --- /dev/null +++ b/gallery/src/demos/demo-hui-entities-card.js @@ -0,0 +1,96 @@ +import { html } from '@polymer/polymer/lib/utils/html-tag.js'; +import { PolymerElement } from '@polymer/polymer/polymer-element.js'; + +import '../components/demo-cards.js'; + +const CONFIGS = [ + { + heading: 'Basic', + config: ` +- type: entities + entities: + - scene.romantic_lights + - device_tracker.demo_paulus + - cover.kitchen_window + - group.kitchen + - lock.kitchen_door + - light.bed_light + - light.non_existing + ` + }, + { + heading: 'With title, toggle-able', + config: ` +- type: entities + entities: + - scene.romantic_lights + - device_tracker.demo_paulus + - cover.kitchen_window + - group.kitchen + - lock.kitchen_door + - light.bed_light + title: Random group + ` + }, + { + heading: 'With title, toggle = false', + config: ` +- type: entities + entities: + - scene.romantic_lights + - device_tracker.demo_paulus + - cover.kitchen_window + - group.kitchen + - lock.kitchen_door + - light.bed_light + title: Random group + show_header_toggle: false + ` + }, + { + heading: 'With title, cant\'t toggle', + config: ` +- type: entities + entities: + - device_tracker.demo_paulus + title: Random group + ` + }, + { + heading: 'Custom name, secondary info', + config: ` +- type: entities + entities: + - entity: scene.romantic_lights + name: ¯\\_(ツ)_/¯ + - entity: device_tracker.demo_paulus + secondary_info: entity-id + - entity: cover.kitchen_window + secondary_info: last-changed + - group.kitchen + - lock.kitchen_door + - light.bed_light + title: Random group + show_header_toggle: false + ` + }, +]; + +class DemoEntities extends PolymerElement { + static get template() { + return html` + + `; + } + + static get properties() { + return { + _configs: { + type: Object, + value: CONFIGS + } + }; + } +} + +customElements.define('demo-hui-entities-card', DemoEntities); diff --git a/gallery/src/demos/demo-hui-entity-filter-card.js b/gallery/src/demos/demo-hui-entity-filter-card.js new file mode 100644 index 0000000000..b49bf6070c --- /dev/null +++ b/gallery/src/demos/demo-hui-entity-filter-card.js @@ -0,0 +1,61 @@ +import { html } from '@polymer/polymer/lib/utils/html-tag.js'; +import { PolymerElement } from '@polymer/polymer/polymer-element.js'; + +import '../components/demo-cards.js'; + +const CONFIGS = [ + { + heading: 'Basic', + config: ` +- type: entity-filter + entities: + - device_tracker.demo_anne_therese + - device_tracker.demo_home_boy + - device_tracker.demo_paulus + - light.bed_light + - light.ceiling_lights + - light.kitchen_lights + state_filter: + - "on" + - not_home + ` + }, + { + heading: 'With card config', + config: ` +- type: entity-filter + entities: + - device_tracker.demo_anne_therese + - device_tracker.demo_home_boy + - device_tracker.demo_paulus + - light.bed_light + - light.ceiling_lights + - light.kitchen_lights + state_filter: + - "on" + - not_home + card: + type: glance + show_state: false + ` + }, +]; + +class DemoFilter extends PolymerElement { + static get template() { + return html` + + `; + } + + static get properties() { + return { + _configs: { + type: Object, + value: CONFIGS + } + }; + } +} + +customElements.define('demo-hui-entity-filter-card', DemoFilter); diff --git a/gallery/src/demos/demo-hui-iframe-card.js b/gallery/src/demos/demo-hui-iframe-card.js new file mode 100644 index 0000000000..e6799470ea --- /dev/null +++ b/gallery/src/demos/demo-hui-iframe-card.js @@ -0,0 +1,57 @@ +import { html } from '@polymer/polymer/lib/utils/html-tag.js'; +import { PolymerElement } from '@polymer/polymer/polymer-element.js'; + +import '../components/demo-cards.js'; + +const CONFIGS = [ + { + heading: 'Without title', + config: ` +- type: iframe + url: https://embed.windy.com/embed2.html + ` + }, + { + heading: 'With title', + config: ` +- type: iframe + url: https://embed.windy.com/embed2.html + title: Weather radar + ` + }, + { + heading: 'Height-Width 3:4', + config: ` +- type: iframe + url: https://embed.windy.com/embed2.html + aspect_ratio: 75% + ` + }, + { + heading: 'Height-Width 1:1', + config: ` +- type: iframe + url: https://embed.windy.com/embed2.html + aspect_ratio: 100% + ` + }, +]; + +class DemoIframe extends PolymerElement { + static get template() { + return html` + + `; + } + + static get properties() { + return { + _configs: { + type: Object, + value: CONFIGS + } + }; + } +} + +customElements.define('demo-hui-iframe-card', DemoIframe); diff --git a/gallery/src/demos/demo-hui-map-card.js b/gallery/src/demos/demo-hui-map-card.js new file mode 100644 index 0000000000..35efd0ae51 --- /dev/null +++ b/gallery/src/demos/demo-hui-map-card.js @@ -0,0 +1,55 @@ +import { html } from '@polymer/polymer/lib/utils/html-tag.js'; +import { PolymerElement } from '@polymer/polymer/polymer-element.js'; + +import '../components/demo-cards.js'; + +const CONFIGS = [ + { + heading: 'Without title', + config: ` +- type: map + entities: + - entity: device_tracker.demo_paulus + - zone.home + ` + }, + { + heading: 'With title', + config: ` +- type: map + entities: + - entity: device_tracker.demo_paulus + - zone.home + title: Where is Paulus? + ` + }, + { + heading: 'Height-Width 1:2', + config: ` +- type: map + entities: + - entity: device_tracker.demo_paulus + - zone.home + aspect_ratio: 50% + ` + }, +]; + +class DemoMap extends PolymerElement { + static get template() { + return html` + + `; + } + + static get properties() { + return { + _configs: { + type: Object, + value: CONFIGS + } + }; + } +} + +customElements.define('demo-hui-map-card', DemoMap); diff --git a/gallery/src/demos/demo-hui-markdown-card.js b/gallery/src/demos/demo-hui-markdown-card.js new file mode 100644 index 0000000000..8d2eb15ca7 --- /dev/null +++ b/gallery/src/demos/demo-hui-markdown-card.js @@ -0,0 +1,272 @@ +import { html } from '@polymer/polymer/lib/utils/html-tag.js'; +import { PolymerElement } from '@polymer/polymer/polymer-element.js'; + +import '../components/demo-cards.js'; + +const CONFIGS = [ + { + heading: 'markdown-it demo', + config: ` +- type: markdown + content: > + # h1 Heading 8-) + + ## h2 Heading + + ### h3 Heading + + #### h4 Heading + + ##### h5 Heading + + ###### h6 Heading + + + ## Horizontal Rules + + ___ + + --- + + *** + + + ## Typographic replacements + + Enable typographer option to see result. + + (c) (C) (r) (R) (tm) (TM) (p) (P) +- + + test.. test... test..... test?..... test!.... + + !!!!!! ???? ,, -- --- + + "Smartypants, double quotes" and 'single quotes' + + + ## Emphasis + + **This is bold text** + + __This is bold text__ + + *This is italic text* + + _This is italic text_ + + ~~Strikethrough~~ + + + ## Blockquotes + + + > Blockquotes can also be nested... + >> ...by using additional greater-than signs right next to each other... + > > > ...or with spaces between arrows. + + + ## Lists + + Unordered + + + Create a list by starting a line with \`+\`, \`-\`, or \`*\` + + Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + * Ac tristique libero volutpat at + + Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit + + Very easy! + + + Ordered + + 1. Lorem ipsum dolor sit amet + 2. Consectetur adipiscing elit + 3. Integer molestie lorem at massa + + + 1. You can use sequential numbers... + 1. ...or keep all the numbers as \`1.\` + + Start numbering with offset: + + 57. foo + 1. bar + + + ## Code + + Inline \`code\` + + Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + + + Block code "fences" + + \`\`\` + Sample text here... + \`\`\` + + Syntax highlighting + + \`\`\` js + var foo = function (bar) { + return bar++; + }; + + console.log(foo(5)); + \`\`\` + + ## Tables + + | Option | Description | + | ------ | ----------- | + | data | path to data files to supply the data that will be passed into templates. | + | engine | engine to be used for processing templates. Handlebars is the default. | + | ext | extension to be used for dest files. | + + Right aligned columns + + | Option | Description | + | ------:| -----------:| + | data | path to data files to supply the data that will be passed into templates. | + | engine | engine to be used for processing templates. Handlebars is the default. | + | ext | extension to be used for dest files. | + + + ## Links + + [link text](http://dev.nodeca.com) + + [link with title](http://nodeca.github.io/pica/demo/ "title text!") + + Autoconverted link https://github.com/nodeca/pica (enable linkify to see) + + + ## Images + + ![Minion](https://octodex.github.com/images/minion.png) + ![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") + + Like links, Images also have a footnote style syntax + + ![Alt text][id] + + With a reference later in the document defining the URL location: + + [id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat" + + + ## Plugins + + The killer feature of \`markdown-it\` is very effective support of + [syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin). + + + ### [Emojies](https://github.com/markdown-it/markdown-it-emoji) + + > Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum: + > + > Shortcuts (emoticons): :-) :-( 8-) ;) + + see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji. + + + ### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup) + + - 19^th^ + - H~2~O + + + ### [](https://github.com/markdown-it/markdown-it-ins) + + ++Inserted text++ + + + ### [](https://github.com/markdown-it/markdown-it-mark) + + ==Marked text== + + + ### [Footnotes](https://github.com/markdown-it/markdown-it-footnote) + + Footnote 1 link[^first]. + + Footnote 2 link[^second]. + + Inline footnote^[Text of inline footnote] definition. + + Duplicated footnote reference[^second]. + + [^first]: Footnote **can have markup** + + and multiple paragraphs. + + [^second]: Footnote text. + + + ### [Definition lists](https://github.com/markdown-it/markdown-it-deflist) + + Term 1 + + : Definition 1 + with lazy continuation. + + Term 2 with *inline markup* + + : Definition 2 + + { some code, part of Definition 2 } + + Third paragraph of definition 2. + + _Compact style:_ + + Term 1 + ~ Definition 1 + + Term 2 + ~ Definition 2a + ~ Definition 2b + + + ### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr) + + This is HTML abbreviation example. + + It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on. + + *[HTML]: Hyper Text Markup Language + + ### [Custom containers](https://github.com/markdown-it/markdown-it-container) + + ::: warning + *here be dragons* + ::: + ` + }, +]; + +class DemoMarkdown extends PolymerElement { + static get template() { + return html` + + `; + } + + static get properties() { + return { + _configs: { + type: Object, + value: CONFIGS + } + }; + } +} + +customElements.define('demo-hui-markdown-card', DemoMarkdown); diff --git a/gallery/src/demos/demo-hui-picture-entity-card.js b/gallery/src/demos/demo-hui-picture-entity-card.js index fa75cca207..7d2d414a93 100644 --- a/gallery/src/demos/demo-hui-picture-entity-card.js +++ b/gallery/src/demos/demo-hui-picture-entity-card.js @@ -1,60 +1,65 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js'; -import '../../../src/panels/lovelace/cards/hui-picture-entity-card.js'; - -import HomeAssistant from '../data/hass.js'; -import demoStates from '../data/demo_dump.js'; +import '../components/demo-cards.js'; const CONFIGS = [ { - type: 'picture-entity', - image: 'https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490', - entity: 'light.bed_light', + heading: 'State on', + config: ` +- type: picture-entity + image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg + entity: light.kitchen_lights + ` }, { - type: 'picture-entity', - image: 'https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490', - entity: 'light.kitchen_lights', + heading: 'State off', + config: ` +- type: picture-entity + image: https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg + entity: light.bed_light + ` }, { - type: 'picture-glance', - image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495', - entity: 'light.non_existing' + heading: 'Entity unavailable', + config: ` +- type: picture-entity + image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg + entity: light.non_existing + ` + }, + { + heading: 'Camera entity', + config: ` +- type: picture-entity + entity: camera.demo_camera + ` + }, + { + heading: 'Hidden info', + config: ` +- type: picture-entity + image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg + entity: light.kitchen_lights + show_info: false + ` }, ]; class DemoPicEntity extends PolymerElement { static get template() { return html` - -
-
+ `; } - 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-picture-entity-card'); - el.setConfig(config); - el.hass = hass; - root.appendChild(el); - }); + static get properties() { + return { + _configs: { + type: Object, + value: CONFIGS + } + }; } } diff --git a/gallery/src/demos/demo-hui-picture-glance-card.js b/gallery/src/demos/demo-hui-picture-glance-card.js index 62c415ad2f..2990334d6c 100644 --- a/gallery/src/demos/demo-hui-picture-glance-card.js +++ b/gallery/src/demos/demo-hui-picture-glance-card.js @@ -1,91 +1,92 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js'; -import '../../../src/panels/lovelace/cards/hui-picture-glance-card.js'; - -import HomeAssistant from '../data/hass.js'; -import demoStates from '../data/demo_dump.js'; +import '../components/demo-cards.js'; const CONFIGS = [ { - type: 'picture-glance', - image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495', - title: 'Picture glance', - entities: [ - 'switch.decorative_lights', - 'light.ceiling_lights', - 'binary_sensor.movement_backyard', - 'binary_sensor.basement_floor_wet', - ] + heading: 'Title, dialog, toggle', + config: ` +- type: picture-glance + image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg + title: Living room + entities: + - switch.decorative_lights + - light.ceiling_lights + - binary_sensor.movement_backyard + - binary_sensor.basement_floor_wet + ` }, { - type: 'picture-glance', - image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495', - entities: [ - 'switch.decorative_lights', - 'light.ceiling_lights', - 'binary_sensor.movement_backyard', - 'binary_sensor.basement_floor_wet', - ] + heading: 'Title, dialog, no toggle', + config: ` +- type: picture-glance + image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg + title: Living room + entities: + - binary_sensor.movement_backyard + - binary_sensor.basement_floor_wet + ` }, { - type: 'picture-glance', - image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495', - title: 'Picture glance', - entities: [ - 'switch.decorative_lights', - 'light.ceiling_lights', - ] + heading: 'Title, no dialog, toggle', + config: ` +- type: picture-glance + image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg + title: Living room + entities: + - switch.decorative_lights + - light.ceiling_lights + ` }, { - type: 'picture-glance', - image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495', - entities: [ - 'switch.decorative_lights', - 'light.ceiling_lights', - ] + heading: 'No title, dialog, toggle', + config: ` +- type: picture-glance + image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg + entities: + - switch.decorative_lights + - light.ceiling_lights + - binary_sensor.movement_backyard + - binary_sensor.basement_floor_wet + ` }, { - type: 'picture-glance', - image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495', - entities: [ - 'binary_sensor.movement_backyard', - 'binary_sensor.basement_floor_wet', - ] + heading: 'No title, dialog, no toggle', + config: ` +- type: picture-glance + image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg + entities: + - binary_sensor.movement_backyard + - binary_sensor.basement_floor_wet + ` + }, + { + heading: 'No title, no dialog, toggle', + config: ` +- type: picture-glance + image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg + entities: + - switch.decorative_lights + - light.ceiling_lights + ` }, ]; class DemoPicGlance extends PolymerElement { static get template() { return html` - -
-
+ `; } - 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-picture-glance-card'); - el.setConfig(config); - el.hass = hass; - root.appendChild(el); - }); + static get properties() { + return { + _configs: { + type: Object, + value: CONFIGS + } + }; } } diff --git a/gallery/src/demos/demo-hui-stack-card.js b/gallery/src/demos/demo-hui-stack-card.js new file mode 100644 index 0000000000..7762a3818c --- /dev/null +++ b/gallery/src/demos/demo-hui-stack-card.js @@ -0,0 +1,76 @@ +import { html } from '@polymer/polymer/lib/utils/html-tag.js'; +import { PolymerElement } from '@polymer/polymer/polymer-element.js'; + +import '../components/demo-cards.js'; + +const CONFIGS = [ + { + heading: 'Vertical Stack', + config: ` +- type: vertical-stack + cards: + - type: picture-entity + image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg + entity: light.kitchen_lights + - type: glance + entities: + - device_tracker.demo_anne_therese + - device_tracker.demo_home_boy + - device_tracker.demo_paulus + ` + }, + { + heading: 'Horizontal Stack', + config: ` +- type: horizontal-stack + cards: + - type: picture-entity + image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg + entity: light.kitchen_lights + - type: glance + entities: + - device_tracker.demo_anne_therese + - device_tracker.demo_home_boy + - device_tracker.demo_paulus + ` + }, + { + heading: 'Combination of both', + config: ` +- type: vertical-stack + cards: + - type: horizontal-stack + cards: + - type: picture-entity + image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg + entity: light.kitchen_lights + - type: glance + entities: + - device_tracker.demo_anne_therese + - device_tracker.demo_home_boy + - device_tracker.demo_paulus + - type: picture-entity + image: https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg + entity: light.bed_light + ` + }, +]; + +class DemoStack extends PolymerElement { + static get template() { + return html` + + `; + } + + static get properties() { + return { + _configs: { + type: Object, + value: CONFIGS + } + }; + } +} + +customElements.define('demo-hui-stack-card', DemoStack);