mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 02:46:38 +00:00
Don't uppercase unit_of_measurement in state-badge (#1025)
* determine unit from state. set case via label-is-state attr * use css var and classnames * use classnames and mixin * use css var * fallback, both needed and way more elegant
This commit is contained in:
parent
ed0696ea9c
commit
88ad376045
@ -15,6 +15,14 @@
|
||||
ha-label-badge {
|
||||
--ha-label-badge-color: var(--label-badge-red, #DF4C1E);
|
||||
}
|
||||
ha-label-badge.has-unit_of_measurement {
|
||||
--ha-label-badge-label-text-transform: none;
|
||||
}
|
||||
|
||||
ha-label-badge.binary_sensor,
|
||||
ha-label-badge.updater {
|
||||
--ha-label-badge-color: var(--label-badge-blue, #039be5);
|
||||
}
|
||||
|
||||
.red {
|
||||
--ha-label-badge-color: var(--label-badge-red, #DF4C1E);
|
||||
@ -37,7 +45,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<ha-label-badge class$='[[computeClasses(state)]]'
|
||||
<ha-label-badge class$='[[computeClassNames(state)]]'
|
||||
value='[[computeValue(localize, state)]]'
|
||||
icon='[[computeIcon(state)]]'
|
||||
image='[[computeImage(state)]]'
|
||||
@ -90,14 +98,10 @@ class HaStateLabelBadge extends
|
||||
this.fire('hass-more-info', { entityId: this.state.entity_id });
|
||||
}
|
||||
|
||||
computeClasses(state) {
|
||||
switch (window.hassUtil.computeDomain(state)) {
|
||||
case 'binary_sensor':
|
||||
case 'updater':
|
||||
return 'blue';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
computeClassNames(state) {
|
||||
const classes = [window.hassUtil.computeDomain(state)];
|
||||
classes.push(window.hassUtil.attributeClassNames(state, ['unit_of_measurement']));
|
||||
return classes.join(' ');
|
||||
}
|
||||
|
||||
computeValue(localize, state) {
|
||||
|
@ -52,10 +52,11 @@
|
||||
border-radius: 1em;
|
||||
padding: 8% 16%;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
text-transform: uppercase;
|
||||
text-overflow: ellipsis;
|
||||
transition: background-color .3s ease-in-out;
|
||||
text-transform: var(--ha-label-badge-label-text-transform, uppercase);
|
||||
}
|
||||
.label-badge .label.big span {
|
||||
font-size: 90%;
|
||||
|
Loading…
x
Reference in New Issue
Block a user