Add maximum number of columns option for section view (#20145)
* Add maximum number of columns option for section view * Add comment
This commit is contained in:
parent
202fa82646
commit
480448acbb
|
@ -18,6 +18,7 @@ export interface LovelaceBaseViewConfig {
|
||||||
visible?: boolean | ShowViewConfig[];
|
visible?: boolean | ShowViewConfig[];
|
||||||
subview?: boolean;
|
subview?: boolean;
|
||||||
back_path?: string;
|
back_path?: string;
|
||||||
|
max_columns?: number; // Only used for section view, it should move to a section view config type when the views will have dedicated editor.
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LovelaceViewConfig extends LovelaceBaseViewConfig {
|
export interface LovelaceViewConfig extends LovelaceBaseViewConfig {
|
||||||
|
|
|
@ -37,7 +37,7 @@ export class HuiViewEditor extends LitElement {
|
||||||
private _suggestedPath = false;
|
private _suggestedPath = false;
|
||||||
|
|
||||||
private _schema = memoizeOne(
|
private _schema = memoizeOne(
|
||||||
(localize: LocalizeFunc) =>
|
(localize: LocalizeFunc, viewType: string) =>
|
||||||
[
|
[
|
||||||
{ name: "title", selector: { text: {} } },
|
{ name: "title", selector: { text: {} } },
|
||||||
{
|
{
|
||||||
|
@ -68,6 +68,20 @@ export class HuiViewEditor extends LitElement {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
...(viewType === SECTION_VIEW_LAYOUT
|
||||||
|
? ([
|
||||||
|
{
|
||||||
|
name: "max_columns",
|
||||||
|
selector: {
|
||||||
|
number: {
|
||||||
|
min: 1,
|
||||||
|
max: 10,
|
||||||
|
mode: "slider",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
] as const satisfies HaFormSchema[])
|
||||||
|
: []),
|
||||||
{
|
{
|
||||||
name: "subview",
|
name: "subview",
|
||||||
selector: {
|
selector: {
|
||||||
|
@ -95,13 +109,17 @@ export class HuiViewEditor extends LitElement {
|
||||||
return nothing;
|
return nothing;
|
||||||
}
|
}
|
||||||
|
|
||||||
const schema = this._schema(this.hass.localize);
|
const schema = this._schema(this.hass.localize, this._type);
|
||||||
|
|
||||||
const data = {
|
const data = {
|
||||||
...this._config,
|
...this._config,
|
||||||
type: this._type,
|
type: this._type,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (data.max_columns === undefined && this._type === SECTION_VIEW_LAYOUT) {
|
||||||
|
data.max_columns = 4;
|
||||||
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<ha-form
|
<ha-form
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
|
@ -117,10 +135,14 @@ export class HuiViewEditor extends LitElement {
|
||||||
private _valueChanged(ev: CustomEvent): void {
|
private _valueChanged(ev: CustomEvent): void {
|
||||||
const config = ev.detail.value as LovelaceViewConfig;
|
const config = ev.detail.value as LovelaceViewConfig;
|
||||||
|
|
||||||
if (config.type === "masonry") {
|
if (config.type === DEFAULT_VIEW_LAYOUT) {
|
||||||
delete config.type;
|
delete config.type;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (config.type !== SECTION_VIEW_LAYOUT) {
|
||||||
|
delete config.max_columns;
|
||||||
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
this.isNew &&
|
this.isNew &&
|
||||||
!this._suggestedPath &&
|
!this._suggestedPath &&
|
||||||
|
@ -144,6 +166,10 @@ export class HuiViewEditor extends LitElement {
|
||||||
return this.hass.localize("ui.panel.lovelace.editor.edit_view.type");
|
return this.hass.localize("ui.panel.lovelace.editor.edit_view.type");
|
||||||
case "subview":
|
case "subview":
|
||||||
return this.hass.localize("ui.panel.lovelace.editor.edit_view.subview");
|
return this.hass.localize("ui.panel.lovelace.editor.edit_view.subview");
|
||||||
|
case "max_columns":
|
||||||
|
return this.hass.localize(
|
||||||
|
"ui.panel.lovelace.editor.edit_view.max_columns"
|
||||||
|
);
|
||||||
default:
|
default:
|
||||||
return this.hass!.localize(
|
return this.hass!.localize(
|
||||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||||
|
|
|
@ -58,6 +58,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||||
|
|
||||||
const editMode = this.lovelace.editMode;
|
const editMode = this.lovelace.editMode;
|
||||||
|
|
||||||
|
const sectionCount = sectionsConfig.length + (editMode ? 1 : 0);
|
||||||
|
const maxColumnsCount = this._config?.max_columns;
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
${this.badges.length > 0
|
${this.badges.length > 0
|
||||||
? html`<div class="badges">${this.badges}</div>`
|
? html`<div class="badges">${this.badges}</div>`
|
||||||
|
@ -73,7 +76,8 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||||
<div
|
<div
|
||||||
class="container"
|
class="container"
|
||||||
style=${styleMap({
|
style=${styleMap({
|
||||||
"--total-count": String(sectionsConfig.length + (editMode ? 1 : 0)),
|
"--max-columns-count": maxColumnsCount,
|
||||||
|
"--total-count": sectionCount,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
${repeat(
|
${repeat(
|
||||||
|
@ -232,7 +236,6 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return css`
|
return css`
|
||||||
:host {
|
:host {
|
||||||
--max-column-count: 4;
|
|
||||||
--row-gap: var(--ha-view-sections-row-gap, 8px);
|
--row-gap: var(--ha-view-sections-row-gap, 8px);
|
||||||
--column-gap: var(--ha-view-sections-column-gap, 32px);
|
--column-gap: var(--ha-view-sections-column-gap, 32px);
|
||||||
--column-min-width: var(--ha-view-sections-column-min-width, 320px);
|
--column-min-width: var(--ha-view-sections-column-min-width, 320px);
|
||||||
|
@ -259,7 +262,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
--max-count: min(var(--total-count), var(--max-column-count));
|
--max-count: min(var(--total-count), var(--max-columns-count, 4));
|
||||||
--max-width: min(
|
--max-width: min(
|
||||||
calc(
|
calc(
|
||||||
(var(--max-count) + 1) * var(--column-min-width) +
|
(var(--max-count) + 1) * var(--column-min-width) +
|
||||||
|
|
|
@ -5355,6 +5355,7 @@
|
||||||
"sections": "Sections (experimental)"
|
"sections": "Sections (experimental)"
|
||||||
},
|
},
|
||||||
"subview": "Subview",
|
"subview": "Subview",
|
||||||
|
"max_columns": "Max number of columns",
|
||||||
"subview_helper": "Subviews don't appear in tabs and have a back button.",
|
"subview_helper": "Subviews don't appear in tabs and have a back button.",
|
||||||
"edit_ui": "Edit in visual editor",
|
"edit_ui": "Edit in visual editor",
|
||||||
"edit_yaml": "Edit in YAML",
|
"edit_yaml": "Edit in YAML",
|
||||||
|
|
Loading…
Reference in New Issue