jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-11 03:16:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Don't uppercase unit_of_measurement in state-badge (#1025)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/entity/ha-state-label-badge.html
View File

@ -15,6 +15,14 @@
ha-label-badge { ha-label-badge {
--ha-label-badge-color: var(--label-badge-red, #DF4C1E); --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 { .red {
--ha-label-badge-color: var(--label-badge-red, #DF4C1E); --ha-label-badge-color: var(--label-badge-red, #DF4C1E);
@ -37,7 +45,7 @@
} }
</style> </style>
<ha-label-badge class$='[[computeClasses(state)]]' <ha-label-badge class$='[[computeClassNames(state)]]'
value='[[computeValue(localize, state)]]' value='[[computeValue(localize, state)]]'
icon='[[computeIcon(state)]]' icon='[[computeIcon(state)]]'
image='[[computeImage(state)]]' image='[[computeImage(state)]]'
@ -90,14 +98,10 @@ class HaStateLabelBadge extends
this.fire('hass-more-info', { entityId: this.state.entity_id }); this.fire('hass-more-info', { entityId: this.state.entity_id });
} }
computeClasses(state) { computeClassNames(state) {
switch (window.hassUtil.computeDomain(state)) { const classes = [window.hassUtil.computeDomain(state)];
case 'binary_sensor': classes.push(window.hassUtil.attributeClassNames(state, ['unit_of_measurement']));
case 'updater': return classes.join(' ');
return 'blue';
default:
return '';
}
} }
computeValue(localize, state) { computeValue(localize, state) {

3
src/components/ha-label-badge.html
View File

@ -52,10 +52,11 @@
border-radius: 1em; border-radius: 1em;
padding: 8% 16%; padding: 8% 16%;
font-weight: 500; font-weight: 500;
text-transform: uppercase;
overflow: hidden; overflow: hidden;
text-transform: uppercase;
text-overflow: ellipsis; text-overflow: ellipsis;
transition: background-color .3s ease-in-out; transition: background-color .3s ease-in-out;
text-transform: var(--ha-label-badge-label-text-transform, uppercase);
} }
.label-badge .label.big span { .label-badge .label.big span {
font-size: 90%; font-size: 90%;