mirror of
https://github.com/home-assistant/frontend
synced 2024-10-05 22:05:30 +02:00
Extract black/white row into component (#10212)
* Extract black/white row into component * Remove unused import
This commit is contained in:
Paulus Schoutsen
GitHub
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 */
|
||||
import "@material/mwc-button";
|
||||
import { LitElement, TemplateResult, css, html } from "lit";
|
||||
import { LitElement, TemplateResult, html } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
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 "../../../src/components/ha-form/ha-form";
|
||||
import "../components/demo-black-white-row";
|
||||
|
||||
const SCHEMAS: {
|
||||
title: string;
|
||||
@ -235,138 +234,30 @@ class DemoHaForm extends LitElement {
|
||||
return html`
|
||||
${SCHEMAS.map((info, idx) => {
|
||||
const translations = info.translations || {};
|
||||
const computeLabel = (schema) =>
|
||||
translations[schema.name] || schema.name;
|
||||
const computeError = (error) => translations[error] || error;
|
||||
|
||||
return html`
|
||||
<div class="row">
|
||||
<div class="content light">
|
||||
<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>
|
||||
</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>
|
||||
<demo-black-white-row .title=${info.title} .value=${this.data[idx]}>
|
||||
${["light", "dark"].map(
|
||||
(slot) => html`
|
||||
<ha-form
|
||||
slot=${slot}
|
||||
.data=${this.data[idx]}
|
||||
.schema=${info.schema}
|
||||
.error=${info.error}
|
||||
.computeError=${(error) => translations[error] || error}
|
||||
.computeLabel=${(schema) =>
|
||||
translations[schema.name] || schema.name}
|
||||
@value-changed=${(e) => {
|
||||
this.data[idx] = e.detail.value;
|
||||
this.requestUpdate();
|
||||
}}
|
||||
></ha-form>
|
||||
`
|
||||
)}
|
||||
</demo-black-white-row>
|
||||
`;
|
||||
})}
|
||||
`;
|
||||
}
|
||||
|
||||
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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user