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

Migrate polymer paper tab in badge card editor (#21627)

Browse Source 
* paper tab badge

* Remove copy paste from card editor
This commit is contained in:
Simon Lamon 2024-08-29 09:55:51 +02:00 committed by GitHub
parent 2df097cd1b
commit 3ebb268b57
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts
View File

@ -1,5 +1,5 @@
import "@polymer/paper-tabs/paper-tab"; import "@material/mwc-tab-bar/mwc-tab-bar";
import "@polymer/paper-tabs/paper-tabs"; import "@material/mwc-tab/mwc-tab";
import { css, CSSResultGroup, html, nothing, TemplateResult } from "lit"; import { css, CSSResultGroup, html, nothing, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, state } from "lit/decorators";
import { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge"; import { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge";
@ -8,11 +8,11 @@ import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types";
import { HuiElementEditor } from "../hui-element-editor"; import { HuiElementEditor } from "../hui-element-editor";
import "./hui-badge-visibility-editor"; import "./hui-badge-visibility-editor";
type Tab = "config" | "visibility"; const tabs = ["config", "visibility"] as const;
@customElement("hui-badge-element-editor") @customElement("hui-badge-element-editor")
export class HuiBadgeElementEditor extends HuiElementEditor<LovelaceBadgeConfig> { export class HuiBadgeElementEditor extends HuiElementEditor<LovelaceBadgeConfig> {
@state() private _curTab: Tab = "config"; @state() private _currTab: (typeof tabs)[number] = tabs[0];
protected async getConfigElement(): Promise<LovelaceCardEditor | undefined> { protected async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
const elClass = await getBadgeElementClass(this.configElementType!); const elClass = await getBadgeElementClass(this.configElementType!);
@ -36,11 +36,12 @@ export class HuiBadgeElementEditor extends HuiElementEditor<LovelaceBadgeConfig>
return undefined; return undefined;
} }
private _handleTabSelected(ev: CustomEvent): void { private _handleTabChanged(ev: CustomEvent): void {
if (!ev.detail.value) { const newTab = tabs[ev.detail.index];
if (newTab === this._currTab) {
return; return;
} }
this._curTab = ev.detail.value.id; this._currTab = newTab;
} }
private _configChanged(ev: CustomEvent): void { private _configChanged(ev: CustomEvent): void {
@ -49,11 +50,9 @@ export class HuiBadgeElementEditor extends HuiElementEditor<LovelaceBadgeConfig>
} }
protected renderConfigElement(): TemplateResult { protected renderConfigElement(): TemplateResult {
const displayedTabs: Tab[] = ["config", "visibility"];
let content: TemplateResult<1> | typeof nothing = nothing; let content: TemplateResult<1> | typeof nothing = nothing;
switch (this._curTab) { switch (this._currTab) {
case "config": case "config":
content = html`${super.renderConfigElement()}`; content = html`${super.renderConfigElement()}`;
break; break;
@ -68,22 +67,21 @@ export class HuiBadgeElementEditor extends HuiElementEditor<LovelaceBadgeConfig>
break; break;
} }
return html` return html`
<paper-tabs <mwc-tab-bar
scrollable .activeIndex=${tabs.indexOf(this._currTab)}
hide-scroll-buttons @MDCTabBar:activated=${this._handleTabChanged}
.selected=${displayedTabs.indexOf(this._curTab)}
@selected-item-changed=${this._handleTabSelected}
> >
${displayedTabs.map( ${tabs.map(
(tab, index) => html` (tab) => html`
<paper-tab id=${tab} .dialogInitialFocus=${index === 0}> <mwc-tab
${this.hass.localize( .label=${this.hass.localize(
`ui.panel.lovelace.editor.edit_badge.tab_${tab}` `ui.panel.lovelace.editor.edit_badge.tab_${tab}`
)} )}
</paper-tab> >
</mwc-tab>
` `
)} )}
</paper-tabs> </mwc-tab-bar>
${content} ${content}
`; `;
} }
@ -92,9 +90,7 @@ export class HuiBadgeElementEditor extends HuiElementEditor<LovelaceBadgeConfig>
return [ return [
HuiElementEditor.styles, HuiElementEditor.styles,
css` css`
paper-tabs { mwc-tab-bar {
--paper-tabs-selection-bar-color: var(--primary-color);
color: var(--primary-text-color);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 16px; margin-bottom: 16px;
border-bottom: 1px solid var(--divider-color); border-bottom: 1px solid var(--divider-color);