mirror of
https://github.com/home-assistant/core.git
synced 2025-04-24 09:17:53 +00:00
Tweaks for the new drawer UI
This commit is contained in:
Paulus Schoutsen
parent
0c181ead59
commit
772df97bc1
@ -1,2 +1,2 @@
|
||||
""" DO NOT MODIFY. Auto-generated by build_frontend script """
|
||||
VERSION = "9e0bb62c1e6376f8aa0dfdc17f9dfa7a"
|
||||
VERSION = "d7b5242370bf59018a6a4a2163d7daea"
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -2,7 +2,7 @@
|
||||
|
||||
<link rel="import" href="../components/state-info.html">
|
||||
|
||||
<polymer-element name="state-card-configurator" attributes="stateObj api" noscript>
|
||||
<polymer-element name="state-card-configurator" attributes="stateObj" noscript>
|
||||
<template>
|
||||
<style>
|
||||
.state {
|
||||
|
||||
@ -13,22 +13,35 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id='card'></div>
|
||||
<div id='cardContainer'></div>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
stateObjChanged: function() {
|
||||
while (this.$.card.lastChild) {
|
||||
this.$.card.removeChild(this.$.card.lastChild);
|
||||
stateObjChanged: function(oldVal, newVal) {
|
||||
var cardContainer = this.$.cardContainer;
|
||||
|
||||
if (!newVal) {
|
||||
if (cardContainer.lastChild) {
|
||||
cardContainer.removeChild(cardContainer.lastChild);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.stateObj.cardType) return;
|
||||
if (!oldVal || oldVal.cardType != newVal.cardType) {
|
||||
if (cardContainer.lastChild) {
|
||||
cardContainer.removeChild(cardContainer.lastChild);
|
||||
}
|
||||
|
||||
var stateCard = document.createElement("state-card-" + this.stateObj.cardType);
|
||||
stateCard.api = this.api;
|
||||
stateCard.stateObj = this.stateObj;
|
||||
this.$.card.appendChild(stateCard);
|
||||
}
|
||||
var stateCard = document.createElement("state-card-" + newVal.cardType);
|
||||
stateCard.stateObj = newVal;
|
||||
cardContainer.appendChild(stateCard);
|
||||
|
||||
} else {
|
||||
|
||||
cardContainer.lastChild.stateObj = newVal;
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
<link rel="import" href="state-card-content.html">
|
||||
|
||||
<polymer-element name="state-card" attributes="api stateObj" on-click="cardClicked">
|
||||
<polymer-element name="state-card" attributes="stateObj" on-click="cardClicked">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
@ -19,7 +19,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<state-card-content stateObj={{stateObj}} api={{api}}></state-card-content>
|
||||
<state-card-content stateObj={{stateObj}}></state-card-content>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
|
||||
<polymer-element name="entity-list" attributes="api cbEntityClicked">
|
||||
<polymer-element name="entity-list" attributes="cbEntityClicked">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
<link rel="import" href="domain-icon.html">
|
||||
|
||||
<polymer-element name="services-list" attributes="api cbServiceClicked">
|
||||
<polymer-element name="services-list" attributes="cbServiceClicked">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
|
||||
@ -5,10 +5,9 @@
|
||||
<link rel="import" href="../components/state-timeline.html">
|
||||
<link rel="import" href="../more-infos/more-info-content.html">
|
||||
|
||||
<polymer-element name="more-info-dialog" attributes="api">
|
||||
<polymer-element name="more-info-dialog">
|
||||
<template>
|
||||
<ha-action-dialog id="dialog">
|
||||
|
||||
<style>
|
||||
.title-card {
|
||||
margin-bottom: 24px;
|
||||
@ -21,9 +20,6 @@
|
||||
<state-timeline stateObj="{{stateObj}}"></state-timeline>
|
||||
<more-info-content stateObj="{{stateObj}}"></more-info-content>
|
||||
</div>
|
||||
|
||||
<!-- <paper-button dismissive on-click={{editClicked}}>Debug</paper-button>
|
||||
<paper-button affirmative>Dismiss</paper-button> -->
|
||||
</ha-action-dialog>
|
||||
|
||||
</template>
|
||||
@ -55,10 +51,6 @@ Polymer({
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
editClicked: function(ev) {
|
||||
window.hass.uiActions.showSetStateDialog(this.stateObj.entity_id);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</polymer-element>
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit 0f7d9c5d63c869101a7c636509a0ea3b9967cade
|
||||
Subproject commit 68908b8dec636f9b0f87f7c929bf8546d19aa11f
|
||||
@ -1,10 +1,11 @@
|
||||
<link rel="import" href="bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="bower_components/font-roboto/roboto.html">
|
||||
|
||||
<link rel="import" href="resources/home-assistant-style.html">
|
||||
|
||||
<link rel="import" href="home-assistant-api.html">
|
||||
<link rel="import" href="layouts/login-form.html">
|
||||
<link rel="import" href="layouts/home-assistant-main.html">
|
||||
<link rel="import" href="resources/home-assistant-style.html">
|
||||
|
||||
<polymer-element name="home-assistant" attributes="auth">
|
||||
<template>
|
||||
@ -17,7 +18,6 @@
|
||||
|
||||
</style>
|
||||
|
||||
<home-assistant-style></home-assistant-style>
|
||||
<home-assistant-api auth="{{auth}}"></home-assistant-api>
|
||||
|
||||
<template if="{{!loaded}}">
|
||||
|
||||
@ -1,15 +1,11 @@
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
|
||||
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
|
||||
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
|
||||
<link rel="import" href="../bower_components/core-menu/core-menu.html">
|
||||
|
||||
<link rel="import" href="../bower_components/core-style/core-style.html">
|
||||
|
||||
<link rel="import" href="../bower_components/core-icon/core-icon.html">
|
||||
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
|
||||
<link rel="import" href="../bower_components/paper-tabs/paper-tab.html">
|
||||
<link rel="import" href="../bower_components/paper-menu-button/paper-menu-button.html">
|
||||
<link rel="import" href="../bower_components/paper-dropdown/paper-dropdown.html">
|
||||
<link rel="import" href="../bower_components/paper-item/paper-item.html">
|
||||
|
||||
<link rel="import" href="../layouts/partial-states.html">
|
||||
@ -18,7 +14,7 @@
|
||||
<link rel="import" href="../layouts/partial-dev-call-service.html">
|
||||
<link rel="import" href="../layouts/partial-dev-set-state.html">
|
||||
|
||||
<polymer-element name="home-assistant-main" attributes="api">
|
||||
<polymer-element name="home-assistant-main">
|
||||
<template>
|
||||
<core-style ref="ha-headers"></core-style>
|
||||
|
||||
@ -58,8 +54,8 @@
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.seperator ~ paper-item {
|
||||
|
||||
.dev-tools {
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -68,7 +64,7 @@
|
||||
<core-toolbar>
|
||||
Home Assistant
|
||||
</core-toolbar>
|
||||
<core-menu
|
||||
<core-menu id="menu"
|
||||
selected="0" excludedLocalNames="div" on-core-select="{{menuSelect}}"
|
||||
layout vertical>
|
||||
<paper-item data-panel="states">
|
||||
@ -92,28 +88,30 @@
|
||||
</paper-item>
|
||||
|
||||
<div class='seperator'>Developer Tools</div>
|
||||
<paper-item data-panel="call-service">
|
||||
<core-icon icon="settings-remote"></core-icon>
|
||||
Call Service
|
||||
</paper-item>
|
||||
<paper-item data-panel="set-state">
|
||||
<core-icon icon="settings-ethernet"></core-icon>
|
||||
Set State
|
||||
</paper-item>
|
||||
<paper-item data-panel="fire-event">
|
||||
<core-icon icon="settings-input-antenna"></core-icon>
|
||||
Fire Event
|
||||
</paper-item>
|
||||
<div class='dev-tools' layout horizontal justified>
|
||||
<paper-icon-button
|
||||
icon="settings-remote" data-panel='call-service'
|
||||
on-click="{{handleDevClick}}"></paper-icon-button>
|
||||
<paper-icon-button
|
||||
icon="settings-ethernet" data-panel='set-state'
|
||||
on-click="{{handleDevClick}}"></paper-icon-button>
|
||||
<paper-icon-button
|
||||
icon="settings-input-antenna" data-panel='fire-event'
|
||||
on-click="{{handleDevClick}}"></paper-icon-button>
|
||||
</div>
|
||||
</core-menu>
|
||||
</core-header-panel>
|
||||
|
||||
<template if="{{selected == 'states' || selected == 'group'}}">
|
||||
<partial-states
|
||||
main narrow="{{narrow}}"
|
||||
togglePanel="{{togglePanel}}"
|
||||
filter="{{selected == 'group' ? 'group' : null}}">
|
||||
</partial-states>
|
||||
</template>
|
||||
<!--
|
||||
This is the main partial, never remove it from the DOM but hide it
|
||||
to speed up when people click on states.
|
||||
-->
|
||||
<partial-states hidden?="{{selected != 'states' && selected != 'group'}}"
|
||||
main narrow="{{narrow}}"
|
||||
togglePanel="{{togglePanel}}"
|
||||
filter="{{selected == 'group' ? 'group' : null}}">
|
||||
</partial-states>
|
||||
|
||||
<template if="{{selected == 'history'}}">
|
||||
<partial-history main narrow="{{narrow}}" togglePanel="{{togglePanel}}"></partial-history>
|
||||
</template>
|
||||
@ -140,12 +138,21 @@ Polymer({
|
||||
|
||||
menuSelect: function(ev, detail, sender) {
|
||||
if (detail.isSelected) {
|
||||
var newChoice = detail.item.dataset.panel;
|
||||
this.selectPanel(detail.item);
|
||||
}
|
||||
},
|
||||
|
||||
if(newChoice !== this.selected) {
|
||||
this.togglePanel();
|
||||
this.selected = newChoice;
|
||||
}
|
||||
handleDevClick: function(ev, detail, sender) {
|
||||
this.$.menu.selected = -1;
|
||||
this.selectPanel(ev.target);
|
||||
},
|
||||
|
||||
selectPanel: function(element) {
|
||||
var newChoice = element.dataset.panel;
|
||||
|
||||
if(newChoice !== this.selected) {
|
||||
this.togglePanel();
|
||||
this.selected = newChoice;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
||||
<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
|
||||
<link rel="import" href="../bower_components/core-input/core-input.html">
|
||||
@ -69,7 +70,6 @@
|
||||
spinnerMessage: "",
|
||||
|
||||
ready: function() {
|
||||
this.syncStore = window.hass.syncStore;
|
||||
this.authStore = window.hass.authStore;
|
||||
|
||||
this.authChangeListener = this.authChangeListener.bind(this);
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../bower_components/core-scroll-header-panel/core-scroll-header-panel.html">
|
||||
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
|
||||
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
@ -8,12 +10,6 @@
|
||||
<template>
|
||||
<core-style ref="ha-headers"></core-style>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<core-scroll-header-panel fit fixed="{{!narrow}}">
|
||||
<core-toolbar>
|
||||
<paper-icon-button
|
||||
@ -25,9 +21,7 @@
|
||||
<content select="[header-buttons]"></content>
|
||||
</core-toolbar>
|
||||
|
||||
<div class='content'>
|
||||
<content></content>
|
||||
</div>
|
||||
<content></content>
|
||||
|
||||
</core-scroll-header-panel>
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
||||
<link rel="import" href="../bower_components/paper-input/paper-input.html">
|
||||
<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
|
||||
@ -14,36 +15,42 @@
|
||||
<style>
|
||||
.form {
|
||||
padding: 24px;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
|
||||
<span header-title>Call Service</span>
|
||||
|
||||
<div layout horizontal?="{{!narrow}}" vertical?="{{narrow}}" class='form' flex?="{{!narrow}}">
|
||||
<div class='ha-form'>
|
||||
<paper-input id="inputDomain" label="Domain" floatingLabel="true" autofocus required></paper-input>
|
||||
<paper-input id="inputService" label="Service" floatingLabel="true" required></paper-input>
|
||||
<paper-input-decorator
|
||||
label="Service Data (JSON, optional)"
|
||||
floatingLabel="true">
|
||||
|
||||
<paper-autogrow-textarea id="inputDataWrapper">
|
||||
<textarea id="inputData"></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
|
||||
</paper-input-decorator>
|
||||
<paper-button on-click={{clickCallService}}>Call Service</paper-button>
|
||||
</div>
|
||||
<div class='form' fit>
|
||||
<p>
|
||||
Call a service from a component.
|
||||
</p>
|
||||
|
||||
<div class='sidebar'>
|
||||
<b>Available services:</b>
|
||||
<services-list api={{api}} cbServiceClicked={{serviceSelected}}></event-list>
|
||||
<div layout horizontal?="{{!narrow}}" vertical?="{{narrow}}">
|
||||
<div class='ha-form' flex?="{{!narrow}}">
|
||||
<paper-input id="inputDomain" label="Domain" floatingLabel="true" autofocus required></paper-input>
|
||||
<paper-input id="inputService" label="Service" floatingLabel="true" required></paper-input>
|
||||
<paper-input-decorator
|
||||
label="Service Data (JSON, optional)"
|
||||
floatingLabel="true">
|
||||
|
||||
<paper-autogrow-textarea id="inputDataWrapper">
|
||||
<textarea id="inputData"></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
|
||||
</paper-input-decorator>
|
||||
<paper-button on-click={{clickCallService}}>Call Service</paper-button>
|
||||
</div>
|
||||
|
||||
<div class='sidebar'>
|
||||
<b>Available services:</b>
|
||||
<services-list cbServiceClicked={{serviceSelected}}></event-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</partial-base>
|
||||
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
||||
<link rel="import" href="../bower_components/paper-input/paper-input.html">
|
||||
<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
|
||||
@ -14,35 +15,41 @@
|
||||
<style>
|
||||
.form {
|
||||
padding: 24px;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
|
||||
<span header-title>Fire Event</span>
|
||||
|
||||
<div layout horizontal?="{{!narrow}}" vertical?="{{narrow}}" class='form' flex>
|
||||
<div class='ha-form' flex?="{{!narrow}}">
|
||||
<paper-input
|
||||
id="inputType" label="Event Type" floatingLabel="true"
|
||||
autofocus required></paper-input>
|
||||
<paper-input-decorator
|
||||
label="Event Data (JSON, optional)"
|
||||
floatingLabel="true">
|
||||
|
||||
<paper-autogrow-textarea id="inputDataWrapper">
|
||||
<textarea id="inputData"></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
<div class='form' fit>
|
||||
<p>
|
||||
Fire an event on the event bus.
|
||||
</p>
|
||||
|
||||
<paper-button on-click={{clickFireEvent}}>Fire Event</paper-button>
|
||||
</div>
|
||||
<div layout horizontal?="{{!narrow}}" vertical?="{{narrow}}">
|
||||
<div class='ha-form' flex?="{{!narrow}}">
|
||||
<paper-input
|
||||
id="inputType" label="Event Type" floatingLabel="true"
|
||||
autofocus required></paper-input>
|
||||
<paper-input-decorator
|
||||
label="Event Data (JSON, optional)"
|
||||
floatingLabel="true">
|
||||
|
||||
<div class='sidebar'>
|
||||
<b>Available events:</b>
|
||||
<events-list api={{api}} cbEventClicked={{eventSelected}}></event-list>
|
||||
<paper-autogrow-textarea id="inputDataWrapper">
|
||||
<textarea id="inputData"></textarea>
|
||||
</paper-autogrow-textarea>
|
||||
</paper-input-decorator>
|
||||
|
||||
<paper-button on-click={{clickFireEvent}}>Fire Event</paper-button>
|
||||
</div>
|
||||
|
||||
<div class='sidebar'>
|
||||
<b>Available events:</b>
|
||||
<events-list cbEventClicked={{eventSelected}}></event-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</partial-base>
|
||||
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="../bower_components/paper-button/paper-button.html">
|
||||
<link rel="import" href="../bower_components/paper-input/paper-input.html">
|
||||
<link rel="import" href="../bower_components/paper-input/paper-input-decorator.html">
|
||||
@ -14,15 +15,16 @@
|
||||
<style>
|
||||
.form {
|
||||
padding: 24px;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
|
||||
<span header-title>Set State</span>
|
||||
|
||||
<div class='form'>
|
||||
<div class='form' fit>
|
||||
<div>
|
||||
This dialog will update the representation of the device within Home Assistant.<br />
|
||||
Set the representation of a device within Home Assistant.<br />
|
||||
This will not communicate with the actual device.
|
||||
</div>
|
||||
|
||||
@ -45,7 +47,7 @@
|
||||
|
||||
<div class='sidebar'>
|
||||
<b>Current entities:</b>
|
||||
<entity-list api={{api}} cbEntityClicked={{entitySelected}}></entity-list>
|
||||
<entity-list cbEntityClicked={{entitySelected}}></entity-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
|
||||
<link rel="import" href="./partial-base.html">
|
||||
|
||||
<link rel="import" href="../components/state-timeline.html">
|
||||
|
||||
@ -1,14 +1,18 @@
|
||||
<link rel="import" href="../bower_components/core-style/core-style.html">
|
||||
|
||||
<link rel="import" href="./partial-base.html">
|
||||
|
||||
<link rel="import" href="../components/state-cards.html">
|
||||
|
||||
<polymer-element name="partial-states" attributes="narrow togglePanel filter">
|
||||
<template>
|
||||
<core-style ref="ha-animations"></core-style>
|
||||
|
||||
<partial-base narrow="{{narrow}}" togglePanel="{{togglePanel}}">
|
||||
<span header-title>States</span>
|
||||
<span header-title>{{headerTitle}}</span>
|
||||
|
||||
<span header-buttons>
|
||||
<paper-icon-button icon="refresh"
|
||||
<paper-icon-button icon="refresh" class="{{isFetching && 'ha-spin'}}"
|
||||
on-click="{{handleRefreshClick}}"></paper-icon-button>
|
||||
</span>
|
||||
|
||||
@ -25,25 +29,45 @@
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
headerTitle: "States",
|
||||
states: [],
|
||||
isFetching: false,
|
||||
|
||||
ready: function() {
|
||||
this.stateStoreChanged = this.stateStoreChanged.bind(this);
|
||||
window.hass.stateStore.addChangeListener(this.stateStoreChanged);
|
||||
|
||||
this.syncStoreChanged = this.syncStoreChanged.bind(this);
|
||||
window.hass.syncStore.addChangeListener(this.syncStoreChanged);
|
||||
|
||||
this.refreshStates();
|
||||
},
|
||||
|
||||
detached: function() {
|
||||
window.hass.stateStore.removeChangeListener(this.stateStoreChanged);
|
||||
window.hass.syncStore.removeChangeListener(this.syncStoreChanged);
|
||||
},
|
||||
|
||||
stateStoreChanged: function() {
|
||||
this.refreshStates();
|
||||
},
|
||||
|
||||
syncStoreChanged: function() {
|
||||
this.isFetching = window.hass.syncStore.isFetching();
|
||||
},
|
||||
|
||||
filterChanged: function() {
|
||||
this.refreshStates();
|
||||
|
||||
switch (this.filter) {
|
||||
case "group":
|
||||
this.headerTitle = "Groups";
|
||||
break;
|
||||
|
||||
default:
|
||||
this.headerTitle = "States";
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
refreshStates: function() {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id='moreInfo' class='{{classNames}}'></div>
|
||||
<div id='moreInfoContainer' class='{{classNames}}'></div>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
@ -24,18 +24,30 @@ Polymer({
|
||||
'stateObj.attributes': 'stateAttributesChanged',
|
||||
},
|
||||
|
||||
stateObjChanged: function() {
|
||||
while (this.$.moreInfo.lastChild) {
|
||||
this.$.moreInfo.removeChild(this.$.moreInfo.lastChild);
|
||||
}
|
||||
stateObjChanged: function(oldVal, newVal) {
|
||||
var moreInfoContainer = this.$.moreInfoContainer;
|
||||
|
||||
if (!this.stateObj.moreInfoType) {
|
||||
if (!newVal) {
|
||||
if (moreInfoContainer.lastChild) {
|
||||
moreInfoContainer.removeChild(moreInfoContainer.lastChild);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
var moreInfo = document.createElement("more-info-" + this.stateObj.moreInfoType);
|
||||
moreInfo.stateObj = this.stateObj;
|
||||
this.$.moreInfo.appendChild(moreInfo);
|
||||
if (!oldVal || oldVal.moreInfoType != newVal.moreInfoType) {
|
||||
if (moreInfoContainer.lastChild) {
|
||||
moreInfoContainer.removeChild(moreInfoContainer.lastChild);
|
||||
}
|
||||
|
||||
var moreInfo = document.createElement("more-info-" + newVal.moreInfoType);
|
||||
moreInfo.stateObj = newVal;
|
||||
moreInfoContainer.appendChild(moreInfo);
|
||||
|
||||
} else {
|
||||
|
||||
moreInfoContainer.lastChild.stateObj = newVal;
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
stateAttributesChanged: function(oldVal, newVal) {
|
||||
|
||||
@ -31,8 +31,8 @@
|
||||
Polymer({
|
||||
|
||||
stateObjChanged: function() {
|
||||
var rising = window.hass.parseTime(this.stateObj.attributes.next_rising);
|
||||
var setting = window.hass.parseTime(this.stateObj.attributes.next_setting);
|
||||
var rising = window.hass.util.parseTime(this.stateObj.attributes.next_rising);
|
||||
var setting = window.hass.util.parseTime(this.stateObj.attributes.next_setting);
|
||||
|
||||
if(rising > setting) {
|
||||
this.$.sunData.appendChild(this.$.rising);
|
||||
|
||||
@ -1,91 +1,113 @@
|
||||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../bower_components/core-style/core-style.html">
|
||||
|
||||
<polymer-element name="home-assistant-style" noscript>
|
||||
<template>
|
||||
<core-style id="ha-headers">
|
||||
core-scroll-header-panel, core-header-panel {
|
||||
background-color: #E5E5E5;
|
||||
}
|
||||
<core-style id='ha-animations'>
|
||||
@-webkit-keyframes ha-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@keyframes ha-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
core-toolbar {
|
||||
background: #03a9f4;
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
}
|
||||
</core-style>
|
||||
.ha-spin {
|
||||
-webkit-animation: ha-spin 2s infinite linear;
|
||||
animation: ha-spin 2s infinite linear;
|
||||
}
|
||||
</core-style>
|
||||
<core-style id="ha-headers">
|
||||
core-scroll-header-panel, core-header-panel {
|
||||
background-color: #E5E5E5;
|
||||
}
|
||||
|
||||
<core-style id="ha-dialog">
|
||||
:host {
|
||||
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
||||
core-toolbar {
|
||||
background: #03a9f4;
|
||||
color: white;
|
||||
font-weight: normal;
|
||||
}
|
||||
</core-style>
|
||||
|
||||
min-width: 350px;
|
||||
max-width: 700px;
|
||||
<core-style id="ha-dialog">
|
||||
:host {
|
||||
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
||||
|
||||
/* First two are from core-transition-bottom */
|
||||
transition:
|
||||
transform 0.2s ease-in-out,
|
||||
opacity 0.2s ease-in,
|
||||
top .3s,
|
||||
left .3s !important;
|
||||
}
|
||||
min-width: 350px;
|
||||
max-width: 700px;
|
||||
|
||||
:host .sidebar {
|
||||
margin-left: 30px;
|
||||
}
|
||||
/* First two are from core-transition-bottom */
|
||||
transition:
|
||||
transform 0.2s ease-in-out,
|
||||
opacity 0.2s ease-in,
|
||||
top .3s,
|
||||
left .3s !important;
|
||||
}
|
||||
|
||||
@media all and (max-width: 620px) {
|
||||
:host.two-column {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-height: calc(100% - 64px);
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
:host .sidebar {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
:host .sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 620px) {
|
||||
:host.two-column {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-height: calc(100% - 64px);
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 464px) {
|
||||
:host {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-height: calc(100% - 64px);
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
:host .sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html /deep/ .ha-form paper-input {
|
||||
display: block;
|
||||
}
|
||||
@media all and (max-width: 464px) {
|
||||
:host {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-height: calc(100% - 64px);
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
html /deep/ .ha-form paper-input:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
</core-style>
|
||||
html /deep/ .ha-form paper-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
<core-style id='ha-key-value-table'>
|
||||
.data-entry {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
html /deep/ .ha-form paper-input:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
</core-style>
|
||||
|
||||
.data-entry:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
<core-style id='ha-key-value-table'>
|
||||
.data-entry {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.data-entry .key {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.data-entry:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.data-entry .value {
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
</core-style>
|
||||
</template>
|
||||
</polymer-element>
|
||||
.data-entry .key {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.data-entry .value {
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
</core-style>
|
||||
|
||||
@ -3,6 +3,8 @@ if [ ${PWD##*/} == "scripts" ]; then
|
||||
cd ..
|
||||
fi
|
||||
|
||||
scripts/build_js
|
||||
|
||||
# To build the frontend, you need node, bower and vulcanize
|
||||
# npm install -g bower vulcanize
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user