diff --git a/src/components/ha-formfield.ts b/src/components/ha-formfield.ts index 1c8cc5a019..46837ca65d 100644 --- a/src/components/ha-formfield.ts +++ b/src/components/ha-formfield.ts @@ -1,11 +1,13 @@ import { FormfieldBase } from "@material/mwc-formfield/mwc-formfield-base"; import { styles } from "@material/mwc-formfield/mwc-formfield.css"; import { css } from "lit"; -import { customElement } from "lit/decorators"; +import { customElement, property } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @customElement("ha-formfield") export class HaFormfield extends FormfieldBase { + @property({ type: Boolean, reflect: true }) public disabled = false; + protected _labelClick() { const input = this.input as HTMLInputElement | undefined; if (!input) return; @@ -44,6 +46,9 @@ export class HaFormfield extends FormfieldBase { padding-inline-start: 4px; padding-inline-end: 0; } + :host([disabled]) label { + color: var(--disabled-text-color); + } `, ]; } diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts index 069dd157d4..91fb682d7e 100644 --- a/src/components/ha-selector/ha-selector-select.ts +++ b/src/components/ha-selector/ha-selector-select.ts @@ -102,7 +102,10 @@ export class HaSelectSelector extends LitElement { ${this.label} ${options.map( (item: SelectOption) => html` - + + (localize: LocalizeFunc, currentType: string, isNew: boolean) => [ { name: "title", selector: { text: {} } }, { @@ -61,6 +64,11 @@ export class HuiViewEditor extends LitElement { label: localize( `ui.panel.lovelace.editor.edit_view.types.${type}` ), + disabled: + !isNew && + (currentType === SECTION_VIEW_LAYOUT + ? type !== SECTION_VIEW_LAYOUT + : type === SECTION_VIEW_LAYOUT), })), }, }, @@ -71,7 +79,7 @@ export class HuiViewEditor extends LitElement { boolean: {}, }, }, - ] as const + ] as const satisfies HaFormSchema[] ); set config(config: LovelaceViewConfig) { @@ -92,7 +100,7 @@ export class HuiViewEditor extends LitElement { return nothing; } - const schema = this._schema(this.hass.localize); + const schema = this._schema(this.hass.localize, this._type, this.isNew); const data = { ...this._config, @@ -156,6 +164,15 @@ export class HuiViewEditor extends LitElement { return this.hass.localize( "ui.panel.lovelace.editor.edit_view.subview_helper" ); + case "type": + if (this.isNew) return undefined; + return this._type === "sections" + ? this.hass.localize( + "ui.panel.lovelace.editor.edit_view.type_helper_others" + ) + : this.hass.localize( + "ui.panel.lovelace.editor.edit_view.type_helper_sections" + ); default: return undefined; } diff --git a/src/translations/en.json b/src/translations/en.json index 499a495fda..fbec99072e 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5101,6 +5101,9 @@ "select_users": "Select which users should see this view in the navigation" }, "type": "View type", + "type_helper_sections": "You can not change your view to use the 'sections' view type, because migration is not supported yet. Start from scratch with a new view if you want to experiment with the 'sections' view.", + "type_helper_others": "You can not change your view to an other type because migration is not supported yet. Start from scratch with a new view if you want to use another view type.", + "types": { "masonry": "Masonry (default)", "sidebar": "Sidebar",