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

Use old logic to calculate the number of columns

Browse Source
This commit is contained in:
Paul Bottein 2024-08-27 12:51:44 +02:00
parent c0aed4325d
commit d7aaf9bc41
No known key found for this signature in database
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/data/lovelace/config/view.ts
View File

@ -26,6 +26,7 @@ export interface LovelaceBaseViewConfig {
max_columns?: number; max_columns?: number;
dense_section_placement?: boolean; dense_section_placement?: boolean;
column_breakpoints?: Record<string, number>; column_breakpoints?: Record<string, number>;
experimental_breakpoints?: boolean;
} }
export interface LovelaceViewConfig extends LovelaceBaseViewConfig { export interface LovelaceViewConfig extends LovelaceBaseViewConfig {

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

@ -12,6 +12,7 @@ import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import { listenMediaQuery } from "../../../common/dom/media_query";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import "../../../components/ha-sortable"; import "../../../components/ha-sortable";
import "../../../components/ha-svg-icon"; import "../../../components/ha-svg-icon";
@ -27,12 +28,9 @@ import { findLovelaceContainer } from "../editor/lovelace-path";
import { showEditSectionDialog } from "../editor/section-editor/show-edit-section-dialog"; import { showEditSectionDialog } from "../editor/section-editor/show-edit-section-dialog";
import { HuiSection } from "../sections/hui-section"; import { HuiSection } from "../sections/hui-section";
import type { Lovelace } from "../types"; import type { Lovelace } from "../types";
import { listenMediaQuery } from "../../../common/dom/media_query";
export const DEFAULT_MAX_COLUMNS = 4; export const DEFAULT_MAX_COLUMNS = 4;
const parsePx = (value: string) => parseInt(value.replace("px", ""));
type Breakpoints = Record<string, number>; type Breakpoints = Record<string, number>;
export const DEFAULT_BREAKPOINTS: Breakpoints = { export const DEFAULT_BREAKPOINTS: Breakpoints = {
@ -54,6 +52,8 @@ const buildMediaQueries = (breakpoints: Breakpoints) =>
return mediaQuery; return mediaQuery;
}); });
const parsePx = (value: string) => parseInt(value.replace("px", ""));
@customElement("hui-sections-view") @customElement("hui-sections-view")
export class SectionsView extends LitElement implements LovelaceViewElement { export class SectionsView extends LitElement implements LovelaceViewElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -100,7 +100,11 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
private _listeners: Array<() => void> = []; private _listeners: Array<() => void> = [];
@state() private _columns: number = 1; @state() private _breakpointsColumns: number = 1;
private get _sizeColumns() {
return this._columnsController.value ?? 1;
}
public setConfig(config: LovelaceViewConfig): void { public setConfig(config: LovelaceViewConfig): void {
this._config = config; this._config = config;
@ -129,14 +133,15 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
private _attachMediaQueriesListeners() { private _attachMediaQueriesListeners() {
this._detachMediaQueriesListeners(); this._detachMediaQueriesListeners();
if (!this._config?.experimental_breakpoints) return;
const breakpoints = this._config?.column_breakpoints ?? DEFAULT_BREAKPOINTS; const breakpoints = this._config?.column_breakpoints ?? DEFAULT_BREAKPOINTS;
const maxColumns = this._config?.max_columns ?? 4; const maxColumns = this._config?.max_columns ?? DEFAULT_MAX_COLUMNS;
const mediaQueries = buildMediaQueries(breakpoints); const mediaQueries = buildMediaQueries(breakpoints);
this._listeners = mediaQueries.map((mediaQuery, index) => this._listeners = mediaQueries.map((mediaQuery, index) =>
listenMediaQuery(mediaQuery, (matches) => { listenMediaQuery(mediaQuery, (matches) => {
if (matches) { if (matches) {
const columns = Object.values(breakpoints)[index]; const columns = Object.values(breakpoints)[index];
this._columns = Math.min(maxColumns, columns); this._breakpointsColumns = Math.min(maxColumns, columns);
} }
}) })
); );
@ -180,7 +185,9 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
this._sectionColumnCount + (this.lovelace?.editMode ? 1 : 0); this._sectionColumnCount + (this.lovelace?.editMode ? 1 : 0);
const editMode = this.lovelace.editMode; const editMode = this.lovelace.editMode;
const maxColumnCount = this._columnsController.value ?? 1; const maxColumnCount = this._config?.experimental_breakpoints
? this._breakpointsColumns
: this._sizeColumns;
return html` return html`
<hui-view-badges <hui-view-badges
@ -374,6 +381,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
--column-gap: var(--ha-view-sections-column-gap, 24px); --column-gap: var(--ha-view-sections-column-gap, 24px);
--column-min-width: var(--ha-view-sections-column-min-width, 320px); --column-min-width: var(--ha-view-sections-column-min-width, 320px);
--column-max-width: var(--ha-view-sections-column-max-width, 500px); --column-max-width: var(--ha-view-sections-column-max-width, 500px);
--column-min-width: var(--ha-view-sections-column-min-width, 320px);
display: block; display: block;
} }