mirror of
https://github.com/home-assistant/core.git
synced 2025-07-22 20:57:21 +00:00
State card rendering now way more flexible
Decoupled state card into reusable components. Now able to have different states be rendered with different state card components.
This commit is contained in:
Paulus Schoutsen
parent
5f7a9d9918
commit
029c38874b
@ -1,2 +1,2 @@
|
||||
""" DO NOT MODIFY. Auto-generated by build_frontend script """
|
||||
VERSION = "43a1e2517105b676c05bb1b8dce357b3"
|
||||
VERSION = "78343829ea70bf07a9e939b321587122"
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -32,6 +32,7 @@
|
||||
"paper-menu-button": "polymer/paper-menu-button#~0.5.2",
|
||||
"paper-dropdown": "polymer/paper-dropdown#~0.5.2",
|
||||
"paper-item": "polymer/paper-item#~0.5.2",
|
||||
"moment": "~2.8.4"
|
||||
"moment": "~2.8.4",
|
||||
"core-style": "polymer/core-style#~0.5.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
};
|
||||
|
||||
Object.defineProperties(State.prototype, {
|
||||
"stateDisplay": {
|
||||
stateDisplay: {
|
||||
get: function() {
|
||||
var state = this.state.replace(/_/g, " ");
|
||||
if(this.attributes.unit_of_measurement) {
|
||||
@ -46,19 +46,30 @@
|
||||
}
|
||||
},
|
||||
|
||||
"isCustomGroup": {
|
||||
isCustomGroup: {
|
||||
get: function() {
|
||||
return this.domain == "group" && !this.attributes.auto;
|
||||
}
|
||||
},
|
||||
|
||||
"canToggle": {
|
||||
canToggle: {
|
||||
get: function() {
|
||||
// groups that have the on/off state or if there is a turn_on service
|
||||
return ((this.domain == 'group' &&
|
||||
(this.state == 'on' || this.state == 'off')) ||
|
||||
this.api.hasService(this.domain, 'turn_on'));
|
||||
}
|
||||
},
|
||||
|
||||
// how to render the card for this state
|
||||
cardType: {
|
||||
get: function() {
|
||||
if(this.canToggle) {
|
||||
return "toggle";
|
||||
} else {
|
||||
return "display";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
30
homeassistant/components/http/www_static/polymer/state-card-display.html
Executable file
30
homeassistant/components/http/www_static/polymer/state-card-display.html
Executable file
@ -0,0 +1,30 @@
|
||||
<script src="bower_components/moment/moment.js"></script>
|
||||
<link rel="import" href="bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="bower_components/core-style/core-style.html">
|
||||
|
||||
<link rel="import" href="state-info.html">
|
||||
|
||||
<polymer-element name="state-card-display"
|
||||
attributes="stateObj cb_edit"
|
||||
noscript>
|
||||
<template>
|
||||
<core-style ref='state-card'></core-style>
|
||||
<style>
|
||||
.state {
|
||||
text-transform: capitalize;
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div horizontal justified layout>
|
||||
<state-info
|
||||
stateObj="{{stateObj}}"
|
||||
cb_edit="{{cb_edit}}">
|
||||
</state-info>
|
||||
|
||||
<div class='state'>{{stateObj.stateDisplay}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</polymer-element>
|
||||
@ -1,55 +1,19 @@
|
||||
<script src="bower_components/moment/moment.js"></script>
|
||||
<link rel="import" href="bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="bower_components/core-tooltip/core-tooltip.html">
|
||||
<link rel="import" href="bower_components/paper-button/paper-button.html">
|
||||
<link rel="import" href="bower_components/paper-toggle-button/paper-toggle-button.html">
|
||||
<link rel="import" href="bower_components/core-style/core-style.html">
|
||||
|
||||
<link rel="import" href="state-badge.html">
|
||||
|
||||
<polymer-element name="state-card"
|
||||
<polymer-element name="state-card-toggle"
|
||||
attributes="stateObj cb_turn_on, cb_turn_off cb_edit">
|
||||
<template>
|
||||
<core-style ref='state-card'></core-style>
|
||||
<style>
|
||||
:host {
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
|
||||
transition: all 0.30s ease-out;
|
||||
|
||||
position: relative;
|
||||
background-color: white;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
state-badge {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
state-badge:hover {
|
||||
background-color: #039be5;
|
||||
}
|
||||
|
||||
.name, .state.text {
|
||||
text-transform: capitalize;
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.state {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.time-ago {
|
||||
color: darkgrey;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
/* the splash while enabling */
|
||||
paper-toggle-button::shadow paper-radio-button::shadow #ink[checked] {
|
||||
color: #0091ea;
|
||||
@ -68,43 +32,16 @@
|
||||
|
||||
<div horizontal justified layout>
|
||||
|
||||
<div class="entity">
|
||||
<state-badge
|
||||
stateObj="{{stateObj}}"
|
||||
on-click="{{editClicked}}">
|
||||
</state-badge>
|
||||
<state-info
|
||||
stateObj="{{stateObj}}"
|
||||
cb_edit="{{cb_edit}}">
|
||||
</state-info>
|
||||
|
||||
<div class='info'>
|
||||
<div class='name'>
|
||||
{{stateObj.entityDisplay}}
|
||||
</div>
|
||||
|
||||
<div class="time-ago">
|
||||
<core-tooltip label="{{stateObj.last_changed}}" position="bottom">
|
||||
{{lastChangedFromNow(stateObj.last_changed)}}
|
||||
</core-tooltip>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class='state toggle' self-center flex>
|
||||
<paper-toggle-button checked="{{toggleChecked}}">
|
||||
</paper-toggle-button>
|
||||
</div>
|
||||
|
||||
<template if="{{!stateUnknown}}">
|
||||
<template if="{{stateObj.canToggle}}">
|
||||
<div class='state toggle' self-center flex>
|
||||
<paper-toggle-button checked="{{toggleChecked}}">
|
||||
</paper-toggle-button>
|
||||
</div>
|
||||
</template>
|
||||
<template if="{{!stateObj.canToggle}}">
|
||||
<div class='state text'>{{stateObj.stateDisplay}}</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template if="{{stateUnknown}}">
|
||||
<div class="state" self-center flex>Updating..</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
@ -114,7 +51,6 @@
|
||||
cb_turn_on: null,
|
||||
cb_turn_off: null,
|
||||
cb_edit: null,
|
||||
stateUnknown: false,
|
||||
toggleChecked: -1,
|
||||
|
||||
observe: {
|
||||
74
homeassistant/components/http/www_static/polymer/state-info.html
Executable file
74
homeassistant/components/http/www_static/polymer/state-info.html
Executable file
@ -0,0 +1,74 @@
|
||||
<script src="bower_components/moment/moment.js"></script>
|
||||
<link rel="import" href="bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="bower_components/core-tooltip/core-tooltip.html">
|
||||
<link rel="import" href="bower_components/core-style/core-style.html">
|
||||
|
||||
<link rel="import" href="state-badge.html">
|
||||
|
||||
<polymer-element name="state-info"
|
||||
attributes="stateObj cb_edit">
|
||||
<template>
|
||||
<style>
|
||||
state-badge {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
state-badge:hover {
|
||||
background-color: #039be5;
|
||||
}
|
||||
|
||||
.name {
|
||||
text-transform: capitalize;
|
||||
font-weight: 300;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.time-ago {
|
||||
color: darkgrey;
|
||||
margin-top: -2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<state-badge
|
||||
stateObj="{{stateObj}}"
|
||||
on-click="{{editClicked}}">
|
||||
</state-badge>
|
||||
|
||||
<div class='info'>
|
||||
<div class='name'>
|
||||
{{stateObj.entityDisplay}}
|
||||
</div>
|
||||
|
||||
<div class="time-ago">
|
||||
<core-tooltip label="{{stateObj.last_changed}}" position="bottom">
|
||||
{{lastChangedFromNow(stateObj.last_changed)}}
|
||||
</core-tooltip>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
stateObj: {},
|
||||
|
||||
lastChangedFromNow: function(lastChanged) {
|
||||
return moment(lastChanged, "HH:mm:ss DD-MM-YYYY").fromNow();
|
||||
},
|
||||
|
||||
editClicked: function() {
|
||||
if(this.cb_edit) {
|
||||
this.cb_edit(this.stateObj.entity_id);
|
||||
}
|
||||
},
|
||||
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
@ -1,5 +1,7 @@
|
||||
<link rel="import" href="bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="state-card.html">
|
||||
<link rel="import" href="bower_components/core-style/core-style.html">
|
||||
<link rel="import" href="state-card-display.html">
|
||||
<link rel="import" href="state-card-toggle.html">
|
||||
|
||||
<polymer-element name="states-cards" attributes="api filter">
|
||||
<template>
|
||||
@ -9,45 +11,68 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
state-card {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media all and (min-width: 764px) {
|
||||
:host {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
state-card {
|
||||
.state-card {
|
||||
width: calc(50% - 44px);
|
||||
margin: 8px 0 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1100px) {
|
||||
state-card {
|
||||
.state-card {
|
||||
width: calc(33% - 38px);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1450px) {
|
||||
state-card {
|
||||
.state-card {
|
||||
width: calc(25% - 42px);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<core-style id="state-card">
|
||||
<!-- generic state card CSS -->
|
||||
:host {
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
|
||||
transition: all 0.30s ease-out;
|
||||
|
||||
position: relative;
|
||||
background-color: white;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
</core-style>
|
||||
|
||||
<div horizontal layout wrap>
|
||||
<template repeat="{{state in getStates(api.states, filter)}}">
|
||||
<state-card
|
||||
|
||||
<template id="display">
|
||||
<state-card-display
|
||||
class='state-card'
|
||||
stateObj="{{state}}"
|
||||
cb_edit={{editCallback}}>
|
||||
</state-card-display>
|
||||
</template>
|
||||
|
||||
<template id="toggle">
|
||||
<state-card-toggle
|
||||
class='state-card'
|
||||
stateObj="{{state}}"
|
||||
cb_turn_on="{{api.turn_on}}"
|
||||
cb_turn_off="{{api.turn_off}}"
|
||||
cb_edit={{editCallback}}>
|
||||
</state-card>
|
||||
</state-card-display>
|
||||
</template>
|
||||
|
||||
<template repeat="{{state in getStates(api.states, filter)}}">
|
||||
<template bind ref="{{state.cardType}}"></template>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user