Add a state card for media player

This commit is contained in:
Paulus Schoutsen 2015-05-30 12:08:35 -07:00
parent e74806ab70
commit 1e7e9a9e02
6 changed files with 148 additions and 20 deletions

View File

@ -1,2 +1,2 @@
""" DO NOT MODIFY. Auto-generated by build_frontend script """
VERSION = "c164af7349b4750365f03b190e11cc8d"
VERSION = "d98b2e8d6f35dfd544cbdf10f3054617"

View File

@ -6000,7 +6000,7 @@ function(t,e,n){function r(){this._events=this._events||{},this._maxListeners=th
<script>
(function() {
var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene'];
var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene', 'media_player'];
var DOMAINS_WITH_MORE_INFO = [
'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
];
@ -21647,26 +21647,32 @@ Polymer({
<style>
:host {
line-height: normal;
min-width: 150px;
white-space: nowrap;
}
state-badge {
float: left;
}
.info {
margin-left: 60px;
}
.name {
text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
}
.info {
margin-left: 60px;
text-overflow: ellipsis;
overflow-x: hidden;
}
.time-ago {
color: darkgrey;
margin-top: -2px;
font-size: 1rem;
text-overflow: ellipsis;
overflow-x: hidden;
}
</style>
@ -21705,7 +21711,8 @@ Polymer({
},
});
})();
</script><dom-module id="state-card-display" assetpath="cards/">
</script>
<dom-module id="state-card-display" assetpath="cards/">
<style>
.state {
margin-left: 16px;
@ -22171,7 +22178,62 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
});
})();
</script><dom-module id="state-card-content" assetpath="cards/">
</script><dom-module id="state-card-media_player" assetpath="cards/">
<style>
:host {
line-height: normal;
}
.state {
margin-left: 16px;
text-align: right;
}
.main-text {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
}
.secondary-text {
color: darkgrey;
margin-top: -2px;
font-size: 1rem;
}
</style>
<template>
<div class="horizontal justified layout">
<state-info state-obj="[[stateObj]]"></state-info>
<div class="state">
<template is="dom-if" if="[[stateObj.attributes.media_title]]">
<div class="main-text">[[stateObj.attributes.media_title]]</div>
<div class="secondary-text">[[stateObj.stateDisplay]]</div>
</template>
<template is="dom-if" if="[[!stateObj.attributes.media_title]]">
<div class="main-text">[[stateObj.stateDisplay]]</div>
</template>
</div>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'state-card-media_player',
properties: {
stateObj: {
type: Object,
},
},
});
})();
</script>
<dom-module id="state-card-content" assetpath="cards/">
<style>
:host {
display: block;

View File

@ -5,6 +5,7 @@
<link rel="import" href="state-card-thermostat.html">
<link rel="import" href="state-card-configurator.html">
<link rel="import" href="state-card-scene.html">
<link rel="import" href="state-card-media_player.html">
<dom-module id="state-card-content">
<style>

View File

@ -0,0 +1,59 @@
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../components/state-info.html">
<dom-module id="state-card-media_player">
<style>
:host {
line-height: normal;
}
.state {
margin-left: 16px;
text-align: right;
}
.main-text {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
}
.secondary-text {
color: darkgrey;
margin-top: -2px;
font-size: 1rem;
}
</style>
<template>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]"></state-info>
<div class='state'>
<template is='dom-if' if='[[stateObj.attributes.media_title]]'>
<div class='main-text'>[[stateObj.attributes.media_title]]</div>
<div class='secondary-text'>[[stateObj.stateDisplay]]</div>
</template>
<template is='dom-if' if='[[!stateObj.attributes.media_title]]'>
<div class='main-text'>[[stateObj.stateDisplay]]</div>
</template>
</div>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'state-card-media_player',
properties: {
stateObj: {
type: Object,
},
},
});
})();
</script>

View File

@ -8,26 +8,32 @@
<style>
:host {
line-height: normal;
min-width: 150px;
white-space: nowrap;
}
state-badge {
float: left;
}
.info {
margin-left: 60px;
}
.name {
text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
}
.info {
margin-left: 60px;
text-overflow: ellipsis;
overflow-x: hidden;
}
.time-ago {
color: darkgrey;
margin-top: -2px;
font-size: 1rem;
text-overflow: ellipsis;
overflow-x: hidden;
}
</style>

View File

@ -2,7 +2,7 @@
<script>
(function() {
var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene'];
var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene', 'media_player'];
var DOMAINS_WITH_MORE_INFO = [
'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
];