Polymer .9: Style fixes
This commit is contained in:
Paulus Schoutsen
parent
76cf0e445d
commit
eb0584d466
7 changed files with 99 additions and 105 deletions
|
|
@ -7,6 +7,7 @@
|
|||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #E5E5E5;
|
||||
}
|
||||
|
||||
@media all and (min-width: 1020px) {
|
||||
|
|
|
|||
|
|
@ -11,17 +11,18 @@
|
|||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<google-legacy-loader on-api-load="googleApiLoaded"></google-legacy-loader>
|
||||
|
||||
<div hidden$="{{!isLoading}}" >
|
||||
<div class='layout horizontal center'>
|
||||
<div class='layout vertical center'>
|
||||
<div hidden$="{{!isLoading}}" class='loading-container'>
|
||||
<loading-box>Loading history data</loading-box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template is='dom-if' if='[[!isLoading]]'>
|
||||
<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/font-roboto/roboto.html">
|
||||
<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-js.html">
|
||||
<link rel="import" href="resources/home-assistant-icons.html">
|
||||
<link rel="import" href="resources/store-listener-behavior.html">
|
||||
<link rel='import' href='resources/home-assistant-js.html'>
|
||||
<link rel='import' href='resources/home-assistant-icons.html'>
|
||||
<link rel='import' href='resources/store-listener-behavior.html'>
|
||||
|
||||
<link rel="import" href="layouts/login-form.html">
|
||||
<link rel="import" href="layouts/home-assistant-main.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">
|
||||
<link rel='import' href='resources/home-assistant-style.html'>
|
||||
|
||||
<dom-module id="home-assistant">
|
||||
<dom-module id='home-assistant'>
|
||||
<style>
|
||||
:host {
|
||||
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
||||
|
|
@ -21,11 +21,11 @@
|
|||
<home-assistant-icons></home-assistant-icons>
|
||||
|
||||
<template>
|
||||
<template is="dom-if" if="[[!loaded]]">
|
||||
<template is='dom-if' if='[[!loaded]]'>
|
||||
<login-form></login-form>
|
||||
</template>
|
||||
|
||||
<template is="dom-if" if="[[loaded]]">
|
||||
<template is='dom-if' if='[[loaded]]'>
|
||||
<home-assistant-main></home-assistant-main>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,28 @@
|
|||
<link rel="import" href="../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../bower_components/layout/layout.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/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-toolbar/paper-toolbar.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/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-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-toolbar/paper-toolbar.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/paper-item/paper-item.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-logbook.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-fire-event.html">
|
||||
<link rel="import" href="../layouts/partial-dev-set-state.html">
|
||||
<link rel='import' href='../layouts/partial-states.html'>
|
||||
<link rel='import' href='../layouts/partial-logbook.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-fire-event.html'>
|
||||
<link rel='import' href='../layouts/partial-dev-set-state.html'>
|
||||
|
||||
<link rel="import" href="../managers/notification-manager.html">
|
||||
<link rel="import" href="../managers/modal-manager.html">
|
||||
<link rel='import' href='../managers/notification-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>
|
||||
paper-drawer-panel {
|
||||
background-color: #E5E5E5;
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
background: #fafafa;
|
||||
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -67,36 +63,36 @@
|
|||
<notification-manager></notification-manager>
|
||||
<modal-manager></modal-manager>
|
||||
|
||||
<paper-drawer-panel id="drawer" narrow='{{narrow}}'>
|
||||
<paper-header-panel mode="scroll" drawer class='sidenav fit'>
|
||||
<paper-drawer-panel id='drawer' narrow='{{narrow}}'>
|
||||
<paper-header-panel mode='scroll' drawer class='sidenav fit'>
|
||||
<paper-toolbar>
|
||||
Home Assistant
|
||||
</paper-toolbar>
|
||||
|
||||
<paper-menu id="menu" class="layout vertical fit"
|
||||
selectable="[data-panel]" attr-for-selected="data-panel"
|
||||
on-iron-select="menuSelect" selected="[[selected]]">
|
||||
<paper-item data-panel="states">
|
||||
<iron-icon icon="apps"></iron-icon> States
|
||||
<paper-menu id='menu' class='layout vertical fit'
|
||||
selectable='[data-panel]' attr-for-selected='data-panel'
|
||||
on-iron-select='menuSelect' selected='[[selected]]'>
|
||||
<paper-item data-panel='states'>
|
||||
<iron-icon icon='apps'></iron-icon> States
|
||||
</paper-item>
|
||||
|
||||
<template is="dom-repeat" items="{{activeFilters}}">
|
||||
<paper-item data-panel$="[[filterType(item)]]">
|
||||
<iron-icon icon="[[filterIcon(item)]]"></iron-icon>
|
||||
<template is='dom-repeat' items='{{activeFilters}}'>
|
||||
<paper-item data-panel$='[[filterType(item)]]'>
|
||||
<iron-icon icon='[[filterIcon(item)]]'></iron-icon>
|
||||
<span>[[filterName(item)]]</span>
|
||||
</paper-item>
|
||||
</template>
|
||||
|
||||
<template is="dom-if" if="[[hasHistoryComponent]]">
|
||||
<paper-item data-panel="history">
|
||||
<iron-icon icon="assessment"></iron-icon>
|
||||
<template is='dom-if' if='[[hasHistoryComponent]]'>
|
||||
<paper-item data-panel='history'>
|
||||
<iron-icon icon='assessment'></iron-icon>
|
||||
History
|
||||
</paper-item>
|
||||
</template>
|
||||
|
||||
<template is="dom-if" if="[[hasLogbookComponent]]">
|
||||
<paper-item data-panel="logbook">
|
||||
<iron-icon icon="list"></iron-icon>
|
||||
<template is='dom-if' if='[[hasLogbookComponent]]'>
|
||||
<paper-item data-panel='logbook'>
|
||||
<iron-icon icon='list'></iron-icon>
|
||||
Logbook
|
||||
</paper-item>
|
||||
</template>
|
||||
|
|
@ -104,7 +100,7 @@
|
|||
<div class='flex'></div>
|
||||
|
||||
<paper-item data-panel='logout'>
|
||||
<iron-icon icon="exit-to-app"></iron-icon>
|
||||
<iron-icon icon='exit-to-app'></iron-icon>
|
||||
Log Out
|
||||
</paper-item>
|
||||
|
||||
|
|
@ -116,14 +112,14 @@
|
|||
<div class='text label divider'>Developer Tools</div>
|
||||
<div class='dev-tools layout horizontal justified'>
|
||||
<paper-icon-button
|
||||
icon="settings-remote" data-panel$='[[selectedDevService]]'
|
||||
on-click="handleDevClick"></paper-icon-button>
|
||||
icon='settings-remote' data-panel$='[[selectedDevService]]'
|
||||
on-click='handleDevClick'></paper-icon-button>
|
||||
<paper-icon-button
|
||||
icon="settings-ethernet" data-panel$='[[selectedDevState]]'
|
||||
on-click="handleDevClick"></paper-icon-button>
|
||||
icon='settings-ethernet' data-panel$='[[selectedDevState]]'
|
||||
on-click='handleDevClick'></paper-icon-button>
|
||||
<paper-icon-button
|
||||
icon="settings-input-antenna" data-panel$='[[selectedDevEvent]]'
|
||||
on-click="handleDevClick"></paper-icon-button>
|
||||
icon='settings-input-antenna' data-panel$='[[selectedDevEvent]]'
|
||||
on-click='handleDevClick'></paper-icon-button>
|
||||
</div>
|
||||
</paper-menu>
|
||||
</paper-header-panel>
|
||||
|
|
@ -132,25 +128,25 @@
|
|||
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$="[[hideStates]]"
|
||||
main narrow="[[narrow]]"
|
||||
filter="[[stateFilter]]">
|
||||
<partial-states hidden$='[[hideStates]]'
|
||||
main narrow='[[narrow]]'
|
||||
filter='[[stateFilter]]'>
|
||||
</partial-states>
|
||||
|
||||
<template is='dom-if' if="[[isSelectedLogbook]]">
|
||||
<partial-logbook main narrow="[[narrow]]"></partial-logbook>
|
||||
<template is='dom-if' if='[[isSelectedLogbook]]'>
|
||||
<partial-logbook main narrow='[[narrow]]'></partial-logbook>
|
||||
</template>
|
||||
<template is='dom-if' if="[[isSelectedHistory]]">
|
||||
<partial-history main narrow="[[narrow]]"></partial-history>
|
||||
<template is='dom-if' if='[[isSelectedHistory]]'>
|
||||
<partial-history main narrow='[[narrow]]'></partial-history>
|
||||
</template>
|
||||
<template is='dom-if' if="[[isSelectedDevService]]">
|
||||
<partial-dev-call-service main narrow="[[narrow]]"></partial-dev-call-service>
|
||||
<template is='dom-if' if='[[isSelectedDevService]]'>
|
||||
<partial-dev-call-service main narrow='[[narrow]]'></partial-dev-call-service>
|
||||
</template>
|
||||
<template is='dom-if' if="[[isSelectedDevEvent]]">
|
||||
<partial-dev-fire-event main narrow="[[narrow]]"></partial-dev-fire-event>
|
||||
<template is='dom-if' if='[[isSelectedDevEvent]]'>
|
||||
<partial-dev-fire-event main narrow='[[narrow]]'></partial-dev-fire-event>
|
||||
</template>
|
||||
<template is='dom-if' if="[[isSelectedDevState]]">
|
||||
<partial-dev-set-state main narrow="[[narrow]]"></partial-dev-set-state>
|
||||
<template is='dom-if' if='[[isSelectedDevState]]'>
|
||||
<partial-dev-set-state main narrow='[[narrow]]'></partial-dev-set-state>
|
||||
</template>
|
||||
</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-icon-button/paper-icon-button.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/core-style/core-style.html"> -->
|
||||
|
||||
<dom-module id="partial-base">
|
||||
<dom-module id='partial-base'>
|
||||
<template>
|
||||
<paper-header-panel class='fit' mode="scroll">
|
||||
<paper-header-panel class='fit' mode='scroll'>
|
||||
<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'>
|
||||
<content select="[header-title]"></content>
|
||||
<content select='[header-title]'></content>
|
||||
</div>
|
||||
<content select="[header-buttons]"></content>
|
||||
<content select='[header-buttons]'></content>
|
||||
</paper-toolbar>
|
||||
|
||||
<content></content>
|
||||
|
||||
<div class='fit'><content></content></div>
|
||||
</paper-header-panel>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
is: 'partial-base',
|
||||
|
||||
|
|
@ -39,7 +33,5 @@
|
|||
},
|
||||
},
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<paper-icon-button icon="refresh" header-buttons
|
||||
on-click="handleRefreshClick"></paper-icon-button>
|
||||
|
||||
<div flex class="[[computeContentClasses(narrow)]]">
|
||||
<div class$="[[computeContentClasses(narrow)]]">
|
||||
<state-history-charts state-history="[[stateHistory]]"
|
||||
is-loading-data="[[isLoadingData]]"></state-history-charts>
|
||||
</div>
|
||||
|
|
@ -39,6 +39,10 @@
|
|||
behaviors: [StoreListenerBehavior],
|
||||
|
||||
properties: {
|
||||
narrow: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
stateHistory: {
|
||||
type: Object,
|
||||
},
|
||||
|
|
@ -67,7 +71,7 @@
|
|||
},
|
||||
|
||||
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>
|
||||
</div>
|
||||
|
||||
<state-cards states="[[states]]">
|
||||
<state-cards states="[[states]]" class='fit'>
|
||||
<h3>Hi there!</h3>
|
||||
<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.
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue