From cd4af674a33a062decae35dff1b96d3f26ad93f9 Mon Sep 17 00:00:00 2001 From: Simon Lamon <32477463+silamon@users.noreply.github.com> Date: Wed, 31 Jul 2024 10:44:52 +0200 Subject: [PATCH] Move some polymer paper-tabs to mwc-tabs (#21390) * dev-tools * entity card editor * edit section dialog * edit view * Set the page from the router back in dev tools * Remove changes to developer tools * Prettier --- .../card-editor/hui-card-element-editor.ts | 48 +++++++------- .../section-editor/hui-dialog-edit-section.ts | 39 ++++++------ .../view-editor/hui-dialog-edit-view.ts | 62 ++++++++----------- 3 files changed, 68 insertions(+), 81 deletions(-) diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts index aa4806689a..d7a264aaea 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts @@ -9,18 +9,18 @@ import { HuiElementEditor } from "../hui-element-editor"; import "./hui-card-layout-editor"; import "./hui-card-visibility-editor"; -type Tab = "config" | "visibility" | "layout"; +const tabs = ["config", "visibility", "layout"] as const; @customElement("hui-card-element-editor") export class HuiCardElementEditor extends HuiElementEditor { - @state() private _curTab: Tab = "config"; - @property({ type: Boolean, attribute: "show-visibility-tab" }) public showVisibilityTab = false; @property({ type: Boolean, attribute: "show-layout-tab" }) public showLayoutTab = false; + @state() private _currTab: (typeof tabs)[number] = tabs[0]; + protected async getConfigElement(): Promise { const elClass = await getCardElementClass(this.configElementType!); @@ -43,20 +43,13 @@ export class HuiCardElementEditor extends HuiElementEditor { return undefined; } - private _handleTabSelected(ev: CustomEvent): void { - if (!ev.detail.value) { - return; - } - this._curTab = ev.detail.value.id; - } - private _configChanged(ev: CustomEvent): void { ev.stopPropagation(); this.value = ev.detail.value; } protected renderConfigElement(): TemplateResult { - const displayedTabs: Tab[] = ["config"]; + const displayedTabs: string[] = ["config"]; if (this.showVisibilityTab) displayedTabs.push("visibility"); if (this.showLayoutTab) displayedTabs.push("layout"); @@ -64,7 +57,7 @@ export class HuiCardElementEditor extends HuiElementEditor { let content: TemplateResult<1> | typeof nothing = nothing; - switch (this._curTab) { + switch (this._currTab) { case "config": content = html`${super.renderConfigElement()}`; break; @@ -88,33 +81,38 @@ export class HuiCardElementEditor extends HuiElementEditor { `; } return html` - ${displayedTabs.map( - (tab, index) => html` - - ${this.hass.localize( + (tab) => html` + + > + ` )} - + ${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` - paper-tabs { - --paper-tabs-selection-bar-color: var(--primary-color); - color: var(--primary-text-color); + mwc-tab-bar { text-transform: uppercase; margin-bottom: 16px; border-bottom: 1px solid var(--divider-color); diff --git a/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts b/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts index de52e96888..91ab6c3f2f 100644 --- a/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts +++ b/src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts @@ -1,7 +1,5 @@ import { ActionDetail } from "@material/mwc-list"; import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js"; -import "@polymer/paper-tabs/paper-tab"; -import "@polymer/paper-tabs/paper-tabs"; import { CSSResultGroup, LitElement, @@ -35,6 +33,8 @@ import { import "./hui-section-settings-editor"; import "./hui-section-visibility-editor"; import type { EditSectionDialogParams } from "./show-edit-section-dialog"; +import "@material/mwc-tab-bar/mwc-tab-bar"; +import "@material/mwc-tab/mwc-tab"; const TABS = ["tab-settings", "tab-visibility"] as const; @@ -51,7 +51,7 @@ export class HuiDialogEditSection @state() private _yamlMode = false; - @state() private _curTab: (typeof TABS)[number] = TABS[0]; + @state() private _currTab: (typeof TABS)[number] = TABS[0]; @query("ha-yaml-editor") private _editor?: HaYamlEditor; @@ -77,7 +77,7 @@ export class HuiDialogEditSection this._params = undefined; this._yamlMode = false; this._config = undefined; - this._curTab = TABS[0]; + this._currTab = TABS[0]; fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -101,7 +101,7 @@ export class HuiDialogEditSection > `; } else { - switch (this._curTab) { + switch (this._currTab) { case "tab-settings": content = html` ${!this._yamlMode ? html` - ${TABS.map( - (tab, index) => html` - - ${this.hass!.localize( + (tab) => html` + + > + ` )} - + ` : nothing} @@ -221,11 +220,12 @@ export class HuiDialogEditSection this._config = ev.detail.value; } - private _handleTabSelected(ev: CustomEvent): void { - if (!ev.detail.value) { + private _handleTabChanged(ev: CustomEvent): void { + const newTab = TABS[ev.detail.index]; + if (newTab === this._currTab) { return; } - this._curTab = ev.detail.value.id; + this._currTab = newTab; } private async _handleAction(ev: CustomEvent) { @@ -293,8 +293,7 @@ export class HuiDialogEditSection ha-dialog.yaml-mode { --dialog-content-padding: 0; } - paper-tabs { - --paper-tabs-selection-bar-color: var(--primary-color); + mwc-tab-bar { color: var(--primary-text-color); text-transform: uppercase; padding: 0 20px; diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts index 3454ea3a15..a14e5b35a6 100644 --- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts @@ -1,8 +1,6 @@ import "@material/mwc-button"; import { ActionDetail } from "@material/mwc-list"; import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js"; -import "@polymer/paper-tabs/paper-tab"; -import "@polymer/paper-tabs/paper-tabs"; import { CSSResultGroup, LitElement, @@ -45,6 +43,10 @@ import "./hui-view-editor"; import "./hui-view-background-editor"; import "./hui-view-visibility-editor"; import { EditViewDialogParams } from "./show-edit-view-dialog"; +import "@material/mwc-tab-bar/mwc-tab-bar"; +import "@material/mwc-tab/mwc-tab"; + +const TABS = ["tab-settings", "tab-background", "tab-visibility"] as const; @customElement("hui-dialog-edit-view") export class HuiDialogEditView extends LitElement { @@ -56,7 +58,7 @@ export class HuiDialogEditView extends LitElement { @state() private _saving = false; - @state() private _curTab?: string; + @state() private _currTab: (typeof TABS)[number] = TABS[0]; @state() private _dirty = false; @@ -64,8 +66,6 @@ export class HuiDialogEditView extends LitElement { @query("ha-yaml-editor") private _editor?: HaYamlEditor; - private _curTabIndex = 0; - get _type(): string { if (!this._config) { return DEFAULT_VIEW_LAYOUT; @@ -103,11 +103,11 @@ export class HuiDialogEditView extends LitElement { } public closeDialog(): void { - this._curTabIndex = 0; this._params = undefined; this._config = {}; this._yamlMode = false; this._dirty = false; + this._currTab = TABS[0]; fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -138,7 +138,7 @@ export class HuiDialogEditView extends LitElement { > `; } else { - switch (this._curTab) { + switch (this._currTab) { case "tab-settings": content = html` `; break; - case "tab-cards": - content = html` Cards `; - break; } } @@ -252,28 +249,21 @@ export class HuiDialogEditView extends LitElement { ` : nothing} ${!this._yamlMode - ? html` - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_view.tab_settings" - )} - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_view.tab_background" - )} - ${this.hass!.localize( - "ui.panel.lovelace.editor.edit_view.tab_visibility" - )} - ` + ${TABS.map( + (tab) => html` + + + ` + )} + ` : nothing} ${content} @@ -365,11 +355,12 @@ export class HuiDialogEditView extends LitElement { this._delete(); } - private _handleTabSelected(ev: CustomEvent): void { - if (!ev.detail.value) { + private _handleTabChanged(ev: CustomEvent): void { + const newTab = TABS[ev.detail.index]; + if (newTab === this._currTab) { return; } - this._curTab = ev.detail.value.id; + this._currTab = newTab; } private async _save(): Promise { @@ -494,8 +485,7 @@ export class HuiDialogEditView extends LitElement { font-size: inherit; font-weight: inherit; } - paper-tabs { - --paper-tabs-selection-bar-color: var(--primary-color); + mwc-tab-bar { color: var(--primary-text-color); text-transform: uppercase; padding: 0 20px;