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

Adjust row height in grid (#21311)

Browse Source 
* Set row height to 56px

* Adjust padding and sizes

* Adjust margin

* Fix pointer-events

* Fix image size

* Clean code
This commit is contained in:
Paul Bottein 2024-07-15 14:11:03 +02:00 committed by GitHub
parent f87296d978
commit f70126eb62
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
34 changed files with 762 additions and 999 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ha-grid-size-picker.ts
View File

@ -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;
@property({ attribute: false }) public columns = 4;
@ -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;

8
src/components/tile/ha-tile-icon.ts
View File

@ -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: "";
@ -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;

6
src/components/tile/ha-tile-image.ts
View File

@ -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;

2
src/components/tile/ha-tile-info.ts
View File

@ -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;

30
src/panels/lovelace/card-features/common/card-feature-styles.ts Normal file
View File

@ -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
src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
View File

@ -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";
@ -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";
@ -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;
}
}

51
src/panels/lovelace/card-features/hui-card-feature.ts Normal file
View File

@ -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
src/panels/lovelace/card-features/hui-card-features.ts
View File

@ -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")
@ -24,44 +15,23 @@ 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>
`;
}
@ -69,8 +39,24 @@ export class HuiCardFeatures extends LitElement {
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;
}
`;
}

111
src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts
View File

