diff --git a/setup.py b/setup.py index c75bee7b3f..0be5e29558 100644 --- a/setup.py +++ b/setup.py @@ -2,7 +2,7 @@ from setuptools import setup, find_packages setup( name="home-assistant-frontend", - version="20190626.0", + version="20190627.0", description="The Home Assistant frontend", url="https://github.com/home-assistant/home-assistant-polymer", author="The Home Assistant Authors", diff --git a/src/cards/ha-media_player-card.js b/src/cards/ha-media_player-card.js index af250d1f2e..131fed1bbf 100644 --- a/src/cards/ha-media_player-card.js +++ b/src/cards/ha-media_player-card.js @@ -188,6 +188,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
stateObj !== undefined && !STATES_OFF.includes(stateObj.state); @@ -35,11 +36,13 @@ class HaEntityToggle extends LitElement { if (this.stateObj.attributes.assumed_state) { return html` diff --git a/src/components/ha-camera-stream.ts b/src/components/ha-camera-stream.ts index f60e0b8c86..b4ee4247c7 100644 --- a/src/components/ha-camera-stream.ts +++ b/src/components/ha-camera-stream.ts @@ -55,7 +55,9 @@ class HaCameraStream extends LitElement { .src=${__DEMO__ ? `/api/camera_proxy_stream/${this.stateObj.entity_id}` : computeMJPEGStreamUrl(this.stateObj)} - .alt=${computeStateName(this.stateObj)} + .alt=${`Preview of the ${computeStateName( + this.stateObj + )} camera.`} /> ` : html` diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 16ef6184cc..8bb0bcc131 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -66,11 +66,29 @@ const computePanels = (hass: HomeAssistant) => { return result; }; +const renderPanel = (hass, panel) => html` + + + + + ${hass.localize(`panel.${panel.title}`) || panel.title} + + + +`; + /* * @appliesMixin LocalizeMixin */ class HaSidebar extends LitElement { @property() public hass?: HomeAssistant; + @property({ type: Boolean }) public alwaysExpand = false; + @property({ type: Boolean, reflect: true }) public expanded = false; @property() public _defaultPage?: string = localStorage.defaultPage || DEFAULT_PANEL; @property() private _externalConfig?: ExternalConfig; @@ -82,20 +100,33 @@ class HaSidebar extends LitElement { return html``; } + const panels = computePanels(hass); + const configPanelIdx = panels.findIndex( + (panel) => panel.component_name === "config" + ); + const configPanel = + configPanelIdx === -1 ? undefined : panels.splice(configPanelIdx, 1)[0]; + return html` - -
Home Assistant
- ${hass.user - ? html` - - - - ` - : ""} - + ${this.expanded + ? html` + +
Home Assistant
+ + ` + : html` + + `} - ${computePanels(hass).map( - (panel) => html` - - - - ${hass.localize(`panel.${panel.title}`) || panel.title} - - - ` - )} - ${this._externalConfig && this._externalConfig.hasSettingsScreen - ? html` - - - - ${hass.localize( - "ui.sidebar.external_app_configuration" - )} - - - ` - : ""} - ${!hass.user - ? html` - - - ${hass.localize("ui.sidebar.log_out")} - - ` - : html``} - + ${panels.map((panel) => renderPanel(hass, panel))} - ${hass.user && hass.user.is_admin - ? html` -
-
+
-
+ ${this.expanded && hass.user && hass.user.is_admin + ? html` +
+ +
${hass.localize("ui.sidebar.developer_tools")}
-
+
-
- ` - : ""} +
+ ` + : ""} + ${this._externalConfig && this._externalConfig.hasSettingsScreen + ? html` + + + + ${hass.localize( + "ui.sidebar.external_app_configuration" + )} + + + ` + : ""} + ${configPanel ? renderPanel(hass, configPanel) : ""} + ${hass.user + ? html` + + + + + + ${hass.user.name} + + + + ` + : html` + + + ${hass.localize("ui.sidebar.log_out")} + + `} + `; } protected shouldUpdate(changedProps: PropertyValues): boolean { - if (changedProps.has("_externalConfig")) { + if ( + changedProps.has("_externalConfig") || + changedProps.has("expanded") || + changedProps.has("alwaysExpand") + ) { return true; } if (!this.hass || !changedProps.has("hass")) { @@ -247,6 +293,26 @@ class HaSidebar extends LitElement { this._externalConfig = conf; }); } + this.shadowRoot!.querySelector("paper-listbox")!.addEventListener( + "mouseenter", + () => { + this.expanded = true; + } + ); + this.addEventListener("mouseleave", () => { + this._contract(); + }); + } + + protected updated(changedProps) { + super.updated(changedProps); + if (changedProps.has("alwaysExpand")) { + this.expanded = this.alwaysExpand; + } + } + + private _contract() { + this.expanded = this.alwaysExpand || false; } private _handleLogOut() { @@ -265,7 +331,7 @@ class HaSidebar extends LitElement { :host { height: 100%; display: block; - overflow: auto; + overflow: hidden auto; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; @@ -274,9 +340,27 @@ class HaSidebar extends LitElement { --sidebar-background-color, var(--primary-background-color) ); + width: 64px; + transition: width 0.2s ease-in; + will-change: width; + contain: strict; + } + :host([expanded]) { + width: 256px; + } + + .logo { + height: 65px; + box-sizing: border-box; + padding: 8px; + border-bottom: 1px solid transparent; + } + .logo img { + width: 48px; } app-toolbar { + white-space: nowrap; font-weight: 400; color: var(--primary-text-color); border-bottom: 1px solid var(--divider-color); @@ -288,7 +372,11 @@ class HaSidebar extends LitElement { } paper-listbox { - padding: 0; + padding: 4px 0; + height: calc(100% - 65px); + display: flex; + flex-direction: column; + box-sizing: border-box; } paper-listbox > a { @@ -299,10 +387,15 @@ class HaSidebar extends LitElement { } paper-icon-item { - margin: 8px; - padding-left: 9px; + box-sizing: border-box; + margin: 4px 8px; + padding-left: 12px; border-radius: 4px; --paper-item-min-height: 40px; + width: 48px; + } + :host([expanded]) paper-icon-item { + width: 240px; } ha-icon[slot="item-icon"] { @@ -342,10 +435,29 @@ class HaSidebar extends LitElement { color: var(--sidebar-selected-text-color); } + a .item-text { + display: none; + } + :host([expanded]) a .item-text { + display: block; + } + paper-icon-item.logout { margin-top: 16px; } + paper-icon-item.profile { + padding-left: 4px; + } + .profile .item-text { + margin-left: 8px; + } + + .spacer { + flex: 1; + pointer-events: none; + } + .divider { height: 1px; background-color: var(--divider-color); @@ -357,6 +469,7 @@ class HaSidebar extends LitElement { font-weight: 500; font-size: 14px; padding: 16px; + white-space: nowrap; } .dev-tools { @@ -364,6 +477,8 @@ class HaSidebar extends LitElement { flex-direction: row; justify-content: space-between; padding: 0 8px; + width: 256px; + box-sizing: border-box; } .dev-tools a { diff --git a/src/components/ha-start-voice-button.js b/src/components/ha-start-voice-button.js index d03348a0d1..7f04bd49c8 100644 --- a/src/components/ha-start-voice-button.js +++ b/src/components/ha-start-voice-button.js @@ -14,6 +14,7 @@ class HaStartVoiceButton extends EventsMixin(PolymerElement) { static get template() { return html` 2, - })}" - > - ${initials} -
+ ${initials} `; } + protected updated(changedProps) { + super.updated(changedProps); + this.toggleAttribute( + "long", + (this.user ? computeInitials(this.user.name) : "?").length > 2 + ); + } + static get styles(): CSSResult { return css` - .profile-badge { + :host { display: inline-block; box-sizing: border-box; width: 40px; @@ -63,7 +61,7 @@ class StateBadge extends LitElement { overflow: hidden; } - .profile-badge.long { + :host([long]) { font-size: 80%; } `; diff --git a/src/data/collection.ts b/src/data/collection.ts new file mode 100644 index 0000000000..a565d371f0 --- /dev/null +++ b/src/data/collection.ts @@ -0,0 +1,74 @@ +import { + Collection, + Connection, + getCollection, + UnsubscribeFunc, +} from "home-assistant-js-websocket"; +import { Store } from "home-assistant-js-websocket/dist/store"; + +interface OptimisticCollection extends Collection { + save(data: T): Promise; +} + +/** + * Create an optimistic collection that includes a save function. + * When the collection is saved, the collection is optimistically updated. + * The update is reversed when the update failed. + */ + +export const getOptimisticCollection = ( + saveCollection: (conn: Connection, data: StateType) => Promise, + conn: Connection, + key: string, + fetchCollection: (conn: Connection) => Promise, + subscribeUpdates?: ( + conn: Connection, + store: Store + ) => Promise +): OptimisticCollection => { + const updateKey = `${key}-optimistic`; + + const collection = getCollection( + conn, + key, + fetchCollection, + async (_conn, store) => { + // Subscribe to original updates + const subUpResult = subscribeUpdates + ? subscribeUpdates(conn, store) + : undefined; + // Store the store + conn[updateKey] = store; + + // Unsub function to undo both + return () => { + if (subUpResult) { + subUpResult.then((unsub) => unsub()); + } + conn[updateKey] = undefined; + }; + } + ); + return { + ...collection, + async save(data: StateType) { + const store: Store | undefined = conn[updateKey]; + let current; + + // Can be undefined if currently no subscribers + if (store) { + current = store.state; + store.setState(data, true); + } + + try { + return await saveCollection(conn, data); + } catch (err) { + if (store) { + store.setState(current as any, true); + } + throw err; + } + }, + }; +}; diff --git a/src/data/frontend.ts b/src/data/frontend.ts index 71c60d670f..83a2db1ac7 100644 --- a/src/data/frontend.ts +++ b/src/data/frontend.ts @@ -1,8 +1,14 @@ -import { HomeAssistant } from "../types"; +import { Connection } from "home-assistant-js-websocket"; +import { getOptimisticCollection } from "./collection"; + +export interface CoreFrontendUserData { + showAdvanced?: boolean; +} declare global { - // tslint:disable-next-line - interface FrontendUserData {} + interface FrontendUserData { + core: CoreFrontendUserData; + } } export type ValidUserDataKey = keyof FrontendUserData; @@ -10,10 +16,10 @@ export type ValidUserDataKey = keyof FrontendUserData; export const fetchFrontendUserData = async < UserDataKey extends ValidUserDataKey >( - hass: HomeAssistant, + conn: Connection, key: UserDataKey ): Promise => { - const result = await hass.callWS<{ + const result = await conn.sendMessagePromise<{ value: FrontendUserData[UserDataKey] | null; }>({ type: "frontend/get_user_data", @@ -25,12 +31,31 @@ export const fetchFrontendUserData = async < export const saveFrontendUserData = async < UserDataKey extends ValidUserDataKey >( - hass: HomeAssistant, + conn: Connection, key: UserDataKey, value: FrontendUserData[UserDataKey] ): Promise => - hass.callWS({ + conn.sendMessagePromise({ type: "frontend/set_user_data", key, value, }); + +export const getOptimisticFrontendUserDataCollection = < + UserDataKey extends ValidUserDataKey +>( + conn: Connection, + userDataKey: UserDataKey +) => + getOptimisticCollection( + (_conn, data) => + saveFrontendUserData( + conn, + userDataKey, + // @ts-ignore + data + ), + conn, + `_frontendUserData-${userDataKey}`, + () => fetchFrontendUserData(conn, userDataKey) + ); diff --git a/src/data/translation.ts b/src/data/translation.ts index 122ce344bd..f2ce1a7c1a 100644 --- a/src/data/translation.ts +++ b/src/data/translation.ts @@ -12,12 +12,12 @@ declare global { } export const fetchTranslationPreferences = (hass: HomeAssistant) => - fetchFrontendUserData(hass, "language"); + fetchFrontendUserData(hass.connection, "language"); export const saveTranslationPreferences = ( hass: HomeAssistant, data: FrontendTranslationData -) => saveFrontendUserData(hass, "language", data); +) => saveFrontendUserData(hass.connection, "language", data); export const getHassTranslations = async ( hass: HomeAssistant, diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index 0472f1069a..d2631cd825 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -18,6 +18,8 @@ import "./partial-panel-resolver"; import { HomeAssistant, Route } from "../types"; import { fireEvent } from "../common/dom/fire_event"; import { PolymerChangedEvent } from "../polymer-types"; +// tslint:disable-next-line: no-duplicate-imports +import { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout"; const NON_SWIPABLE_PANELS = ["kiosk", "map"]; @@ -29,9 +31,9 @@ declare global { } class HomeAssistantMain extends LitElement { - @property() public hass?: HomeAssistant; + @property() public hass!: HomeAssistant; @property() public route?: Route; - @property() private _narrow?: boolean; + @property({ type: Boolean }) private narrow?: boolean; protected render(): TemplateResult | void { const hass = this.hass; @@ -40,7 +42,8 @@ class HomeAssistantMain extends LitElement { return; } - const disableSwipe = NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1; + const disableSwipe = + !this.narrow || NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1; return html` - + @@ -77,19 +83,17 @@ class HomeAssistantMain extends LitElement { import(/* webpackChunkName: "ha-sidebar" */ "../components/ha-sidebar"); this.addEventListener("hass-toggle-menu", () => { - const shouldOpen = !this.drawer.opened; - - if (shouldOpen) { - if (this._narrow) { - this.drawer.open(); + if (this.narrow) { + if (this.drawer.opened) { + this.drawer.close(); } else { - fireEvent(this, "hass-dock-sidebar", { dock: true }); + this.drawer.open(); } } else { - this.drawer.close(); - if (this.hass!.dockedSidebar) { - fireEvent(this, "hass-dock-sidebar", { dock: false }); - } + fireEvent(this, "hass-dock-sidebar", { + dock: !this.hass.dockedSidebar, + }); + setTimeout(() => this.appLayout.resetLayout()); } }); } @@ -97,7 +101,9 @@ class HomeAssistantMain extends LitElement { protected updated(changedProps: PropertyValues) { super.updated(changedProps); - if (changedProps.has("route") && this._narrow) { + this.toggleAttribute("expanded", this.narrow || this.hass.dockedSidebar); + + if (changedProps.has("route") && this.narrow) { this.drawer.close(); } @@ -110,19 +116,27 @@ class HomeAssistantMain extends LitElement { } private _narrowChanged(ev: PolymerChangedEvent) { - this._narrow = ev.detail.value; + this.narrow = ev.detail.value; } private get drawer(): AppDrawerElement { return this.shadowRoot!.querySelector("app-drawer")!; } + private get appLayout(): AppDrawerLayoutElement { + return this.shadowRoot!.querySelector("app-drawer-layout")!; + } + static get styles(): CSSResult { return css` :host { color: var(--primary-text-color); /* remove the grey tap highlights in iOS on the fullscreen touch targets */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + --app-drawer-width: 64px; + } + :host([expanded]) { + --app-drawer-width: 256px; } partial-panel-resolver, ha-sidebar { diff --git a/src/panels/config/core/ha-config-core.js b/src/panels/config/core/ha-config-core.js index c53f7e9b6e..bcc71ca824 100644 --- a/src/panels/config/core/ha-config-core.js +++ b/src/panels/config/core/ha-config-core.js @@ -37,6 +37,7 @@ class HaConfigCore extends LocalizeMixin(PolymerElement) {
@@ -48,6 +49,7 @@ class HaConfigCore extends LocalizeMixin(PolymerElement) { return { hass: Object, isWide: Boolean, + showAdvanced: Boolean, }; } diff --git a/src/panels/config/core/ha-config-section-core.js b/src/panels/config/core/ha-config-section-core.js index 9b55d253a0..74cb573073 100644 --- a/src/panels/config/core/ha-config-section-core.js +++ b/src/panels/config/core/ha-config-section-core.js @@ -63,79 +63,80 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) { - -
- [[localize('ui.panel.config.core.section.core.validation.introduction')]] -