-
- ${Array(this.rows * this.columns)
+
+
+ ${Array(this.rows)
.fill(0)
.map((_, index) => {
- const row = Math.floor(index / this.columns) + 1;
- const column = (index % this.columns) + 1;
+ const row = index + 1;
return html`
-
+
+ ${Array(this.columns)
+ .fill(0)
+ .map((__, columnIndex) => {
+ const column = columnIndex + 1;
+ if (
+ column % this.step !== 0 ||
+ (this.columns > 24 && column % 3 !== 0)
+ ) {
+ return nothing;
+ }
+ return html`
+ |
+ `;
+ })}
+
`;
})}
-
-
+
+
`;
@@ -223,42 +237,40 @@ export class HaGridSizeEditor extends LitElement {
}
.reset {
grid-area: reset;
+ --mdc-icon-button-size: 36px;
}
.preview {
position: relative;
grid-area: preview;
}
- .preview > div {
- position: relative;
- display: grid;
- grid-template-columns: repeat(var(--total-columns), 1fr);
- grid-template-rows: repeat(var(--total-rows), 25px);
- gap: 4px;
+ .preview table,
+ .preview tr,
+ .preview td {
+ border: 2px dotted var(--divider-color);
+ border-collapse: collapse;
}
- .preview .cell {
- background-color: var(--disabled-color);
- grid-column: span 1;
- grid-row: span 1;
- border-radius: 4px;
- opacity: 0.2;
- cursor: pointer;
- }
- .preview .selected {
- position: absolute;
- pointer-events: none;
- top: 0;
- left: 0;
- height: 100%;
+ .preview table {
width: 100%;
}
- .selected .cell {
- background-color: var(--primary-color);
- grid-column: 1 / span min(var(--columns, 0), var(--total-columns));
- grid-row: 1 / span min(var(--rows, 0), var(--total-rows));
- opacity: 0.5;
+ .preview tr {
+ height: 30px;
}
- .preview.full-width .selected .cell {
- grid-column: 1 / -1;
+ .preview td {
+ cursor: pointer;
+ }
+ .preview-card {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: var(--primary-color);
+ opacity: 0.3;
+ border-radius: 8px;
+ height: calc(var(--rows, 1) * 30px);
+ width: calc(var(--columns, 1) * 100% / var(--total-columns, 12));
+ pointer-events: none;
+ transition:
+ width ease-in-out 180ms,
+ height ease-in-out 180ms;
}
`,
];
diff --git a/src/panels/lovelace/common/compute-card-grid-size.ts b/src/panels/lovelace/common/compute-card-grid-size.ts
index cc0be5ac76..49bc4946ca 100644
--- a/src/panels/lovelace/common/compute-card-grid-size.ts
+++ b/src/panels/lovelace/common/compute-card-grid-size.ts
@@ -3,16 +3,11 @@ import type { LovelaceGridOptions, LovelaceLayoutOptions } from "../types";
export const GRID_COLUMN_MULTIPLIER = 3;
-export const multiplyBy =
(
+const multiplyBy = (
value: T,
multiplier: number
): T => (typeof value === "number" ? ((value * multiplier) as T) : value);
-export const divideBy = (
- value: T,
- divider: number
-): T => (typeof value === "number" ? (Math.ceil(value / divider) as T) : value);
-
export const migrateLayoutToGridOptions = (
options: LovelaceLayoutOptions
): LovelaceGridOptions => {
@@ -42,6 +37,9 @@ export type CardGridSize = {
columns: number | "full";
};
+export const isPreciseMode = (options: LovelaceGridOptions) =>
+ typeof options.columns === "number" && options.columns % 3 !== 0;
+
export const computeCardGridSize = (
options: LovelaceGridOptions
): CardGridSize => {
diff --git a/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts b/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts
index 206436ce95..e133be40c1 100644
--- a/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts
+++ b/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts
@@ -23,6 +23,8 @@ const A11Y_KEY_CODES = new Set([
"End",
]);
+type TooltipMode = "never" | "always" | "interaction";
+
@customElement("ha-grid-layout-slider")
export class HaGridLayoutSlider extends LitElement {
@property({ type: Boolean, reflect: true })
@@ -34,6 +36,9 @@ export class HaGridLayoutSlider extends LitElement {
@property({ attribute: "touch-action" })
public touchAction?: string;
+ @property({ attribute: "tooltip-mode" })
+ public tooltipMode: TooltipMode = "interaction";
+
@property({ type: Number })
public value?: number;
@@ -52,6 +57,9 @@ export class HaGridLayoutSlider extends LitElement {
@state()
public pressed = false;
+ @state()
+ public tooltipVisible = false;
+
private _mc?: HammerManager;
private get _range() {
@@ -135,11 +143,13 @@ export class HaGridLayoutSlider extends LitElement {
this._mc.on("panstart", () => {
if (this.disabled) return;
this.pressed = true;
+ this._showTooltip();
savedValue = this.value;
});
this._mc.on("pancancel", () => {
if (this.disabled) return;
this.pressed = false;
+ this._hideTooltip();
this.value = savedValue;
});
this._mc.on("panmove", (e) => {
@@ -152,6 +162,7 @@ export class HaGridLayoutSlider extends LitElement {
this._mc.on("panend", (e) => {
if (this.disabled) return;
this.pressed = false;
+ this._hideTooltip();
const percentage = this._getPercentageFromEvent(e);
const value = this._percentageToValue(percentage);
this.value = this._steppedValue(this._boundedValue(value));
@@ -223,6 +234,23 @@ export class HaGridLayoutSlider extends LitElement {
fireEvent(this, "value-changed", { value: this.value });
}
+ private _tooltipTimeout?: number;
+
+ _showTooltip() {
+ if (this._tooltipTimeout != null) window.clearTimeout(this._tooltipTimeout);
+ this.tooltipVisible = true;
+ }
+
+ _hideTooltip(delay?: number) {
+ if (!delay) {
+ this.tooltipVisible = false;
+ return;
+ }
+ this._tooltipTimeout = window.setTimeout(() => {
+ this.tooltipVisible = false;
+ }, delay);
+ }
+
private _getPercentageFromEvent = (e: HammerInput) => {
if (this.vertical) {
const y = e.center.y;
@@ -236,6 +264,30 @@ export class HaGridLayoutSlider extends LitElement {
return Math.max(Math.min(1, (x - offset) / total), 0);
};
+ private _renderTooltip() {
+ if (this.tooltipMode === "never") return nothing;
+
+ const position = this.vertical ? "left" : "top";
+
+ const visible =
+ this.tooltipMode === "always" ||
+ (this.tooltipVisible && this.tooltipMode === "interaction");
+
+ const value = this._boundedValue(this._steppedValue(this.value ?? 0));
+
+ return html`
+
+ ${value}
+
+ `;
+ }
+
protected render(): TemplateResult {
return html`