diff --git a/homeassistant/components/frontend/index.html.template b/homeassistant/components/frontend/index.html.template index 4844eb46760..b9126ed25e2 100644 --- a/homeassistant/components/frontend/index.html.template +++ b/homeassistant/components/frontend/index.html.template @@ -9,11 +9,11 @@ - - @@ -21,7 +21,7 @@

Initializing Home Assistant

- + diff --git a/homeassistant/components/frontend/version.py b/homeassistant/components/frontend/version.py index a1c8f55f236..cd7ca59febb 100644 --- a/homeassistant/components/frontend/version.py +++ b/homeassistant/components/frontend/version.py @@ -1,2 +1,2 @@ """ DO NOT MODIFY. Auto-generated by build_frontend script """ -VERSION = "28c0680cf6ebd969dc5710c22d9c4075" +VERSION = "c164af7349b4750365f03b190e11cc8d" diff --git a/homeassistant/components/frontend/www_static/frontend.html b/homeassistant/components/frontend/www_static/frontend.html index a4c206a4ce4..a2d42c0df71 100644 --- a/homeassistant/components/frontend/www_static/frontend.html +++ b/homeassistant/components/frontend/www_static/frontend.html @@ -1,24 +1,26361 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file +`paper-dialog-common.css` provide styles for a header, content area, and an action area for buttons. +Use the `

` tag for the header and the `buttons` class for the action area. You can use the +`paper-dialog-scrollable` element (in its own repository) if you need a scrolling content area. + +Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the +dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReason` will update +to include `confirmed: true`. + +### Styling + +The following custom properties and mixins are available for styling. + +Custom property | Description | Default +----------------|-------------|---------- +`--paper-dialog-background-color` | Dialog background color | `--primary-background-color` +`--paper-dialog-color` | Dialog foreground color | `--primary-text-color` +`--paper-dialog` | Mixin applied to the dialog | `{}` +`--paper-dialog-title` | Mixin applied to the title (`

`) element | `{}` +`--paper-dialog-button-color` | Button area foreground color | `--default-primary-color` + +### Accessibility + +This element has `role="dialog"` by default. Depending on the context, it may be more appropriate +to override this attribute with `role="alertdialog"`. The header (a `

