github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Allow custom 2nd line in state-info (#253) 

* Allow custom 2nd line in state-info

* add tests for new functionality
This commit is contained in:
Andrey 2017-04-09 20:25:00 +03:00 committed by Paulus Schoutsen
parent 35c086a594
commit 1530c0c386
2 changed files with 31 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/entity/state-info.html
View File

@ -27,11 +27,11 @@
line-height: 40px;
}
.name[in-dialog] {
.name[in-dialog], :host([secondary-line]) .name {
line-height: 20px;
}
.time-ago {
.time-ago, ::slotted(*) {
@apply(--paper-font-common-nowrap);
color: var(--secondary-text-color);
}
@ -48,7 +48,9 @@
<ha-relative-time datetime='[[stateObj.last_changed]]'></ha-relative-time>
</div>
</template>
<template is='dom-if' if='[[!inDialog]]'>
<slot>
</template>
</div>
</div>
</template>

26
test/state-info-test.html
View File

@ -6,6 +6,11 @@
<link rel="import" href="../src/components/entity/state-info.html">
</head>
<body>
<test-fixture id="state-info-secondary-line">
<template>
<state-info secondary-line><my-elem>text</my-elem></state-info>
</template>
</test-fixture>
<test-fixture id="state-info">
<template>
<state-info></state-info>
@ -49,6 +54,7 @@
var name = lightOrShadow(si, '.name');
assert.isOk(name, '.name missing');
assert.equal(name.textContent, 'Name');
assert.equal(getComputedStyle(name).lineHeight, '40px');
assert.isNotOk(lightOrShadow(si, 'ha-relative-time'));
done();
@ -60,10 +66,15 @@
si.inDialog = true;
flush(function() {
var relativeTime = lightOrShadow(si, 'ha-relative-time');
var name = lightOrShadow(si, '.name');
assert.isOk(relativeTime);
assert.notEqual(relativeTime.textContent, 'never');
assert.notEqual(relativeTime.textContent, '');
assert.isOk(name);
assert.equal(getComputedStyle(name).lineHeight, '20px');
si.stateObj = {entity_id: 'light.demo', state: 'off', attributes: {friendly_name: 'Name'}};
flush(function() {
assert.equal(relativeTime.textContent, 'never');
@ -71,6 +82,21 @@
});
});
});
test('secondary line', function(done) {
si = fixture('state-info-secondary-line');
si.stateObj = {entity_id: 'light.demo', last_changed: '2017-01-01T00:00:00+00:00', state: 'off', attributes: {friendly_name: 'Name'}};
si.inDialog = false;
flush(function() {
var name = lightOrShadow(si, '.name');
assert.isOk(name);
assert.equal(getComputedStyle(name).lineHeight, '20px');
var content = si.queryEffectiveChildren('my-elem');
assert.isOk(content);
assert.equal(content.textContent, 'text');
done();
});
});
});
</script>
</body>