Polymer .9: Style fixes
This commit is contained in:
parent
76cf0e445d
commit
eb0584d466
7 changed files with 99 additions and 105 deletions
|
@ -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) {
|
||||||
|
|
|
@ -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]]'>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
@ -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');
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -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.
|
||||||
|
|
Loading…
Add table
Reference in a new issue