fix for tabs in editor dialog not showing in HA 2023.9

nielsfaber · Sep 17, 2023 · 90fc9b1 · 90fc9b1
1 parent 6619eba
commit 90fc9b1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/src/editor/scheduler-editor.ts b/src/editor/scheduler-editor.ts
@@ -83,7 +83,7 @@ export class SchedulerEditorDialog extends LitElement {
     };
 
     if (!this._params) return html``;
-    customElements.get('ha-dialog-header');
+
     return html`
       <ha-dialog open @closed=${this.closeDialog} .heading=${true} hideActions scrimClickAction="">
         <ha-dialog-header slot="heading">
@@ -101,13 +101,13 @@ export class SchedulerEditorDialog extends LitElement {
               : localize('ui.panel.common.new_schedule', getLocale(this.hass))}
           </span>
         </ha-dialog-header>
-        <mwc-tab-bar .activeIndex=${this._tabs.indexOf(this._currTab)} @MDCTabBar:activated=${this._handleTabChanged}>
+        <paper-tabs .selected=${this._tabs.indexOf(this._currTab)} @iron-activate=${this._handleTabChanged}>
           ${this._tabs.map(
             tab => html`
-              <mwc-tab .label=${tabLabel(tab)} ?disabled=${tab != ETabOptions.Entity && !this.schedule}></mwc-tab>
+              <paper-tab ?disabled=${tab != ETabOptions.Entity && !this.schedule}>${tabLabel(tab)}</paper-tab>
             `
           )}
-        </mwc-tab-bar>
+        </paper-tabs>
         ${this._currTab == ETabOptions.Entity
           ? html`
               <scheduler-editor-entity
@@ -175,7 +175,7 @@ export class SchedulerEditorDialog extends LitElement {
 
   private _handleTabChanged(ev: CustomEvent): void {
     const oldTab = this._currTab;
-    const newTab = this._tabs[ev.detail.index] as ETabOptions;
+    const newTab = this._tabs[ev.detail.selected] as ETabOptions;
     if (newTab != ETabOptions.Time && !this.schedule) {
       ev.preventDefault();
       (ev.target as any).activeIndex = 0;
@@ -304,6 +304,16 @@ export class SchedulerEditorDialog extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       ${dialogStyle}
+
+      paper-tabs {
+        --paper-tabs-selection-bar-color: var(--primary-color);
+        --paper-tab-ink: var(--primary-color);
+        text-transform: uppercase;
+        font-size: 0.875rem;
+      }
+      paper-tab.iron-selected {
+        color: var(--primary-color);
+      }
     `;
   }
 }
diff --git a/src/scheduler-card-editor.ts b/src/scheduler-card-editor.ts
@@ -54,10 +54,10 @@ export class SchedulerCardEditor extends LitElement implements LovelaceCardEdito
     }
 
     return html`
-      <mwc-tab-bar .activeIndex=${this._cardTab ? 1 : 0} @MDCTabBar:activated=${this._selectTab}>
-        <mwc-tab .label=${localize('ui.panel.card_editor.tabs.entities', getLocale(this.hass))}></mwc-tab>
-        <mwc-tab .label=${localize('ui.panel.card_editor.tabs.other', getLocale(this.hass))}></mwc-tab>
-      </mwc-tab-bar>
+      <paper-tabs .selected=${this._cardTab ? 1 : 0} @iron-activate=${this._selectTab}>
+        <paper-tab>${localize('ui.panel.card_editor.tabs.entities', getLocale(this.hass))}</paper-tab>
+        <paper-tab>${localize('ui.panel.card_editor.tabs.other', getLocale(this.hass))}</paper-tab>
+      </paper-tabs>
 
       <div class="card-config">
         ${!this._cardTab
@@ -319,7 +319,7 @@ export class SchedulerCardEditor extends LitElement implements LovelaceCardEdito
   }
 
   private _selectTab(ev: CustomEvent): void {
-    this._cardTab = ev.detail.index === 1;
+    this._cardTab = ev.detail.selected === 1;
   }
 
   private _updateConfig(changes: Partial<CardConfig>) {
@@ -520,6 +520,16 @@ export class SchedulerCardEditor extends LitElement implements LovelaceCardEdito
   static get styles(): CSSResultGroup {
     return css`
       ${commonStyle}
+
+      paper-tabs {
+        --paper-tabs-selection-bar-color: var(--primary-color);
+        --paper-tab-ink: var(--primary-color);
+        text-transform: uppercase;
+        font-size: 0.875rem;
+      }
+      paper-tab.iron-selected {
+        color: var(--primary-color);
+      }
       div.row {
         display: flex;
         align-items: center;