jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-19 15:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Switch ha-label-badge to Polymer2 class and add two css variables (#430)

Browse Source
This commit is contained in:
Andrey 2017-09-22 01:58:21 +03:00 committed by Paulus Schoutsen
parent a3e28f717a
commit a46e6b4cfa
1 changed files with 27 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'> <link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'> <link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
<dom-module id='ha-label-badge'> <dom-module id='ha-label-badge'>
@ -41,7 +41,6 @@
left: 0; left: 0;
right: 0; right: 0;
line-height: 1em; line-height: 1em;
font-size: 0.5em; font-size: 0.5em;
} }
.label-badge .label span { .label-badge .label span {
@ -59,8 +58,8 @@
} }
.badge-container .title { .badge-container .title {
margin-top: 1em; margin-top: 1em;
font-size: .9em; font-size: var(--ha-label-badge-title-font-size, .9em);
width: 5em; width: var(--ha-label-badge-title-width, 5em);
font-weight: 300; font-weight: 300;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -86,52 +85,37 @@
</dom-module> </dom-module>
<script> <script>
// Beware: Polymer will not call computeHideIcon and computeHideValue if any of class HaLabelBadge extends Polymer.Element {
// the parameters are undefined. Set to null if not using. static get is() { return 'ha-label-badge'; }
Polymer({ static get properties() {
is: 'ha-label-badge', return {
value: String,
icon: String,
label: String,
description: String,
properties: { image: {
value: { type: String,
type: String, observer: 'imageChanged',
value: null, },
}, };
}
icon: { computeClasses(value) {
type: String,
value: null,
},
label: {
type: String,
value: null,
},
description: {
type: String,
},
image: {
type: String,
value: null,
observer: 'imageChanged',
},
},
computeClasses: function (value) {
return value && value.length > 4 ? 'value big' : 'value'; return value && value.length > 4 ? 'value big' : 'value';
}, }
computeHideIcon: function (icon, value, image) { computeHideIcon(icon, value, image) {
return !icon || value || image; return !icon || value || image;
}, }
computeHideValue: function (value, image) { computeHideValue(value, image) {
return !value || image; return !value || image;
}, }
imageChanged: function (newVal) { imageChanged(newVal) {
this.$.badge.style.backgroundImage = newVal ? 'url(' + newVal + ')' : ''; this.$.badge.style.backgroundImage = newVal ? 'url(' + newVal + ')' : '';
}, }
}); }
customElements.define(HaLabelBadge.is, HaLabelBadge);
</script> </script>