mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-16 22:06:34 +00:00
prevent state display line-wrapping (#932)
* prevent state display line-wrapping Only for applies to default statecards (state-card-display), not for component specific statecards. * compute class names function * apply style to calculated class * var -> const
This commit is contained in:
parent
294dec59a7
commit
44c325a929
@ -18,11 +18,14 @@
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
}
|
}
|
||||||
|
.state.has-unit_of_measurement {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class='horizontal justified layout'>
|
<div class='horizontal justified layout'>
|
||||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||||
<div class='state'>[[computeStateDisplay(localize, stateObj, language)]]</div>
|
<div class$='[[computeClassNames(stateObj)]]'>[[computeStateDisplay(localize, stateObj, language)]]</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
@ -45,6 +48,14 @@ class StateCardDisplay extends window.hassMixins.LocalizeMixin(Polymer.Element)
|
|||||||
computeStateDisplay(localize, stateObj, language) {
|
computeStateDisplay(localize, stateObj, language) {
|
||||||
return window.hassUtil.computeStateDisplay(localize, stateObj, language);
|
return window.hassUtil.computeStateDisplay(localize, stateObj, language);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
computeClassNames(stateObj) {
|
||||||
|
const classes = [
|
||||||
|
'state',
|
||||||
|
window.hassUtil.attributeClassNames(stateObj, ['unit_of_measurement']),
|
||||||
|
];
|
||||||
|
return classes.join(' ');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
customElements.define(StateCardDisplay.is, StateCardDisplay);
|
customElements.define(StateCardDisplay.is, StateCardDisplay);
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user