diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index 3df4eb6d24..16e14f5d82 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -52,7 +52,7 @@ import { } from "../editor/lovelace-path"; import { showSelectViewDialog } from "../editor/select-view/show-select-view-dialog"; import { Lovelace, LovelaceCard } from "../types"; -import { SECTION_VIEW_LAYOUT } from "../views/const"; +import { SECTIONS_VIEW_LAYOUT } from "../views/const"; @customElement("hui-card-options") export class HuiCardOptions extends LitElement { @@ -355,7 +355,7 @@ export class HuiCardOptions extends LitElement { viewSelectedCallback: async (urlPath, selectedDashConfig, viewIndex) => { const view = selectedDashConfig.views[viewIndex]; - if (!isStrategyView(view) && view.type === SECTION_VIEW_LAYOUT) { + if (!isStrategyView(view) && view.type === SECTIONS_VIEW_LAYOUT) { showAlertDialog(this, { title: this.hass!.localize( "ui.panel.lovelace.editor.move_card.error_title" 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 84c7eb5679..f0adb8ce2e 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,5 +1,7 @@ import "@material/mwc-button"; import { ActionDetail } from "@material/mwc-list"; +import "@material/mwc-tab-bar/mwc-tab-bar"; +import "@material/mwc-tab/mwc-tab"; import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js"; import { CSSResultGroup, @@ -32,19 +34,15 @@ import { import { haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import "../../components/hui-entity-editor"; -import { - DEFAULT_VIEW_LAYOUT, - PANEL_VIEW_LAYOUT, - SECTION_VIEW_LAYOUT, -} from "../../views/const"; +import { SECTIONS_VIEW_LAYOUT } from "../../views/const"; +import { generateDefaultSection } from "../../views/default-section"; +import { getViewType } from "../../views/get-view-type"; import { addView, deleteView, replaceView } from "../config-util"; import { ViewEditEvent, ViewVisibilityChangeEvent } from "../types"; -import "./hui-view-editor"; import "./hui-view-background-editor"; +import "./hui-view-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; @@ -67,12 +65,7 @@ export class HuiDialogEditView extends LitElement { @query("ha-yaml-editor") private _editor?: HaYamlEditor; get _type(): string { - if (!this._config) { - return DEFAULT_VIEW_LAYOUT; - } - return this._config.panel - ? PANEL_VIEW_LAYOUT - : this._config.type || DEFAULT_VIEW_LAYOUT; + return getViewType(this._config!); } protected updated(changedProperties: PropertyValues) { @@ -88,7 +81,10 @@ export class HuiDialogEditView extends LitElement { this._params = params; if (this._params.viewIndex === undefined) { - this._config = {}; + this._config = { + type: SECTIONS_VIEW_LAYOUT, + sections: [generateDefaultSection(this.hass!.localize)], + }; this._dirty = false; return; } @@ -171,10 +167,10 @@ export class HuiDialogEditView extends LitElement { } const isCompatibleViewType = - this._config?.type === SECTION_VIEW_LAYOUT - ? this._config?.type === SECTION_VIEW_LAYOUT && + this._config?.type === SECTIONS_VIEW_LAYOUT + ? this._config?.type === SECTIONS_VIEW_LAYOUT && !this._config?.cards?.length - : this._config?.type !== SECTION_VIEW_LAYOUT && + : this._config?.type !== SECTIONS_VIEW_LAYOUT && !this._config?.sections?.length; return html` @@ -238,7 +234,7 @@ export class HuiDialogEditView extends LitElement { ${!isCompatibleViewType ? html` - ${this._config?.type === SECTION_VIEW_LAYOUT + ${this._config?.type === SECTIONS_VIEW_LAYOUT ? this.hass!.localize( "ui.panel.lovelace.editor.edit_view.type_warning_sections" ) @@ -378,20 +374,8 @@ export class HuiDialogEditView extends LitElement { ...this._config, }; - if (viewConf.type === SECTION_VIEW_LAYOUT && !viewConf.sections?.length) { - viewConf.sections = [ - { - type: "grid", - cards: [ - { - type: "heading", - heading: this.hass!.localize( - "ui.panel.lovelace.editor.section.default_section_title" - ), - }, - ], - }, - ]; + if (viewConf.type === SECTIONS_VIEW_LAYOUT && !viewConf.sections?.length) { + viewConf.sections = [generateDefaultSection(this.hass!.localize)]; } else if (!viewConf.cards?.length) { viewConf.cards = []; } diff --git a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts index cfb2bc15a3..6b807c1e8a 100644 --- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts +++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts @@ -12,11 +12,12 @@ import type { import { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; import type { HomeAssistant } from "../../../../types"; import { - DEFAULT_VIEW_LAYOUT, - SECTION_VIEW_LAYOUT, + MASONRY_VIEW_LAYOUT, + SECTIONS_VIEW_LAYOUT, PANEL_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT, } from "../../views/const"; +import { getViewType } from "../../views/get-view-type"; declare global { interface HASSDomEvents { @@ -60,10 +61,10 @@ export class HuiViewEditor extends LitElement { select: { options: ( [ - DEFAULT_VIEW_LAYOUT, + SECTIONS_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT, PANEL_VIEW_LAYOUT, - SECTION_VIEW_LAYOUT, + MASONRY_VIEW_LAYOUT, ] as const ).map((type) => ({ value: type, @@ -74,7 +75,7 @@ export class HuiViewEditor extends LitElement { }, }, }, - ...(viewType === SECTION_VIEW_LAYOUT + ...(viewType === SECTIONS_VIEW_LAYOUT ? ([ { name: "section_specifics", @@ -111,12 +112,7 @@ export class HuiViewEditor extends LitElement { } get _type(): string { - if (!this._config) { - return DEFAULT_VIEW_LAYOUT; - } - return this._config.panel - ? PANEL_VIEW_LAYOUT - : this._config.type || DEFAULT_VIEW_LAYOUT; + return getViewType(this._config); } protected render() { @@ -131,7 +127,7 @@ export class HuiViewEditor extends LitElement { type: this._type, }; - if (data.max_columns === undefined && this._type === SECTION_VIEW_LAYOUT) { + if (data.max_columns === undefined && this._type === SECTIONS_VIEW_LAYOUT) { data.max_columns = 4; } @@ -150,12 +146,9 @@ export class HuiViewEditor extends LitElement { private _valueChanged(ev: CustomEvent): void { const config = ev.detail.value as LovelaceViewConfig; - if (config.type === DEFAULT_VIEW_LAYOUT) { - delete config.type; - } - - if (config.type !== SECTION_VIEW_LAYOUT) { + if (config.type !== SECTIONS_VIEW_LAYOUT) { delete config.max_columns; + delete config.dense_section_placement; } if ( diff --git a/src/panels/lovelace/views/const.ts b/src/panels/lovelace/views/const.ts index 1135d746b9..81840d1262 100644 --- a/src/panels/lovelace/views/const.ts +++ b/src/panels/lovelace/views/const.ts @@ -1,4 +1,11 @@ -export const DEFAULT_VIEW_LAYOUT = "masonry"; +export const MASONRY_VIEW_LAYOUT = "masonry"; export const PANEL_VIEW_LAYOUT = "panel"; export const SIDEBAR_VIEW_LAYOUT = "sidebar"; -export const SECTION_VIEW_LAYOUT = "sections"; +export const SECTIONS_VIEW_LAYOUT = "sections"; + +export const CARD_LAYOUTS = [ + MASONRY_VIEW_LAYOUT, + PANEL_VIEW_LAYOUT, + SIDEBAR_VIEW_LAYOUT, +]; +export const SECTION_VIEW_LAYOUTS = [SECTIONS_VIEW_LAYOUT]; diff --git a/src/panels/lovelace/views/default-section.ts b/src/panels/lovelace/views/default-section.ts new file mode 100644 index 0000000000..af3b96dc52 --- /dev/null +++ b/src/panels/lovelace/views/default-section.ts @@ -0,0 +1,13 @@ +import type { LocalizeFunc } from "../../../common/translations/localize"; + +export const generateDefaultSection = (localize: LocalizeFunc) => ({ + type: "grid", + cards: [ + { + type: "heading", + heading: localize( + "ui.panel.lovelace.editor.section.default_section_title" + ), + }, + ], +}); diff --git a/src/panels/lovelace/views/get-view-type.ts b/src/panels/lovelace/views/get-view-type.ts new file mode 100644 index 0000000000..1394c82ae4 --- /dev/null +++ b/src/panels/lovelace/views/get-view-type.ts @@ -0,0 +1,22 @@ +import type { LovelaceViewConfig } from "../../../data/lovelace/config/view"; +import { + MASONRY_VIEW_LAYOUT, + PANEL_VIEW_LAYOUT, + SECTIONS_VIEW_LAYOUT, +} from "./const"; + +export const getViewType = (config?: LovelaceViewConfig): string => { + if (config?.type) { + return config.type; + } + if (config?.panel) { + return PANEL_VIEW_LAYOUT; + } + if (config?.sections) { + return SECTIONS_VIEW_LAYOUT; + } + if (config?.cards) { + return MASONRY_VIEW_LAYOUT; + } + return SECTIONS_VIEW_LAYOUT; +}; diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index 5d0feb7fb4..cdbb6b31c5 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/src/panels/lovelace/views/hui-view.ts @@ -21,6 +21,7 @@ import type { HuiBadge } from "../badges/hui-badge"; import "../cards/hui-card"; import type { HuiCard } from "../cards/hui-card"; import { createViewElement } from "../create-element/create-view-element"; +import { showCreateBadgeDialog } from "../editor/badge-editor/show-create-badge-dialog"; import { showEditBadgeDialog } from "../editor/badge-editor/show-edit-badge-dialog"; import { showCreateCardDialog } from "../editor/card-editor/show-create-card-dialog"; import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog"; @@ -35,8 +36,7 @@ import "../sections/hui-section"; import type { HuiSection } from "../sections/hui-section"; import { generateLovelaceViewStrategy } from "../strategies/get-strategy"; import type { Lovelace } from "../types"; -import { DEFAULT_VIEW_LAYOUT, PANEL_VIEW_LAYOUT } from "./const"; -import { showCreateBadgeDialog } from "../editor/badge-editor/show-create-badge-dialog"; +import { getViewType } from "./get-view-type"; declare global { // for fire event @@ -267,9 +267,7 @@ export class HUIView extends ReactiveElement { viewConfig = { ...viewConfig, - type: viewConfig.panel - ? PANEL_VIEW_LAYOUT - : viewConfig.type || DEFAULT_VIEW_LAYOUT, + type: getViewType(viewConfig), }; // Create a new layout element if necessary. diff --git a/src/translations/en.json b/src/translations/en.json index 54b9a19b3b..2ce00791f7 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -5602,10 +5602,10 @@ "type_warning_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_warning_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)", + "masonry": "Masonry", "sidebar": "Sidebar", "panel": "Panel (1 card)", - "sections": "Sections (experimental)" + "sections": "Sections" }, "subview": "Subview", "max_columns": "Max number of sections wide",