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
This commit is contained in:
Simon Lamon 2024-07-31 10:44:52 +02:00 committed by GitHub
parent 7a6491a901
commit cd4af674a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 68 additions and 81 deletions

View File

@ -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<LovelaceCardConfig> {
@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<LovelaceCardEditor | undefined> {
const elClass = await getCardElementClass(this.configElementType!);
@ -43,20 +43,13 @@ export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
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<LovelaceCardConfig> {
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<LovelaceCardConfig> {
`;
}
return html`
<paper-tabs
scrollable
hide-scroll-buttons
.selected=${displayedTabs.indexOf(this._curTab)}
@selected-item-changed=${this._handleTabSelected}
<mwc-tab-bar
.activeIndex=${tabs.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged}
>
${displayedTabs.map(
(tab, index) => html`
<paper-tab id=${tab} .dialogInitialFocus=${index === 0}>
${this.hass.localize(
(tab) => html`
<mwc-tab
.label=${this.hass.localize(
`ui.panel.lovelace.editor.edit_card.tab_${tab}`
)}
</paper-tab>
>
</mwc-tab>
`
)}
</paper-tabs>
</mwc-tab-bar>
${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);

View File

@ -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
></ha-yaml-editor>
`;
} else {
switch (this._curTab) {
switch (this._currTab) {
case "tab-settings":
content = html`
<hui-section-settings-editor
@ -185,22 +185,21 @@ export class HuiDialogEditSection
</ha-button-menu>
${!this._yamlMode
? html`
<paper-tabs
scrollable
hide-scroll-buttons
.selected=${TABS.indexOf(this._curTab)}
@selected-item-changed=${this._handleTabSelected}
<mwc-tab-bar
.activeIndex=${TABS.indexOf(this._currTab)}
@MDCTabBar:activated=${this._handleTabChanged}
>
${TABS.map(
(tab, index) => html`
<paper-tab id=${tab} .dialogInitialFocus=${index === 0}>
${this.hass!.localize(
(tab) => html`
<mwc-tab
.label=${this.hass!.localize(
`ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
)}
</paper-tab>
>
</mwc-tab>
`
)}
</paper-tabs>
</mwc-tab-bar>
`
: nothing}
</ha-dialog-header>
@ -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<ActionDetail>) {
@ -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;

View File

@ -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 {
></ha-yaml-editor>
`;
} else {
switch (this._curTab) {
switch (this._currTab) {
case "tab-settings":
content = html`
<hui-view-editor
@ -167,9 +167,6 @@ export class HuiDialogEditView extends LitElement {
></hui-view-visibility-editor>
`;
break;
case "tab-cards":
content = html` Cards `;
break;
}
}
@ -252,28 +249,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-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}
@ -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<void> {
@ -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;