diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index 7fcffd0f3a..06063284cc 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -1,5 +1,3 @@ -import "@material/mwc-tab"; -import "@material/mwc-tab-bar"; import { mdiEye, mdiGauge, mdiWaterPercent, mdiWeatherWindy } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -8,8 +6,11 @@ import memoizeOne from "memoize-one"; import { formatDateWeekdayShort } from "../../../common/datetime/format_date"; import { formatTime } from "../../../common/datetime/format_time"; import { formatNumber } from "../../../common/number/format_number"; +import "../../../components/ha-relative-time"; +import "../../../components/ha-state-icon"; import "../../../components/ha-svg-icon"; import "../../../components/ha-tooltip"; +import "../../../components/sl-tab-group"; import type { ForecastEvent, ModernForecastType, @@ -18,8 +19,8 @@ import type { import { getDefaultForecastType, getForecast, - getSupportedForecastTypes, getSecondaryWeatherAttribute, + getSupportedForecastTypes, getWeatherStateIcon, getWeatherUnit, getWind, @@ -27,8 +28,6 @@ import { weatherSVGStyles, } from "../../../data/weather"; import type { HomeAssistant } from "../../../types"; -import "../../../components/ha-relative-time"; -import "../../../components/ha-state-icon"; import { DragScrollController } from "../../../common/controllers/drag-scroll-controller"; @customElement("more-info-weather") @@ -299,21 +298,22 @@ class MoreInfoWeather extends LitElement { ${this.hass.localize("ui.card.weather.forecast")}: ${supportedForecasts.length > 1 - ? html` item === this._forecastType - )} - @MDCTabBar:activated=${this._handleForecastTypeChanged} + ? html` ${supportedForecasts.map( (forecastType) => - html` + ${this.hass!.localize( `ui.card.weather.${forecastType}` )} - >` + ` )} - ` + ` : nothing}
${forecast.map((item) => @@ -403,9 +403,7 @@ class MoreInfoWeather extends LitElement { } private _handleForecastTypeChanged(ev: CustomEvent): void { - this._forecastType = this._supportedForecasts(this.stateObj!)[ - ev.detail.index - ]; + this._forecastType = ev.detail.name; } static get styles(): CSSResultGroup { @@ -419,15 +417,20 @@ class MoreInfoWeather extends LitElement { margin-inline-end: initial; } - mwc-tab-bar { - margin-bottom: 4px; - } - .section { margin: 16px 0 8px 0; font-size: 1.2em; } + sl-tab { + flex: 1; + } + + sl-tab::part(base) { + width: 100%; + justify-content: center; + } + .flex { display: flex; height: 32px; diff --git a/src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts b/src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts index d130e37016..1a3c9bc84e 100644 --- a/src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts +++ b/src/panels/lovelace/editor/badge-editor/hui-badge-element-editor.ts @@ -1,8 +1,7 @@ -import "@material/mwc-tab-bar/mwc-tab-bar"; -import "@material/mwc-tab/mwc-tab"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, nothing } from "lit"; import { customElement, state } from "lit/decorators"; +import "../../../../components/sl-tab-group"; import type { LovelaceBadgeConfig } from "../../../../data/lovelace/config/badge"; import { getBadgeElementClass } from "../../create-element/create-badge-element"; import type { LovelaceCardEditor, LovelaceConfigForm } from "../../types"; @@ -38,7 +37,7 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor + ${tabs.map( (tab) => html` - + ${this.hass!.localize( `ui.panel.lovelace.editor.edit_badge.tab_${tab}` )} - > - + ` )} - + ${content} `; } @@ -91,10 +86,15 @@ export class HuiBadgeElementEditor extends HuiTypedElementEditor { this._params = params; @@ -67,7 +66,7 @@ export class HuiCreateDialogBadge public closeDialog(): boolean { this._params = undefined; - this._currTabIndex = 0; + this._currTab = "badge"; this._selectedEntities = []; fireEvent(this, "dialog-closed", { dialog: this.localName }); return true; @@ -92,7 +91,7 @@ export class HuiCreateDialogBadge @keydown=${this._ignoreKeydown} @closed=${this._cancel} .heading=${title} - class=${classMap({ table: this._currTabIndex === 1 })} + class=${classMap({ table: this._currTab === "entity" })} > - ${title} - - ${title} + + + ${this.hass!.localize( "ui.panel.lovelace.editor.badge_picker.by_badge" )} - dialogInitialFocus - > - + ${this.hass!.localize( "ui.panel.lovelace.editor.badge_picker.by_entity" - )} - > - + )} + ${cache( - this._currTabIndex === 0 + this._currTab === "badge" ? html` + ${displayedTabs.map( (tab) => html` - + ${this.hass.localize( `ui.panel.lovelace.editor.edit_card.tab_${tab}` )} - > - + ` )} - + ${content} `; } private _handleTabChanged(ev: CustomEvent): void { - const newTab = tabs[ev.detail.index]; + const newTab = ev.detail.name; if (newTab === this._currTab) { return; } @@ -120,10 +115,17 @@ export class HuiCardElementEditor extends HuiTypedElementEditor - ${title} - - ${title} + + + + ${this.hass!.localize( "ui.panel.lovelace.editor.cardpicker.by_card" )} - dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)} - > - + ${this.hass!.localize( "ui.panel.lovelace.editor.cardpicker.by_entity" - )} - > - + )} + ${cache( - this._currTabIndex === 0 + this._currTab === "card" ? html` - + + ${this.hass!.localize( "ui.panel.lovelace.editor.card.conditional.conditions" )} - > - + + ${this.hass!.localize( "ui.panel.lovelace.editor.card.conditional.card" )} - > - + + ${this._cardTab ? html`
@@ -159,8 +154,8 @@ export class HuiConditionalCardEditor `; } - private _selectTab(ev: MDCTabBarActivatedEvent): void { - this._cardTab = ev.detail.index === 1; + private _selectTab(ev: CustomEvent): void { + this._cardTab = ev.detail.name === "card"; } private _toggleMode(): void { @@ -235,8 +230,13 @@ export class HuiConditionalCardEditor return [ configElementStyle, css` - mwc-tab-bar { - border-bottom: 1px solid var(--divider-color); + sl-tab { + flex: 1; + } + + sl-tab::part(base) { + width: 100%; + justify-content: center; } ha-alert { display: block; 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 ecbd75f17d..06f2021406 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 @@ -14,7 +14,9 @@ import "../../../../components/ha-icon-button"; import "../../../../components/ha-list-item"; import "../../../../components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; +import "../../../../components/sl-tab-group"; import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section"; +import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; import type { HassDialog } from "../../../../dialogs/make-dialog-manager"; import { haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; @@ -25,9 +27,6 @@ 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"; -import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; const TABS = ["tab-settings", "tab-visibility"] as const; @@ -169,21 +168,21 @@ export class HuiDialogEditSection ${!this._yamlMode ? html` - + ${TABS.map( (tab) => html` - + ${this.hass!.localize( `ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}` )} - > - + ` )} - + ` : nothing} @@ -205,7 +204,7 @@ export class HuiDialogEditSection } private _handleTabChanged(ev: CustomEvent): void { - const newTab = TABS[ev.detail.index]; + const newTab = ev.detail.name; if (newTab === this._currTab) { return; } @@ -274,10 +273,12 @@ export class HuiDialogEditSection ha-dialog.yaml-mode { --dialog-content-padding: 0; } - mwc-tab-bar { - color: var(--primary-text-color); - text-transform: uppercase; - padding: 0 20px; + sl-tab { + flex: 1; + } + sl-tab::part(base) { + width: 100%; + justify-content: center; } @media all and (min-width: 600px) { ha-dialog { 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 601b8e5937..801691a552 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,6 +1,4 @@ import type { ActionDetail } from "@material/mwc-list"; -import "@material/mwc-tab-bar/mwc-tab-bar"; -import "@material/mwc-tab/mwc-tab"; import { mdiClose, mdiDotsVertical, @@ -55,6 +53,7 @@ import "./hui-view-background-editor"; import "./hui-view-editor"; import "./hui-view-visibility-editor"; import type { EditViewDialogParams } from "./show-edit-view-dialog"; +import "../../../../components/sl-tab-group"; const TABS = ["tab-settings", "tab-background", "tab-visibility"] as const; @@ -272,21 +271,21 @@ export class HuiDialogEditView extends LitElement { ` : nothing} ${!this._yamlMode - ? html` + ? html` ${TABS.map( (tab) => html` - + ${this.hass!.localize( `ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}` )} - > - + ` )} - ` + ` : nothing} ${content} @@ -515,7 +514,7 @@ export class HuiDialogEditView extends LitElement { } private _handleTabChanged(ev: CustomEvent): void { - const newTab = TABS[ev.detail.index]; + const newTab = ev.detail.name; if (newTab === this._currTab) { return; } @@ -644,10 +643,12 @@ export class HuiDialogEditView extends LitElement { font-size: inherit; font-weight: inherit; } - mwc-tab-bar { - color: var(--primary-text-color); - text-transform: uppercase; - padding: 0 20px; + sl-tab { + flex: 1; + } + sl-tab::part(base) { + width: 100%; + justify-content: center; } ha-button.warning { margin-right: auto;