Polymer .9: Style fixes

This commit is contained in:
Paulus Schoutsen 2015-05-22 00:21:47 -07:00
parent 76cf0e445d
commit eb0584d466
7 changed files with 99 additions and 105 deletions

View file

@ -7,6 +7,7 @@
:host { :host {
display: block; display: block;
width: 100%; width: 100%;
background-color: #E5E5E5;
} }
@media all and (min-width: 1020px) { @media all and (min-width: 1020px) {

View file

@ -11,17 +11,18 @@
:host { :host {
display: block; display: block;
} }
.loading-container {
text-align: center;
padding: 8px;
}
</style> </style>
<template> <template>
<google-legacy-loader on-api-load="googleApiLoaded"></google-legacy-loader> <google-legacy-loader on-api-load="googleApiLoaded"></google-legacy-loader>
<div hidden$="{{!isLoading}}" > <div hidden$="{{!isLoading}}" class='loading-container'>
<div class='layout horizontal center'>
<div class='layout vertical center'>
<loading-box>Loading history data</loading-box> <loading-box>Loading history data</loading-box>
</div> </div>
</div>
</div>
<template is='dom-if' if='[[!isLoading]]'> <template is='dom-if' if='[[!isLoading]]'>
<template is='dom-if' if='[[groupedStateHistory.timeline]]'> <template is='dom-if' if='[[groupedStateHistory.timeline]]'>

View file

@ -1,16 +1,16 @@
<link rel="import" href="bower_components/polymer/polymer.html"> <link rel='import' href='bower_components/polymer/polymer.html'>
<link rel="import" href="bower_components/font-roboto/roboto.html"> <!-- <link rel='import' href='bower_components/font-roboto/roboto.html'> -->
<link rel="import" href="resources/home-assistant-js.html"> <link rel='import' href='resources/home-assistant-js.html'>
<link rel="import" href="resources/home-assistant-icons.html"> <link rel='import' href='resources/home-assistant-icons.html'>
<link rel="import" href="resources/store-listener-behavior.html"> <link rel='import' href='resources/store-listener-behavior.html'>
<link rel="import" href="layouts/login-form.html"> <link rel='import' href='layouts/login-form.html'>
<link rel="import" href="layouts/home-assistant-main.html"> <link rel='import' href='layouts/home-assistant-main.html'>
<link rel="import" href="resources/home-assistant-style.html"> <link rel='import' href='resources/home-assistant-style.html'>
<dom-module id="home-assistant"> <dom-module id='home-assistant'>
<style> <style>
:host { :host {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
@ -21,11 +21,11 @@
<home-assistant-icons></home-assistant-icons> <home-assistant-icons></home-assistant-icons>
<template> <template>
<template is="dom-if" if="[[!loaded]]"> <template is='dom-if' if='[[!loaded]]'>
<login-form></login-form> <login-form></login-form>
</template> </template>
<template is="dom-if" if="[[loaded]]"> <template is='dom-if' if='[[loaded]]'>
<home-assistant-main></home-assistant-main> <home-assistant-main></home-assistant-main>
</template> </template>

View file

@ -1,32 +1,28 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel='import' href='../bower_components/polymer/polymer.html'>
<link rel="import" href="../bower_components/layout/layout.html"> <link rel='import' href='../bower_components/layout/layout.html'>
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html"> <link rel='import' href='../bower_components/paper-drawer-panel/paper-drawer-panel.html'>
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html"> <link rel='import' href='../bower_components/paper-header-panel/paper-header-panel.html'>
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html"> <link rel='import' href='../bower_components/paper-toolbar/paper-toolbar.html'>
<link rel="import" href="../bower_components/paper-menu/paper-menu.html"> <link rel='import' href='../bower_components/paper-menu/paper-menu.html'>
<link rel="import" href="../bower_components/iron-icon/iron-icon.html"> <link rel='import' href='../bower_components/iron-icon/iron-icon.html'>
<link rel="import" href="../bower_components/paper-item/paper-item.html"> <link rel='import' href='../bower_components/paper-item/paper-item.html'>
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html"> <link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel="import" href="../layouts/partial-states.html"> <link rel='import' href='../layouts/partial-states.html'>
<link rel="import" href="../layouts/partial-logbook.html"> <link rel='import' href='../layouts/partial-logbook.html'>
<link rel="import" href="../layouts/partial-history.html"> <link rel='import' href='../layouts/partial-history.html'>
<link rel="import" href="../layouts/partial-dev-call-service.html"> <link rel='import' href='../layouts/partial-dev-call-service.html'>
<link rel="import" href="../layouts/partial-dev-fire-event.html"> <link rel='import' href='../layouts/partial-dev-fire-event.html'>
<link rel="import" href="../layouts/partial-dev-set-state.html"> <link rel='import' href='../layouts/partial-dev-set-state.html'>
<link rel="import" href="../managers/notification-manager.html"> <link rel='import' href='../managers/notification-manager.html'>
<link rel="import" href="../managers/modal-manager.html"> <link rel='import' href='../managers/modal-manager.html'>
<link rel="import" href="../components/stream-status.html"> <link rel='import' href='../components/stream-status.html'>
<dom-module id="home-assistant-main"> <dom-module id='home-assistant-main'>
<style> <style>
paper-drawer-panel {
background-color: #E5E5E5;
}
.sidenav { .sidenav {
background: #fafafa; background: #fafafa;
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
@ -67,36 +63,36 @@
<notification-manager></notification-manager> <notification-manager></notification-manager>
<modal-manager></modal-manager> <modal-manager></modal-manager>
<paper-drawer-panel id="drawer" narrow='{{narrow}}'> <paper-drawer-panel id='drawer' narrow='{{narrow}}'>
<paper-header-panel mode="scroll" drawer class='sidenav fit'> <paper-header-panel mode='scroll' drawer class='sidenav fit'>
<paper-toolbar> <paper-toolbar>
Home Assistant Home Assistant
</paper-toolbar> </paper-toolbar>
<paper-menu id="menu" class="layout vertical fit" <paper-menu id='menu' class='layout vertical fit'
selectable="[data-panel]" attr-for-selected="data-panel" selectable='[data-panel]' attr-for-selected='data-panel'
on-iron-select="menuSelect" selected="[[selected]]"> on-iron-select='menuSelect' selected='[[selected]]'>
<paper-item data-panel="states"> <paper-item data-panel='states'>
<iron-icon icon="apps"></iron-icon> States <iron-icon icon='apps'></iron-icon> States
</paper-item> </paper-item>
<template is="dom-repeat" items="{{activeFilters}}"> <template is='dom-repeat' items='{{activeFilters}}'>
<paper-item data-panel$="[[filterType(item)]]"> <paper-item data-panel$='[[filterType(item)]]'>
<iron-icon icon="[[filterIcon(item)]]"></iron-icon> <iron-icon icon='[[filterIcon(item)]]'></iron-icon>
<span>[[filterName(item)]]</span> <span>[[filterName(item)]]</span>
</paper-item> </paper-item>
</template> </template>
<template is="dom-if" if="[[hasHistoryComponent]]"> <template is='dom-if' if='[[hasHistoryComponent]]'>
<paper-item data-panel="history"> <paper-item data-panel='history'>
<iron-icon icon="assessment"></iron-icon> <iron-icon icon='assessment'></iron-icon>
History History
</paper-item> </paper-item>
</template> </template>
<template is="dom-if" if="[[hasLogbookComponent]]"> <template is='dom-if' if='[[hasLogbookComponent]]'>
<paper-item data-panel="logbook"> <paper-item data-panel='logbook'>
<iron-icon icon="list"></iron-icon> <iron-icon icon='list'></iron-icon>
Logbook Logbook
</paper-item> </paper-item>
</template> </template>
@ -104,7 +100,7 @@
<div class='flex'></div> <div class='flex'></div>
<paper-item data-panel='logout'> <paper-item data-panel='logout'>
<iron-icon icon="exit-to-app"></iron-icon> <iron-icon icon='exit-to-app'></iron-icon>
Log Out Log Out
</paper-item> </paper-item>
@ -116,14 +112,14 @@
<div class='text label divider'>Developer Tools</div> <div class='text label divider'>Developer Tools</div>
<div class='dev-tools layout horizontal justified'> <div class='dev-tools layout horizontal justified'>
<paper-icon-button <paper-icon-button
icon="settings-remote" data-panel$='[[selectedDevService]]' icon='settings-remote' data-panel$='[[selectedDevService]]'
on-click="handleDevClick"></paper-icon-button> on-click='handleDevClick'></paper-icon-button>
<paper-icon-button <paper-icon-button
icon="settings-ethernet" data-panel$='[[selectedDevState]]' icon='settings-ethernet' data-panel$='[[selectedDevState]]'
on-click="handleDevClick"></paper-icon-button> on-click='handleDevClick'></paper-icon-button>
<paper-icon-button <paper-icon-button
icon="settings-input-antenna" data-panel$='[[selectedDevEvent]]' icon='settings-input-antenna' data-panel$='[[selectedDevEvent]]'
on-click="handleDevClick"></paper-icon-button> on-click='handleDevClick'></paper-icon-button>
</div> </div>
</paper-menu> </paper-menu>
</paper-header-panel> </paper-header-panel>
@ -132,25 +128,25 @@
This is the main partial, never remove it from the DOM but hide it This is the main partial, never remove it from the DOM but hide it
to speed up when people click on states. to speed up when people click on states.
--> -->
<partial-states hidden$="[[hideStates]]" <partial-states hidden$='[[hideStates]]'
main narrow="[[narrow]]" main narrow='[[narrow]]'
filter="[[stateFilter]]"> filter='[[stateFilter]]'>
</partial-states> </partial-states>
<template is='dom-if' if="[[isSelectedLogbook]]"> <template is='dom-if' if='[[isSelectedLogbook]]'>
<partial-logbook main narrow="[[narrow]]"></partial-logbook> <partial-logbook main narrow='[[narrow]]'></partial-logbook>
</template> </template>
<template is='dom-if' if="[[isSelectedHistory]]"> <template is='dom-if' if='[[isSelectedHistory]]'>
<partial-history main narrow="[[narrow]]"></partial-history> <partial-history main narrow='[[narrow]]'></partial-history>
</template> </template>
<template is='dom-if' if="[[isSelectedDevService]]"> <template is='dom-if' if='[[isSelectedDevService]]'>
<partial-dev-call-service main narrow="[[narrow]]"></partial-dev-call-service> <partial-dev-call-service main narrow='[[narrow]]'></partial-dev-call-service>
</template> </template>
<template is='dom-if' if="[[isSelectedDevEvent]]"> <template is='dom-if' if='[[isSelectedDevEvent]]'>
<partial-dev-fire-event main narrow="[[narrow]]"></partial-dev-fire-event> <partial-dev-fire-event main narrow='[[narrow]]'></partial-dev-fire-event>
</template> </template>
<template is='dom-if' if="[[isSelectedDevState]]"> <template is='dom-if' if='[[isSelectedDevState]]'>
<partial-dev-set-state main narrow="[[narrow]]"></partial-dev-set-state> <partial-dev-set-state main narrow='[[narrow]]'></partial-dev-set-state>
</template> </template>
</paper-drawer-panel> </paper-drawer-panel>

View file

@ -1,34 +1,28 @@
<link rel="import" href="../bower_components/polymer/polymer.html"> <link rel='import' href='../bower_components/polymer/polymer.html'>
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html"> <link rel='import' href='../bower_components/paper-header-panel/paper-header-panel.html'>
<!-- <link rel="import" href="../bower_components/core-scroll-header-panel/core-scroll-header-panel.html"> --> <link rel='import' href='../bower_components/paper-toolbar/paper-toolbar.html'>
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html"> <link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<!-- <link rel="import" href="../bower_components/core-style/core-style.html"> --> <dom-module id='partial-base'>
<dom-module id="partial-base">
<template> <template>
<paper-header-panel class='fit' mode="scroll"> <paper-header-panel class='fit' mode='scroll'>
<paper-toolbar> <paper-toolbar>
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> <paper-icon-button icon='menu' paper-drawer-toggle></paper-icon-button>
<div class='flex'> <div class='flex'>
<content select="[header-title]"></content> <content select='[header-title]'></content>
</div> </div>
<content select="[header-buttons]"></content> <content select='[header-buttons]'></content>
</paper-toolbar> </paper-toolbar>
<content></content> <div class='fit'><content></content></div>
</paper-header-panel> </paper-header-panel>
</template> </template>
</dom-module> </dom-module>
<script> <script>
(function() { (function() {
Polymer({ Polymer({
is: 'partial-base', is: 'partial-base',
@ -39,7 +33,5 @@
}, },
}, },
}); });
})(); })();
</script> </script>

View file

@ -22,7 +22,7 @@
<paper-icon-button icon="refresh" header-buttons <paper-icon-button icon="refresh" header-buttons
on-click="handleRefreshClick"></paper-icon-button> on-click="handleRefreshClick"></paper-icon-button>
<div flex class="[[computeContentClasses(narrow)]]"> <div class$="[[computeContentClasses(narrow)]]">
<state-history-charts state-history="[[stateHistory]]" <state-history-charts state-history="[[stateHistory]]"
is-loading-data="[[isLoadingData]]"></state-history-charts> is-loading-data="[[isLoadingData]]"></state-history-charts>
</div> </div>
@ -39,6 +39,10 @@
behaviors: [StoreListenerBehavior], behaviors: [StoreListenerBehavior],
properties: { properties: {
narrow: {
type: Boolean,
},
stateHistory: { stateHistory: {
type: Object, type: Object,
}, },
@ -67,7 +71,7 @@
}, },
computeContentClasses: function(narrow) { computeContentClasses: function(narrow) {
return 'content ' + (this.narrow ? 'narrow' : 'wide'); return 'flex content ' + (narrow ? 'narrow' : 'wide');
}, },
}); });
})(); })();

View file

@ -51,7 +51,7 @@
<paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner> <paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
</div> </div>
<state-cards states="[[states]]"> <state-cards states="[[states]]" class='fit'>
<h3>Hi there!</h3> <h3>Hi there!</h3>
<p> <p>
It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet. It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet.