mirror of
https://github.com/home-assistant/core.git
synced 2025-07-23 21:27:38 +00:00
Add a state card for media player
This commit is contained in:
parent
e74806ab70
commit
1e7e9a9e02
@ -1,2 +1,2 @@
|
|||||||
""" DO NOT MODIFY. Auto-generated by build_frontend script """
|
""" DO NOT MODIFY. Auto-generated by build_frontend script """
|
||||||
VERSION = "c164af7349b4750365f03b190e11cc8d"
|
VERSION = "d98b2e8d6f35dfd544cbdf10f3054617"
|
||||||
|
@ -6000,7 +6000,7 @@ function(t,e,n){function r(){this._events=this._events||{},this._maxListeners=th
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
(function() {
|
||||||
var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene'];
|
var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene', 'media_player'];
|
||||||
var DOMAINS_WITH_MORE_INFO = [
|
var DOMAINS_WITH_MORE_INFO = [
|
||||||
'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
|
'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
|
||||||
];
|
];
|
||||||
@ -21647,26 +21647,32 @@ Polymer({
|
|||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
min-width: 150px;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
state-badge {
|
state-badge {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
|
||||||
text-transform: capitalize;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
margin-left: 60px;
|
margin-left: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.time-ago {
|
.time-ago {
|
||||||
color: darkgrey;
|
color: darkgrey;
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -21682,7 +21688,7 @@ Polymer({
|
|||||||
<relative-ha-datetime datetime-obj="[[stateObj.lastChangedAsDate]]"></relative-ha-datetime>
|
<relative-ha-datetime datetime-obj="[[stateObj.lastChangedAsDate]]"></relative-ha-datetime>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -21705,7 +21711,8 @@ Polymer({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
</script><dom-module id="state-card-display" assetpath="cards/">
|
</script>
|
||||||
|
<dom-module id="state-card-display" assetpath="cards/">
|
||||||
<style>
|
<style>
|
||||||
.state {
|
.state {
|
||||||
margin-left: 16px;
|
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>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -5,6 +5,7 @@
|
|||||||
<link rel="import" href="state-card-thermostat.html">
|
<link rel="import" href="state-card-thermostat.html">
|
||||||
<link rel="import" href="state-card-configurator.html">
|
<link rel="import" href="state-card-configurator.html">
|
||||||
<link rel="import" href="state-card-scene.html">
|
<link rel="import" href="state-card-scene.html">
|
||||||
|
<link rel="import" href="state-card-media_player.html">
|
||||||
|
|
||||||
<dom-module id="state-card-content">
|
<dom-module id="state-card-content">
|
||||||
<style>
|
<style>
|
||||||
|
@ -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>
|
@ -8,26 +8,32 @@
|
|||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
min-width: 150px;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
state-badge {
|
state-badge {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
|
||||||
text-transform: capitalize;
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
margin-left: 60px;
|
margin-left: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
text-transform: capitalize;
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.time-ago {
|
.time-ago {
|
||||||
color: darkgrey;
|
color: darkgrey;
|
||||||
margin-top: -2px;
|
margin-top: -2px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -43,7 +49,7 @@
|
|||||||
<relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
|
<relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
|
||||||
<!-- </core-tooltip> -->
|
<!-- </core-tooltip> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -66,4 +72,4 @@
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
(function() {
|
||||||
var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene'];
|
var DOMAINS_WITH_CARD = ['thermostat', 'configurator', 'scene', 'media_player'];
|
||||||
var DOMAINS_WITH_MORE_INFO = [
|
var DOMAINS_WITH_MORE_INFO = [
|
||||||
'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
|
'light', 'group', 'sun', 'configurator', 'thermostat', 'script'
|
||||||
];
|
];
|
||||||
|
Loading…
x
Reference in New Issue
Block a user