Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust row height in grid #21311

Merged
merged 6 commits into from
Jul 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/ha-grid-size-picker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export class HaGridSizeEditor extends LitElement {

@property({ attribute: false }) public value?: GridSizeValue;

@property({ attribute: false }) public rows = 6;
@property({ attribute: false }) public rows = 8;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Set it to 8 as rows are smaller now.


@property({ attribute: false }) public columns = 4;

Expand Down Expand Up @@ -205,7 +205,7 @@ export class HaGridSizeEditor extends LitElement {
.preview {
position: relative;
grid-area: preview;
aspect-ratio: 1 / 1;
aspect-ratio: 1 / 1.2;
}
.preview > div {
position: absolute;
Expand Down
8 changes: 4 additions & 4 deletions src/components/tile/ha-tile-icon.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export class HaTileIcon extends LitElement {
return css`
:host {
--tile-icon-color: var(--disabled-color);
--mdc-icon-size: 24px;
--mdc-icon-size: 22px;
}
.shape::before {
content: "";
Expand All @@ -32,9 +32,9 @@ export class HaTileIcon extends LitElement {
}
.shape {
position: relative;
width: 40px;
height: 40px;
border-radius: 20px;
width: 36px;
height: 36px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
Expand Down
6 changes: 3 additions & 3 deletions src/components/tile/ha-tile-image.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ export class HaTileImage extends LitElement {
return css`
.image {
position: relative;
width: 40px;
height: 40px;
border-radius: 20px;
width: 36px;
height: 36px;
border-radius: 18px;
display: flex;
flex: none;
align-items: center;
Expand Down
2 changes: 1 addition & 1 deletion src/components/tile/ha-tile-info.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export class HaTileInfo extends LitElement {
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: 40px;
height: 36px;
}
span {
text-overflow: ellipsis;
Expand Down
30 changes: 30 additions & 0 deletions src/panels/lovelace/card-features/common/card-feature-styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { css } from "lit";

export const cardFeatureStyles = css`
ha-control-select-menu {
box-sizing: border-box;
--control-select-menu-height: var(--feature-height);
--control-select-menu-border-radius: var(--feature-border-radius);
line-height: 1.2;
display: block;
width: 100%;
}
ha-control-select {
--control-select-color: var(--feature-color);
--control-select-padding: 0;
--control-select-thickness: var(--feature-height);
--control-select-border-radius: var(--feature-border-radius);
--control-select-button-border-radius: var(--feature-border-radius);
}
ha-control-button-group {
--control-button-group-spacing: var(--feature-button-spacing);
--control-button-group-thickness: var(--feature-height);
}
ha-control-slider {
--control-slider-color: var(--feature-color);
--control-slider-background: var(--feature-color);
--control-slider-background-opacity: 0.2;
--control-slider-thickness: var(--feature-height);
--control-slider-border-radius: var(--feature-border-radius);
}
`;
53 changes: 18 additions & 35 deletions src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { mdiShieldOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
Expand All @@ -21,6 +21,7 @@ import {
import { UNAVAILABLE } from "../../../data/entity";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import { AlarmModesCardFeatureConfig } from "./types";

Expand Down Expand Up @@ -135,44 +136,26 @@ class HuiAlarmModeCardFeature
}

return html`
<div class="container">
<ha-control-select
.options=${options}
.value=${this._currentMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass.localize(
"ui.card.alarm_control_panel.modes_label"
)}
style=${styleMap({
"--control-select-color": color,
"--modes-count": options.length.toString(),
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
</div>
<ha-control-select
.options=${options}
.value=${this._currentMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass.localize(
"ui.card.alarm_control_panel.modes_label"
)}
style=${styleMap({
"--control-select-color": color,
"--modes-count": options.length.toString(),
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
}

static get styles() {
return css`
ha-control-select {
--control-select-color: var(--feature-color);
--control-select-padding: 0;
--control-select-thickness: 40px;
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

Expand Down
51 changes: 51 additions & 0 deletions src/panels/lovelace/card-features/hui-card-feature.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import type { HassEntity } from "home-assistant-js-websocket";
import { LitElement, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { HomeAssistant } from "../../../types";
import type { HuiErrorCard } from "../cards/hui-error-card";
import { createCardFeatureElement } from "../create-element/create-card-feature-element";
import type { LovelaceCardFeature } from "../types";
import type { LovelaceCardFeatureConfig } from "./types";

@customElement("hui-card-feature")
export class HuiCardFeature extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;

@property({ attribute: false }) public stateObj!: HassEntity;

@property({ attribute: false }) public feature?: LovelaceCardFeatureConfig;

@property({ attribute: false }) public color?: string;

private _element?: LovelaceCardFeature | HuiErrorCard;

private _getFeatureElement(feature: LovelaceCardFeatureConfig) {
if (!this._element) {
this._element = createCardFeatureElement(feature);
return this._element;
}

return this._element;
}

protected render() {
if (!this.feature) {
return nothing;
}

const element = this._getFeatureElement(this.feature);

if (this.hass) {
element.hass = this.hass;
(element as LovelaceCardFeature).stateObj = this.stateObj;
(element as LovelaceCardFeature).color = this.color;
}
return html`${element}`;
}
}

declare global {
interface HTMLElementTagNameMap {
"hui-card-feature": HuiCardFeature;
}
}
74 changes: 30 additions & 44 deletions src/panels/lovelace/card-features/hui-card-features.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,8 @@
import type { HassEntity } from "home-assistant-js-websocket";
import {
CSSResultGroup,
LitElement,
TemplateResult,
css,
html,
nothing,
} from "lit";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { HomeAssistant } from "../../../types";
import type { HuiErrorCard } from "../cards/hui-error-card";
import { createCardFeatureElement } from "../create-element/create-card-feature-element";
import type { LovelaceCardFeature } from "../types";
import "./hui-card-feature";
import type { LovelaceCardFeatureConfig } from "./types";

@customElement("hui-card-features")
Expand All @@ -24,53 +15,48 @@ export class HuiCardFeatures extends LitElement {

@property({ attribute: false }) public color?: string;

private _featuresElements = new WeakMap<
LovelaceCardFeatureConfig,
LovelaceCardFeature | HuiErrorCard
>();

private _getFeatureElement(feature: LovelaceCardFeatureConfig) {
if (!this._featuresElements.has(feature)) {
const element = createCardFeatureElement(feature);
this._featuresElements.set(feature, element);
return element;
}

return this._featuresElements.get(feature)!;
}

private renderFeature(
featureConf: LovelaceCardFeatureConfig,
stateObj: HassEntity
): TemplateResult {
const element = this._getFeatureElement(featureConf);

if (this.hass) {
element.hass = this.hass;
(element as LovelaceCardFeature).stateObj = stateObj;
(element as LovelaceCardFeature).color = this.color;
}

return html`${element}`;
}

protected render() {
if (!this.features) {
return nothing;
}
return html`
${this.features.map((featureConf) =>
this.renderFeature(featureConf, this.stateObj)
)}
<div class="container">
${this.features.map(
(feature) => html`
<hui-card-feature
.hass=${this.hass}
.stateObj=${this.stateObj}
.color=${this.color}
.feature=${feature}
></hui-card-feature>
`
)}
</div>
`;
}

static get styles(): CSSResultGroup {
return css`
:host {
--feature-color: var(--state-icon-color);
--feature-padding: 12px;
--feature-height: 42px;
--feature-border-radius: 12px;
--feature-button-spacing: 12px;
position: relative;
width: 100%;
}
.container {
position: relative;
display: flex;
flex-direction: column;
padding: var(--feature-padding);
padding-top: 0px;
gap: var(--feature-padding);
width: 100%;
height: 100%;
box-sizing: border-box;
justify-content: space-evenly;
}
`;
}
Expand Down
Loading
Loading