jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +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 value?: GridSizeValue;
@property({ attribute: false }) public rows = 6; @property({ attribute: false }) public rows = 8;
@property({ attribute: false }) public columns = 4; @property({ attribute: false }) public columns = 4;
@ -205,7 +205,7 @@ export class HaGridSizeEditor extends LitElement {
.preview { .preview {
position: relative; position: relative;
grid-area: preview; grid-area: preview;
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1.2;
} }
.preview > div { .preview > div {
position: absolute; position: absolute;

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

@ -17,7 +17,7 @@ export class HaTileIcon extends LitElement {
return css` return css`
:host { :host {
--tile-icon-color: var(--disabled-color); --tile-icon-color: var(--disabled-color);
--mdc-icon-size: 24px; --mdc-icon-size: 22px;
} }
.shape::before { .shape::before {
content: ""; content: "";
@ -32,9 +32,9 @@ export class HaTileIcon extends LitElement {
} }
.shape { .shape {
position: relative; position: relative;
width: 40px; width: 36px;
height: 40px; height: 36px;
border-radius: 20px; border-radius: 18px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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` return css`
.image { .image {
position: relative; position: relative;
width: 40px; width: 36px;
height: 40px; height: 36px;
border-radius: 20px; border-radius: 18px;
display: flex; display: flex;
flex: none; flex: none;
align-items: center; 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; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
min-height: 40px; height: 36px;
} }
span { span {
text-overflow: ellipsis; 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 { mdiShieldOff } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket"; 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 { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -21,6 +21,7 @@ import {
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types"; import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes"; import { filterModes } from "./common/filter-modes";
import { AlarmModesCardFeatureConfig } from "./types"; import { AlarmModesCardFeatureConfig } from "./types";
@ -135,44 +136,26 @@ class HuiAlarmModeCardFeature
} }
return html` return html`
<div class="container"> <ha-control-select
<ha-control-select .options=${options}
.options=${options} .value=${this._currentMode}
.value=${this._currentMode} @value-changed=${this._valueChanged}
@value-changed=${this._valueChanged} hide-label
hide-label .ariaLabel=${this.hass.localize(
.ariaLabel=${this.hass.localize( "ui.card.alarm_control_panel.modes_label"
"ui.card.alarm_control_panel.modes_label" )}
)} style=${styleMap({
style=${styleMap({ "--control-select-color": color,
"--control-select-color": color, "--modes-count": options.length.toString(),
"--modes-count": options.length.toString(), })}
})} .disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this.stateObj!.state === UNAVAILABLE} >
> </ha-control-select>
</ha-control-select>
</div>
`; `;
} }
static get styles() { static get styles() {
return css` return cardFeatureStyles;
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;
}
`;
} }
} }

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 type { HassEntity } from "home-assistant-js-websocket";
import { import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
CSSResultGroup,
LitElement,
TemplateResult,
css,
html,
nothing,
} from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import type { HuiErrorCard } from "../cards/hui-error-card"; import "./hui-card-feature";
import { createCardFeatureElement } from "../create-element/create-card-feature-element";
import type { LovelaceCardFeature } from "../types";
import type { LovelaceCardFeatureConfig } from "./types"; import type { LovelaceCardFeatureConfig } from "./types";
@customElement("hui-card-features") @customElement("hui-card-features")
@ -24,44 +15,23 @@ export class HuiCardFeatures extends LitElement {
@property({ attribute: false }) public color?: string; @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() { protected render() {
if (!this.features) { if (!this.features) {
return nothing; return nothing;
} }
return html` return html`
${this.features.map((featureConf) => <div class="container">
this.renderFeature(featureConf, this.stateObj) ${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` return css`
:host { :host {
--feature-color: var(--state-icon-color); --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; display: flex;
flex-direction: column; 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 { mdiFan } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket"; 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 { customElement, property, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } 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 { filterModes } from "./common/filter-modes";
import { ClimateFanModesCardFeatureConfig } from "./types";
export const supportsClimateFanModesCardFeature = (stateObj: HassEntity) => { export const supportsClimateFanModesCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id); const domain = computeDomain(stateObj.entity_id);
@ -140,79 +141,55 @@ class HuiClimateFanModesCardFeature
if (this._config.style === "icons") { if (this._config.style === "icons") {
return html` return html`
<div class="container"> <ha-control-select
<ha-control-select .options=${options}
.options=${options} .value=${this._currentFanMode}
.value=${this._currentFanMode} @value-changed=${this._valueChanged}
@value-changed=${this._valueChanged} hide-label
hide-label .ariaLabel=${this.hass!.formatEntityAttributeName(
.ariaLabel=${this.hass!.formatEntityAttributeName( stateObj,
stateObj, "fan_mode"
"fan_mode" )}
)} .disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this.stateObj!.state === UNAVAILABLE} >
> </ha-control-select>
</ha-control-select>
</div>
`; `;
} }
return html` return html`
<div class="container"> <ha-control-select-menu
<ha-control-select-menu show-arrow
show-arrow hide-label
hide-label .label=${this.hass!.formatEntityAttributeName(stateObj, "fan_mode")}
.label=${this.hass!.formatEntityAttributeName(stateObj, "fan_mode")} .value=${this._currentFanMode}
.value=${this._currentFanMode} .disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this.stateObj.state === UNAVAILABLE} fixedMenuPosition
fixedMenuPosition naturalMenuWidth
naturalMenuWidth @selected=${this._valueChanged}
@selected=${this._valueChanged} @closed=${stopPropagation}
@closed=${stopPropagation} >
> ${this._currentFanMode
${this._currentFanMode ? html`<ha-attribute-icon
? html`<ha-attribute-icon slot="icon"
slot="icon" .hass=${this.hass}
.hass=${this.hass} .stateObj=${stateObj}
.stateObj=${stateObj} attribute="fan_mode"
attribute="fan_mode" .attributeValue=${this._currentFanMode}
.attributeValue=${this._currentFanMode} ></ha-attribute-icon>`
></ha-attribute-icon>` : html` <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>`}
: html` <ha-svg-icon slot="icon" .path=${mdiFan}></ha-svg-icon>`} ${options.map(
${options.map( (option) => html`
(option) => html` <ha-list-item .value=${option.value} graphic="icon">
<ha-list-item .value=${option.value} graphic="icon"> ${option.icon}${option.label}
${option.icon}${option.label} </ha-list-item>
</ha-list-item> `
` )}
)} </ha-control-select-menu>
</ha-control-select-menu>
</div>
`; `;
} }
static get styles() { static get styles() {
return css` return cardFeatureStyles;
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;
}
`;
} }
} }

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 { mdiThermostat } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket"; 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 { customElement, property, query, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
@ -19,6 +19,7 @@ import {
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types"; import { LovelaceCardFeature, LovelaceCardFeatureEditor } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { filterModes } from "./common/filter-modes"; import { filterModes } from "./common/filter-modes";
import { ClimateHvacModesCardFeatureConfig } from "./types"; import { ClimateHvacModesCardFeatureConfig } from "./types";
@ -139,79 +140,56 @@ class HuiClimateHvacModesCardFeature
if (this._config.style === "dropdown") { if (this._config.style === "dropdown") {
return html` return html`
<div class="container"> <ha-control-select-menu
<ha-control-select-menu show-arrow
show-arrow hide-label
hide-label .label=${this.hass.localize("ui.card.climate.mode")}
.label=${this.hass.localize("ui.card.climate.mode")} .value=${this._currentHvacMode}
.value=${this._currentHvacMode} .disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this.stateObj.state === UNAVAILABLE} fixedMenuPosition
fixedMenuPosition naturalMenuWidth
naturalMenuWidth @selected=${this._valueChanged}
@selected=${this._valueChanged} @closed=${stopPropagation}
@closed=${stopPropagation} >
> ${this._currentHvacMode
${this._currentHvacMode ? html`
? html` <ha-svg-icon
<ha-svg-icon slot="icon"
slot="icon" .path=${climateHvacModeIcon(this._currentHvacMode)}
.path=${climateHvacModeIcon(this._currentHvacMode)} ></ha-svg-icon>
></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>
` `
)} : html`
</ha-control-select-menu> <ha-svg-icon slot="icon" .path=${mdiThermostat}></ha-svg-icon>
</div> `}
${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` return html`
<div class="container"> <ha-control-select
<ha-control-select .options=${options}
.options=${options} .value=${this._currentHvacMode}
.value=${this._currentHvacMode} @value-changed=${this._valueChanged}
@value-changed=${this._valueChanged} hide-label
hide-label .ariaLabel=${this.hass.localize("ui.card.climate.mode")}
.ariaLabel=${this.hass.localize("ui.card.climate.mode")} style=${styleMap({
style=${styleMap({ "--control-select-color": color,
"--control-select-color": color, })}
})} .disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this.stateObj!.state === UNAVAILABLE} >
> </ha-control-select>
</ha-control-select>
</div>
`; `;
} }
static get styles() { static get styles() {
return css` return cardFeatureStyles;
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;
}
`;
} }
} }

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 { mdiTuneVariant } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket"; 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 { customElement, property, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } 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 { filterModes } from "./common/filter-modes";
import { ClimatePresetModesCardFeatureConfig } from "./types";
export const supportsClimatePresetModesCardFeature = (stateObj: HassEntity) => { export const supportsClimatePresetModesCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id); const domain = computeDomain(stateObj.entity_id);
@ -142,84 +143,57 @@ class HuiClimatePresetModesCardFeature
if (this._config.style === "icons") { if (this._config.style === "icons") {
return html` return html`
<div class="container"> <ha-control-select
<ha-control-select .options=${options}
.options=${options} .value=${this._currentPresetMode}
.value=${this._currentPresetMode} @value-changed=${this._valueChanged}
@value-changed=${this._valueChanged} hide-label
hide-label .ariaLabel=${this.hass!.formatEntityAttributeName(
.ariaLabel=${this.hass!.formatEntityAttributeName( stateObj,
stateObj, "preset_mode"
"preset_mode" )}
)} .disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this.stateObj!.state === UNAVAILABLE} >
> </ha-control-select>
</ha-control-select>
</div>
`; `;
} }
return html` return html`
<div class="container"> <ha-control-select-menu
<ha-control-select-menu show-arrow
show-arrow hide-label
hide-label .label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
.label=${this.hass!.formatEntityAttributeName( .value=${this._currentPresetMode}
stateObj, .disabled=${this.stateObj.state === UNAVAILABLE}
"preset_mode" fixedMenuPosition
)} naturalMenuWidth
.value=${this._currentPresetMode} @selected=${this._valueChanged}
.disabled=${this.stateObj.state === UNAVAILABLE} @closed=${stopPropagation}
fixedMenuPosition >
naturalMenuWidth ${this._currentPresetMode
@selected=${this._valueChanged} ? html`<ha-attribute-icon
@closed=${stopPropagation} slot="icon"
> .hass=${this.hass}
${this._currentPresetMode .stateObj=${stateObj}
? html`<ha-attribute-icon attribute="preset_mode"
slot="icon" .attributeValue=${this._currentPresetMode}
.hass=${this.hass} ></ha-attribute-icon>`
.stateObj=${stateObj} : html`
attribute="preset_mode" <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
.attributeValue=${this._currentPresetMode} `}
></ha-attribute-icon>` ${options.map(
: html` (option) => html`
<ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon> <ha-list-item .value=${option.value} graphic="icon">
`} ${option.icon}${option.label}
${options.map( </ha-list-item>
(option) => html` `
<ha-list-item .value=${option.value} graphic="icon"> )}
${option.icon}${option.label} </ha-control-select-menu>
</ha-list-item>
`
)}
</ha-control-select-menu>
</div>
`; `;
} }
static get styles() { static get styles() {
return css` return cardFeatureStyles;
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;
}
`;
} }
} }

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 { mdiArrowOscillating } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket"; 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 { customElement, property, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
@ -14,8 +14,9 @@ import { ClimateEntity, ClimateEntityFeature } from "../../../data/climate";
import { UNAVAILABLE } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } 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 { filterModes } from "./common/filter-modes";
import { ClimateSwingModesCardFeatureConfig } from "./types";
export const supportsClimateSwingModesCardFeature = (stateObj: HassEntity) => { export const supportsClimateSwingModesCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id); const domain = computeDomain(stateObj.entity_id);
@ -142,82 +143,58 @@ class HuiClimateSwingModesCardFeature
if (this._config.style === "icons") { if (this._config.style === "icons") {
return html` return html`
<div class="container"> <ha-control-select
<ha-control-select .options=${options}
.options=${options} .value=${this._currentSwingMode}
.value=${this._currentSwingMode} @value-changed=${this._valueChanged}
@value-changed=${this._valueChanged} hide-label
hide-label .ariaLabel=${this.hass!.formatEntityAttributeName(
.ariaLabel=${this.hass!.formatEntityAttributeName( stateObj,
stateObj, "swing_mode"
"swing_mode" )}
)} .disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this.stateObj!.state === UNAVAILABLE} >
> </ha-control-select>
</ha-control-select>
</div>
`; `;
} }
return html` return html`
<div class="container"> <ha-control-select-menu
<ha-control-select-menu show-arrow
show-arrow hide-label
hide-label .label=${this.hass!.formatEntityAttributeName(stateObj, "swing_mode")}
.label=${this.hass!.formatEntityAttributeName(stateObj, "swing_mode")} .value=${this._currentSwingMode}
.value=${this._currentSwingMode} .disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this.stateObj.state === UNAVAILABLE} fixedMenuPosition
fixedMenuPosition naturalMenuWidth
naturalMenuWidth @selected=${this._valueChanged}
@selected=${this._valueChanged} @closed=${stopPropagation}
@closed=${stopPropagation} >
> ${this._currentSwingMode
${this._currentSwingMode ? html`<ha-attribute-icon
? html`<ha-attribute-icon slot="icon"
slot="icon" .hass=${this.hass}
.hass=${this.hass} .stateObj=${stateObj}
.stateObj=${stateObj} attribute="swing_mode"
attribute="swing_mode" .attributeValue=${this._currentSwingMode}
.attributeValue=${this._currentSwingMode} ></ha-attribute-icon>`
></ha-attribute-icon>` : html` <ha-svg-icon
: html` <ha-svg-icon slot="icon"
slot="icon" .path=${mdiArrowOscillating}
.path=${mdiArrowOscillating} ></ha-svg-icon>`}
></ha-svg-icon>`} ${options.map(
${options.map( (option) => html`
(option) => html` <ha-list-item .value=${option.value} graphic="icon">
<ha-list-item .value=${option.value} graphic="icon"> ${option.icon}${option.label}
${option.icon}${option.label} </ha-list-item>
</ha-list-item> `
` )}
)} </ha-control-select-menu>
</ha-control-select-menu>
</div>
`; `;
} }
static get styles() { static get styles() {
return css` return cardFeatureStyles;
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;
}
`;
} }
} }

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

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

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

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

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 { mdiTuneVariant } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket"; 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 { customElement, property, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain"; 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 type { ControlSelectOption } from "../../../components/ha-control-select";
import "../../../components/ha-control-select-menu"; import "../../../components/ha-control-select-menu";
import type { HaControlSelectMenu } from "../../../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 { UNAVAILABLE } from "../../../data/entity";
import { FanEntity, FanEntityFeature } from "../../../data/fan";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } 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 { filterModes } from "./common/filter-modes";
import { FanPresetModesCardFeatureConfig } from "./types";
export const supportsFanPresetModesCardFeature = (stateObj: HassEntity) => { export const supportsFanPresetModesCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id); const domain = computeDomain(stateObj.entity_id);
@ -139,84 +140,57 @@ class HuiFanPresetModesCardFeature
if (this._config.style === "icons") { if (this._config.style === "icons") {
return html` return html`
<div class="container"> <ha-control-select
<ha-control-select .options=${options}
.options=${options} .value=${this._currentPresetMode}
.value=${this._currentPresetMode} @value-changed=${this._valueChanged}
@value-changed=${this._valueChanged} hide-label
hide-label .ariaLabel=${this.hass!.formatEntityAttributeName(
.ariaLabel=${this.hass!.formatEntityAttributeName( stateObj,
stateObj, "preset_mode"
"preset_mode" )}
)} .disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this.stateObj!.state === UNAVAILABLE} >
> </ha-control-select>
</ha-control-select>
</div>
`; `;
} }
return html` return html`
<div class="container"> <ha-control-select-menu
<ha-control-select-menu show-arrow
show-arrow hide-label
hide-label .label=${this.hass!.formatEntityAttributeName(stateObj, "preset_mode")}
.label=${this.hass!.formatEntityAttributeName( .value=${this._currentPresetMode}
stateObj, .disabled=${this.stateObj.state === UNAVAILABLE}
"preset_mode" fixedMenuPosition
)} naturalMenuWidth
.value=${this._currentPresetMode} @selected=${this._valueChanged}
.disabled=${this.stateObj.state === UNAVAILABLE} @closed=${stopPropagation}
fixedMenuPosition >
naturalMenuWidth ${this._currentPresetMode
@selected=${this._valueChanged} ? html`<ha-attribute-icon
@closed=${stopPropagation} slot="icon"
> .hass=${this.hass}
${this._currentPresetMode .stateObj=${stateObj}
? html`<ha-attribute-icon attribute="preset_mode"
slot="icon" .attributeValue=${this._currentPresetMode}
.hass=${this.hass} ></ha-attribute-icon>`
.stateObj=${stateObj} : html`
attribute="preset_mode" <ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon>
.attributeValue=${this._currentPresetMode} `}
></ha-attribute-icon>` ${options.map(
: html` (option) => html`
<ha-svg-icon slot="icon" .path=${mdiTuneVariant}></ha-svg-icon> <ha-list-item .value=${option.value} graphic="icon">
`} ${option.icon}${option.label}
${options.map( </ha-list-item>
(option) => html` `
<ha-list-item .value=${option.value} graphic="icon"> )}
${option.icon}${option.label} </ha-control-select-menu>
</ha-list-item>
`
)}
</ha-control-select-menu>
</div>
`; `;
} }
static get styles() { static get styles() {
return css` return cardFeatureStyles;
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;
}
`;
} }
} }

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 { LovelaceCardFeature } from "../types";
import { FanSpeedCardFeatureConfig } from "./types"; import { FanSpeedCardFeatureConfig } from "./types";
import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes"; import { DOMAIN_ATTRIBUTES_UNITS } from "../../../data/entity_attributes";
import { cardFeatureStyles } from "./common/card-feature-styles";
export const supportsFanSpeedCardFeature = (stateObj: HassEntity) => { export const supportsFanSpeedCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id); const domain = computeDomain(stateObj.entity_id);
@ -88,35 +89,11 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
const speed = fanPercentageToSpeed(this.stateObj, percentage); const speed = fanPercentageToSpeed(this.stateObj, percentage);
return html` return html`
<div class="container"> <ha-control-select
<ha-control-select .options=${options}
.options=${options} .value=${speed}
.value=${speed} @value-changed=${this._speedValueChanged}
@value-changed=${this._speedValueChanged} hide-label
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}
.ariaLabel=${computeAttributeNameDisplay( .ariaLabel=${computeAttributeNameDisplay(
this.hass.localize, this.hass.localize,
this.stateObj, this.stateObj,
@ -124,10 +101,30 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
"percentage" "percentage"
)} )}
.disabled=${this.stateObj!.state === UNAVAILABLE} .disabled=${this.stateObj!.state === UNAVAILABLE}
.unit=${DOMAIN_ATTRIBUTES_UNITS.fan.percentage} >
.locale=${this.hass.locale} </ha-control-select>
></ha-control-slider> `;
</div> }
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() { static get styles() {
return css` return [
ha-control-slider { cardFeatureStyles,
--control-slider-color: var(--feature-color); css`
--control-slider-background: var(--feature-color); ha-control-select {
--control-slider-background-opacity: 0.2; /* Color the background to match the slider style */
--control-slider-thickness: 40px; --control-select-background: var(--feature-color);
--control-slider-border-radius: 10px; --control-select-background-opacity: 0.2;
} }
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;
}
`;
} }
} }

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

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

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

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

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 { 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 { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
import { stateActive } from "../../../common/entity/state_active"; import { stateActive } from "../../../common/entity/state_active";
@ -8,6 +8,7 @@ import { UNAVAILABLE } from "../../../data/entity";
import { lightSupportsBrightness } from "../../../data/light"; import { lightSupportsBrightness } from "../../../data/light";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types"; import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { LightBrightnessCardFeatureConfig } from "./types"; import { LightBrightnessCardFeatureConfig } from "./types";
export const supportsLightBrightnessCardFeature = (stateObj: HassEntity) => { export const supportsLightBrightnessCardFeature = (stateObj: HassEntity) => {
@ -58,19 +59,17 @@ class HuiLightBrightnessCardFeature
: undefined; : undefined;
return html` return html`
<div class="container"> <ha-control-slider
<ha-control-slider .value=${position}
.value=${position} min="1"
min="1" max="100"
max="100" .showHandle=${stateActive(this.stateObj)}
.showHandle=${stateActive(this.stateObj)} .disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this.stateObj!.state === UNAVAILABLE} @value-changed=${this._valueChanged}
@value-changed=${this._valueChanged} .label=${this.hass.localize("ui.card.light.brightness")}
.label=${this.hass.localize("ui.card.light.brightness")} unit="%"
unit="%" .locale=${this.hass.locale}
.locale=${this.hass.locale} ></ha-control-slider>
></ha-control-slider>
</div>
`; `;
} }
@ -85,19 +84,7 @@ class HuiLightBrightnessCardFeature
} }
static get styles() { static get styles() {
return css` return cardFeatureStyles;
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;
}
`;
} }
} }

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

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

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 { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types"; import { LovelaceCardFeature } from "../types";
import { LockOpenDoorCardFeatureConfig } from "./types"; import { LockOpenDoorCardFeatureConfig } from "./types";
import { cardFeatureStyles } from "./common/card-feature-styles";
export const supportsLockOpenDoorCardFeature = (stateObj: HassEntity) => { export const supportsLockOpenDoorCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id); const domain = computeDomain(stateObj.entity_id);
@ -112,35 +113,34 @@ class HuiLockOpenDoorCardFeature
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return [
ha-control-button { cardFeatureStyles,
font-size: 14px; css`
} ha-control-button {
ha-control-button-group { font-size: 14px;
margin: 0 12px 12px 12px; }
--control-button-group-spacing: 12px; .open-button {
} width: 130px;
.open-button { }
width: 130px; .open-button.confirm {
} --control-button-background-color: var(--warning-color);
.open-button.confirm { }
--control-button-background-color: var(--warning-color); .open-done {
} font-size: 14px;
.open-done { line-height: 14px;
font-size: 14px; display: flex;
line-height: 14px; align-items: center;
display: flex; justify-content: center;
align-items: center; flex-direction: row;
justify-content: center; gap: 8px;
flex-direction: row; font-weight: 500;
gap: 8px; color: var(--success-color);
font-weight: 500; margin: 0 12px 12px 12px;
color: var(--success-color); height: 40px;
margin: 0 12px 12px 12px; text-align: center;
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 { 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 { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain"; 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";
import "../../../components/ha-control-button-group"; import "../../../components/ha-control-button-group";
import "../../../components/ha-control-number-buttons"; import "../../../components/ha-control-number-buttons";
import "../../../components/ha-control-slider"; import "../../../components/ha-control-slider";
import "../../../components/ha-icon"; 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) => { export const supportsNumericInputCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id); const domain = computeDomain(stateObj.entity_id);
@ -81,50 +82,36 @@ class HuiNumericInputCardFeature
const stateObj = this.stateObj; 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` return html`
<div class="container"> <ha-control-slider
${this._config.style === "buttons" value=${stateObj.state}
? html`<ha-control-number-buttons min=${stateObj.attributes.min}
value=${stateObj.state} max=${stateObj.attributes.max}
min=${stateObj.attributes.min} step=${stateObj.attributes.step}
max=${stateObj.attributes.max} @value-changed=${this._setValue}
step=${stateObj.attributes.step} .disabled=${isUnavailableState(stateObj.state)}
@value-changed=${this._setValue} .unit=${stateObj.attributes.unit_of_measurement}
.disabled=${isUnavailableState(stateObj.state)} .locale=${this.hass.locale}
.unit=${stateObj.attributes.unit_of_measurement} ></ha-control-slider>
.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>
`; `;
} }
static get styles() { static get styles() {
return css` return cardFeatureStyles;
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;
}
`;
} }
} }

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 { 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 { customElement, property, query, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
@ -10,8 +10,9 @@ import { InputSelectEntity } from "../../../data/input_select";
import { SelectEntity } from "../../../data/select"; import { SelectEntity } from "../../../data/select";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature, LovelaceCardFeatureEditor } 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 { filterModes } from "./common/filter-modes";
import { SelectOptionsCardFeatureConfig } from "./types";
export const supportsSelectOptionsCardFeature = (stateObj: HassEntity) => { export const supportsSelectOptionsCardFeature = (stateObj: HassEntity) => {
const domain = computeDomain(stateObj.entity_id); const domain = computeDomain(stateObj.entity_id);
@ -119,45 +120,30 @@ class HuiSelectOptionsCardFeature
); );
return html` return html`
<div class="container"> <ha-control-select-menu
<ha-control-select-menu show-arrow
show-arrow hide-label
hide-label .label=${this.hass.localize("ui.card.select.option")}
.label=${this.hass.localize("ui.card.select.option")} .value=${stateObj.state}
.value=${stateObj.state} .disabled=${this.stateObj.state === UNAVAILABLE}
.disabled=${this.stateObj.state === UNAVAILABLE} fixedMenuPosition
fixedMenuPosition naturalMenuWidth
naturalMenuWidth @selected=${this._valueChanged}
@selected=${this._valueChanged} @closed=${stopPropagation}
@closed=${stopPropagation} >
> ${options.map(
${options.map( (option) => html`
(option) => html` <ha-list-item .value=${option}>
<ha-list-item .value=${option}> ${this.hass!.formatEntityState(stateObj, option)}
${this.hass!.formatEntityState(stateObj, option)} </ha-list-item>
</ha-list-item> `
` )}
)} </ha-control-select-menu>
</ha-control-select-menu>
</div>
`; `;
} }
static get styles() { static get styles() {
return css` return cardFeatureStyles;
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;
}
`;
} }
} }

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 { 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 { customElement, property, state } from "lit/decorators";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
import "../../../components/ha-control-slider"; import "../../../components/ha-control-slider";
@ -7,6 +7,7 @@ import { UNAVAILABLE } from "../../../data/entity";
import { HumidifierEntity } from "../../../data/humidifier"; import { HumidifierEntity } from "../../../data/humidifier";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceCardFeature } from "../types"; import { LovelaceCardFeature } from "../types";
import { cardFeatureStyles } from "./common/card-feature-styles";
import { TargetHumidityCardFeatureConfig } from "./types"; import { TargetHumidityCardFeatureConfig } from "./types";
export const supportsTargetHumidityCardFeature = (stateObj: HassEntity) => { export const supportsTargetHumidityCardFeature = (stateObj: HassEntity) => {
@ -84,39 +85,22 @@ class HuiTargetHumidityCardFeature
} }
return html` return html`
<div class="container"> <ha-control-slider
<ha-control-slider .value=${this.stateObj.attributes.humidity}
.value=${this.stateObj.attributes.humidity} .min=${this._min}
.min=${this._min} .max=${this._max}
.max=${this._max} .step=${this._step}
.step=${this._step} .disabled=${this.stateObj!.state === UNAVAILABLE}
.disabled=${this.stateObj!.state === UNAVAILABLE} @value-changed=${this._valueChanged}
@value-changed=${this._valueChanged} .label=${this.hass.formatEntityAttributeName(this.stateObj, "humidity")}
.label=${this.hass.formatEntityAttributeName( unit="%"
this.stateObj, .locale=${this.hass.locale}
"humidity" ></ha-control-slider>
)}
unit="%"
.locale=${this.hass.locale}
></ha-control-slider>
</div>
`; `;
} }
static get styles() { static get styles() {
return css` return cardFeatureStyles;
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;
}
`;
} }
} }

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

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

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

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

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

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