mirror of
https://github.com/home-assistant/core.git
synced 2025-07-23 05:07:41 +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 """
|
||||
VERSION = "c164af7349b4750365f03b190e11cc8d"
|
||||
VERSION = "d98b2e8d6f35dfd544cbdf10f3054617"
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-transform: capitalize;
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-transform: capitalize;
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.time-ago {
|
||||
color: darkgrey;
|
||||
margin-top: -2px;
|
||||
font-size: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21682,7 +21688,7 @@ Polymer({
|
||||
<relative-ha-datetime datetime-obj="[[stateObj.lastChangedAsDate]]"></relative-ha-datetime>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
.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;
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
:host {
|
||||
line-height: normal;
|
||||
min-width: 150px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
state-badge {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-transform: capitalize;
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-transform: capitalize;
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.time-ago {
|
||||
color: darkgrey;
|
||||
margin-top: -2px;
|
||||
font-size: 1rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -43,7 +49,7 @@
|
||||
<relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
|
||||
<!-- </core-tooltip> -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -66,4 +72,4 @@
|
||||
},
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</script>
|
||||
|
@ -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'
|
||||
];
|
||||
|
Loading…
x
Reference in New Issue
Block a user