mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-09 10:26:35 +00:00
Shadow dom fixes (#241)
* Fix color picker * Fix map panel CSS * Convert logbook to use vaadin date picker * Fix logbook clear date * Migrate history panel to use vaadin date picker * Remove pikaday * Lint * history panel: disable on loading
This commit is contained in:
Paulus Schoutsen
GitHub
parent
fe9b81fc67
commit
67b59f1976
@ -25,7 +25,8 @@
|
||||
"vars-on-top": 0,
|
||||
"no-continue": 0,
|
||||
"no-param-reassign": 0,
|
||||
"no-multi-assign": 0
|
||||
"no-multi-assign": 0,
|
||||
"radix": 0
|
||||
},
|
||||
"plugins": [
|
||||
"html"
|
||||
|
||||
@ -17,9 +17,9 @@
|
||||
"paper-elements": "PolymerElements/paper-elements#~1.0.7",
|
||||
"paper-range-slider": "IftachSadeh/paper-range-slider#~0.2.4",
|
||||
"paper-scroll-header-panel": "~1.0.16",
|
||||
"pikaday": "~1.5.1",
|
||||
"polymer": "Polymer/polymer#~1.8.0",
|
||||
"vaadin-combo-box": "vaadin/vaadin-combo-box#~1.1.5",
|
||||
"vaadin-date-picker": "^1.2.1",
|
||||
"paper-slider": "1.0.13",
|
||||
"leaflet": "^1.0.2",
|
||||
"polymer-sortablejs": "^0.1.3"
|
||||
|
||||
@ -8,8 +8,9 @@
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="../../bower_components/vaadin-date-picker/vaadin-date-picker.html">
|
||||
|
||||
<link rel="import" href="../../src/components/state-history-charts.html">
|
||||
<link rel="import" href="../../src/resources/pikaday-js.html">
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/data/ha-state-history-data.html">
|
||||
<link rel="import" href="../../src/resources/ha-style.html">
|
||||
@ -18,13 +19,15 @@
|
||||
<template>
|
||||
<style include="iron-flex ha-style">
|
||||
.content {
|
||||
padding: 16px;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
paper-input {
|
||||
max-width: 200px;
|
||||
vaadin-date-picker {
|
||||
margin-bottom: 24px;
|
||||
margin-right: 16px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
paper-dropdown-menu {
|
||||
max-width: 100px;
|
||||
}
|
||||
@ -33,7 +36,7 @@
|
||||
<ha-state-history-data
|
||||
hass='[[hass]]'
|
||||
filter-type='[[_filterType]]'
|
||||
filter-value='[[_computeFilterDate(_selectedDate, _periodIndex)]]'
|
||||
filter-value='[[_computeFilterDate(_currentDate, _periodIndex)]]'
|
||||
data='{{stateHistoryInput}}'
|
||||
is-loading='{{isLoadingData}}'
|
||||
></ha-state-history-data>
|
||||
@ -47,13 +50,18 @@
|
||||
|
||||
<div class="flex content">
|
||||
<div class="flex layout horizontal wrap">
|
||||
<paper-input
|
||||
label='Start date'
|
||||
id='datePicker'
|
||||
value='[[_computeDateDisplay(_selectedDate)]]'
|
||||
on-focus='datepickerFocus'
|
||||
></paper-input>
|
||||
<paper-dropdown-menu label-float label='Period'>
|
||||
<vaadin-date-picker
|
||||
id='picker'
|
||||
value='{{_currentDate}}'
|
||||
label='Showing entries for'
|
||||
disabled='[[isLoadingData]]'
|
||||
></vaadin-date-picker>
|
||||
|
||||
<paper-dropdown-menu
|
||||
label-float
|
||||
label='Period'
|
||||
disabled='[[isLoadingData]]'
|
||||
>
|
||||
<paper-menu class="dropdown-content" selected="{{_periodIndex}}">
|
||||
<paper-item>1 day</paper-item>
|
||||
<paper-item>3 days</paper-item>
|
||||
@ -107,12 +115,13 @@ Polymer({
|
||||
value: false,
|
||||
},
|
||||
|
||||
_selectedDate: {
|
||||
type: Date,
|
||||
// ISO8601 formatted date string
|
||||
_currentDate: {
|
||||
type: String,
|
||||
value: function () {
|
||||
var begin = new Date();
|
||||
begin.setHours(0, 0, 0, 0);
|
||||
return begin;
|
||||
var value = new Date();
|
||||
value.setHours(0, 0, 0);
|
||||
return value.toISOString().split('T')[0];
|
||||
},
|
||||
},
|
||||
|
||||
@ -127,32 +136,28 @@ Polymer({
|
||||
},
|
||||
|
||||
attached: function () {
|
||||
this.datePicker = new window.Pikaday({
|
||||
// Bind field to dummy input to prevent pikaday from overwriting
|
||||
// field value with its internal formatting.
|
||||
field: document.createElement('input'),
|
||||
trigger: this.$.datePicker.inputElement,
|
||||
onSelect: function (newDate) {
|
||||
this._selectedDate = newDate;
|
||||
}.bind(this),
|
||||
// We are unable to parse date because we use intl api to render date
|
||||
// So we just return last known date.
|
||||
var lastFormatDate = new Date();
|
||||
this.$.picker.set('i18n.parseDate', function () {
|
||||
return lastFormatDate;
|
||||
});
|
||||
this.$.picker.set('i18n.formatDate', function (date) {
|
||||
lastFormatDate = date;
|
||||
return window.hassUtil.formatDate(date);
|
||||
});
|
||||
// Set the initial datePicker date, without triggering onSelect handler.
|
||||
this.datePicker.setDate(this._selectedDate, true);
|
||||
},
|
||||
|
||||
detached: function () {
|
||||
this.datePicker.destroy();
|
||||
},
|
||||
|
||||
_computeDateDisplay: function (date) {
|
||||
return window.hassUtil.formatDate(new Date(date));
|
||||
},
|
||||
|
||||
_computeFilterDate: function (selectedDate, periodIndex) {
|
||||
var endTime = new Date(selectedDate);
|
||||
_computeFilterDate: function (_currentDate, periodIndex) {
|
||||
if (!_currentDate) return undefined;
|
||||
var parts = _currentDate.split('-');
|
||||
parts[1] = parseInt(parts[1]) - 1;
|
||||
var startTime = new Date(parts[0], parts[1], parts[2]);
|
||||
var endTime = new Date(startTime);
|
||||
endTime.setDate(
|
||||
selectedDate.getDate() + this._computeFilterDays(periodIndex));
|
||||
return selectedDate.toISOString() + '?end_time=' + endTime.toISOString();
|
||||
startTime.getDate() + this._computeFilterDays(periodIndex));
|
||||
|
||||
return startTime.toISOString() + '?end_time=' + endTime.toISOString();
|
||||
},
|
||||
|
||||
_computeFilterDays: function (periodIndex) {
|
||||
|
||||
@ -8,8 +8,9 @@
|
||||
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<link rel="import" href="../../bower_components/vaadin-date-picker/vaadin-date-picker.html">
|
||||
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
<link rel="import" href="../../src/resources/pikaday-js.html">
|
||||
<link rel="import" href="../../src/resources/ha-style.html">
|
||||
|
||||
<link rel="import" href="./ha-logbook.html">
|
||||
@ -19,10 +20,17 @@
|
||||
<template>
|
||||
<style include="ha-style">
|
||||
.content {
|
||||
padding: 16px;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
paper-input {
|
||||
paper-spinner {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 186px;
|
||||
}
|
||||
|
||||
vaadin-date-picker {
|
||||
margin-bottom: 24px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
@ -35,7 +43,7 @@
|
||||
hass='[[hass]]'
|
||||
is-loading='{{isLoading}}'
|
||||
entries='{{entries}}'
|
||||
filter-date='[[_computeFilterDate(_selectedDate)]]'
|
||||
filter-date='[[_computeFilterDate(_currentDate)]]'
|
||||
></ha-logbook-data>
|
||||
|
||||
<app-header-layout has-scrolling-region>
|
||||
@ -46,21 +54,20 @@
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<div class="flex content">
|
||||
<div class='selected-date-container'>
|
||||
<paper-input
|
||||
label='Showing entries for'
|
||||
id='datePicker'
|
||||
value='[[_computeDateDisplay(_selectedDate)]]'
|
||||
on-focus='datepickerFocus'
|
||||
></paper-input>
|
||||
|
||||
<div class="content">
|
||||
<paper-spinner
|
||||
active='[[isLoading]]'
|
||||
hidden$='[[!isLoading]]'
|
||||
alt='Loading logbook entries'
|
||||
></paper-spinner>
|
||||
</div>
|
||||
|
||||
<vaadin-date-picker
|
||||
id='picker'
|
||||
value='{{_currentDate}}'
|
||||
label='Showing entries for'
|
||||
disabled='[[isLoading]]'
|
||||
></vaadin-date-picker>
|
||||
|
||||
<ha-logbook hass='[[hass]]' entries="[[entries]]" hidden$='[[isLoading]]'></ha-logbook>
|
||||
</div>
|
||||
</app-header-layout>
|
||||
@ -86,12 +93,13 @@ Polymer({
|
||||
value: false,
|
||||
},
|
||||
|
||||
_selectedDate: {
|
||||
// ISO8601 formatted date string
|
||||
_currentDate: {
|
||||
type: String,
|
||||
value: function () {
|
||||
var begin = new Date();
|
||||
begin.setHours(0, 0, 0, 0);
|
||||
return begin;
|
||||
var value = new Date();
|
||||
value.setHours(0, 0, 0);
|
||||
return value.toISOString().split('T')[0];
|
||||
},
|
||||
},
|
||||
|
||||
@ -108,34 +116,24 @@ Polymer({
|
||||
},
|
||||
},
|
||||
|
||||
datepickerFocus: function () {
|
||||
this.datePicker.adjustPosition();
|
||||
},
|
||||
|
||||
attached: function () {
|
||||
this.datePicker = new window.Pikaday({
|
||||
// Bind field to dummy input to prevent pikaday from overwriting
|
||||
// field value with its internal formatting.
|
||||
field: document.createElement('input'),
|
||||
trigger: this.$.datePicker.inputElement,
|
||||
onSelect: function (newDate) {
|
||||
this._selectedDate = newDate;
|
||||
}.bind(this),
|
||||
// We are unable to parse date because we use intl api to render date
|
||||
// So we just return last known date.
|
||||
var lastFormatDate = new Date();
|
||||
this.$.picker.set('i18n.parseDate', function () {
|
||||
return lastFormatDate;
|
||||
});
|
||||
this.$.picker.set('i18n.formatDate', function (date) {
|
||||
lastFormatDate = date;
|
||||
return window.hassUtil.formatDate(date);
|
||||
});
|
||||
// Set the initial datePicker date, without triggering onSelect handler.
|
||||
this.datePicker.setDate(this.selectedDate, true);
|
||||
},
|
||||
|
||||
detached: function () {
|
||||
this.datePicker.destroy();
|
||||
},
|
||||
|
||||
_computeDateDisplay: function (date) {
|
||||
return window.hassUtil.formatDate(new Date(date));
|
||||
},
|
||||
|
||||
_computeFilterDate: function (_selectedDate) {
|
||||
return _selectedDate.toISOString();
|
||||
_computeFilterDate: function (_currentDate) {
|
||||
if (!_currentDate) return undefined;
|
||||
var parts = _currentDate.split('-');
|
||||
parts[1] = parseInt(parts[1]) - 1;
|
||||
return new Date(parts[0], parts[1], parts[2]).toISOString();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
|
||||
|
||||
<script src="../../bower_components/leaflet/dist/leaflet.js"></script>
|
||||
<link rel="stylesheet" href="../../bower_components/leaflet/dist/leaflet.css" />
|
||||
|
||||
<link rel="import" href="../../src/components/ha-menu-button.html">
|
||||
|
||||
@ -13,6 +12,8 @@
|
||||
|
||||
<dom-module id="ha-panel-map">
|
||||
<template>
|
||||
<link rel="stylesheet" href="../../bower_components/leaflet/dist/leaflet.css" />
|
||||
|
||||
<style include="ha-style">
|
||||
#map {
|
||||
height: calc(100% - 64px);
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<canvas width='[[width]]' height='[[height]]'></canvas>
|
||||
<canvas width='[[width]]' height='[[height]]' id='canvas'></canvas>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
@ -107,7 +107,7 @@ Polymer({
|
||||
ready: function () {
|
||||
this.setColor = this.setColor.bind(this);
|
||||
this.mouseMoveIsThrottled = true;
|
||||
this.canvas = this.children[0];
|
||||
this.canvas = this.$.canvas;
|
||||
this.context = this.canvas.getContext('2d');
|
||||
this.drawGradient();
|
||||
},
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
<script src="../../bower_components/pikaday/pikaday.js"></script>
|
||||
<link href="../../bower_components/pikaday/css/pikaday.css" media="all" rel="stylesheet" />
|
||||
Loading…
x
Reference in New Issue
Block a user