mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 10:16:46 +00:00
Extract black/white row into component (#10212)
* Extract black/white row into component * Remove unused import
This commit is contained in:
parent
ad031d4bda
commit
2841369d3d
122
gallery/src/components/demo-black-white-row.ts
Normal file
122
gallery/src/components/demo-black-white-row.ts
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
import { html, LitElement, css, TemplateResult } from "lit";
|
||||||
|
import { customElement, property } from "lit/decorators";
|
||||||
|
import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
|
||||||
|
|
||||||
|
@customElement("demo-black-white-row")
|
||||||
|
class DemoBlackWhiteRow extends LitElement {
|
||||||
|
@property() title!: string;
|
||||||
|
|
||||||
|
@property() value!: any;
|
||||||
|
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<div class="row">
|
||||||
|
<div class="content light">
|
||||||
|
<ha-card .header=${this.title}>
|
||||||
|
<div class="card-content">
|
||||||
|
<slot name="light"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
<mwc-button>Submit</mwc-button>
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
|
</div>
|
||||||
|
<div class="content dark">
|
||||||
|
<ha-card .header=${this.title}>
|
||||||
|
<div class="card-content">
|
||||||
|
<slot name="dark"></slot>
|
||||||
|
</div>
|
||||||
|
<div class="card-actions">
|
||||||
|
<mwc-button>Submit</mwc-button>
|
||||||
|
</div>
|
||||||
|
</ha-card>
|
||||||
|
<pre>${JSON.stringify(this.value, undefined, 2)}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
firstUpdated(changedProps) {
|
||||||
|
super.firstUpdated(changedProps);
|
||||||
|
applyThemesOnElement(
|
||||||
|
this.shadowRoot!.querySelector(".dark"),
|
||||||
|
{
|
||||||
|
default_theme: "default",
|
||||||
|
default_dark_theme: "default",
|
||||||
|
themes: {},
|
||||||
|
darkMode: false,
|
||||||
|
},
|
||||||
|
"default",
|
||||||
|
{ dark: true }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 50px 0;
|
||||||
|
background-color: var(--primary-background-color);
|
||||||
|
}
|
||||||
|
.light {
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 50px;
|
||||||
|
padding-right: 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.light ha-card {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.dark {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
padding-left: 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
ha-card {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
width: 300px;
|
||||||
|
margin: 0 16px 0;
|
||||||
|
overflow: auto;
|
||||||
|
color: var(--primary-text-color);
|
||||||
|
}
|
||||||
|
.card-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 1500px) {
|
||||||
|
.light {
|
||||||
|
flex: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 1000px) {
|
||||||
|
.light,
|
||||||
|
.dark {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
.row,
|
||||||
|
.dark {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
ha-card {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
margin: 16px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"demo-black-white-row": DemoBlackWhiteRow;
|
||||||
|
}
|
||||||
|
}
|
@ -1,12 +1,11 @@
|
|||||||
/* eslint-disable lit/no-template-arrow */
|
/* eslint-disable lit/no-template-arrow */
|
||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
import { LitElement, TemplateResult, css, html } from "lit";
|
import { LitElement, TemplateResult, html } from "lit";
|
||||||
import { customElement } from "lit/decorators";
|
import { customElement } from "lit/decorators";
|
||||||
import { computeInitialHaFormData } from "../../../src/components/ha-form/compute-initial-ha-form-data";
|
import { computeInitialHaFormData } from "../../../src/components/ha-form/compute-initial-ha-form-data";
|
||||||
import "../../../src/components/ha-card";
|
|
||||||
import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
|
|
||||||
import type { HaFormSchema } from "../../../src/components/ha-form/types";
|
import type { HaFormSchema } from "../../../src/components/ha-form/types";
|
||||||
import "../../../src/components/ha-form/ha-form";
|
import "../../../src/components/ha-form/ha-form";
|
||||||
|
import "../components/demo-black-white-row";
|
||||||
|
|
||||||
const SCHEMAS: {
|
const SCHEMAS: {
|
||||||
title: string;
|
title: string;
|
||||||
@ -235,138 +234,30 @@ class DemoHaForm extends LitElement {
|
|||||||
return html`
|
return html`
|
||||||
${SCHEMAS.map((info, idx) => {
|
${SCHEMAS.map((info, idx) => {
|
||||||
const translations = info.translations || {};
|
const translations = info.translations || {};
|
||||||
const computeLabel = (schema) =>
|
|
||||||
translations[schema.name] || schema.name;
|
|
||||||
const computeError = (error) => translations[error] || error;
|
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="row">
|
<demo-black-white-row .title=${info.title} .value=${this.data[idx]}>
|
||||||
<div class="content light">
|
${["light", "dark"].map(
|
||||||
<ha-card .header=${info.title}>
|
(slot) => html`
|
||||||
<div class="card-content">
|
<ha-form
|
||||||
<ha-form
|
slot=${slot}
|
||||||
.data=${this.data[idx]}
|
.data=${this.data[idx]}
|
||||||
.schema=${info.schema}
|
.schema=${info.schema}
|
||||||
.error=${info.error}
|
.error=${info.error}
|
||||||
.computeError=${computeError}
|
.computeError=${(error) => translations[error] || error}
|
||||||
.computeLabel=${computeLabel}
|
.computeLabel=${(schema) =>
|
||||||
@value-changed=${(e) => {
|
translations[schema.name] || schema.name}
|
||||||
this.data[idx] = e.detail.value;
|
@value-changed=${(e) => {
|
||||||
this.requestUpdate();
|
this.data[idx] = e.detail.value;
|
||||||
}}
|
this.requestUpdate();
|
||||||
></ha-form>
|
}}
|
||||||
</div>
|
></ha-form>
|
||||||
<div class="card-actions">
|
`
|
||||||
<mwc-button>Submit</mwc-button>
|
)}
|
||||||
</div>
|
</demo-black-white-row>
|
||||||
</ha-card>
|
|
||||||
</div>
|
|
||||||
<div class="content dark">
|
|
||||||
<ha-card .header=${info.title}>
|
|
||||||
<div class="card-content">
|
|
||||||
<ha-form
|
|
||||||
.data=${this.data[idx]}
|
|
||||||
.schema=${info.schema}
|
|
||||||
.error=${info.error}
|
|
||||||
.computeError=${computeError}
|
|
||||||
.computeLabel=${computeLabel}
|
|
||||||
@value-changed=${(e) => {
|
|
||||||
this.data[idx] = e.detail.value;
|
|
||||||
this.requestUpdate();
|
|
||||||
}}
|
|
||||||
></ha-form>
|
|
||||||
</div>
|
|
||||||
<div class="card-actions">
|
|
||||||
<mwc-button>Submit</mwc-button>
|
|
||||||
</div>
|
|
||||||
</ha-card>
|
|
||||||
<pre>${JSON.stringify(this.data[idx], undefined, 2)}</pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
`;
|
||||||
})}
|
})}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated(changedProps) {
|
|
||||||
super.firstUpdated(changedProps);
|
|
||||||
this.shadowRoot!.querySelectorAll(".dark").forEach((el) => {
|
|
||||||
applyThemesOnElement(
|
|
||||||
el,
|
|
||||||
{
|
|
||||||
default_theme: "default",
|
|
||||||
default_dark_theme: "default",
|
|
||||||
themes: {},
|
|
||||||
darkMode: false,
|
|
||||||
},
|
|
||||||
"default",
|
|
||||||
{ dark: true }
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
static styles = css`
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
padding: 50px 0;
|
|
||||||
background-color: var(--primary-background-color);
|
|
||||||
}
|
|
||||||
.light {
|
|
||||||
flex: 1;
|
|
||||||
padding-left: 50px;
|
|
||||||
padding-right: 50px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.light ha-card {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
.dark {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
padding-left: 50px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
ha-card {
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
width: 300px;
|
|
||||||
margin: 0 16px 0;
|
|
||||||
overflow: auto;
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
}
|
|
||||||
.card-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 1500px) {
|
|
||||||
.light {
|
|
||||||
flex: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 1000px) {
|
|
||||||
.light,
|
|
||||||
.dark {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
.row,
|
|
||||||
.dark {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
ha-card {
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
margin: 16px auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user