jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-26 02:36:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Aligned gallery more-info with hui-cards (#7931)

Browse Source
This commit is contained in:
Philip Allgaier 2021-01-04 18:05:30 +01:00 committed by GitHub
parent 0208b50ac7
commit a0de209a55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
gallery/src/components/demo-more-info.js
View File

@ -9,30 +9,29 @@ class DemoMoreInfo extends PolymerElement {
static get template() { static get template() {
return html` return html`
<style> <style>
:host { .root {
display: flex; display: flex;
align-items: start;
} }
#card {
max-width: 400px;
width: 100vw;
}
ha-card { ha-card {
width: 333px; width: 352px;
padding: 20px 24px; padding: 20px 24px;
} }
state-card-content { state-card-content {
display: block; display: block;
margin-bottom: 16px; margin-bottom: 16px;
} }
pre { pre {
width: 400px; width: 400px;
margin: 0 16px; margin: 0 16px;
overflow: auto; overflow: auto;
color: var(--primary-text-color); color: var(--primary-text-color);
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
:host { .root {
flex-direction: column; flex-direction: column;
} }
pre { pre {
@ -40,21 +39,25 @@ class DemoMoreInfo extends PolymerElement {
} }
} }
</style> </style>
<ha-card> <div class="root">
<state-card-content <div id="card">
state-obj="[[_stateObj]]" <ha-card>
hass="[[hass]]" <state-card-content
in-dialog state-obj="[[_stateObj]]"
></state-card-content> hass="[[hass]]"
in-dialog
></state-card-content>
<more-info-content <more-info-content
hass="[[hass]]" hass="[[hass]]"
state-obj="[[_stateObj]]" state-obj="[[_stateObj]]"
></more-info-content> ></more-info-content>
</ha-card> </ha-card>
<template is="dom-if" if="[[showConfig]]"> </div>
<pre>[[_jsonEntity(_stateObj)]]</pre> <template is="dom-if" if="[[showConfig]]">
</template> <pre>[[_jsonEntity(_stateObj)]]</pre>
</template>
</div>
`; `;
} }

45
gallery/src/components/demo-more-infos.js
View File

@ -3,12 +3,18 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */ /* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element"; import { PolymerElement } from "@polymer/polymer/polymer-element";
import "../../../src/components/ha-switch"; import "../../../src/components/ha-switch";
import "../../../src/components/ha-formfield";
import "./demo-more-info"; import "./demo-more-info";
import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
class DemoMoreInfos extends PolymerElement { class DemoMoreInfos extends PolymerElement {
static get template() { static get template() {
return html` return html`
<style> <style>
#container {
min-height: calc(100vh - 128px);
background: var(--primary-background-color);
}
.cards { .cards {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -23,20 +29,31 @@ class DemoMoreInfos extends PolymerElement {
.filters { .filters {
margin-left: 60px; margin-left: 60px;
} }
ha-formfield {
margin-right: 16px;
}
</style> </style>
<app-toolbar> <app-toolbar>
<div class="filters"> <div class="filters">
<ha-switch checked="{{_showConfig}}">Show entity</ha-switch> <ha-formfield label="Show entities">
<ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
</ha-switch>
</ha-formfield>
<ha-formfield label="Dark theme">
<ha-switch on-change="_darkThemeToggled"> </ha-switch>
</ha-formfield>
</div> </div>
</app-toolbar> </app-toolbar>
<div class="cards"> <div id="container">
<template is="dom-repeat" items="[[entities]]"> <div class="cards">
<demo-more-info <template is="dom-repeat" items="[[entities]]">
entity-id="[[item]]" <demo-more-info
show-config="[[_showConfig]]" entity-id="[[item]]"
hass="[[hass]]" show-config="[[_showConfig]]"
></demo-more-info> hass="[[hass]]"
</template> ></demo-more-info>
</template>
</div>
</div> </div>
`; `;
} }
@ -51,6 +68,16 @@ class DemoMoreInfos extends PolymerElement {
}, },
}; };
} }
_showConfigToggled(ev) {
this._showConfig = ev.target.checked;
}
_darkThemeToggled(ev) {
applyThemesOnElement(this.$.container, { themes: {} }, "default", {
dark: ev.target.checked,
});
}
} }
customElements.define("demo-more-infos", DemoMoreInfos); customElements.define("demo-more-infos", DemoMoreInfos);