` element) will + +If `modal` is set, the element will set `aria-modal` and prevent the focus from exiting the element. +It will also ensure that focus remains in the dialog. + +The `aria-labelledby` attribute will be set to the header element, if one exists. + +@hero hero.svg +@demo demo/index.html +@polymerBehavior Polymer.PaperDialogBehavior +*/ + + Polymer.PaperDialogBehaviorImpl = { + + hostAttributes: { + 'role': 'dialog', + 'tabindex': '-1' + }, + + properties: { + + /** + * If `modal` is true, this implies `no-cancel-on-outside-click` and `with-backdrop`. + */ + modal: { + observer: '_modalChanged', + type: Boolean, + value: false + }, + + _lastFocusedElement: { + type: Node + }, + + _boundOnFocus: { + type: Function, + value: function() { + return this._onFocus.bind(this); + } + }, + + _boundOnBackdropClick: { + type: Function, + value: function() { + return this._onBackdropClick.bind(this); + } + } + + }, + + listeners: { + 'click': '_onDialogClick', + 'iron-overlay-opened': '_onIronOverlayOpened', + 'iron-overlay-closed': '_onIronOverlayClosed' + }, + + attached: function() { + this._observer = this._observe(this); + this._updateAriaLabelledBy(); + }, + + detached: function() { + if (this._observer) { + this._observer.disconnect(); + } + }, + + _observe: function(node) { + var observer = new MutationObserver(function() { + this._updateAriaLabelledBy(); + }.bind(this)); + observer.observe(node, { + childList: true, + subtree: true + }); + return observer; + }, + + _modalChanged: function() { + if (this.modal) { + this.setAttribute('aria-modal', 'true'); + } else { + this.setAttribute('aria-modal', 'false'); + } + // modal implies noCancelOnOutsideClick and withBackdrop if true, don't overwrite + // those properties otherwise. + if (this.modal) { + this.noCancelOnOutsideClick = true; + this.withBackdrop = true; + } + }, + + _updateAriaLabelledBy: function() { + var header = Polymer.dom(this).querySelector('h2'); + if (!header) { + this.removeAttribute('aria-labelledby'); + return; + } + var headerId = header.getAttribute('id'); + if (headerId && this.getAttribute('aria-labelledby') === headerId) { + return; + } + // set aria-describedBy to the header element + var labelledById; + if (headerId) { + labelledById = headerId; + } else { + labelledById = 'paper-dialog-header-' + new Date().getUTCMilliseconds(); + header.setAttribute('id', labelledById); + } + this.setAttribute('aria-labelledby', labelledById); + }, + + _updateClosingReasonConfirmed: function(confirmed) { + this.closingReason = this.closingReason || {}; + this.closingReason.confirmed = confirmed; + }, + + _onDialogClick: function(event) { + var target = event.target; + while (target !== this) { + if (target.hasAttribute('dialog-dismiss')) { + this._updateClosingReasonConfirmed(false); + this.close(); + break; + } else if (target.hasAttribute('dialog-confirm')) { + this._updateClosingReasonConfirmed(true); + this.close(); + break; + } + target = target.parentNode; + } + }, + + _onIronOverlayOpened: function() { + if (this.modal) { + document.body.addEventListener('focus', this._boundOnFocus, true); + this.backdropElement.addEventListener('click', this._boundOnBackdropClick); + } + }, + + _onIronOverlayClosed: function() { + document.body.removeEventListener('focus', this._boundOnFocus, true); + this.backdropElement.removeEventListener('click', this._boundOnBackdropClick); + }, + + _onFocus: function(event) { + if (this.modal) { + var target = event.target; + while (target && target !== this && target !== document.body) { + target = target.parentNode; + } + if (target) { + if (target === document.body) { + if (this._lastFocusedElement) { + this._lastFocusedElement.focus(); + } else { + this._focusNode.focus(); + } + } else { + this._lastFocusedElement = event.target; + } + } + } + }, + + _onBackdropClick: function() { + if (this.modal) { + if (this._lastFocusedElement) { + this._lastFocusedElement.focus(); + } else { + this._focusNode.focus(); + } + } + } + + }; + + /** @polymerBehavior */ + Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialogBehaviorImpl]; + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/homeassistant/components/frontend/www_static/polymer/bower.json b/homeassistant/components/frontend/www_static/polymer/bower.json index 230f81ad96a..b5ee548776c 100644 --- a/homeassistant/components/frontend/www_static/polymer/bower.json +++ b/homeassistant/components/frontend/www_static/polymer/bower.json @@ -10,38 +10,36 @@ "ignore": [ "bower_components" ], - "dependencies": { - "webcomponentsjs": "Polymer/webcomponentsjs#~0.6", - "font-roboto": "Polymer/font-roboto#~0.5.5", - "core-header-panel": "polymer/core-header-panel#~0.5.5", - "core-toolbar": "polymer/core-toolbar#~0.5.5", - "core-tooltip": "Polymer/core-tooltip#~0.5.5", - "core-menu": "polymer/core-menu#~0.5.5", - "core-item": "Polymer/core-item#~0.5.5", - "core-input": "Polymer/core-input#~0.5.5", - "core-icons": "polymer/core-icons#~0.5.5", - "core-image": "polymer/core-image#~0.5.5", - "core-style": "polymer/core-style#~0.5.5", - "core-label": "polymer/core-label#~0.5.5", - "paper-toast": "Polymer/paper-toast#~0.5.5", - "paper-dialog": "Polymer/paper-dialog#~0.5.5", - "paper-spinner": "Polymer/paper-spinner#~0.5.5", - "paper-button": "Polymer/paper-button#~0.5.5", - "paper-input": "Polymer/paper-input#~0.5.5", - "paper-toggle-button": "polymer/paper-toggle-button#~0.5.5", - "paper-icon-button": "polymer/paper-icon-button#~0.5.5", - "paper-menu-button": "polymer/paper-menu-button#~0.5.5", - "paper-dropdown": "polymer/paper-dropdown#~0.5.5", - "paper-item": "polymer/paper-item#~0.5.5", - "paper-slider": "polymer/paper-slider#~0.5.5", - "paper-checkbox": "polymer/paper-checkbox#~0.5.5", - "color-picker-element": "~0.0.2", - "google-apis": "GoogleWebComponents/google-apis#~0.4.4", - "core-drawer-panel": "polymer/core-drawer-panel#~0.5.5", - "core-scroll-header-panel": "polymer/core-scroll-header-panel#~0.5.5", - "moment": "~2.10.2" + "devDependencies": { + "polymer": "Polymer/polymer#^1.0.0", + "webcomponentsjs": "Polymer/webcomponentsjs#^0.7", + "paper-header-panel": "PolymerElements/paper-header-panel#^1.0.0", + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0", + "paper-menu": "PolymerElements/paper-menu#^1.0.0", + "iron-input": "PolymerElements/iron-input#^1.0.0", + "iron-icons": "PolymerElements/iron-icons#^1.0.0", + "iron-image": "PolymerElements/iron-image#^1.0.0", + "paper-toast": "PolymerElements/paper-toast#^1.0.0", + "paper-dialog": "PolymerElements/paper-dialog#^1.0.0", + "paper-dialog-scrollable": "polymerelements/paper-dialog-scrollable#^1.0.0", + "paper-spinner": "PolymerElements/paper-spinner#^1.0.0", + "paper-button": "PolymerElements/paper-button#^1.0.0", + "paper-input": "PolymerElements/paper-input#^1.0.0", + "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0", + "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0", + "paper-item": "PolymerElements/paper-item#^1.0.0", + "paper-slider": "PolymerElements/paper-slider#^1.0.0", + "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0", + "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.0", + "paper-scroll-header-panel": "polymerelements/paper-scroll-header-panel#~1.0", + "google-apis": "GoogleWebComponents/google-apis#0.8-preview", + "moment": "^2.10.3", + "layout": "Polymer/layout", + "color-picker-element": "~0.0.3", + "paper-styles": "polymerelements/paper-styles#~1.0" }, "resolutions": { - "webcomponentsjs": "~0.6" + "polymer": "^1.0.0", + "webcomponentsjs": "^0.7.0" } } diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html index 195a9cb1109..6a25d41f945 100644 --- a/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html +++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html @@ -1,15 +1,29 @@ - + - - + + - +