Fix labels on new more info (#15983)

This commit is contained in:
Paul Bottein 2023-03-31 15:57:35 +02:00 committed by GitHub
parent d97ddcd31a
commit 33ec1e15a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 16 additions and 19 deletions

View File

@ -25,8 +25,6 @@ export type ControlSelectOption = {
export class HaControlSelect extends LitElement { export class HaControlSelect extends LitElement {
@property({ type: Boolean, reflect: true }) disabled = false; @property({ type: Boolean, reflect: true }) disabled = false;
@property() public label?: string;
@property() public options?: ControlSelectOption[]; @property() public options?: ControlSelectOption[];
@property() public value?: string; @property() public value?: string;

View File

@ -2,7 +2,6 @@ import { css, CSSResultGroup, html, LitElement, 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 memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
import { stateColorCss } from "../../../../common/entity/state_color"; import { stateColorCss } from "../../../../common/entity/state_color";
import { supportsFeature } from "../../../../common/entity/supports-feature"; import { supportsFeature } from "../../../../common/entity/supports-feature";
import "../../../../components/ha-control-select"; import "../../../../components/ha-control-select";
@ -13,6 +12,7 @@ import {
AlarmMode, AlarmMode,
ALARM_MODES, ALARM_MODES,
} from "../../../../data/alarm_control_panel"; } from "../../../../data/alarm_control_panel";
import { UNAVAILABLE } from "../../../../data/entity";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
import { showEnterCodeDialogDialog } from "./show-enter-code-dialog"; import { showEnterCodeDialogDialog } from "./show-enter-code-dialog";
@ -117,16 +117,14 @@ export class HaMoreInfoAlarmControlPanelModes extends LitElement {
.options=${options} .options=${options}
.value=${this._currentMode} .value=${this._currentMode}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
.label=${computeAttributeNameDisplay( .ariaLabel=${this.hass.localize(
this.hass.localize, "ui.dialogs.more_info_control.alarm_control_panel.modes_label"
this.stateObj,
this.hass.entities,
"percentage"
)} )}
style=${styleMap({ style=${styleMap({
"--control-select-color": color, "--control-select-color": color,
"--modes-count": modes.length.toString(), "--modes-count": modes.length.toString(),
})} })}
.disabled=${this.stateObj!.state === UNAVAILABLE}
> >
</ha-control-select> </ha-control-select>
`; `;

View File

@ -108,6 +108,7 @@ export class HaMoreInfoFanSpeed extends LitElement {
style=${styleMap({ style=${styleMap({
"--control-select-color": color, "--control-select-color": color,
})} })}
.disabled=${this.stateObj.state === UNAVAILABLE}
> >
</ha-control-select> </ha-control-select>
`; `;
@ -116,9 +117,9 @@ export class HaMoreInfoFanSpeed extends LitElement {
return html` return html`
<ha-control-slider <ha-control-slider
vertical vertical
.value=${this.value}
min="0" min="0"
max="100" max="100"
.value=${this.value}
.step=${this.stateObj.attributes.percentage_step ?? 1} .step=${this.stateObj.attributes.percentage_step ?? 1}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
.ariaLabel=${computeAttributeNameDisplay( .ariaLabel=${computeAttributeNameDisplay(

View File

@ -4,7 +4,6 @@ import { css, 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";
import { computeAttributeNameDisplay } from "../../../common/entity/compute_attribute_display";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
import { stateColorCss } from "../../../common/entity/state_color"; import { stateColorCss } from "../../../common/entity/state_color";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
@ -18,6 +17,7 @@ import {
AlarmMode, AlarmMode,
ALARM_MODES, ALARM_MODES,
} from "../../../data/alarm_control_panel"; } from "../../../data/alarm_control_panel";
import { UNAVAILABLE } from "../../../data/entity";
import { showEnterCodeDialogDialog } from "../../../dialogs/more-info/components/alarm_control_panel/show-enter-code-dialog"; import { showEnterCodeDialogDialog } from "../../../dialogs/more-info/components/alarm_control_panel/show-enter-code-dialog";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types"; import { LovelaceTileFeature, LovelaceTileFeatureEditor } from "../types";
@ -199,16 +199,14 @@ class HuiAlarmModeTileFeature
.value=${this._currentMode} .value=${this._currentMode}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
hide-label hide-label
.label=${computeAttributeNameDisplay( .ariaLabel=${this.hass.localize(
this.hass.localize, "ui.dialogs.more_info_control.alarm_control_panel.modes_label"
this.stateObj,
this.hass.entities,
"percentage"
)} )}
style=${styleMap({ style=${styleMap({
"--control-select-color": color, "--control-select-color": color,
"--modes-count": modes.length.toString(), "--modes-count": modes.length.toString(),
})} })}
.disabled=${this.stateObj!.state === UNAVAILABLE}
> >
</ha-control-select> </ha-control-select>
</div> </div>

View File

@ -100,12 +100,13 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
.value=${speed} .value=${speed}
@value-changed=${this._speedValueChanged} @value-changed=${this._speedValueChanged}
hide-label hide-label
.label=${computeAttributeNameDisplay( .ariaLabel=${computeAttributeNameDisplay(
this.hass.localize, this.hass.localize,
this.stateObj, this.stateObj,
this.hass.entities, this.hass.entities,
"percentage" "percentage"
)} )}
.disabled=${this.stateObj!.state === UNAVAILABLE}
> >
</ha-control-select> </ha-control-select>
</div> </div>
@ -124,14 +125,14 @@ class HuiFanSpeedTileFeature extends LitElement implements LovelaceTileFeature {
min="0" min="0"
max="100" max="100"
.step=${this.stateObj.attributes.percentage_step ?? 1} .step=${this.stateObj.attributes.percentage_step ?? 1}
.disabled=${this.stateObj!.state === UNAVAILABLE}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
.label=${computeAttributeNameDisplay( .ariaLabel=${computeAttributeNameDisplay(
this.hass.localize, this.hass.localize,
this.stateObj, this.stateObj,
this.hass.entities, this.hass.entities,
"percentage" "percentage"
)} )}
.disabled=${this.stateObj!.state === UNAVAILABLE}
></ha-control-slider> ></ha-control-slider>
</div> </div>
`; `;

View File

@ -929,6 +929,7 @@
} }
}, },
"alarm_control_panel": { "alarm_control_panel": {
"modes_label": "Modes",
"modes": { "modes": {
"away": "Away", "away": "Away",
"home": "Home", "home": "Home",
@ -4463,7 +4464,7 @@
}, },
"alarm-modes": { "alarm-modes": {
"label": "Alarm modes", "label": "Alarm modes",
"modes": "Modes", "modes": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes_label%]",
"modes_list": { "modes_list": {
"away": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::away%]", "away": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::away%]",
"home": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::home%]", "home": "[%key:ui::dialogs::more_info_control::alarm_control_panel::modes::home%]",