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

Fix feature padding

Browse Source
This commit is contained in:
Paul Bottein 2024-05-27 12:11:28 +02:00
parent 60c7a0e545
commit d3c83e0157
No known key found for this signature in database
24 changed files with 431 additions and 560 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/panels/lovelace/card-features/hui-alarm-modes-card-feature.ts
View File

@ -184,23 +184,21 @@ 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>
`;
}
@ -214,13 +212,8 @@ class HuiAlarmModeCardFeature
--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;
}
`;
}
}

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

@ -140,54 +140,50 @@ 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>
`;
}
@ -208,10 +204,6 @@ class HuiClimateFanModesCardFeature
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
}
}

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

@ -139,55 +139,51 @@ 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>
`;
}
@ -207,9 +203,6 @@ class HuiClimateHvacModesCardFeature
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
.container {
width: auto;
}
`;
}
}

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

@ -142,59 +142,52 @@ 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>
`;
}
@ -215,9 +208,6 @@ class HuiClimatePresetModesCardFeature
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
.container {
width: auto;
}
`;
}
}

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

@ -142,57 +142,53 @@ 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>
`;
}
@ -213,10 +209,6 @@ class HuiClimateSwingModesCardFeature
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
}
}

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

@ -130,7 +130,6 @@ class HuiCoverOpenCloseCardFeature
static get styles() {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;

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

@ -78,26 +78,25 @@ class HuiCoverPositionCardFeature
};
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>
`;
}
@ -120,10 +119,6 @@ class HuiCoverPositionCardFeature
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
}
}

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

@ -122,7 +122,6 @@ class HuiCoverTiltCardFeature
static get styles() {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;

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

@ -78,27 +78,26 @@ class HuiCoverTiltPositionCardFeature
};
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>
`;
}
@ -122,10 +121,6 @@ class HuiCoverTiltPositionCardFeature
--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;

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

@ -139,59 +139,52 @@ 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>
`;
}
@ -212,10 +205,6 @@ class HuiFanPresetModesCardFeature
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
}
}

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

@ -88,35 +88,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 +100,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>
`;
}
@ -170,10 +166,6 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
}
}

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

@ -143,54 +143,50 @@ 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>
`;
}
@ -211,10 +207,6 @@ class HuiHumidifierModesCardFeature
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
}
}

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

@ -95,20 +95,18 @@ 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>
`;
}
@ -121,10 +119,6 @@ class HuiHumidifierToggleCardFeature
--control-select-border-radius: 10px;
--control-select-button-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
}
}

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

@ -173,7 +173,6 @@ class HuiLawnMowerCommandCardFeature
static get styles() {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;

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

@ -58,19 +58,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>
`;
}
@ -93,9 +91,6 @@ class HuiLightBrightnessCardFeature
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
.container {
width: auto;
}
`;
}
}

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

@ -73,23 +73,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>
`;
}
@ -119,9 +117,6 @@ class HuiLightColorTempCardFeature
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
.container {
width: auto;
}
`;
}
}

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

@ -90,7 +90,6 @@ class HuiLockCommandsCardFeature
static get styles(): CSSResultGroup {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;

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

@ -117,7 +117,6 @@ class HuiLockOpenDoorCardFeature
font-size: 14px;
}
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
.open-button {
@ -136,7 +135,6 @@ class HuiLockOpenDoorCardFeature
gap: 8px;
font-weight: 500;
color: var(--success-color);
margin: 0 12px 12px 12px;
height: 40px;
text-align: center;
}

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

@ -82,29 +82,27 @@ class HuiNumericInputCardFeature
const stateObj = this.stateObj;
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>
${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>`}
`;
}
@ -120,10 +118,6 @@ class HuiNumericInputCardFeature
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
}
}

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

@ -119,27 +119,25 @@ 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>
`;
}
@ -153,10 +151,6 @@ class HuiSelectOptionsCardFeature
display: block;
width: 100%;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
}
}

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

@ -84,22 +84,17 @@ 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>
`;
}
@ -112,10 +107,6 @@ class HuiTargetHumidityCardFeature
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`;
}
}

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

@ -151,7 +151,6 @@ class HuiUpdateActionsCardFeature
static get styles() {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;

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

@ -212,7 +212,6 @@ class HuiVacuumCommandCardFeature
static get styles() {
return css`
ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px;
}
`;

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

@ -118,20 +118,18 @@ 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>
`;
}
@ -145,13 +143,8 @@ class HuiWaterHeaterOperationModeCardFeature
--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;
}
`;
}
}