jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-30 04:36:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

[logbook] fix scrolling on iOS (#4950)

Browse Source 
* [logbook] fix scrolling on iOS

* Update styling

* Update ha-logbook.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Ruslan Sayfutdinov 2020-02-24 12:50:22 +00:00 committed by GitHub
parent 18abc6adf7
commit 028b370ead
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/panels/logbook/ha-logbook.ts
View File

@ -15,7 +15,7 @@ import {
} from "lit-element"; } from "lit-element";
import { HomeAssistant } from "../../types"; import { HomeAssistant } from "../../types";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import "lit-virtualizer"; import { scroll } from "lit-virtualizer";
import { LogbookEntry } from "../../data/logbook"; import { LogbookEntry } from "../../data/logbook";
class HaLogbook extends LitElement { class HaLogbook extends LitElement {
@ -44,19 +44,23 @@ class HaLogbook extends LitElement {
} }
return html` return html`
<lit-virtualizer <div>
.items=${this.entries} ${scroll({
.renderItem=${(item: LogbookEntry, index: number) => items: this.entries,
this._renderLogbookItem(item, index)} renderItem: (item: LogbookEntry, index?: number) =>
style="height: 100%;" this._renderLogbookItem(item, index),
></lit-virtualizer> })}
</div>
`; `;
} }
private _renderLogbookItem( private _renderLogbookItem(
item: LogbookEntry, item: LogbookEntry,
index: number index?: number
): TemplateResult { ): TemplateResult {
if (!index) {
return html``;
}
const previous = this.entries[index - 1]; const previous = this.entries[index - 1];
const state = item.entity_id ? this.hass.states[item.entity_id] : undefined; const state = item.entity_id ? this.hass.states[item.entity_id] : undefined;
return html` return html`
@ -149,6 +153,19 @@ class HaLogbook extends LitElement {
a { a {
color: var(--primary-color); color: var(--primary-color);
} }
.uni-virtualizer-host {
display: block;
position: relative;
contain: strict;
height: 100%;
overflow: auto;
padding: 0 16px;
}
.uni-virtualizer-host > * {
box-sizing: border-box;
}
`; `;
} }
} }

12
src/panels/logbook/ha-panel-logbook.js
View File

@ -27,10 +27,6 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
static get template() { static get template() {
return html` return html`
<style include="ha-style"> <style include="ha-style">
.content {
padding: 0 16px 0 16px;
}
ha-logbook { ha-logbook {
height: calc(100vh - 136px); height: calc(100vh - 136px);
} }
@ -53,6 +49,7 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
.filters { .filters {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
padding: 0 16px;
} }
:host([narrow]) .filters { :host([narrow]) .filters {
@ -135,7 +132,6 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
</app-toolbar> </app-toolbar>
</app-header> </app-header>
<div class="content">
<paper-spinner <paper-spinner
active="[[isLoading]]" active="[[isLoading]]"
hidden$="[[!isLoading]]" hidden$="[[!isLoading]]"
@ -156,10 +152,7 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
label="[[localize('ui.panel.logbook.period')]]" label="[[localize('ui.panel.logbook.period')]]"
disabled="[[isLoading]]" disabled="[[isLoading]]"
> >
<paper-listbox <paper-listbox slot="dropdown-content" selected="{{_periodIndex}}">
slot="dropdown-content"
selected="{{_periodIndex}}"
>
<paper-item <paper-item
>[[localize('ui.duration.day', 'count', 1)]]</paper-item >[[localize('ui.duration.day', 'count', 1)]]</paper-item
> >
@ -186,7 +179,6 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
entries="[[entries]]" entries="[[entries]]"
hidden$="[[isLoading]]" hidden$="[[isLoading]]"
></ha-logbook> ></ha-logbook>
</div>
</app-header-layout> </app-header-layout>
`; `;
} }