edit view

home-assistant · Jul 14, 2024 · 5c8f9ab · 5c8f9ab
1 parent ced3a22
commit 5c8f9ab
Showing 1 changed file with 31 additions and 41 deletions.
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
@@ -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,
@@ -52,6 +50,15 @@ 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-badges",
+  "tab-visibility",
+] as const;
 
 @customElement("hui-dialog-edit-view")
 export class HuiDialogEditView extends LitElement {
@@ -63,16 +70,14 @@ 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;
 
   @state() private _yamlMode = false;
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
-  private _curTabIndex = 0;
-
   get _type(): string {
     if (!this._config) {
       return DEFAULT_VIEW_LAYOUT;
@@ -110,11 +115,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 });
   }
 
@@ -145,7 +150,7 @@ export class HuiDialogEditView extends LitElement {
         ></ha-yaml-editor>
       `;
     } else {
-      switch (this._curTab) {
+      switch (this._currTab) {
         case "tab-settings":
           content = html`
             <hui-view-editor
@@ -206,9 +211,6 @@ export class HuiDialogEditView extends LitElement {
             ></hui-view-visibility-editor>
           `;
           break;
-        case "tab-cards":
-          content = html` Cards `;
-          break;
       }
     }
 
@@ -291,33 +293,21 @@ export class HuiDialogEditView extends LitElement {
               `
             : nothing}
           ${!this._yamlMode
-            ? html`<paper-tabs
-                scrollable
-                hide-scroll-buttons
-                .selected=${this._curTabIndex}
-                @selected-item-changed=${this._handleTabSelected}
+            ? html`<mwc-tab-bar
+                .activeIndex=${TABS.indexOf(this._currTab)}
+                @MDCTabBar:activated=${this._handleTabChanged}
               >
-                <paper-tab id="tab-settings" dialogInitialFocus
-                  >${this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_view.tab_settings"
-                  )}</paper-tab
-                >
-                <paper-tab id="tab-background"
-                  >${this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_view.tab_background"
-                  )}</paper-tab
-                >
-                <paper-tab id="tab-badges"
-                  >${this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_view.tab_badges"
-                  )}</paper-tab
-                >
-                <paper-tab id="tab-visibility"
-                  >${this.hass!.localize(
-                    "ui.panel.lovelace.editor.edit_view.tab_visibility"
-                  )}</paper-tab
-                >
-              </paper-tabs>`
+                ${TABS.map(
+                  (tab) => html`
+                    <mwc-tab
+                      .label=${this.hass!.localize(
+                        `ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
+                      )}
+                    >
+                    </mwc-tab>
+                  `
+                )}
+              </mwc-tab-bar>`
             : nothing}
         </ha-dialog-header>
         ${content}
@@ -409,11 +399,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<void> {
@@ -553,8 +544,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;