mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-17 14:26:35 +00:00
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:
parent
7a6491a901
commit
cd4af674a3
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user