@ -1,6 +1,6 @@
import { mdiFan } 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, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
import { UNAVAILABLE } from "../../../data/entity";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { ClimateFanModesCardFeatureConfig } from "./types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import { ClimateFanModesCardFeatureConfig } from "./types";
export const supportsClimateFanModesCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id);
@ -140,79 +141,55 @@ class HuiClimateFanModesCardFeature
if (this._config.style === "icons") {
return html`
<div class="container">
<ha-control-select
.options=${options}
.value=${this._currentFanMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass!.formatEntityAttributeName(
stateObj,
"fan_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
</div>
<ha-control-select
.options=${options}
.value=${this._currentFanMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass!.formatEntityAttributeName(
stateObj,
"fan_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
}
return html`
<div class="container">
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "fan_mode")}
.value=${this._currentFanMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentFanMode
? html`<ha-attribute-icon
slot="icon"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="fan_mode"
.attributeValue=${this._currentFanMode}
></ha-attribute-icon>`
: html` <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
</div>
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "fan_mode")}
.value=${this._currentFanMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentFanMode
? html`<ha-attribute-icon
slot="icon"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="fan_mode"
.attributeValue=${this._currentFanMode}
></ha-attribute-icon>`
: html` <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
`;
}
static get styles() {
return css`
ha-control-select-menu {
box-sizing: border-box;
--control-select-menu-height: 40px;
--control-select-menu-border-radius: 10px;
line-height: 1.2;
display: block;
width: 100%;
}
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;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

108
src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts
View File

@ -1,6 +1,6 @@
import { mdiThermostat } 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, query, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { stopPropagation } from "../../../common/dom/stop_propagation";
@ -19,6 +19,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 { ClimateHvacModesCardFeatureConfig } from "./types";
@ -139,79 +140,56 @@ class HuiClimateHvacModesCardFeature
if (this._config.style === "dropdown") {
return html`
<div class="container">
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass.localize("ui.card.climate.mode")}
.value=${this._currentHvacMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentHvacMode
? html`
<ha-svg-icon
slot="icon"
.path=${climateHvacModeIcon(this._currentHvacMode)}
></ha-svg-icon>
`
: html`
<ha-svg-icon slot="icon" .path=${mdiThermostat}></ha-svg-icon>
`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass.localize("ui.card.climate.mode")}
.value=${this._currentHvacMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentHvacMode
? html`
<ha-svg-icon
slot="icon"
.path=${climateHvacModeIcon(this._currentHvacMode)}
></ha-svg-icon>
`
)}
</ha-control-select-menu>
</div>
: html`
<ha-svg-icon slot="icon" .path=${mdiThermostat}></ha-svg-icon>
`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
`;
}
return html`
<div class="container">
<ha-control-select
.options=${options}
.value=${this._currentHvacMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass.localize("ui.card.climate.mode")}
style=${styleMap({
"--control-select-color": color,
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
</div>
<ha-control-select
.options=${options}
.value=${this._currentHvacMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass.localize("ui.card.climate.mode")}
style=${styleMap({
"--control-select-color": color,
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
}
static get styles() {
return css`
ha-control-select-menu {
box-sizing: border-box;
--control-select-menu-height: 40px;
--control-select-menu-border-radius: 10px;
line-height: 1.2;
display: block;
width: 100%;
}
ha-control-select {
--control-select-padding: 0;
--control-select-thickness: 40px;
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

118
src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts
View File

@ -1,6 +1,6 @@
import { mdiTuneVariant } 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, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
import { UNAVAILABLE } from "../../../data/entity";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { ClimatePresetModesCardFeatureConfig } from "./types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import { ClimatePresetModesCardFeatureConfig } from "./types";
export const supportsClimatePresetModesCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id);
@ -142,84 +143,57 @@ class HuiClimatePresetModesCardFeature
if (this._config.style === "icons") {
return html`
<div class="container">
<ha-control-select
.options=${options}
.value=${this._currentPresetMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass!.formatEntityAttributeName(
stateObj,
"preset_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
</div>
<ha-control-select
.options=${options}
.value=${this._currentPresetMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass!.formatEntityAttributeName(
stateObj,
"preset_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
}
return html`
<div class="container">
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass!.formatEntityAttributeName(
stateObj,
"preset_mode"
)}
.value=${this._currentPresetMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentPresetMode
? html`<ha-attribute-icon
slot="icon"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="preset_mode"
.attributeValue=${this._currentPresetMode}
></ha-attribute-icon>`
: html`
<ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
</div>
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
.value=${this._currentPresetMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentPresetMode
? html`<ha-attribute-icon
slot="icon"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="preset_mode"
.attributeValue=${this._currentPresetMode}
></ha-attribute-icon>`
: html`
<ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
`;
}
static get styles() {
return css`
ha-control-select-menu {
box-sizing: border-box;
--control-select-menu-height: 40px;
--control-select-menu-border-radius: 10px;
line-height: 1.2;
display: block;
width: 100%;
}
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;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

117
src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts
View File

@ -1,6 +1,6 @@
import { mdiArrowOscillating } 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, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
import { UNAVAILABLE } from "../../../data/entity";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { ClimateSwingModesCardFeatureConfig } from "./types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import { ClimateSwingModesCardFeatureConfig } from "./types";
export const supportsClimateSwingModesCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id);
@ -142,82 +143,58 @@ class HuiClimateSwingModesCardFeature
if (this._config.style === "icons") {
return html`
<div class="container">
<ha-control-select
.options=${options}
.value=${this._currentSwingMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass!.formatEntityAttributeName(
stateObj,
"swing_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
</div>
<ha-control-select
.options=${options}
.value=${this._currentSwingMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass!.formatEntityAttributeName(
stateObj,
"swing_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
}
return html`
<div class="container">
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "swing_mode")}
.value=${this._currentSwingMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentSwingMode
? html`<ha-attribute-icon
slot="icon"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="swing_mode"
.attributeValue=${this._currentSwingMode}
></ha-attribute-icon>`
: html` <ha-svg-icon
slot="icon"
.path=${mdiArrowOscillating}
></ha-svg-icon>`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
</div>
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "swing_mode")}
.value=${this._currentSwingMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentSwingMode
? html`<ha-attribute-icon
slot="icon"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="swing_mode"
.attributeValue=${this._currentSwingMode}
></ha-attribute-icon>`
: html` <ha-svg-icon
slot="icon"
.path=${mdiArrowOscillating}
></ha-svg-icon>`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
`;
}
static get styles() {
return css`
ha-control-select-menu {
box-sizing: border-box;
--control-select-menu-height: 40px;
--control-select-menu-border-radius: 10px;
line-height: 1.2;
display: block;
width: 100%;
}
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;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

10
src/panels/lovelace/card-features/hui-cover-open-close-card-feature.ts
View File

@ -1,6 +1,6 @@
import { mdiStop } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import {
@ -18,6 +18,7 @@ import {
} from "../../../data/cover";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { CoverOpenCloseCardFeatureConfig } from "./types";
export const supportsCoverOpenCloseCardFeature = (stateObj: HassEntity) => {
@ -128,12 +129,7 @@ class HuiCoverOpenCloseCardFeature
}
static get styles() {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;
return cardFeatureStyles;
}
}

60
src/panels/lovelace/card-features/hui-cover-position-card-feature.ts
View File

@ -1,5 +1,5 @@
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { computeCssColor } from "../../../common/color/compute-color";
@ -10,10 +10,11 @@ import { stateColorCss } from "../../../common/entity/state_color";
import { supportsFeature } from "../../../common/entity/supports-feature";
import { CoverEntityFeature } from "../../../data/cover";
import { UNAVAILABLE } from "../../../data/entity";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { CoverPositionCardFeatureConfig } from "./types";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
export const supportsCoverPositionCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id);
@ -72,32 +73,31 @@ class HuiCoverPositionCardFeature
: stateColorCss(this.stateObj);
const style = {
"--color": color,
"--feature-color": color,
// Use open color for inactive state to avoid grey slider that looks disabled
"--state-cover-inactive-color": openColor,
};
return html`
<div class="container" style=${styleMap(style)}>
<ha-control-slider
.value=${value}
min="0"
max="100"
step="1"
inverted
show-handle
@value-changed=${this._valueChanged}
.ariaLabel=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this.hass.entities,
"current_position"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_position}
.locale=${this.hass.locale}
></ha-control-slider>
</div>
<ha-control-slider
style=${styleMap(style)}
.value=${value}
min="0"
max="100"
step="1"
inverted
show-handle
@value-changed=${this._valueChanged}
.ariaLabel=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this.hass.entities,
"current_position"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_position}
.locale=${this.hass.locale}
></ha-control-slider>
`;
}
@ -112,19 +112,7 @@ class HuiCoverPositionCardFeature
}
static get styles() {
return css`
ha-control-slider {
--control-slider-color: var(--color);
--control-slider-background: var(--color);
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

12
src/panels/lovelace/card-features/hui-cover-tilt-card-feature.ts
View File

@ -1,19 +1,20 @@
import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { LitElement, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-control-button";
import "../../../components/ha-control-button-group";
import {
CoverEntityFeature,
canCloseTilt,
canOpenTilt,
canStopTilt,
CoverEntityFeature,
} from "../../../data/cover";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { CoverTiltCardFeatureConfig } from "./types";
export const supportsCoverTiltCardFeature = (stateObj: HassEntity) => {
@ -120,12 +121,7 @@ class HuiCoverTiltCardFeature
}
static get styles() {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;
return cardFeatureStyles;
}
}

71
src/panels/lovelace/card-features/hui-cover-tilt-position-card-feature.ts
View File

@ -13,6 +13,7 @@ import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
import { generateTiltSliderTrackBackgroundGradient } from "../../../state-control/cover/ha-state-control-cover-tilt-position";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { CoverTiltPositionCardFeatureConfig } from "./types";
const GRADIENT = generateTiltSliderTrackBackgroundGradient();
@ -72,33 +73,32 @@ class HuiCoverTiltPositionCardFeature
: stateColorCss(this.stateObj);
const style = {
"--color": color,
"--feature-color": color,
// Use open color for inactive state to avoid grey slider that looks disabled
"--state-cover-inactive-color": openColor,
};
return html`
<div class="container" style=${styleMap(style)}>
<ha-control-slider
.value=${value}
min="0"
max="100"
mode="cursor"
inverted
@value-changed=${this._valueChanged}
.ariaLabel=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this.hass.entities,
"current_tilt_position"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_tilt_position}
.locale=${this.hass.locale}
>
<div slot="background" class="gradient"></div
></ha-control-slider>
</div>
<ha-control-slider
style=${styleMap(style)}
.value=${value}
min="0"
max="100"
mode="cursor"
inverted
@value-changed=${this._valueChanged}
.ariaLabel=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this.hass.entities,
"current_tilt_position"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.unit=${DOMAIN_ATTRIBUTES_UNITS.cover.current_tilt_position}
.locale=${this.hass.locale}
>
<div slot="background" class="gradient"></div
></ha-control-slider>
`;
}
@ -113,24 +113,15 @@ class HuiCoverTiltPositionCardFeature
}
static get styles() {
return css`
ha-control-slider {
/* Force inactive state to be colored for the slider */
--control-slider-color: var(--color);
--control-slider-background: var(--color);
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
.gradient {
background: -webkit-linear-gradient(left, ${GRADIENT});
opacity: 0.6;
}
`;
return [
cardFeatureStyles,
css`
.gradient {
background: -webkit-linear-gradient(left, ${GRADIENT});
opacity: 0.6;
}
`,
];
}
}

120
src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts
View File

@ -1,6 +1,6 @@
import { mdiTuneVariant } 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, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -10,12 +10,13 @@ import "../../../components/ha-control-select";
import type { ControlSelectOption } from "../../../components/ha-control-select";
import "../../../components/ha-control-select-menu";
import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu";
import { FanEntity, FanEntityFeature } from "../../../data/fan";
import { UNAVAILABLE } from "../../../data/entity";
import { FanEntity, FanEntityFeature } from "../../../data/fan";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { FanPresetModesCardFeatureConfig } from "./types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import { FanPresetModesCardFeatureConfig } from "./types";
export const supportsFanPresetModesCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id);
@ -139,84 +140,57 @@ class HuiFanPresetModesCardFeature
if (this._config.style === "icons") {
return html`
<div class="container">
<ha-control-select
.options=${options}
.value=${this._currentPresetMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass!.formatEntityAttributeName(
stateObj,
"preset_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
</div>
<ha-control-select
.options=${options}
.value=${this._currentPresetMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass!.formatEntityAttributeName(
stateObj,
"preset_mode"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
}
return html`
<div class="container">
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass!.formatEntityAttributeName(
stateObj,
"preset_mode"
)}
.value=${this._currentPresetMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentPresetMode
? html`<ha-attribute-icon
slot="icon"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="preset_mode"
.attributeValue=${this._currentPresetMode}
></ha-attribute-icon>`
: html`
<ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
</div>
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
.value=${this._currentPresetMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentPresetMode
? html`<ha-attribute-icon
slot="icon"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="preset_mode"
.attributeValue=${this._currentPresetMode}
></ha-attribute-icon>`
: html`
<ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
`;
}
static get styles() {
return css`
ha-control-select-menu {
box-sizing: border-box;
--control-select-menu-height: 40px;
--control-select-menu-border-radius: 10px;
line-height: 1.2;
display: block;
width: 100%;
}
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;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

95
src/panels/lovelace/card-features/hui-fan-speed-card-feature.ts
View File

@ -24,6 +24,7 @@ import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { FanSpeedCardFeatureConfig } from "./types";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
import { cardFeatureStyles } from "./common/card-feature-styles";
export const supportsFanSpeedCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id);
@ -88,35 +89,11 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
const speed = fanPercentageToSpeed(this.stateObj, percentage);
return html`
<div class="container">
<ha-control-select
.options=${options}
.value=${speed}
@value-changed=${this._speedValueChanged}
hide-label
.ariaLabel=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this.hass.entities,
"percentage"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
</div>
`;
}
const value = Math.max(Math.round(percentage), 0);
return html`
<div class="container">
<ha-control-slider
.value=${value}
min="0"
max="100"
.step=${this.stateObj.attributes.percentage_step ?? 1}
@value-changed=${this._valueChanged}
<ha-control-select
.options=${options}
.value=${speed}
@value-changed=${this._speedValueChanged}
hide-label
.ariaLabel=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
@ -124,10 +101,30 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
"percentage"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.unit=${DOMAIN_ATTRIBUTES_UNITS.fan.percentage}
.locale=${this.hass.locale}
></ha-control-slider>
</div>
>
</ha-control-select>
`;
}
const value = Math.max(Math.round(percentage), 0);
return html`
<ha-control-slider
.value=${value}
min="0"
max="100"
.step=${this.stateObj.attributes.percentage_step ?? 1}
@value-changed=${this._valueChanged}
.ariaLabel=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this.hass.entities,
"percentage"
)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
.unit=${DOMAIN_ATTRIBUTES_UNITS.fan.percentage}
.locale=${this.hass.locale}
></ha-control-slider>
`;
}
@ -153,28 +150,16 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
}
static get styles() {
return css`
ha-control-slider {
--control-slider-color: var(--feature-color);
--control-slider-background: var(--feature-color);
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
ha-control-select {
--control-select-color: var(--feature-color);
--control-select-background: var(--feature-color);
--control-select-background-opacity: 0.2;
--control-select-padding: 0;
--control-select-thickness: 40px;
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return [
cardFeatureStyles,
css`
ha-control-select {
/* Color the background to match the slider style */
--control-select-background: var(--feature-color);
--control-select-background-opacity: 0.2;
}
`,
];
}
}

111
src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts
View File

@ -1,6 +1,6 @@
import { mdiTuneVariant } 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, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -17,8 +17,9 @@ import {
} from "../../../data/humidifier";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { HumidifierModesCardFeatureConfig } from "./types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import { HumidifierModesCardFeatureConfig } from "./types";
export const supportsHumidifierModesCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id);
@ -143,79 +144,55 @@ class HuiHumidifierModesCardFeature
if (this._config.style === "icons") {
return html`
<div class="container">
<ha-control-select
.options=${options}
.value=${this._currentMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass!.formatEntityAttributeName(stateObj, "mode")}
.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!.formatEntityAttributeName(stateObj, "mode")}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
`;
}
return html`
<div class="container">
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "mode")}
.value=${this._currentMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentMode
? html`<ha-attribute-icon
slot="icon"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="mode"
.attributeValue=${this._currentMode}
></ha-attribute-icon>`
: html`<ha-svg-icon
slot="icon"
.path=${mdiTuneVariant}
></ha-svg-icon>`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
</div>
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass!.formatEntityAttributeName(stateObj, "mode")}
.value=${this._currentMode}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${this._currentMode
? html`<ha-attribute-icon
slot="icon"
.hass=${this.hass}
.stateObj=${stateObj}
attribute="mode"
.attributeValue=${this._currentMode}
></ha-attribute-icon>`
: html`<ha-svg-icon
slot="icon"
.path=${mdiTuneVariant}
></ha-svg-icon>`}
${options.map(
(option) => html`
<ha-list-item .value=${option.value} graphic="icon">
${option.icon}${option.label}
</ha-list-item>
`
)}
</ha-control-select-menu>
`;
}
static get styles() {
return css`
ha-control-select-menu {
box-sizing: border-box;
--control-select-menu-height: 40px;
--control-select-menu-border-radius: 10px;
line-height: 1.2;
display: block;
width: 100%;
}
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;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

43
src/panels/lovelace/card-features/hui-humidifier-toggle-card-feature.ts
View File

@ -1,6 +1,6 @@
import { mdiPower, mdiWaterPercent } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { LitElement, PropertyValues, TemplateResult, css, html } from "lit";
import { LitElement, PropertyValues, TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -11,6 +11,7 @@ import { UNAVAILABLE } from "../../../data/entity";
import { HumidifierEntity, HumidifierState } from "../../../data/humidifier";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { HumidifierToggleCardFeatureConfig } from "./types";
export const supportsHumidifierToggleCardFeature = (stateObj: HassEntity) => {
@ -95,37 +96,23 @@ class HuiHumidifierToggleCardFeature
}));
return html`
<div class="container">
<ha-control-select
.options=${options}
.value=${this._currentState}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass.localize("ui.card.humidifier.state")}
style=${styleMap({
"--control-select-color": color,
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
</div>
<ha-control-select
.options=${options}
.value=${this._currentState}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass.localize("ui.card.humidifier.state")}
style=${styleMap({
"--control-select-color": color,
})}
.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;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

10
src/panels/lovelace/card-features/hui-lawn-mower-commands-card-feature.ts
View File

@ -1,6 +1,6 @@
import { mdiHomeImportOutline, mdiPause, mdiPlay } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { LitElement, css, html, nothing } from "lit";
import { LitElement, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { supportsFeature } from "../../../common/entity/supports-feature";
@ -14,6 +14,7 @@ import {
} from "../../../data/lawn_mower";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import {
LAWN_MOWER_COMMANDS,
LawnMowerCommand,
@ -171,12 +172,7 @@ class HuiLawnMowerCommandCardFeature
}
static get styles() {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;
return cardFeatureStyles;
}
}

41
src/panels/lovelace/card-features/hui-light-brightness-card-feature.ts
View File

@ -1,5 +1,5 @@
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { stateActive } from "../../../common/entity/state_active";
@ -8,6 +8,7 @@ import { UNAVAILABLE } from "../../../data/entity";
import { lightSupportsBrightness } from "../../../data/light";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { LightBrightnessCardFeatureConfig } from "./types";
export const supportsLightBrightnessCardFeature = (stateObj: HassEntity) => {
@ -58,19 +59,17 @@ class HuiLightBrightnessCardFeature
: undefined;
return html`
<div class="container">
<ha-control-slider
.value=${position}
min="1"
max="100"
.showHandle=${stateActive(this.stateObj)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
@value-changed=${this._valueChanged}
.label=${this.hass.localize("ui.card.light.brightness")}
unit="%"
.locale=${this.hass.locale}
></ha-control-slider>
</div>
<ha-control-slider
.value=${position}
min="1"
max="100"
.showHandle=${stateActive(this.stateObj)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
@value-changed=${this._valueChanged}
.label=${this.hass.localize("ui.card.light.brightness")}
unit="%"
.locale=${this.hass.locale}
></ha-control-slider>
`;
}
@ -85,19 +84,7 @@ class HuiLightBrightnessCardFeature
}
static get styles() {
return css`
ha-control-slider {
--control-slider-color: var(--feature-color);
--control-slider-background: var(--feature-color);
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

61
src/panels/lovelace/card-features/hui-light-color-temp-card-feature.ts
View File

@ -16,6 +16,7 @@ import { LightColorMode, lightSupportsColorMode } from "../../../data/light";
import { generateColorTemperatureGradient } from "../../../dialogs/more-info/components/lights/light-color-temp-picker";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { LightColorTempCardFeatureConfig } from "./types";
export const supportsLightColorTempCardFeature = (stateObj: HassEntity) => {
@ -73,23 +74,21 @@ class HuiLightColorTempCardFeature
const gradient = this._generateTemperatureGradient(minKelvin!, maxKelvin);
return html`
<div class="container">
<ha-control-slider
.value=${position}
mode="cursor"
.showHandle=${stateActive(this.stateObj)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
@value-changed=${this._valueChanged}
.label=${this.hass.localize("ui.card.light.color_temperature")}
.min=${minKelvin}
.max=${maxKelvin}
style=${styleMap({
"--gradient": gradient,
})}
.unit=${DOMAIN_ATTRIBUTES_UNITS.light.color_temp_kelvin}
.locale=${this.hass.locale}
></ha-control-slider>
</div>
<ha-control-slider
.value=${position}
mode="cursor"
.showHandle=${stateActive(this.stateObj)}
.disabled=${this.stateObj!.state === UNAVAILABLE}
@value-changed=${this._valueChanged}
.label=${this.hass.localize("ui.card.light.color_temperature")}
.min=${minKelvin}
.max=${maxKelvin}
style=${styleMap({
"--gradient": gradient,
})}
.unit=${DOMAIN_ATTRIBUTES_UNITS.light.color_temp_kelvin}
.locale=${this.hass.locale}
></ha-control-slider>
`;
}
@ -108,22 +107,18 @@ class HuiLightColorTempCardFeature
}
static get styles() {
return css`
ha-control-slider {
--control-slider-color: var(--feature-color);
--control-slider-background: -webkit-linear-gradient(
left,
var(--gradient)
);
--control-slider-background-opacity: 1;
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return [
cardFeatureStyles,
css`
ha-control-slider {
--control-slider-background: -webkit-linear-gradient(
left,
var(--gradient)
);
--control-slider-background-opacity: 1;
}
`,
];
}
}

10
src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts
View File

@ -1,6 +1,6 @@
import { mdiLock, mdiLockOpenVariant } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { CSSResultGroup, LitElement, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -14,6 +14,7 @@ import {
} from "../../../data/lock";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { LockCommandsCardFeatureConfig } from "./types";
export const supportsLockCommandsCardFeature = (stateObj: HassEntity) => {
@ -88,12 +89,7 @@ class HuiLockCommandsCardFeature
}
static get styles(): CSSResultGroup {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;
return cardFeatureStyles;
}
}

58
src/panels/lovelace/card-features/hui-lock-open-door-card-feature.ts
View File

@ -15,6 +15,7 @@ import {
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { LockOpenDoorCardFeatureConfig } from "./types";
import { cardFeatureStyles } from "./common/card-feature-styles";
export const supportsLockOpenDoorCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id);
@ -112,35 +113,34 @@ class HuiLockOpenDoorCardFeature
}
static get styles(): CSSResultGroup {
return css`
ha-control-button {
font-size: 14px;
}
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
.open-button {
width: 130px;
}
.open-button.confirm {
--control-button-background-color: var(--warning-color);
}
.open-done {
font-size: 14px;
line-height: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
gap: 8px;
font-weight: 500;
color: var(--success-color);
margin: 0 12px 12px 12px;
height: 40px;
text-align: center;
}
`;
return [
cardFeatureStyles,
css`
ha-control-button {
font-size: 14px;
}
.open-button {
width: 130px;
}
.open-button.confirm {
--control-button-background-color: var(--warning-color);
}
.open-done {
font-size: 14px;
line-height: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
gap: 8px;
font-weight: 500;
color: var(--success-color);
margin: 0 12px 12px 12px;
height: 40px;
text-align: center;
}
`,
];
}
}

75
src/panels/lovelace/card-features/hui-numeric-input-card-feature.ts
View File

@ -1,16 +1,17 @@
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing, PropertyValues } from "lit";
import { html, LitElement, nothing, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { isUnavailableState } from "../../../data/entity";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { NumericInputCardFeatureConfig } from "./types";
import "../../../components/ha-control-button";
import "../../../components/ha-control-button-group";
import "../../../components/ha-control-number-buttons";
import "../../../components/ha-control-slider";
import "../../../components/ha-icon";
import { isUnavailableState } from "../../../data/entity";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { NumericInputCardFeatureConfig } from "./types";
export const supportsNumericInputCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id);
@ -81,50 +82,36 @@ class HuiNumericInputCardFeature
const stateObj = this.stateObj;
if (this._config.style === "buttons") {
return html`
<ha-control-number-buttons
value=${stateObj.state}
min=${stateObj.attributes.min}
max=${stateObj.attributes.max}
step=${stateObj.attributes.step}
@value-changed=${this._setValue}
.disabled=${isUnavailableState(stateObj.state)}
.unit=${stateObj.attributes.unit_of_measurement}
.locale=${this.hass.locale}
></ha-control-number-buttons>
`;
}
return html`
<div class="container">
${this._config.style === "buttons"
? html`<ha-control-number-buttons
value=${stateObj.state}
min=${stateObj.attributes.min}
max=${stateObj.attributes.max}
step=${stateObj.attributes.step}
@value-changed=${this._setValue}
.disabled=${isUnavailableState(stateObj.state)}
.unit=${stateObj.attributes.unit_of_measurement}
.locale=${this.hass.locale}
></ha-control-number-buttons>`
: html`<ha-control-slider
value=${stateObj.state}
min=${stateObj.attributes.min}
max=${stateObj.attributes.max}
step=${stateObj.attributes.step}
@value-changed=${this._setValue}
.disabled=${isUnavailableState(stateObj.state)}
.unit=${stateObj.attributes.unit_of_measurement}
.locale=${this.hass.locale}
></ha-control-slider>`}
</div>
<ha-control-slider
value=${stateObj.state}
min=${stateObj.attributes.min}
max=${stateObj.attributes.max}
step=${stateObj.attributes.step}
@value-changed=${this._setValue}
.disabled=${isUnavailableState(stateObj.state)}
.unit=${stateObj.attributes.unit_of_measurement}
.locale=${this.hass.locale}
></ha-control-slider>
`;
}
static get styles() {
return css`
ha-control-number-buttons {
width: auto;
}
ha-control-slider {
--control-slider-color: var(--feature-color);
--control-slider-background: var(--feature-color);
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

60
src/panels/lovelace/card-features/hui-select-options-card-feature.ts
View File

@ -1,5 +1,5 @@
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing, PropertyValues } from "lit";
import { html, LitElement, nothing, PropertyValues } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -10,8 +10,9 @@ import { InputSelectEntity } from "../../../data/input_select";
import { SelectEntity } from "../../../data/select";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { SelectOptionsCardFeatureConfig } from "./types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import { SelectOptionsCardFeatureConfig } from "./types";
export const supportsSelectOptionsCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id);
@ -119,45 +120,30 @@ class HuiSelectOptionsCardFeature
);
return html`
<div class="container">
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass.localize("ui.card.select.option")}
.value=${stateObj.state}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${options.map(
(option) => html`
<ha-list-item .value=${option}>
${this.hass!.formatEntityState(stateObj, option)}
</ha-list-item>
`
)}
</ha-control-select-menu>
</div>
<ha-control-select-menu
show-arrow
hide-label
.label=${this.hass.localize("ui.card.select.option")}
.value=${stateObj.state}
.disabled=${this.stateObj.state === UNAVAILABLE}
fixedMenuPosition
naturalMenuWidth
@selected=${this._valueChanged}
@closed=${stopPropagation}
>
${options.map(
(option) => html`
<ha-list-item .value=${option}>
${this.hass!.formatEntityState(stateObj, option)}
</ha-list-item>
`
)}
</ha-control-select-menu>
`;
}
static get styles() {
return css`
ha-control-select-menu {
box-sizing: border-box;
--control-select-menu-height: 40px;
--control-select-menu-border-radius: 10px;
line-height: 1.2;
display: block;
width: 100%;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

44
src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts
View File

@ -1,5 +1,5 @@
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing, PropertyValues } from "lit";
import { html, LitElement, nothing, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import "../../../components/ha-control-slider";
@ -7,6 +7,7 @@ import { UNAVAILABLE } from "../../../data/entity";
import { HumidifierEntity } from "../../../data/humidifier";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { TargetHumidityCardFeatureConfig } from "./types";
export const supportsTargetHumidityCardFeature = (stateObj: HassEntity) => {
@ -84,39 +85,22 @@ class HuiTargetHumidityCardFeature
}
return html`
<div class="container">
<ha-control-slider
.value=${this.stateObj.attributes.humidity}
.min=${this._min}
.max=${this._max}
.step=${this._step}
.disabled=${this.stateObj!.state === UNAVAILABLE}
@value-changed=${this._valueChanged}
.label=${this.hass.formatEntityAttributeName(
this.stateObj,
"humidity"
)}
unit="%"
.locale=${this.hass.locale}
></ha-control-slider>
</div>
<ha-control-slider
.value=${this.stateObj.attributes.humidity}
.min=${this._min}
.max=${this._max}
.step=${this._step}
.disabled=${this.stateObj!.state === UNAVAILABLE}
@value-changed=${this._valueChanged}
.label=${this.hass.formatEntityAttributeName(this.stateObj, "humidity")}
unit="%"
.locale=${this.hass.locale}
></ha-control-slider>
`;
}
static get styles() {
return css`
ha-control-slider {
--control-slider-color: var(--feature-color);
--control-slider-background: var(--feature-color);
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
return cardFeatureStyles;
}
}

10
src/panels/lovelace/card-features/hui-target-temperature-card-feature.ts
View File

@ -1,5 +1,5 @@
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing, PropertyValues } from "lit";
import { html, LitElement, nothing, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { UNIT_F } from "../../../common/const";
@ -18,6 +18,7 @@ import {
} from "../../../data/water_heater";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { TargetTemperatureCardFeatureConfig } from "./types";
type Target = "value" | "low" | "high";
@ -283,12 +284,7 @@ class HuiTargetTemperatureCardFeature
}
static get styles() {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;
return cardFeatureStyles;
}
}

10
src/panels/lovelace/card-features/hui-update-actions-card-feature.ts
View File

@ -1,6 +1,6 @@
import { mdiCancel, mdiCellphoneArrowDown } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { LitElement, css, html, nothing } from "lit";
import { LitElement, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { stateActive } from "../../../common/entity/state_active";
@ -16,6 +16,7 @@ import {
import { showUpdateBackupDialogParams } from "../../../dialogs/update_backup/show-update-backup-dialog";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { UpdateActionsCardFeatureConfig } from "./types";
export const DEFAULT_UPDATE_BACKUP_OPTION = "ask";
@ -149,12 +150,7 @@ class HuiUpdateActionsCardFeature
}
static get styles() {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;
return cardFeatureStyles;
}
}

10
src/panels/lovelace/card-features/hui-vacuum-commands-card-feature.ts
View File

@ -8,7 +8,7 @@ import {
mdiTargetVariant,
} from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { LitElement, css, html, nothing } from "lit";
import { LitElement, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain";
import { supportsFeature } from "../../../common/entity/supports-feature";
@ -25,6 +25,7 @@ import {
} from "../../../data/vacuum";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import {
VACUUM_COMMANDS,
VacuumCommand,
@ -210,12 +211,7 @@ class HuiVacuumCommandCardFeature
}
static get styles() {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;
return cardFeatureStyles;
}
}

49
src/panels/lovelace/card-features/hui-water-heater-operation-modes-card-feature.ts
View File

@ -1,5 +1,5 @@
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 { computeDomain } from "../../../common/entity/compute_domain";
@ -18,8 +18,9 @@ import {
} from "../../../data/water_heater";
import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { WaterHeaterOperationModesCardFeatureConfig } from "./types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes";
import { WaterHeaterOperationModesCardFeatureConfig } from "./types";
export const supportsWaterHeaterOperationModesCardFeature = (
stateObj: HassEntity
@ -118,41 +119,23 @@ class HuiWaterHeaterOperationModeCardFeature
}));
return html`
<div class="container">
<ha-control-select
.options=${options}
.value=${this._currentOperationMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass.localize("ui.card.water_heater.mode")}
style=${styleMap({
"--control-select-color": color,
})}
.disabled=${this.stateObj!.state === UNAVAILABLE}
>
</ha-control-select>
</div>
<ha-control-select
.options=${options}
.value=${this._currentOperationMode}
@value-changed=${this._valueChanged}
hide-label
.ariaLabel=${this.hass.localize("ui.card.water_heater.mode")}
style=${styleMap({
"--control-select-color": color,
})}
.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;
}
}

