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:
NovapaX 2018-03-30 02:35:51 +02:00 committed by Paulus Schoutsen
parent ed0696ea9c
commit 88ad376045
2 changed files with 15 additions and 10 deletions

View File

@ -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) {

View File

@ -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%;