mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-27 11:16:35 +00:00
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:
parent
8146794857
commit
3324c7e01c
@ -66,27 +66,27 @@
|
|||||||
state-obj="[[stateObj]]"
|
state-obj="[[stateObj]]"
|
||||||
hass='[[hass]]' in-dialog></state-card-content>
|
hass='[[hass]]' in-dialog></state-card-content>
|
||||||
</template>
|
</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]]'>
|
<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
|
<more-info-content
|
||||||
state-obj="[[stateObj]]" hass='[[hass]]'></more-info-content>
|
state-obj="[[stateObj]]" hass='[[hass]]'
|
||||||
|
></more-info-content>
|
||||||
</paper-dialog-scrollable>
|
</paper-dialog-scrollable>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
@ -172,7 +172,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
--paper-dialog-scrollable: {
|
--paper-dialog-scrollable: {
|
||||||
-webkit-overflow-scrolling: auto;
|
-webkit-overflow-scrolling: touch;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -183,7 +183,7 @@
|
|||||||
}
|
}
|
||||||
:host {
|
:host {
|
||||||
--paper-dialog-scrollable: {
|
--paper-dialog-scrollable: {
|
||||||
-webkit-overflow-scrolling: auto;
|
-webkit-overflow-scrolling: touch;
|
||||||
margin-bottom: 0px;
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user