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

WIP: continue migration

Browse Source
This commit is contained in:
Paul Bottein 2024-08-30 16:36:11 +02:00
parent 36540aa8fb
commit b87f44ff74
No known key found for this signature in database
2 changed files with 17 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/panels/lovelace/editor/card-editor/hui-card-editor.ts
View File

@ -9,6 +9,8 @@ import "./hui-card-visibility-editor";
import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import type { HuiCardElementEditor } from "./hui-card-element-editor";
import { fireEvent } from "../../../../common/dom/fire_event";
import { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
import { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
const TABS = ["config", "visibility", "layout"] as const;
@ -20,23 +22,22 @@ class HuiCardEditor extends LitElement {
@property({ attribute: false }) public config!: LovelaceCardConfig;
@property({ type: Boolean, attribute: "show-visibility-tab" })
public showVisibilityTab = false;
@property({ type: Boolean, attribute: "show-layout-tab" })
public showLayoutTab = false;
@property({ attribute: false }) public containerConfig!:
| LovelaceViewConfig
| LovelaceSectionConfig;
@query("hui-card-element-editor")
public elementEditor?: HuiCardElementEditor;
@state() private _selectedTab: (typeof TABS)[number] = TABS[0];
private _tabs = memoizeOne((showLayoutTab: boolean, cardType: string) =>
TABS.filter((tab) => {
if (tab === "visibility") return cardType !== "conditional";
if (tab === "layout") return showLayoutTab;
return true;
})
private _tabs = memoizeOne(
(containerType: string | undefined, cardType: string) =>
TABS.filter((tab) => {
if (tab === "visibility") return cardType !== "conditional";
if (tab === "layout") return containerType === "grid";
return true;
})
);
private renderContent() {
@ -78,7 +79,8 @@ class HuiCardEditor extends LitElement {
protected render() {
const cardType = this.config.type;
const tabs = this._tabs(this.showLayoutTab, cardType);
const containerType = this.containerConfig.type;
const tabs = this._tabs(containerType, cardType);
if (tabs.length <= 1) {
return this.renderContent();
@ -105,7 +107,8 @@ class HuiCardEditor extends LitElement {
private _handleTabChanged(ev: CustomEvent): void {
const cardType = this.config.type;
const tabs = this._tabs(this.showLayoutTab, cardType);
const containerType = this.containerConfig.type;
const tabs = this._tabs(containerType, cardType);
const newTab = tabs[ev.detail.index];
if (newTab === this._selectedTab) {
return;

104
src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
View File

@ -1,26 +1,11 @@
import "@material/mwc-tab-bar/mwc-tab-bar";
import "@material/mwc-tab/mwc-tab";
import { CSSResultGroup, TemplateResult, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { customElement } from "lit/decorators";
import { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
import { getCardElementClass } from "../../create-element/create-card-element";
import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
import { HuiElementEditor } from "../hui-element-editor";
import "./hui-card-layout-editor";
import "./hui-card-visibility-editor";
import { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
const tabs = ["config", "visibility", "layout"] as const;
@customElement("hui-card-element-editor")
export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
@property({ type: Boolean, attribute: "show-visibility-tab" })
public showVisibilityTab = false;
@property({ attribute: false }) public sectionConfig?: LovelaceSectionConfig;
@state() private _currTab: (typeof tabs)[number] = tabs[0];
protected async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
const elClass = await getCardElementClass(this.configElementType!);
@ -42,93 +27,6 @@ export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
return undefined;
}
private _configChanged(ev: CustomEvent): void {
ev.stopPropagation();
this.value = ev.detail.value;
}
get _showLayoutTab(): boolean {
return (
!!this.sectionConfig &&
(this.sectionConfig.type === undefined ||
this.sectionConfig.type === "grid")
);
}
protected renderConfigElement(): TemplateResult {
const displayedTabs: string[] = ["config"];
if (this.showVisibilityTab) displayedTabs.push("visibility");
if (this._showLayoutTab) displayedTabs.push("layout");
if (displayedTabs.length === 1) return super.renderConfigElement();
let content: TemplateResult<1> | typeof nothing = nothing;
switch (this._currTab) {
case "config":
content = html`${super.renderConfigElement()}`;
break;
case "visibility":
content = html`
<hui-card-visibility-editor
.hass=${this.hass}
.config=${this.value}
@value-changed=${this._configChanged}
></hui-card-visibility-editor>
`;
break;
case "layout":
content = html`
<hui-card-layout-editor
.hass=${this.hass}
.config=${this.value}
.sectionConfig=${this.sectionConfig!}
@value-changed=${this._configChanged}
>
</hui-card-layout-editor>
`;
}
return html`
<mwc-tab-bar
.activeIndex=${tabs.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged}
>
${displayedTabs.map(
(tab) => html`
<mwc-tab
.label=${this.hass.localize(
`ui.panel.lovelace.editor.edit_card.tab_${tab}`
)}
>
</mwc-tab>
`
)}
</mwc-tab-bar>
${content}
`;
}
private _handleTabChanged(ev: CustomEvent): void {
const newTab = tabs[ev.detail.index];
if (newTab === this._currTab) {
return;
}
this._currTab = newTab;
}
static get styles(): CSSResultGroup {
return [
HuiElementEditor.styles,
css`
mwc-tab-bar {
text-transform: uppercase;
margin-bottom: 16px;
border-bottom: 1px solid var(--divider-color);
}
`,
];
}
}
declare global {