117
src/panels/lovelace/cards/hui-tile-card.ts
View File

@ -113,8 +113,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
let grid_min_columns = 2;
let grid_rows = 1;
if (this._config?.features?.length) {
const featureHeight = Math.ceil((this._config.features.length * 2) / 3);
grid_rows += featureHeight;
grid_rows += this._config.features.length;
}
if (this._config?.vertical) {
grid_rows++;
@ -279,51 +278,53 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
>
<ha-ripple .disabled=${!this.hasCardAction}></ha-ripple>
</div>
<div class="content ${classMap(contentClasses)}">
<div
class="icon-container"
role=${ifDefined(this.hasIconAction ? "button" : undefined)}
tabindex=${ifDefined(this.hasIconAction ? "0" : undefined)}
@action=${this._handleIconAction}
.actionHandler=${actionHandler()}
>
${imageUrl
? html`
<ha-tile-image
.imageStyle=${DOMAIN_IMAGE_STYLE[domain] || "circle"}
.imageUrl=${imageUrl}
></ha-tile-image>
`
: html`
<ha-tile-icon
data-domain=${ifDefined(domain)}
data-state=${ifDefined(stateObj?.state)}
>
<ha-state-icon
.icon=${this._config.icon}
.stateObj=${stateObj}
.hass=${this.hass}
></ha-state-icon>
</ha-tile-icon>
`}
${renderTileBadge(stateObj, this.hass)}
<div class="container">
<div class="content ${classMap(contentClasses)}">
<div
class="icon-container"
role=${ifDefined(this.hasIconAction ? "button" : undefined)}
tabindex=${ifDefined(this.hasIconAction ? "0" : undefined)}
@action=${this._handleIconAction}
.actionHandler=${actionHandler()}
>
${imageUrl
? html`
<ha-tile-image
.imageStyle=${DOMAIN_IMAGE_STYLE[domain] || "circle"}
.imageUrl=${imageUrl}
></ha-tile-image>
`
: html`
<ha-tile-icon
data-domain=${ifDefined(domain)}
data-state=${ifDefined(stateObj?.state)}
>
<ha-state-icon
.icon=${this._config.icon}
.stateObj=${stateObj}
.hass=${this.hass}
></ha-state-icon>
</ha-tile-icon>
`}
${renderTileBadge(stateObj, this.hass)}
</div>
<ha-tile-info
id="info"
.primary=${name}
.secondary=${localizedState}
></ha-tile-info>
</div>
<ha-tile-info
id="info"
.primary=${name}
.secondary=${localizedState}
></ha-tile-info>
${this._config.features
? html`
<hui-card-features
.hass=${this.hass}
.stateObj=${stateObj}
.color=${this._config.color}
.features=${this._config.features}
></hui-card-features>
`
: nothing}
</div>
${this._config.features
? html`
<hui-card-features
.hass=${this.hass}
.stateObj=${stateObj}
.color=${this._config.color}
.features=${this._config.features}
></hui-card-features>
`
: nothing}
</ha-card>
`;
}
@ -371,31 +372,43 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
margin: calc(-1 * var(--ha-card-border-width, 1px));
overflow: hidden;
}
.container {
margin: calc(-1 * var(--ha-card-border-width, 1px));
display: flex;
flex-direction: column;
flex: 1;
}
.content {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
padding: 12px;
padding: 0 10px;
min-height: var(--row-height, 56px);
flex: 1;
pointer-events: none;
}
.vertical {
flex-direction: column;
text-align: center;
justify-content: center;
}
.vertical .icon-container {
margin-bottom: 12px;
margin-bottom: 10px;
margin-right: 0;
margin-inline-start: initial;
margin-inline-end: initial;
}
.vertical ha-tile-info {
width: 100%;
flex: none;
}
.icon-container {
position: relative;
flex: none;
margin-right: 12px;
margin-right: 10px;
margin-inline-start: initial;
margin-inline-end: 12px;
margin-inline-end: 10px;
direction: var(--direction);
transition: transform 180ms ease-in-out;
}
@ -414,8 +427,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
inset-inline-end: -3px;
inset-inline-start: initial;
}
.icon-container:not([role="button"]) {
pointer-events: none;
.icon-container[role="button"] {
pointer-events: auto;
}
.icon-container[role="button"]:focus-visible,
.icon-container[role="button"]:active {
@ -423,11 +436,9 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
}
ha-tile-info {
position: relative;
flex: 1;
min-width: 0;
transition: background-color 180ms ease-in-out;
box-sizing: border-box;
pointer-events: none;
}
hui-card-features {
--feature-color: var(--tile-color);

2
src/panels/lovelace/sections/hui-grid-section.ts
View File

@ -214,7 +214,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
--column-count: 4;
--row-gap: var(--ha-section-grid-row-gap, 8px);
--column-gap: var(--ha-section-grid-column-gap, 8px);
--row-height: 66px;
--row-height: var(--ha-section-grid-row-height, 56px);
display: flex;
flex-direction: column;
gap: var(--row-gap);