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

Use sections view when creating a new view (#22382)

Browse Source 
* Use sections view when creating a new view

* Improve default

* Update src/panels/lovelace/views/default-section.ts

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

* Update src/panels/lovelace/views/get-view-type.ts

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

---------

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>
This commit is contained in:
Paul Bottein 2024-10-22 10:57:15 +02:00 committed by GitHub
parent b111eb2316
commit 413171bb3c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 78 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/panels/lovelace/components/hui-card-options.ts
View File

@ -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"

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

@ -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`
<ha-alert class="incompatible" alert-type="warning">
${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 = [];
}

27
src/panels/lovelace/editor/view-editor/hui-view-editor.ts
View File

@ -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 (

11
src/panels/lovelace/views/const.ts
View File

@ -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];

13
src/panels/lovelace/views/default-section.ts Normal file
View File

@ -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"
),
},
],
});

22
src/panels/lovelace/views/get-view-type.ts Normal file
View File

@ -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;
};

8
src/panels/lovelace/views/hui-view.ts
View File

@ -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.

4
src/translations/en.json
View File

@ -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",