jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 06:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move some polymer paper-tabs to mwc-tabs (#21390)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
View File

@ -9,18 +9,18 @@ import { HuiElementEditor } from "../hui-element-editor";
import "./hui-card-layout-editor"; import "./hui-card-layout-editor";
import "./hui-card-visibility-editor"; import "./hui-card-visibility-editor";
type Tab = "config" | "visibility" | "layout"; const tabs = ["config", "visibility", "layout"] as const;
@customElement("hui-card-element-editor") @customElement("hui-card-element-editor")
export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> { export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
@state() private _curTab: Tab = "config";
@property({ type: Boolean, attribute: "show-visibility-tab" }) @property({ type: Boolean, attribute: "show-visibility-tab" })
public showVisibilityTab = false; public showVisibilityTab = false;
@property({ type: Boolean, attribute: "show-layout-tab" }) @property({ type: Boolean, attribute: "show-layout-tab" })
public showLayoutTab = false; public showLayoutTab = false;
@state() private _currTab: (typeof tabs)[number] = tabs[0];
protected async getConfigElement(): Promise<LovelaceCardEditor | undefined> { protected async getConfigElement(): Promise<LovelaceCardEditor | undefined> {
const elClass = await getCardElementClass(this.configElementType!); const elClass = await getCardElementClass(this.configElementType!);
@ -43,20 +43,13 @@ export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
return undefined; return undefined;
} }
private _handleTabSelected(ev: CustomEvent): void {
if (!ev.detail.value) {
return;
}
this._curTab = ev.detail.value.id;
}
private _configChanged(ev: CustomEvent): void { private _configChanged(ev: CustomEvent): void {
ev.stopPropagation(); ev.stopPropagation();
this.value = ev.detail.value; this.value = ev.detail.value;
} }
protected renderConfigElement(): TemplateResult { protected renderConfigElement(): TemplateResult {
const displayedTabs: Tab[] = ["config"]; const displayedTabs: string[] = ["config"];
if (this.showVisibilityTab) displayedTabs.push("visibility"); if (this.showVisibilityTab) displayedTabs.push("visibility");
if (this.showLayoutTab) displayedTabs.push("layout"); if (this.showLayoutTab) displayedTabs.push("layout");
@ -64,7 +57,7 @@ export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
let content: TemplateResult<1> | typeof nothing = nothing; let content: TemplateResult<1> | typeof nothing = nothing;
switch (this._curTab) { switch (this._currTab) {
case "config": case "config":
content = html`${super.renderConfigElement()}`; content = html`${super.renderConfigElement()}`;
break; break;
@ -88,33 +81,38 @@ export class HuiCardElementEditor extends HuiElementEditor<LovelaceCardConfig> {
`; `;
} }
return html` return html`
<paper-tabs <mwc-tab-bar
scrollable .activeIndex=${tabs.indexOf(this._currTab)}
hide-scroll-buttons @MDCTabBar:activated=${this._handleTabChanged}
.selected=${displayedTabs.indexOf(this._curTab)}
@selected-item-changed=${this._handleTabSelected}
> >
${displayedTabs.map( ${displayedTabs.map(
(tab, index) => html` (tab) => html`
<paper-tab id=${tab} .dialogInitialFocus=${index === 0}> <mwc-tab
${this.hass.localize( .label=${this.hass.localize(
`ui.panel.lovelace.editor.edit_card.tab_${tab}` `ui.panel.lovelace.editor.edit_card.tab_${tab}`
)} )}
</paper-tab> >
</mwc-tab>
` `
)} )}
</paper-tabs> </mwc-tab-bar>
${content} ${content}
`; `;
} }
private _handleTabChanged(ev: CustomEvent): void {
const newTab = tabs[ev.detail.index];
if (newTab === this._currTab) {
return;
}
this._currTab = newTab;
}
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return [ return [
HuiElementEditor.styles, HuiElementEditor.styles,
css` css`
paper-tabs { mwc-tab-bar {
--paper-tabs-selection-bar-color: var(--primary-color);
color: var(--primary-text-color);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 16px; margin-bottom: 16px;
border-bottom: 1px solid var(--divider-color); border-bottom: 1px solid var(--divider-color);

39
src/panels/lovelace/editor/section-editor/hui-dialog-edit-section.ts
View File

@ -1,7 +1,5 @@
import { ActionDetail } from "@material/mwc-list"; import { ActionDetail } from "@material/mwc-list";
import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js"; import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js";
import "@polymer/paper-tabs/paper-tab";
import "@polymer/paper-tabs/paper-tabs";
import { import {
CSSResultGroup, CSSResultGroup,
LitElement, LitElement,
@ -35,6 +33,8 @@ import {
import "./hui-section-settings-editor"; import "./hui-section-settings-editor";
import "./hui-section-visibility-editor"; import "./hui-section-visibility-editor";
import type { EditSectionDialogParams } from "./show-edit-section-dialog"; 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; const TABS = ["tab-settings", "tab-visibility"] as const;
@ -51,7 +51,7 @@ export class HuiDialogEditSection
@state() private _yamlMode = false; @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; @query("ha-yaml-editor") private _editor?: HaYamlEditor;
@ -77,7 +77,7 @@ export class HuiDialogEditSection
this._params = undefined; this._params = undefined;
this._yamlMode = false; this._yamlMode = false;
this._config = undefined; this._config = undefined;
this._curTab = TABS[0]; this._currTab = TABS[0];
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
@ -101,7 +101,7 @@ export class HuiDialogEditSection
></ha-yaml-editor> ></ha-yaml-editor>
`; `;
} else { } else {
switch (this._curTab) { switch (this._currTab) {
case "tab-settings": case "tab-settings":
content = html` content = html`
<hui-section-settings-editor <hui-section-settings-editor
@ -185,22 +185,21 @@ export class HuiDialogEditSection
</ha-button-menu> </ha-button-menu>
${!this._yamlMode ${!this._yamlMode
? html` ? html`
<paper-tabs <mwc-tab-bar
scrollable .activeIndex=${TABS.indexOf(this._currTab)}
hide-scroll-buttons @MDCTabBar:activated=${this._handleTabChanged}
.selected=${TABS.indexOf(this._curTab)}
@selected-item-changed=${this._handleTabSelected}
> >
${TABS.map( ${TABS.map(
(tab, index) => html` (tab) => html`
<paper-tab id=${tab} .dialogInitialFocus=${index === 0}> <mwc-tab
${this.hass!.localize( .label=${this.hass!.localize(
`ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}` `ui.panel.lovelace.editor.edit_section.${tab.replace("-", "_")}`
)} )}
</paper-tab> >
</mwc-tab>
` `
)} )}
</paper-tabs> </mwc-tab-bar>
` `
: nothing} : nothing}
</ha-dialog-header> </ha-dialog-header>
@ -221,11 +220,12 @@ export class HuiDialogEditSection
this._config = ev.detail.value; this._config = ev.detail.value;
} }
private _handleTabSelected(ev: CustomEvent): void { private _handleTabChanged(ev: CustomEvent): void {
if (!ev.detail.value) { const newTab = TABS[ev.detail.index];
if (newTab === this._currTab) {
return; return;
} }
this._curTab = ev.detail.value.id; this._currTab = newTab;
} }
private async _handleAction(ev: CustomEvent<ActionDetail>) { private async _handleAction(ev: CustomEvent<ActionDetail>) {
@ -293,8 +293,7 @@ export class HuiDialogEditSection
ha-dialog.yaml-mode { ha-dialog.yaml-mode {
--dialog-content-padding: 0; --dialog-content-padding: 0;
} }
paper-tabs { mwc-tab-bar {
--paper-tabs-selection-bar-color: var(--primary-color);
color: var(--primary-text-color); color: var(--primary-text-color);
text-transform: uppercase; text-transform: uppercase;
padding: 0 20px; padding: 0 20px;

60
src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
View File

@ -1,8 +1,6 @@
import "@material/mwc-button"; import "@material/mwc-button";
import { ActionDetail } from "@material/mwc-list"; import { ActionDetail } from "@material/mwc-list";
import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js"; import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js";
import "@polymer/paper-tabs/paper-tab";
import "@polymer/paper-tabs/paper-tabs";
import { import {
CSSResultGroup, CSSResultGroup,
LitElement, LitElement,
@ -45,6 +43,10 @@ import "./hui-view-editor";
import "./hui-view-background-editor"; import "./hui-view-background-editor";
import "./hui-view-visibility-editor"; import "./hui-view-visibility-editor";
import { EditViewDialogParams } from "./show-edit-view-dialog"; 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") @customElement("hui-dialog-edit-view")
export class HuiDialogEditView extends LitElement { export class HuiDialogEditView extends LitElement {
@ -56,7 +58,7 @@ export class HuiDialogEditView extends LitElement {
@state() private _saving = false; @state() private _saving = false;
@state() private _curTab?: string; @state() private _currTab: (typeof TABS)[number] = TABS[0];
@state() private _dirty = false; @state() private _dirty = false;
@ -64,8 +66,6 @@ export class HuiDialogEditView extends LitElement {
@query("ha-yaml-editor") private _editor?: HaYamlEditor; @query("ha-yaml-editor") private _editor?: HaYamlEditor;
private _curTabIndex = 0;
get _type(): string { get _type(): string {
if (!this._config) { if (!this._config) {
return DEFAULT_VIEW_LAYOUT; return DEFAULT_VIEW_LAYOUT;
@ -103,11 +103,11 @@ export class HuiDialogEditView extends LitElement {
} }
public closeDialog(): void { public closeDialog(): void {
this._curTabIndex = 0;
this._params = undefined; this._params = undefined;
this._config = {}; this._config = {};
this._yamlMode = false; this._yamlMode = false;
this._dirty = false; this._dirty = false;
this._currTab = TABS[0];
fireEvent(this, "dialog-closed", { dialog: this.localName }); fireEvent(this, "dialog-closed", { dialog: this.localName });
} }
@ -138,7 +138,7 @@ export class HuiDialogEditView extends LitElement {
></ha-yaml-editor> ></ha-yaml-editor>
`; `;
} else { } else {
switch (this._curTab) { switch (this._currTab) {
case "tab-settings": case "tab-settings":
content = html` content = html`
<hui-view-editor <hui-view-editor
@ -167,9 +167,6 @@ export class HuiDialogEditView extends LitElement {
></hui-view-visibility-editor> ></hui-view-visibility-editor>
`; `;
break; break;
case "tab-cards":
content = html` Cards `;
break;
} }
} }
@ -252,28 +249,21 @@ export class HuiDialogEditView extends LitElement {
` `
: nothing} : nothing}
${!this._yamlMode ${!this._yamlMode
? html`<paper-tabs ? html`<mwc-tab-bar
scrollable .activeIndex=${TABS.indexOf(this._currTab)}
hide-scroll-buttons @MDCTabBar:activated=${this._handleTabChanged}
.selected=${this._curTabIndex}
@selected-item-changed=${this._handleTabSelected}
> >
<paper-tab id="tab-settings" dialogInitialFocus ${TABS.map(
>${this.hass!.localize( (tab) => html`
"ui.panel.lovelace.editor.edit_view.tab_settings" <mwc-tab
)}</paper-tab .label=${this.hass!.localize(
`ui.panel.lovelace.editor.edit_view.${tab.replace("-", "_")}`
)}
> >
<paper-tab id="tab-background" </mwc-tab>
>${this.hass!.localize( `
"ui.panel.lovelace.editor.edit_view.tab_background" )}
)}</paper-tab </mwc-tab-bar>`
>
<paper-tab id="tab-visibility"
>${this.hass!.localize(
"ui.panel.lovelace.editor.edit_view.tab_visibility"
)}</paper-tab
>
</paper-tabs>`
: nothing} : nothing}
</ha-dialog-header> </ha-dialog-header>
${content} ${content}
@ -365,11 +355,12 @@ export class HuiDialogEditView extends LitElement {
this._delete(); this._delete();
} }
private _handleTabSelected(ev: CustomEvent): void { private _handleTabChanged(ev: CustomEvent): void {
if (!ev.detail.value) { const newTab = TABS[ev.detail.index];
if (newTab === this._currTab) {
return; return;
} }
this._curTab = ev.detail.value.id; this._currTab = newTab;
} }
private async _save(): Promise<void> { private async _save(): Promise<void> {
@ -494,8 +485,7 @@ export class HuiDialogEditView extends LitElement {
font-size: inherit; font-size: inherit;
font-weight: inherit; font-weight: inherit;
} }
paper-tabs { mwc-tab-bar {
--paper-tabs-selection-bar-color: var(--primary-color);
color: var(--primary-text-color); color: var(--primary-text-color);
text-transform: uppercase; text-transform: uppercase;
padding: 0 20px; padding: 0 20px;