From 94c1af77298d1520bb956df624f6cdfa7fc4d980 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Tue, 27 Aug 2024 16:31:33 +0200 Subject: [PATCH] Use breakpoints to define number of column in dashboard view --- src/panels/lovelace/views/hui-sections-view.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts index adf8667098..11c2d8c647 100644 --- a/src/panels/lovelace/views/hui-sections-view.ts +++ b/src/panels/lovelace/views/hui-sections-view.ts @@ -29,10 +29,10 @@ import { showEditSectionDialog } from "../editor/section-editor/show-edit-sectio import { HuiSection } from "../sections/hui-section"; import type { Lovelace } from "../types"; -export const DEFAULT_MAX_COLUMNS = 4; - type Breakpoints = Record; +export const DEFAULT_MAX_COLUMNS = 4; + export const DEFAULT_BREAKPOINTS: Breakpoints = { "0": 1, "768": 2, @@ -74,8 +74,15 @@ export class SectionsView extends LitElement implements LovelaceViewElement { @state() _dragging = false; + private _listeners: Array<() => void> = []; + + @state() private _breakpointsColumns: number = 1; + private _columnsController = new ResizeController(this, { callback: (entries) => { + // Don't do anything if we are using breakpoints + if (this._config?.experimental_breakpoints) return 1; + const totalWidth = entries[0]?.contentRect.width; const style = getComputedStyle(this); @@ -98,10 +105,6 @@ export class SectionsView extends LitElement implements LovelaceViewElement { }, }); - private _listeners: Array<() => void> = []; - - @state() private _breakpointsColumns: number = 1; - private get _sizeColumns() { return this._columnsController.value ?? 1; }