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

Use breakpoints to define number of column in dashboard view

Browse Source
This commit is contained in:
Paul Bottein 2024-08-27 16:31:33 +02:00
parent d7aaf9bc41
commit 94c1af7729
No known key found for this signature in database
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,10 +29,10 @@ import { showEditSectionDialog } from "../editor/section-editor/show-edit-sectio
import { HuiSection } from "../sections/hui-section"; import { HuiSection } from "../sections/hui-section";
import type { Lovelace } from "../types"; import type { Lovelace } from "../types";
export const DEFAULT_MAX_COLUMNS = 4;
type Breakpoints = Record<string, number>; type Breakpoints = Record<string, number>;
export const DEFAULT_MAX_COLUMNS = 4;
export const DEFAULT_BREAKPOINTS: Breakpoints = { export const DEFAULT_BREAKPOINTS: Breakpoints = {
"0": 1, "0": 1,
"768": 2, "768": 2,
@ -74,8 +74,15 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
@state() _dragging = false; @state() _dragging = false;
private _listeners: Array<() => void> = [];
@state() private _breakpointsColumns: number = 1;
private _columnsController = new ResizeController(this, { private _columnsController = new ResizeController(this, {
callback: (entries) => { 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 totalWidth = entries[0]?.contentRect.width;
const style = getComputedStyle(this); 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() { private get _sizeColumns() {
return this._columnsController.value ?? 1; return this._columnsController.value ?? 1;
} }