From 2163eb3bd598a744c5f645cbdc9941e7cc814faa Mon Sep 17 00:00:00 2001 From: Luke Fritz Date: Sun, 30 Sep 2018 12:31:49 -0500 Subject: [PATCH] Add global config dialog --- package.json | 2 +- src/cards/haiku-global-config.js | 39 +++++++++++- src/elements/haiku-global-config-dialog.js | 62 ++++++++++++++++++++ src/elements/haiku-global-config-dialog.scss | 12 ++++ src/elements/haiku-thermostat-tile.js | 2 - src/services/customization-service.js | 21 ++++++- src/styles/_tiles.scss | 3 + src/styles/global/haiku.scss | 26 ++++++++ 8 files changed, 161 insertions(+), 6 deletions(-) create mode 100644 src/elements/haiku-global-config-dialog.js create mode 100644 src/elements/haiku-global-config-dialog.scss diff --git a/package.json b/package.json index eb478fb..fa550f3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@haiku-ui/haiku", - "version": "0.0.1", + "version": "0.1.0", "description": "A collection of cards and other web components for the Home Assistant Lovelace UI.", "private": false, "repository": { diff --git a/src/cards/haiku-global-config.js b/src/cards/haiku-global-config.js index 4ab0452..5480696 100644 --- a/src/cards/haiku-global-config.js +++ b/src/cards/haiku-global-config.js @@ -1,10 +1,18 @@ import { StorageService } from '../services/storage-service.js'; +import { CustomizationService } from '../services/customization-service.js'; +import '../elements/haiku-global-config-dialog.js'; +import 'https://unpkg.com/lodash@4.17.10/lodash.js?module'; /** * Haiku global config UI */ export class HaikuGlobalConfig extends HTMLElement { + constructor() { + super(); + this.customizationService = new CustomizationService(this); + } + set hass(hass) { this.ha = hass; @@ -12,6 +20,7 @@ export class HaikuGlobalConfig extends HTMLElement { this.setAttribute('style', 'margin:0;'); this.initStylesheet(); this.initTheme(); + this.initConfigButton(); this.initialized = true; } } @@ -37,11 +46,37 @@ export class HaikuGlobalConfig extends HTMLElement { if (!existingCssClasses) { document.body.setAttribute('class', theme); } - else if (existingCssClasses.indexOf(theme) === -1) { - document.body.setAttribute('class', `${existingCssClasses} ${theme}`); + else { + let cssClasses = existingCssClasses.split(' '); + cssClasses = _.filter(cssClasses, (cssClass) => { + return cssClass.indexOf('haiku-') === -1; + }); + document.body.setAttribute('class', `${cssClasses.join(' ')} ${theme}`); } } + initConfigButton() { + if (!document.getElementById('haiku_config_button')) { + const configButton = document.createElement('button'); + configButton.setAttribute('class', 'haiku-config-button'); + const icon = document.createElement('ha-icon'); + icon.setAttribute('icon', 'mdi:settings'); + configButton.appendChild(icon); + configButton.onclick = () => { + this._openGlobalConfigDialog(); + }; + document.body.appendChild(configButton); + } + } + + _openGlobalConfigDialog() { + const $this = this; + this.customizationService.openGlobalConfigDialog(() => { + console.log('saved...'); + $this.initTheme(); + }); + } + setConfig(config) { this.config = config; } diff --git a/src/elements/haiku-global-config-dialog.js b/src/elements/haiku-global-config-dialog.js new file mode 100644 index 0000000..0af48ce --- /dev/null +++ b/src/elements/haiku-global-config-dialog.js @@ -0,0 +1,62 @@ +import { html, LitElement } from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module'; +import { StorageService } from '../services/storage-service.js'; +import { EventService } from '../services/event-service.js'; +import 'https://unpkg.com/lodash@4.17.10/lodash.js?module'; + +export class HaikuGlobalConfigDialog extends LitElement { + + constructor() { + super(); + } + + static get properties() { + return { + hass: Object + }; + } + + _render() { + return html` + {{ css }} + + +
Haiku Global Settings
+ + +
+ + + None + Haiku Light + Haiku Dark + + + Save +
+ `; + } + + _getCurrentTheme() { + const storageService = new StorageService(); + let theme = storageService.getItem('theme'); + if (!theme) { + theme = 'haiku-none'; + storageService.setItem('theme', 'haiku-none'); + } + return theme; + } + + handleClick() { + const storageService = new StorageService(); + const eventService = new EventService(); + const selectedItem = this.shadowRoot.querySelector('#theme').selectedItem; + let theme = null; + if (selectedItem) { + theme = selectedItem.getAttribute('value'); + } + storageService.setItem('theme', theme); + eventService.fire(this, 'haiku-customization-complete'); + } +} + +customElements.define('haiku-global-config-dialog', HaikuGlobalConfigDialog); diff --git a/src/elements/haiku-global-config-dialog.scss b/src/elements/haiku-global-config-dialog.scss new file mode 100644 index 0000000..3745a92 --- /dev/null +++ b/src/elements/haiku-global-config-dialog.scss @@ -0,0 +1,12 @@ +.form { + padding: 0 2rem; + + & > paper-button { + float: right; + margin: 1rem 0; + } + + & > paper-dropdown-menu { + width: 100%; + } +} diff --git a/src/elements/haiku-thermostat-tile.js b/src/elements/haiku-thermostat-tile.js index 570bda8..b9ae01c 100644 --- a/src/elements/haiku-thermostat-tile.js +++ b/src/elements/haiku-thermostat-tile.js @@ -15,8 +15,6 @@ export class HaikuThermostatTile extends HaikuTileBase { } _render({ entity }) { - console.log(entity); - // console.log(entity.state); return html` {{ css }}
{ + callback(); + this._handleCustomizationComplete(); + }); + this.settingsDialog.shadowRoot.appendChild(this.settingsDialogContent); + this.settingsDialog.addEventListener('iron-overlay-canceled', this.handleDialogCancel); + this.settingsDialog.addEventListener('iron-overlay-closed', this.handleDialogCancel); + this.settingsDialog.open(); + } + _findMoreInfoDialog(entity) { const hassEl = document.getElementsByTagName('home-assistant')[0]; let dialog = hassEl.shadowRoot.querySelector('ha-more-info-dialog'); @@ -43,7 +59,10 @@ export class CustomizationService { if (event && event.path[0].nodeName !== 'HA-MORE-INFO-DIALOG') { return; } - const el = this.settingsDialog.shadowRoot.querySelector('haiku-settings-dialog'); + let el = this.settingsDialog.shadowRoot.querySelector('haiku-settings-dialog'); + if (!el) { + el = this.settingsDialog.shadowRoot.querySelector('haiku-global-config-dialog'); + } this.settingsDialog.shadowRoot.removeChild(el); this.settingsDialog.fire('more-info-page', { page: null }); this.settingsDialog.removeEventListener('iron-overlay-canceled', this.handleDialogCancel); diff --git a/src/styles/_tiles.scss b/src/styles/_tiles.scss index da7ff7d..c20c403 100644 --- a/src/styles/_tiles.scss +++ b/src/styles/_tiles.scss @@ -43,6 +43,7 @@ margin: 0 auto; text-align: center; color: #fff; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.85); &.status-normal { border-color: #bada55; @@ -65,6 +66,7 @@ } & > span { + @include overlay-text(); font-size: 11px; display: block; margin: 0 auto; @@ -80,6 +82,7 @@ } & > label { + @include overlay-text(); font-size: 32px; text-transform: uppercase; letter-spacing: -1px; diff --git a/src/styles/global/haiku.scss b/src/styles/global/haiku.scss index 93a2869..f628783 100644 --- a/src/styles/global/haiku.scss +++ b/src/styles/global/haiku.scss @@ -1 +1,27 @@ @import './themes/theme-dark.scss'; + +.haiku-config-button { + position: fixed; + width: 50px; + height: 50px; + background-image: linear-gradient(to bottom, #555 0%, #444 100%); + border-radius: 50%; + border: none; + bottom: 20px; + right: 20px; + z-index: 99999; + outline: none; + color: white; + text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.9); + cursor: pointer; + box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); + + ha-icon { + transition: all 0.2s; + transform: none; + } + + &:hover ha-icon { + transform: rotate(-100deg); + } +}