jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-01 13:37:47 +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` 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>
`; `;
} }
@ -214,13 +212,8 @@ class HuiAlarmModeCardFeature
--control-select-button-border-radius: 10px; --control-select-button-border-radius: 10px;
} }
ha-control-button-group { ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 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") { 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>
`; `;
} }
@ -208,10 +204,6 @@ class HuiClimateFanModesCardFeature
--control-select-border-radius: 10px; --control-select-border-radius: 10px;
--control-select-button-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") { 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>
`; `;
} }
@ -207,9 +203,6 @@ class HuiClimateHvacModesCardFeature
--control-select-border-radius: 10px; --control-select-border-radius: 10px;
--control-select-button-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") { 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>
`; `;
} }
@ -215,9 +208,6 @@ class HuiClimatePresetModesCardFeature
--control-select-border-radius: 10px; --control-select-border-radius: 10px;
--control-select-button-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") { 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>
`; `;
} }
@ -213,10 +209,6 @@ class HuiClimateSwingModesCardFeature
--control-select-border-radius: 10px; --control-select-border-radius: 10px;
--control-select-button-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() { static get styles() {
return css` return css`
ha-control-button-group { ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 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` 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>
`; `;
} }
@ -120,10 +119,6 @@ class HuiCoverPositionCardFeature
--control-slider-thickness: 40px; --control-slider-thickness: 40px;
--control-slider-border-radius: 10px; --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() { static get styles() {
return css` return css`
ha-control-button-group { ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 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` 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>
`; `;
} }
@ -122,10 +121,6 @@ class HuiCoverTiltPositionCardFeature
--control-slider-thickness: 40px; --control-slider-thickness: 40px;
--control-slider-border-radius: 10px; --control-slider-border-radius: 10px;
} }
.container {
padding: 0 12px 12px 12px;
width: auto;
}
.gradient { .gradient {
background: -webkit-linear-gradient(left, ${GRADIENT}); background: -webkit-linear-gradient(left, ${GRADIENT});
opacity: 0.6; 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") { 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>
`; `;
} }
@ -212,10 +205,6 @@ class HuiFanPresetModesCardFeature
--control-select-border-radius: 10px; --control-select-border-radius: 10px;
--control-select-button-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); 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 +100,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>
`; `;
} }
@ -170,10 +166,6 @@ class HuiFanSpeedCardFeature extends LitElement implements LovelaceCardFeature {
--control-select-border-radius: 10px; --control-select-border-radius: 10px;
--control-select-button-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") { 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>
`; `;
} }
@ -211,10 +207,6 @@ class HuiHumidifierModesCardFeature
--control-select-border-radius: 10px; --control-select-border-radius: 10px;
--control-select-button-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` 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>
`; `;
} }
@ -121,10 +119,6 @@ class HuiHumidifierToggleCardFeature
--control-select-border-radius: 10px; --control-select-border-radius: 10px;
--control-select-button-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() { static get styles() {
return css` return css`
ha-control-button-group { ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 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; : 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>
`; `;
} }
@ -93,9 +91,6 @@ class HuiLightBrightnessCardFeature
--control-slider-thickness: 40px; --control-slider-thickness: 40px;
--control-slider-border-radius: 10px; --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); 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>
`; `;
} }
@ -119,9 +117,6 @@ class HuiLightColorTempCardFeature
--control-slider-thickness: 40px; --control-slider-thickness: 40px;
--control-slider-border-radius: 10px; --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 { static get styles(): CSSResultGroup {
return css` return css`
ha-control-button-group { ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 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; font-size: 14px;
} }
ha-control-button-group { ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px; --control-button-group-spacing: 12px;
} }
.open-button { .open-button {
@ -136,7 +135,6 @@ class HuiLockOpenDoorCardFeature
gap: 8px; gap: 8px;
font-weight: 500; font-weight: 500;
color: var(--success-color); color: var(--success-color);
margin: 0 12px 12px 12px;
height: 40px; height: 40px;
text-align: center; 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; const stateObj = this.stateObj;
return html` return html`
<div class="container"> ${this._config.style === "buttons"
${this._config.style === "buttons" ? html`<ha-control-number-buttons
? html`<ha-control-number-buttons value=${stateObj.state}
value=${stateObj.state} min=${stateObj.attributes.min}
min=${stateObj.attributes.min} max=${stateObj.attributes.max}
max=${stateObj.attributes.max} step=${stateObj.attributes.step}
step=${stateObj.attributes.step} @value-changed=${this._setValue}
@value-changed=${this._setValue} .disabled=${isUnavailableState(stateObj.state)}
.disabled=${isUnavailableState(stateObj.state)} .unit=${stateObj.attributes.unit_of_measurement}
.unit=${stateObj.attributes.unit_of_measurement} .locale=${this.hass.locale}
.locale=${this.hass.locale} ></ha-control-number-buttons>`
></ha-control-number-buttons>` : html`<ha-control-slider
: html`<ha-control-slider value=${stateObj.state}
value=${stateObj.state} min=${stateObj.attributes.min}
min=${stateObj.attributes.min} max=${stateObj.attributes.max}
max=${stateObj.attributes.max} step=${stateObj.attributes.step}
step=${stateObj.attributes.step} @value-changed=${this._setValue}
@value-changed=${this._setValue} .disabled=${isUnavailableState(stateObj.state)}
.disabled=${isUnavailableState(stateObj.state)} .unit=${stateObj.attributes.unit_of_measurement}
.unit=${stateObj.attributes.unit_of_measurement} .locale=${this.hass.locale}
.locale=${this.hass.locale} ></ha-control-slider>`}
></ha-control-slider>`}
</div>
`; `;
} }
@ -120,10 +118,6 @@ class HuiNumericInputCardFeature
--control-slider-thickness: 40px; --control-slider-thickness: 40px;
--control-slider-border-radius: 10px; --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` 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>
`; `;
} }
@ -153,10 +151,6 @@ class HuiSelectOptionsCardFeature
display: block; display: block;
width: 100%; 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` 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>
`; `;
} }
@ -112,10 +107,6 @@ class HuiTargetHumidityCardFeature
--control-slider-thickness: 40px; --control-slider-thickness: 40px;
--control-slider-border-radius: 10px; --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() { static get styles() {
return css` return css`
ha-control-button-group { ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 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() { static get styles() {
return css` return css`
ha-control-button-group { ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 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` 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>
`; `;
} }
@ -145,13 +143,8 @@ class HuiWaterHeaterOperationModeCardFeature
--control-select-button-border-radius: 10px; --control-select-button-border-radius: 10px;
} }
ha-control-button-group { ha-control-button-group {
margin: 0 12px 12px 12px;
--control-button-group-spacing: 12px; --control-button-group-spacing: 12px;
} }
.container {
padding: 0 12px 12px 12px;
width: auto;
}
`; `;
} }
} }