From a35d569e226c82c4ab6a270b25f881270ac47cac Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sun, 23 Aug 2015 01:26:31 -0700 Subject: [PATCH] UI-2015 --- bower.json | 16 +-- package.json | 14 +-- src/cards/ha-badges-card.html | 13 ++ src/cards/ha-badges-card.js | 13 ++ src/cards/ha-domain-card.html | 35 ++++++ src/cards/ha-domain-card.js | 28 +++++ src/cards/ha-getting-started-card.html | 17 +++ src/cards/ha-getting-started-card.js | 7 ++ .../entity/ha-state-domain-icon.html | 22 ++++ src/components/entity/ha-state-domain-icon.js | 33 +++++ .../entity/ha-state-label-badge.html | 32 +++++ src/components/entity/ha-state-label-badge.js | 116 ++++++++++++++++++ src/components/{ => entity}/state-badge.html | 6 +- src/components/{ => entity}/state-badge.js | 6 +- src/components/ha-card.html | 35 ++++++ src/components/ha-card.js | 14 +++ src/components/ha-label-badge.html | 89 ++++++++++++++ src/components/ha-label-badge.js | 28 +++++ src/components/ha-sidebar.html | 18 --- src/components/ha-sidebar.js | 37 +----- src/components/ha-zone-cards.html | 76 ++++++++++++ src/components/ha-zone-cards.js | 97 +++++++++++++++ src/components/state-history-chart-line.js | 2 +- src/components/state-info.html | 2 +- src/components/state-info.js | 2 +- src/layouts/home-assistant-main.html | 5 +- src/layouts/home-assistant-main.js | 10 +- ...{partial-states.html => partial-zone.html} | 38 +++--- .../{partial-states.js => partial-zone.js} | 62 ++++++---- src/util/can-toggle.js | 9 ++ src/util/nuclear-behavior.js | 5 - src/util/state-card-type.js | 4 +- 32 files changed, 756 insertions(+), 135 deletions(-) create mode 100644 src/cards/ha-badges-card.html create mode 100644 src/cards/ha-badges-card.js create mode 100644 src/cards/ha-domain-card.html create mode 100644 src/cards/ha-domain-card.js create mode 100644 src/cards/ha-getting-started-card.html create mode 100644 src/cards/ha-getting-started-card.js create mode 100644 src/components/entity/ha-state-domain-icon.html create mode 100644 src/components/entity/ha-state-domain-icon.js create mode 100644 src/components/entity/ha-state-label-badge.html create mode 100644 src/components/entity/ha-state-label-badge.js rename src/components/{ => entity}/state-badge.html (84%) rename src/components/{ => entity}/state-badge.js (87%) create mode 100644 src/components/ha-card.html create mode 100644 src/components/ha-card.js create mode 100644 src/components/ha-label-badge.html create mode 100644 src/components/ha-label-badge.js create mode 100644 src/components/ha-zone-cards.html create mode 100644 src/components/ha-zone-cards.js rename src/layouts/{partial-states.html => partial-zone.html} (59%) rename src/layouts/{partial-states.js => partial-zone.js} (64%) create mode 100644 src/util/can-toggle.js diff --git a/bower.json b/bower.json index ee24baa81c..57ef452a61 100644 --- a/bower.json +++ b/bower.json @@ -11,20 +11,20 @@ "bower_components" ], "devDependencies": { - "polymer": "Polymer/polymer#^1.0.0", - "webcomponentsjs": "Polymer/webcomponentsjs#^0.7", + "polymer": "Polymer/polymer#^1.1.0", + "webcomponentsjs": "Polymer/webcomponentsjs#^0.7.12", "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", + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.4", + "paper-menu": "PolymerElements/paper-menu#^1.1.0", + "iron-input": "PolymerElements/iron-input#^1.0.5", + "iron-icons": "PolymerElements/iron-icons#^1.0.3", "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-input": "PolymerElements/paper-input#^1.0.12", "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", @@ -34,7 +34,7 @@ "paper-scroll-header-panel": "polymerelements/paper-scroll-header-panel#^1.0.0", "google-apis": "GoogleWebComponents/google-apis#0.8-preview", "layout": "Polymer/layout", - "paper-styles": "polymerelements/paper-styles#^1.0.0", + "paper-styles": "polymerelements/paper-styles#^1.0.11", "pikaday": "~1.3.2" }, "resolutions": { diff --git a/package.json b/package.json index 877498178d..aa748db722 100644 --- a/package.json +++ b/package.json @@ -16,20 +16,20 @@ "author": "Paulus Schoutsen (http://paulusschoutsen.nl)", "license": "MIT", "dependencies": { - "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#7bc70c0b75c274166ddba0d647356b6d0b7d696e", + "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#66517cdf9d8ff1aed2f8653b8dc5fadc096b406d", "lodash": "^3.10.1", "moment": "^2.10.6" }, "devDependencies": { - "babel-core": "^5.8.21", - "babel-eslint": "^4.0.5", + "babel-core": "^5.8.22", + "babel-eslint": "^4.0.10", "babel-loader": "^5.3.2", "bower": "^1.4.1", - "eslint": "^1.1.0", - "eslint-config-airbnb": "0.0.7", - "eslint-plugin-react": "^3.2.1", + "eslint": "^1.2.1", + "eslint-config-airbnb": "0.0.8", + "eslint-plugin-react": "^3.2.3", "html-minifier": "^0.7.2", - "vulcanize": "^1.10.2", + "vulcanize": "^1.10.3", "webpack": "^1.11.0" } } diff --git a/src/cards/ha-badges-card.html b/src/cards/ha-badges-card.html new file mode 100644 index 0000000000..2d55578198 --- /dev/null +++ b/src/cards/ha-badges-card.html @@ -0,0 +1,13 @@ + + + + + + + + diff --git a/src/cards/ha-badges-card.js b/src/cards/ha-badges-card.js new file mode 100644 index 0000000000..988d2aa5f1 --- /dev/null +++ b/src/cards/ha-badges-card.js @@ -0,0 +1,13 @@ +import Polymer from '../polymer'; + +require('../components/entity/ha-state-label-badge'); + +export default new Polymer({ + is: 'ha-badges-card', + + properties: { + states: { + type: Array, + }, + }, +}); diff --git a/src/cards/ha-domain-card.html b/src/cards/ha-domain-card.html new file mode 100644 index 0000000000..cfd3fb6da6 --- /dev/null +++ b/src/cards/ha-domain-card.html @@ -0,0 +1,35 @@ + + + + + + + + + diff --git a/src/cards/ha-domain-card.js b/src/cards/ha-domain-card.js new file mode 100644 index 0000000000..58af9ff7d9 --- /dev/null +++ b/src/cards/ha-domain-card.js @@ -0,0 +1,28 @@ +import Polymer from '../polymer'; +import { moreInfoActions } from '../util/home-assistant-js-instance'; + +require('../components/ha-card'); +require('../state-summary/state-card-content'); + +export default new Polymer({ + is: 'ha-domain-card', + + properties: { + domain: { + type: String, + }, + states: { + type: Array, + }, + }, + + computeDomainTitle(domain) { + return domain.replace(/_/g, ' '); + }, + + entityTapped(ev) { + ev.stopPropagation(); + const entityId = ev.currentTarget.stateObj.entityId; + this.async(() => moreInfoActions.selectEntity(entityId), 1); + }, +}); diff --git a/src/cards/ha-getting-started-card.html b/src/cards/ha-getting-started-card.html new file mode 100644 index 0000000000..f09d24d5dd --- /dev/null +++ b/src/cards/ha-getting-started-card.html @@ -0,0 +1,17 @@ + + + + + + + diff --git a/src/cards/ha-getting-started-card.js b/src/cards/ha-getting-started-card.js new file mode 100644 index 0000000000..65114bb7b8 --- /dev/null +++ b/src/cards/ha-getting-started-card.js @@ -0,0 +1,7 @@ +import Polymer from '../polymer'; + +require('../components/ha-card'); + +export default new Polymer({ + is: 'ha-getting-started-card', +}); diff --git a/src/components/entity/ha-state-domain-icon.html b/src/components/entity/ha-state-domain-icon.html new file mode 100644 index 0000000000..10244664fb --- /dev/null +++ b/src/components/entity/ha-state-domain-icon.html @@ -0,0 +1,22 @@ + + + + + + + + + + diff --git a/src/components/entity/ha-state-domain-icon.js b/src/components/entity/ha-state-domain-icon.js new file mode 100644 index 0000000000..39a7259e30 --- /dev/null +++ b/src/components/entity/ha-state-domain-icon.js @@ -0,0 +1,33 @@ +import Polymer from '../../polymer'; + +import xyBriToRgb from '../../util/xybri-to-rgb'; + +require('./domain-icon'); + +export default new Polymer({ + is: 'ha-state-domain-icon', + + properties: { + stateObj: { + type: Object, + observer: 'updateIconColor', + }, + }, + + /** + * Called when an attribute changes that influences the color of the icon. + */ + updateIconColor(newVal) { + // for domain light, set color of icon to light color if available + if (newVal.domain === 'light' && newVal.state === 'on' && + newVal.attributes.brightness && newVal.attributes.xy_color) { + const rgb = xyBriToRgb(newVal.attributes.xy_color[0], + newVal.attributes.xy_color[1], + newVal.attributes.brightness); + this.$.icon.style.color = 'rgb(' + rgb.map(Math.floor).join(',') + ')'; + } else { + this.$.icon.style.color = null; + } + }, + +}); diff --git a/src/components/entity/ha-state-label-badge.html b/src/components/entity/ha-state-label-badge.html new file mode 100644 index 0000000000..1b5567200c --- /dev/null +++ b/src/components/entity/ha-state-label-badge.html @@ -0,0 +1,32 @@ + + + + + + + + diff --git a/src/components/entity/ha-state-label-badge.js b/src/components/entity/ha-state-label-badge.js new file mode 100644 index 0000000000..1df4d3d206 --- /dev/null +++ b/src/components/entity/ha-state-label-badge.js @@ -0,0 +1,116 @@ +import Polymer from '../../polymer'; +import { + moreInfoActions, + serviceActions, +} from '../../util/home-assistant-js-instance'; +import domainIcon from '../../util/domain-icon'; +import canToggle from '../../util/can-toggle'; + +require('../../components/ha-label-badge'); + +export default new Polymer({ + is: 'ha-state-label-badge', + + properties: { + state: { + type: Object, + observer: 'stateChanged', + }, + }, + + listeners: { + 'tap': 'badgeTap', + }, + + badgeTap(ev) { + ev.stopPropagation(); + if (!canToggle(this.state.entityId)) { + this.async(() => moreInfoActions.selectEntity(this.state.entityId), 1); + return; + } + if (this.state.domain === 'scene' && this.state.state === 'on' && + !this.state.attributes.active_requested) { + // Scenes that are on but by virtue of other events then itself + // being turned on cannot be turned off. + return; + } else if (this.state.state === 'off') { + serviceActions.callTurnOn(this.state.entityId); + } else { + serviceActions.callTurnOff(this.state.entityId); + } + }, + + computeClasses(state) { + switch (state.domain) { + case 'scene': + case 'script': + return state.state === 'on' ? 'blue' : 'grey'; + default: + return ''; + } + }, + + computeGlow(state) { + switch (state.domain) { + case 'scene': + case 'script': + return state.state === 'on'; + default: + return false; + } + }, + + computeValue(state) { + switch (state.domain) { + case 'device_tracker': + case 'sun': + case 'scene': + case 'script': + return undefined; + default: + return state.state; + } + }, + + computeIcon(state) { + switch (state.domain) { + case 'scene': + case 'script': + return domainIcon(state.domain); + case 'sun': + return state.state === 'above_horizon' ? + 'image:wb-sunny' : 'image:brightness-3'; + default: + return undefined; + } + }, + + computeImage(state) { + switch (state.domain) { + case 'device_tracker': + return state.attributes.entity_picture; + default: + return undefined; + } + }, + + computeLabel(state) { + switch (state.domain) { + case 'scene': + case 'script': + return state.domain; + case 'device_tracker': + return state.state === 'home' ? 'Home' : 'Away'; + default: + return state.attributes.unit_of_measurement; + } + }, + + computeDescription(state) { + return state.entityDisplay; + }, + + stateChanged() { + this.updateStyles(); + }, +}); diff --git a/src/components/state-badge.html b/src/components/entity/state-badge.html similarity index 84% rename from src/components/state-badge.html rename to src/components/entity/state-badge.html index d97ab76b65..54a5dc7fba 100644 --- a/src/components/state-badge.html +++ b/src/components/entity/state-badge.html @@ -1,7 +1,7 @@ - - + + - + + + diff --git a/src/components/ha-card.js b/src/components/ha-card.js new file mode 100644 index 0000000000..9c6e920474 --- /dev/null +++ b/src/components/ha-card.js @@ -0,0 +1,14 @@ +import Polymer from '../polymer'; + +export default new Polymer({ + is: 'ha-card', + + properties: { + title: { + type: String, + }, + header: { + type: String, + }, + }, +}); diff --git a/src/components/ha-label-badge.html b/src/components/ha-label-badge.html new file mode 100644 index 0000000000..e49e7c24f1 --- /dev/null +++ b/src/components/ha-label-badge.html @@ -0,0 +1,89 @@ + + + + + + + + + diff --git a/src/components/ha-label-badge.js b/src/components/ha-label-badge.js new file mode 100644 index 0000000000..2722d41770 --- /dev/null +++ b/src/components/ha-label-badge.js @@ -0,0 +1,28 @@ +import Polymer from '../polymer'; + +export default new Polymer({ + is: 'ha-label-badge', + + properties: { + value: { + type: String, + }, + + icon: { + type: String, + }, + + label: { + type: String, + }, + + description: { + type: String, + }, + + image: { + type: String, + observe: 'imageChanged', + }, + }, +}); diff --git a/src/components/ha-sidebar.html b/src/components/ha-sidebar.html index 364e9a39e6..e23a91d43c 100644 --- a/src/components/ha-sidebar.html +++ b/src/components/ha-sidebar.html @@ -3,9 +3,6 @@ - @@ -27,11 +24,6 @@ Too broken for now. -moz-user-select: none; } - /*.sidenav paper-menu { - --paper-menu-color: var(--secondary-text-color); - --paper-menu-background-color: #fafafa; - }*/ - div.title { text-align: left; } @@ -74,20 +66,11 @@ Too broken for now.
Home Assistant
-
States - -