jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-30 20:56: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;
}
`; `;
} }
} }

92
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,58 +132,53 @@ 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]]" alt="[[localize('ui.common.loading')]]"
alt="[[localize('ui.common.loading')]]" ></paper-spinner>
></paper-spinner>
<div class="filters"> <div class="filters">
<vaadin-date-picker <vaadin-date-picker
id="picker" id="picker"
value="{{_currentDate}}" value="{{_currentDate}}"
label="[[localize('ui.panel.logbook.showing_entries')]]" label="[[localize('ui.panel.logbook.showing_entries')]]"
disabled="[[isLoading]]" disabled="[[isLoading]]"
required required
></vaadin-date-picker> ></vaadin-date-picker>
<paper-dropdown-menu <paper-dropdown-menu
label-float label-float
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" <paper-item
selected="{{_periodIndex}}" >[[localize('ui.duration.day', 'count', 1)]]</paper-item
> >
<paper-item <paper-item
>[[localize('ui.duration.day', 'count', 1)]]</paper-item >[[localize('ui.duration.day', 'count', 3)]]</paper-item
> >
<paper-item <paper-item
>[[localize('ui.duration.day', 'count', 3)]]</paper-item >[[localize('ui.duration.week', 'count', 1)]]</paper-item
> >
<paper-item </paper-listbox>
>[[localize('ui.duration.week', 'count', 1)]]</paper-item </paper-dropdown-menu>
>
</paper-listbox>
</paper-dropdown-menu>
<ha-entity-picker <ha-entity-picker
hass="[[hass]]"
value="{{_entityId}}"
label="[[localize('ui.components.entity.entity-picker.entity')]]"
disabled="[[isLoading]]"
on-change="_entityPicked"
></ha-entity-picker>
</div>
<ha-logbook
hass="[[hass]]" hass="[[hass]]"
entries="[[entries]]" value="{{_entityId}}"
hidden$="[[isLoading]]" label="[[localize('ui.components.entity.entity-picker.entity')]]"
></ha-logbook> disabled="[[isLoading]]"
on-change="_entityPicked"
></ha-entity-picker>
</div> </div>
<ha-logbook
hass="[[hass]]"
entries="[[entries]]"
hidden$="[[isLoading]]"
></ha-logbook>
</app-header-layout> </app-header-layout>
`; `;
} }