mirror of
https://github.com/home-assistant/frontend
synced 2024-09-28 00:43:28 +02:00
Add unit to temperature tile number button group (#17841)
* Add unit to temperature tile number button group * Update gallery * Use blank before unit * Hide unit if no space * Fix build --------- Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
parent
21644c70b3
commit
d3f6ebd1d0
@ -11,6 +11,7 @@ const buttons: {
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
unit?: string;
|
||||
class?: string;
|
||||
}[] = [
|
||||
{
|
||||
@ -29,6 +30,11 @@ const buttons: {
|
||||
label: "Custom",
|
||||
class: "custom",
|
||||
},
|
||||
{
|
||||
id: "unit",
|
||||
label: "With unit",
|
||||
unit: "m",
|
||||
},
|
||||
];
|
||||
|
||||
@customElement("demo-components-ha-control-number-buttons")
|
||||
@ -50,6 +56,7 @@ export class DemoHarControlNumberButtons extends LitElement {
|
||||
<pre>Config: ${JSON.stringify(config)}</pre>
|
||||
<ha-control-number-buttons
|
||||
.value=${this.value}
|
||||
.unit=${config.unit}
|
||||
.min=${config.min}
|
||||
.max=${config.max}
|
||||
.step=${config.step}
|
||||
|
@ -256,6 +256,7 @@
|
||||
"@polymer/polymer": "patch:@polymer/polymer@3.5.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
|
||||
"@material/mwc-button@^0.25.3": "^0.27.0",
|
||||
"lit": "2.8.0",
|
||||
"clean-css": "5.3.2",
|
||||
"@lit/reactive-element": "1.6.3",
|
||||
"sortablejs@1.15.0": "patch:sortablejs@npm%3A1.15.0#./.yarn/patches/sortablejs-npm-1.15.0-f3a393abcc.patch",
|
||||
"leaflet-draw@1.0.4": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch"
|
||||
|
@ -18,6 +18,7 @@ import { blankBeforePercent } from "../translations/blank_before_percent";
|
||||
import { LocalizeFunc } from "../translations/localize";
|
||||
import { computeDomain } from "./compute_domain";
|
||||
import { computeStateDomain } from "./compute_state_domain";
|
||||
import { blankBeforeUnit } from "../translations/blank_before_unit";
|
||||
|
||||
export const computeAttributeValueDisplay = (
|
||||
localize: LocalizeFunc,
|
||||
@ -55,20 +56,12 @@ export const computeAttributeValueDisplay = (
|
||||
unit = getWeatherUnit(config, stateObj as WeatherEntity, attribute);
|
||||
}
|
||||
|
||||
if (unit === "%") {
|
||||
return `${formattedValue}${blankBeforePercent(locale)}${unit}`;
|
||||
}
|
||||
|
||||
if (unit === "°") {
|
||||
return `${formattedValue}${unit}`;
|
||||
if (TEMPERATURE_ATTRIBUTES.has(attribute)) {
|
||||
unit = config.unit_system.temperature;
|
||||
}
|
||||
|
||||
if (unit) {
|
||||
return `${formattedValue} ${unit}`;
|
||||
}
|
||||
|
||||
if (TEMPERATURE_ATTRIBUTES.has(attribute)) {
|
||||
return `${formattedValue} ${config.unit_system.temperature}`;
|
||||
return `${formattedValue}${blankBeforeUnit(unit, locale)}${unit}`;
|
||||
}
|
||||
|
||||
return formattedValue;
|
||||
|
@ -3,13 +3,13 @@ import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
|
||||
import { EntityRegistryDisplayEntry } from "../../data/entity_registry";
|
||||
import { FrontendLocaleData, TimeZone } from "../../data/translation";
|
||||
import {
|
||||
updateIsInstallingFromAttributes,
|
||||
UPDATE_SUPPORT_PROGRESS,
|
||||
updateIsInstallingFromAttributes,
|
||||
} from "../../data/update";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import {
|
||||
formatDuration,
|
||||
UNIT_TO_MILLISECOND_CONVERT,
|
||||
formatDuration,
|
||||
} from "../datetime/duration";
|
||||
import { formatDate } from "../datetime/format_date";
|
||||
import { formatDateTime } from "../datetime/format_date_time";
|
||||
@ -19,10 +19,10 @@ import {
|
||||
getNumberFormatOptions,
|
||||
isNumericFromAttributes,
|
||||
} from "../number/format_number";
|
||||
import { blankBeforePercent } from "../translations/blank_before_percent";
|
||||
import { LocalizeFunc } from "../translations/localize";
|
||||
import { computeDomain } from "./compute_domain";
|
||||
import { supportsFeatureFromAttributes } from "./supports-feature";
|
||||
import { blankBeforeUnit } from "../translations/blank_before_unit";
|
||||
|
||||
export const computeStateDisplaySingleEntity = (
|
||||
localize: LocalizeFunc,
|
||||
@ -108,16 +108,20 @@ export const computeStateDisplayFromEntityAttributes = (
|
||||
// fallback to default
|
||||
}
|
||||
}
|
||||
const unit = !attributes.unit_of_measurement
|
||||
? ""
|
||||
: attributes.unit_of_measurement === "%"
|
||||
? blankBeforePercent(locale) + "%"
|
||||
: ` ${attributes.unit_of_measurement}`;
|
||||
return `${formatNumber(
|
||||
|
||||
const value = formatNumber(
|
||||
state,
|
||||
locale,
|
||||
getNumberFormatOptions({ state, attributes } as HassEntity, entity)
|
||||
)}${unit}`;
|
||||
);
|
||||
|
||||
const unit = attributes.unit_of_measurement;
|
||||
|
||||
if (unit) {
|
||||
return `${value}${blankBeforeUnit(unit)}${unit}`;
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
const domain = computeDomain(entityId);
|
||||
|
@ -1,11 +1,19 @@
|
||||
import { mdiMinus, mdiPlus } from "@mdi/js";
|
||||
import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
|
||||
import {
|
||||
CSSResultGroup,
|
||||
LitElement,
|
||||
TemplateResult,
|
||||
css,
|
||||
html,
|
||||
nothing,
|
||||
} from "lit";
|
||||
import { customElement, property, query } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { conditionalClamp } from "../common/number/clamp";
|
||||
import { formatNumber } from "../common/number/format_number";
|
||||
import { blankBeforeUnit } from "../common/translations/blank_before_unit";
|
||||
import { FrontendLocaleData } from "../data/translation";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
|
||||
const A11Y_KEY_CODES = new Set([
|
||||
"ArrowRight",
|
||||
@ -34,6 +42,8 @@ export class HaControlNumberButton extends LitElement {
|
||||
|
||||
@property({ type: Number }) public max?: number;
|
||||
|
||||
@property() public unit?: string;
|
||||
|
||||
@property({ attribute: "false" })
|
||||
public formatOptions: Intl.NumberFormatOptions = {};
|
||||
|
||||
@ -114,26 +124,28 @@ export class HaControlNumberButton extends LitElement {
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
const displayedValue =
|
||||
const value =
|
||||
this.value != null
|
||||
? formatNumber(this.value, this.locale, this.formatOptions)
|
||||
: "";
|
||||
const unit = this.unit ? `${blankBeforeUnit(this.unit)}${this.unit}` : "";
|
||||
|
||||
return html`
|
||||
<div class="container">
|
||||
<div
|
||||
id="input"
|
||||
class="value"
|
||||
role="number-button"
|
||||
role="spinbutton"
|
||||
.tabIndex=${this.disabled ? "-1" : "0"}
|
||||
aria-valuenow=${this.value}
|
||||
aria-valuetext=${`${value}${unit}`}
|
||||
aria-valuemin=${this.min}
|
||||
aria-valuemax=${this.max}
|
||||
aria-label=${ifDefined(this.label)}
|
||||
?disabled=${this.disabled}
|
||||
@keydown=${this._handleKeyDown}
|
||||
>
|
||||
${displayedValue}
|
||||
${value} ${unit ? html`<span class="unit">${unit}</span>` : nothing}
|
||||
</div>
|
||||
<button
|
||||
class="button minus"
|
||||
@ -185,6 +197,8 @@ export class HaControlNumberButton extends LitElement {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
container-type: inline-size;
|
||||
container-name: container;
|
||||
}
|
||||
.value {
|
||||
display: flex;
|
||||
@ -249,6 +263,14 @@ export class HaControlNumberButton extends LitElement {
|
||||
.button.plus {
|
||||
right: 0;
|
||||
}
|
||||
.unit {
|
||||
white-space: pre;
|
||||
}
|
||||
@container container (max-width: 100px) {
|
||||
.unit {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
@ -185,6 +185,7 @@ class HuiTargetTemperatureTileFeature
|
||||
.formatOptions=${options}
|
||||
.target="value"
|
||||
.value=${this.stateObj.attributes.temperature}
|
||||
.unit=${this.hass.config.unit_system.temperature}
|
||||
.min=${this._min}
|
||||
.max=${this._max}
|
||||
.step=${this._step}
|
||||
@ -197,6 +198,7 @@ class HuiTargetTemperatureTileFeature
|
||||
"--control-number-buttons-focus-color": stateColor,
|
||||
})}
|
||||
.disabled=${this.stateObj!.state === UNAVAILABLE}
|
||||
.locale=${this.hass.locale}
|
||||
>
|
||||
</ha-control-number-buttons>
|
||||
</ha-control-button-group>
|
||||
@ -215,6 +217,7 @@ class HuiTargetTemperatureTileFeature
|
||||
.formatOptions=${options}
|
||||
.target=${"low"}
|
||||
.value=${this._targetTemperature.low}
|
||||
.unit=${this.hass.config.unit_system.temperature}
|
||||
.min=${this._min}
|
||||
.max=${Math.min(
|
||||
this._max,
|
||||
@ -230,12 +233,14 @@ class HuiTargetTemperatureTileFeature
|
||||
"--control-number-buttons-focus-color": stateColor,
|
||||
})}
|
||||
.disabled=${this.stateObj!.state === UNAVAILABLE}
|
||||
.locale=${this.hass.locale}
|
||||
>
|
||||
</ha-control-number-buttons>
|
||||
<ha-control-number-buttons
|
||||
.formatOptions=${options}
|
||||
.target=${"high"}
|
||||
.value=${this._targetTemperature.high}
|
||||
.unit=${this.hass.config.unit_system.temperature}
|
||||
.min=${Math.max(
|
||||
this._min,
|
||||
this._targetTemperature.low ?? this._min
|
||||
@ -251,6 +256,7 @@ class HuiTargetTemperatureTileFeature
|
||||
"--control-number-buttons-focus-color": stateColor,
|
||||
})}
|
||||
.disabled=${this.stateObj!.state === UNAVAILABLE}
|
||||
.locale=${this.hass.locale}
|
||||
>
|
||||
</ha-control-number-buttons>
|
||||
</ha-control-button-group>
|
||||
@ -261,6 +267,7 @@ class HuiTargetTemperatureTileFeature
|
||||
<ha-control-button-group>
|
||||
<ha-control-number-buttons
|
||||
.disabled=${this.stateObj!.state === UNAVAILABLE}
|
||||
.unit=${this.hass.config.unit_system.temperature}
|
||||
.label=${this.hass.formatEntityAttributeName(
|
||||
this.stateObj,
|
||||
"temperature"
|
||||
@ -268,6 +275,7 @@ class HuiTargetTemperatureTileFeature
|
||||
style=${styleMap({
|
||||
"--control-number-buttons-focus-color": stateColor,
|
||||
})}
|
||||
.locale=${this.hass.locale}
|
||||
>
|
||||
</ha-control-number-buttons>
|
||||
</ha-control-button-group>
|
||||
|
11
yarn.lock
11
yarn.lock
@ -6616,16 +6616,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"clean-css@npm:^4.2.1, clean-css@npm:^4.2.3":
|
||||
version: 4.2.4
|
||||
resolution: "clean-css@npm:4.2.4"
|
||||
dependencies:
|
||||
source-map: "npm:~0.6.0"
|
||||
checksum: 4f64dbebfa29feb79be25d6f91239239179adc805c6d7442e2c728970ca23a75b5f238118477b4b78553b89e50f14a64fe35145ecc86b6badf971883c4ad2ffe
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"clean-css@npm:~5.3.2":
|
||||
"clean-css@npm:5.3.2":
|
||||
version: 5.3.2
|
||||
resolution: "clean-css@npm:5.3.2"
|
||||
dependencies:
|
||||
|
Loading…
Reference in New Issue
Block a user