Nicer scrolling for more-info (#1005)

* nicer more-info scrolling (momentum & rubberband)

* move chart into scrolling region.
Fixes resizing issues of the paper-dialog (and scrolling area) because
of chart rendering after loading.
This commit is contained in:
NovapaX 2018-03-18 01:26:02 +01:00 committed by Paulus Schoutsen
parent 8146794857
commit 3324c7e01c
2 changed files with 21 additions and 21 deletions

View File

@ -66,27 +66,27 @@
state-obj="[[stateObj]]"
hass='[[hass]]' in-dialog></state-card-content>
</template>
<template is='dom-if' if="[[_computeShowHistoryComponent(hass, stateObj)]]" restamp>
<ha-state-history-data
hass='[[hass]]'
filter-type='recent-entity'
entity-id='[[stateObj.entity_id]]'
data='{{_stateHistory}}'
is-loading='{{_stateHistoryLoading}}'
cache-config='[[_cacheConfig]]'
></ha-state-history-data>
<state-history-charts
history-data="[[_stateHistory]]"
is-loading-data="[[_stateHistoryLoading]]"
up-to-now
no-single=[[large]]
is-zoomable=[[large]]
></state-history-charts>
</template>
<paper-dialog-scrollable dialog-element='[[dialogElement]]'>
<template is='dom-if' if="[[_computeShowHistoryComponent(hass, stateObj)]]" restamp>
<ha-state-history-data
hass='[[hass]]'
filter-type='recent-entity'
entity-id='[[stateObj.entity_id]]'
data='{{_stateHistory}}'
is-loading='{{_stateHistoryLoading}}'
cache-config='[[_cacheConfig]]'
></ha-state-history-data>
<state-history-charts
history-data="[[_stateHistory]]"
is-loading-data="[[_stateHistoryLoading]]"
up-to-now
no-single=[[large]]
is-zoomable=[[large]]
></state-history-charts>
</template>
<more-info-content
state-obj="[[stateObj]]" hass='[[hass]]'></more-info-content>
state-obj="[[stateObj]]" hass='[[hass]]'
></more-info-content>
</paper-dialog-scrollable>
</template>
</dom-module>

View File

@ -172,7 +172,7 @@
}
--paper-dialog-scrollable: {
-webkit-overflow-scrolling: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 16px;
}
}
@ -183,7 +183,7 @@
}
:host {
--paper-dialog-scrollable: {
-webkit-overflow-scrolling: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 0px;
}
}